Vue / Quasar / Nuxt Integration

pnpm add @design-on-web/vanilla @design-on-web/core fabric

# Vite + Vue 3 starter
pnpm create vite my-editor --template vue-ts
cd my-editor
pnpm install

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    // Critical when consuming locally linked packages — Vite must
    // serve them directly so dist updates trigger HMR.
    exclude: [
      '@design-on-web/core',
      '@design-on-web/shared',
      '@design-on-web/vanilla',
    ],
  },
});

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, shallowRef } from 'vue';
import { createEditor } from '@design-on-web/vanilla';
import type { EditorAPI, EditorEngine } from '@design-on-web/core';

const canvasHost = ref<HTMLDivElement | null>(null);
const engine = shallowRef<EditorAPI | null>(null);

onMounted(() => {
  if (!canvasHost.value) return;

  const api = createEditor(canvasHost.value, {
    width: 1080,
    height: 1080,
    backgroundColor: '#ffffff',
    onReady: (editor) => {
      // Resize the workspace to fill the host THEN enable smart guides
      // (smart guides need contextTop, which exists once the canvas
      // is mounted in the DOM with valid dimensions).
      const eng = editor as unknown as EditorEngine;
      const cm = eng.getCanvasManager();
      const rect = canvasHost.value!.getBoundingClientRect();
      cm.initWorkspace(rect.width, rect.height, '#ffffff');
      eng.enableSmartGuides();

      // Seed sample content
      editor.addShape('rect', {
        left: 280, top: 320, width: 320, height: 200,
        fill: '#8b3dff', rx: 12, ry: 12,
      });
    },
  });

  engine.value = api;
});

onBeforeUnmount(() => {
  if (engine.value) {
    (engine.value as unknown as EditorEngine).destroy();
    engine.value = null;
  }
});

function addCircle() {
  engine.value?.addShape('circle', {
    left: 400, top: 400, radius: 80, fill: '#ec4899',
  });
}

async function downloadPng() {
  if (!engine.value) return;
  const blob = await engine.value.exportAs('png');
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'design.png';
  a.click();
  URL.revokeObjectURL(url);
}
</script>

<template>
  <div style="display: flex; flex-direction: column; height: 100vh">
    <header style="padding: 12px; background: #1a1a1a; color: #fff">
      <button @click="addCircle">+ Circle</button>
      <button @click="downloadPng">Download PNG</button>
    </header>
    <main style="flex: 1; position: relative">
      <div ref="canvasHost" style="position: absolute; inset: 0"></div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { createEditor } from '@design-on-web/vanilla';
import type { EditorAPI, EditorEngine } from '@design-on-web/core';

interface LayerInfo {
  id: string;
  name: string;
  type: string;
  visible: boolean;
  isActive: boolean;
}

const layers = ref<LayerInfo[]>([]);
const engine = ref<EditorAPI | null>(null);

function refreshLayers(api: EditorAPI) {
  const fabricCanvas = api.getCanvas() as {
    getObjects: () => unknown[];
    getActiveObject: () => unknown;
  };
  const activeObj = fabricCanvas.getActiveObject() as { id?: string } | null;

  layers.value = (fabricCanvas.getObjects() as Array<{
    id?: string;
    name?: string;
    type?: string;
    visible?: boolean;
    _isWorkspace?: boolean;
    _isGridLine?: boolean;
  }>)
    .filter((o) => !o._isWorkspace && !o._isGridLine && o.id)
    .map((o) => ({
      id: o.id!,
      name: o.name ?? o.type ?? 'Object',
      type: o.type ?? 'unknown',
      visible: o.visible !== false,
      isActive: o.id === activeObj?.id,
    }))
    .reverse();
}

onMounted(() => {
  // ... createEditor setup ...

  // Subscribe to canvas events for live layer list
  const eng = engine.value as unknown as EditorEngine;
  const events = (eng as unknown as { eventBus: { on: Function } }).eventBus;
  const fabricCanvas = engine.value!.getCanvas() as {
    on: (e: string, cb: () => void) => void;
  };

  const onChange = () => refreshLayers(engine.value!);
  events.on('object:added', onChange);
  events.on('object:removed', onChange);
  events.on('object:modified', onChange);
  fabricCanvas.on('selection:created', onChange);
  fabricCanvas.on('selection:updated', onChange);
  fabricCanvas.on('selection:cleared', onChange);
});

function selectLayer(id: string) {
  engine.value?.selectObject(id);
}

function deleteLayer(id: string) {
  engine.value?.removeObject(id);
}
</script>

<template>
  <aside class="layer-panel">
    <h3>Layers ({{ layers.length }})</h3>
    <div
      v-for="layer in layers"
      :key="layer.id"
      :class="{ active: layer.isActive }"
      @click="selectLayer(layer.id)"
    >
      {{ layer.name }}
      <button @click.stop="deleteLayer(layer.id)">🗑</button>
    </div>
  </aside>
</template>

// Quasar / Nuxt — wrap in client-only component
// because Fabric.js needs DOM access.

// Quasar:
<template>
  <q-no-ssr>
    <DesignEditor />
  </q-no-ssr>
</template>

// Nuxt 3:
<template>
  <ClientOnly>
    <DesignEditor />
  </ClientOnly>
</template>