@booklyease/extensions-vue

Vue SDK for Booklyease Native UI extensions. Extension code runs in an isolated Web Worker. It never receives DOM access. Components from this package describe the interface; Booklyease renders the real Vue/Vuetify components using its own design system, locale and theme.

Install

npm install @booklyease/extensions-vue vue

vue is a peer dependency. Use Vue 3.5 or newer.

Worker entry

import { startExtensionWorker } from '@booklyease/extensions-vue'

startExtensionWorker(() => import('./Extension.vue'))

When building a browser Worker bundle, replace Vue's Node-only environment check at compile time:

// vite.config.ts
export default defineConfig({
  define: {
    'process.env.NODE_ENV': JSON.stringify('production'),
  },
})

Components

Layout and content

• BStack, BSpacer, BGrid, BCard, BPanelSection, BKeyValue
• BText, BIcon, BDivider

Actions and navigation

• BButton, BIconButton
• BTabs, BPagination

Data

• BStatCard — Booklyease analytics KPI card
• BTable — native data table with optional rich cells
• BBadge

Forms and filters

• BTextField, BTextarea, BSelect
• BCheckbox, BSwitch, BSearchField

All value components use Vue's regular v-model contract.

Feedback and detail flows

• BAlert, BSpinner, BEmptyState, BDialog
• BSidePanel — the docked detail panel used across Calendar, POS and Staff

Example

<script setup lang="ts">
import { ref } from 'vue'
import {
  BButton,
  BGrid,
  BSidePanel,
  BStatCard,
  BTable,
} from '@booklyease/extensions-vue'

const selected = ref<Record<string, unknown> | null>(null)
const rows = [{ id: 'lead-1', name: 'Ana Popescu', status: { text: 'New', tone: 'info' } }]
const columns = [{ key: 'name', label: 'Client' }, { key: 'status', label: 'Status' }]
</script>

<template>
  <BGrid :columns="3">
    <BStatCard label="Leads" value="128" icon="mdi-inbox-outline" tone="brand" />
  </BGrid>
  <BTable :columns="columns" :rows="rows" @row-click="selected = $event" />
  <BSidePanel :open="Boolean(selected)" title="Lead" @close="selected = null">
    <BButton>Open customer</BButton>
  </BSidePanel>
</template>

The SDK intentionally ships no visual CSS. Updating the Booklyease host design updates every installed extension without requiring extension authors to rebuild.

Vendor API

Native Workers have no direct fetch, cookies, storage or DOM access. An app.page extension calls its own backend through the authenticated host bridge:

import { extensionApi } from '@booklyease/extensions-vue'

const leads = await extensionApi.get('/leads', { status: 'new' })
await extensionApi.post('/leads/lead_123/status', { status: 'progress' })

Only relative paths are accepted. The host sends them to the /api/* origin of the installed plugin page and owns the short-lived vendor session.