Skip to main content
Version: Latest

Vue Quickstart

Get a drag-and-drop email editor running in Vue 3 in under 2 minutes.

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

Step 1: Add the script tag​

Add the Dragble SDK script to your index.html:

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

Step 2: Add the editor component​

src/components/EmailEditor.vue
<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",
    editorKey: "YOUR_EDITOR_KEY",
    editorMode: "email",
  });

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

  editor.value = pexEditor;
});

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

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

<template>
  <div>
    <div style="padding: 8px">
      <button @click="handleExportHtml">Export HTML</button>
    </div>
    <div id="editor-container" ref="containerRef" style="height: 600px" />
  </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​

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

Save the design JSON​

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

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

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

Next steps​