Vue Reference

The Dragble editor can be embedded in Vue 3 using the CDN-based SDK.

Adding the SDK

Add the script tag to your index.html:

<script src="https://sdk.dragble.com/latest/dragble-sdk.min.js"></script>

Usage with Vue

Use Vue's lifecycle hooks to initialize and clean up the editor:

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

const containerRef = ref<HTMLDivElement | null>(null);
const editor = ref<DragbleEditorInstance | null>(null);

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

  const pexEditor = dragble.createEditor({
    containerId: "editor-container",
    user: { id: "user-1", name: "Jane", email: "jane@example.com" },
    appearance: { theme: "light" },
  });

  pexEditor.addEventListener("ready", () => {
    console.log("Editor ready");
  });

  pexEditor.addEventListener("change", (design: any) => {
    console.log("Changed", design);
  });

  editor.value = pexEditor;
});

onUnmounted(() => {
  editor.value?.destroy();
});

const handleExport = async () => {
  if (!editor.value) return;
  const html = await editor.value.exportHtml();
  console.log("Exported HTML:", html);
};
</script>

<template>
  <div>
    <button @click="handleExport">Export HTML</button>
    <div id="editor-container" ref="containerRef" style="height: 600px" />
  </div>
</template>

Editor Instance Methods

Method	Signature	Description
loadDesign	(design: DesignJson) => void	Load a design.
getDesign	() => DesignJson	Get the current design JSON.
exportHtml	() => Promise<ExportHtmlData>	Export as HTML.
exportImage	(options?: ExportImageOptions) => Promise<ExportImageData>	Export as image.
exportPdf	(options?: ExportPdfOptions) => Promise<ExportPdfData>	Export as PDF.
undo	() => void	Undo last action.
redo	() => void	Redo last action.
setViewMode	(mode: ViewMode) => void	Switch desktop/tablet/mobile.
setTheme	(theme: ThemeMode) => void	Switch light/dark theme.
showPreview	() => void	Open preview modal.
hidePreview	() => void	Close preview modal.
destroy	() => void	Destroy the editor instance.
addEventListener	(event: string, handler: Function) => void	Subscribe to events.
removeEventListener	(event: string, handler: Function) => void	Unsubscribe from events.

TypeScript

Add type declarations in your env.d.ts:

declare const dragble: {
  createEditor(config: DragbleConfig): DragbleEditorInstance;
};

warning

Set an explicit height on the editor container. The editor fills its parent and requires a defined height to render.