Skip to main content
Version: Latest

Vue Quickstart

Get a drag-and-drop email editor running in Vue 3 in under 2 minutes using the official dragble-vue-editor package.

:::info Prerequisites You need an editorKey from the Dragble Dashboard. This authenticates your editor instance. :::

Step 1: Install the package​

npm install dragble-vue-editor
yarn add dragble-vue-editor
pnpm add dragble-vue-editor

The Dragble SDK is loaded automatically from the CDN — no script tag required.

Step 2: Add the editor component​

src/components/EmailEditor.vue
<script setup lang="ts">
import { ref } from "vue";
import {
  DragbleEditor,
  type DesignJson,
  type DragbleSDK,
} from "dragble-vue-editor";

const editorRef = ref<InstanceType<typeof DragbleEditor> | null>(null);

const onReady = (editor: DragbleSDK) => {
  console.log("Editor is ready", editor);
};

const onChange = (data: { design: DesignJson; type: string }) => {
  console.log("Design changed:", data.design);
};

const handleExportHtml = async () => {
  const html = await editorRef.value?.exportHtml();
  console.log("Exported HTML:", html);
};
</script>

<template>
  <div style="height: 100vh; display: flex; flex-direction: column">
    <div style="padding: 8px">
      <button type="button" @click="handleExportHtml">Export HTML</button>
    </div>
    <DragbleEditor
      ref="editorRef"
      editor-key="YOUR_EDITOR_KEY"
      editor-mode="email"
      min-height="600px"
      @ready="onReady"
      @change="onChange"
      @error="(error) => console.error('Editor error:', error)"
    />
  </div>
</template>

:::warning Replace placeholder Replace YOUR_EDITOR_KEY with the editor key from your Dragble Dashboard. :::

You should see a drag-and-drop email editor with a toolbar on the right, content blocks on the left, and a canvas in the center.

Step 3: Export HTML​

The SDK methods are exposed directly on the component ref. All exports are Promise-based:

const handleExportHtml = async () => {
  const html = await editorRef.value?.exportHtml();
  if (html) {
    // Send to your backend, preview, or download
    console.log(html);
  }
};

Save and load designs​

To persist work and reload it later, use exportJson / loadDesign:

// Save
const design = await editorRef.value?.exportJson();
await fetch("/api/designs", {
  method: "POST",
  body: JSON.stringify(design),
  headers: { "Content-Type": "application/json" },
});

// Load a previously saved design
editorRef.value?.loadDesign(savedDesignJson);

Composable alternative​

If you prefer to manage the editor lifecycle manually, the package also exports a useDragbleEditor composable:

<script setup lang="ts">
import { useDragbleEditor } from "dragble-vue-editor";

const { editor, isReady, containerId } = useDragbleEditor({
  editorKey: "YOUR_EDITOR_KEY",
  editorMode: "email",
});

const exportHtml = async () => {
  if (editor.value) console.log(await editor.value.exportHtml());
};
</script>

<template>
  <div :id="containerId" style="height: 600px" />
  <button @click="exportHtml" :disabled="!isReady">Export</button>
</template>

Next steps​