@composy/database-designer-vue

@composy/database-designer-vue

Vue 3 adapter for @composy/database-designer-core. It provides a DatabaseDesigner component, a useDatabaseDesigner() composable and a small installable plugin.

Install

pnpm add @composy/database-designer-core @composy/database-designer-vue

Load LDesign global token styles before using the component:

import '@composy/styles/color.css'
import '@composy/styles/size.css'

Component

<script setup lang="ts">
import type { SchemaData } from '@composy/database-designer-vue'
import { DatabaseDesigner } from '@composy/database-designer-vue'
import { ref } from 'vue'

const selectedTableId = ref<string | null>(null)
const schema = ref<Partial<SchemaData>>({
  tables: [],
  relations: [],
  dialect: 'mysql',
})

const styleVars = {
  '--ldesign-database-designer-color-header-bg': 'var(--ld-primary-default)',
  '--ldesign-database-designer-min-height': 'var(--ld-px-48)',
}
</script>

<template>
  <DatabaseDesigner
    v-model="schema"
    dialect="mysql"
    theme="light"
    :style-vars="styleVars"
    @table-select="selectedTableId = $event"
  />
</template>

Props

• modelValue?: Partial<SchemaData>
• dialect?: 'mysql' | 'postgresql' | 'sqlite' | 'oracle'
• theme?: 'light' | 'dark'
• readonly?: boolean
• width?: number
• height?: number
• minHeight?: string
• className?: string
• ariaLabel?: string
• styleVars?: Record<string, string | number | null | undefined>
• emptyText?: string

Events

• update:modelValue
• change
• table-add, table-update, table-remove, table-select
• relation-add, relation-update, relation-remove

Composable

import { useDatabaseDesigner } from '@composy/database-designer-vue'
import { onMounted, ref } from 'vue'

const host = ref<HTMLElement | null>(null)
const designer = useDatabaseDesigner()

onMounted(() => {
  if (!host.value) return
  designer.create(host.value, { dialect: 'postgresql' })
  designer.addTable({
    name: 'accounts',
    columns: [{ name: 'id', type: 'BIGINT', primaryKey: true, nullable: false }],
  })
})

The composable exposes instance, data, selectedTable, validation, plus the core editing, import/export, validation, layout, theme and readonly methods. It also exposes previewImport() and cancellable importFrom() for a validate-before-apply workflow.

const preview = await designer.importFrom(adapter, {
  signal: abortController.signal,
  apply: false,
})
if (preview.validation.valid) await designer.importFrom(adapter)

Plugin

import { DatabaseDesignerPlugin } from '@composy/database-designer-vue'
import { createApp } from 'vue'

createApp(App).use(DatabaseDesignerPlugin)

Styling Contract

The Vue package uses the core renderer and therefore shares the same CSS contract:

• Classes are namespaced as ldesign-database-designer*
• Component variables are --ldesign-database-designer-*
• Color defaults should use generated --ld-* / --ld-color-* variables
• Size, font, radius, border, shadow and motion defaults should use generated --ld-* variables
• Layout dimensions are configurable via --ldesign-database-designer-table-width, --ldesign-database-designer-header-height, etc.

For example, use var(--ld-primary-500), var(--ld-spacing-md), var(--ld-radius-md), or var(--ld-px-48) for shared color and size values.

Build Outputs

The package uses @composy/builder and emits:

• dist/index.js and dist/index.min.js
• es/index.js
• esm/index.js
• lib/index.cjs
• Type declarations in es, esm and lib

Scripts

pnpm --dir libraries/database-designer/packages/vue run type-check
pnpm --dir libraries/database-designer/packages/vue run type-check:cjs
pnpm --dir libraries/database-designer/packages/vue run build
pnpm --dir libraries/database-designer/packages/vue run lint:check

Builder, ESLint, and ESM/CJS TypeScript configuration is stored in .ldesign/; the previous root paths remain compatibility shims. The root workspace scripts run these checks for both Core and Vue.

License

MIT