KJDRAW / VUE INTEGRATION

Vue integration

Mount the complete KJDraw editor as a Vue component, control it through an exposed ref, or build a custom composable.

Render the editor component#

Copy<script setup lang="ts">
import { ref } from 'vue'
import { KJDraw, type KJDrawExposed, type KJWorkbenchLayout } from '@kanjieteam/kjdraw/vue'

const editor = ref<KJDrawExposed | null>(null)
const layout = ref<KJWorkbenchLayout>('classic')

async function moveSelection() {
  const instance = editor.value
  const ids = instance?.getSelection() ?? []
  if (!instance || !ids.length) return
  await instance.execute('MOVE', { ids, dx: 10, dy: 0 })
}
</script>

<template>
  <button @click="layout = 'focus'">Focus drawing</button>
  <button @click="moveSelection">Move selected</button>
  <KJDraw
    ref="editor"
    document="sample"
    locale="en"
    theme="dark"
    :layout="layout"
    style="width: 100%; height: 720px"
  />
</template>

This is the shortest path to a functional CAD surface. The exposed ref provides ready, open(), save(), execute(), selection, view and lifecycle methods. layout="classic" provides the full CAD ribbon and panels, compact shortens the ribbon, and focus prioritizes the canvas. Layout prop changes update the existing editor in place, preserving its drawing, selection and undo history. Vue disposes it when the component unmounts. See the Editor API for every option and method.

A minimal composable#

Copyimport { onScopeDispose, ref, shallowRef } from 'vue'
import { createKJDrawSDK } from '@kanjieteam/kjdraw'

export function useKJDraw() {
  const sdk = createKJDrawSDK()
  const document = shallowRef(sdk.createDocument({
    documentId: 'vue-drawing',
    units: 'millimeter',
  }))
  const revision = ref(document.value.revision)

  const off = sdk.events.on('command:committed', ({ document: changed }) => {
    if (changed === document.value) revision.value = changed.revision
  })
  onScopeDispose(off)

  const drawLine = () => sdk.executeCommand('CREATE', {
    type: 'LINE',
    payload: { start: [0, 0, 0], end: [100, 0, 0] },
  }, { document: document.value })

  return { sdk, document, revision, drawLine }
}

Reactivity rules#

• Use shallowRef for a KJDocument; do not ask Vue to proxy its complete object graph.
• Mirror committed revision, selection or tool state with small refs.
• Register the event disposer with onScopeDispose.
• Keep mutations inside SDK commands so validation, receipts and undo remain intact.

Share an editor scope#

For one editor, create the composable once in a provider component and expose it with Vue dependency injection or your state store. Create separate SDK instances only when documents need separate command registries, plugin scopes or lifecycle boundaries.

Use KJDraw for an immediately usable CAD surface or the composable for a product-owned interface. See the maintained examples for complete applications that use the same public package exports.