Skip to main content

Vue Quickstart

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

Prerequisites

You need an editorKey from the Pexelize Dashboard. This authenticates your editor instance.

Step 1: Install​

npm install @pexelize/vue-editor

Step 2: Add the editor component​

src/components/EmailEditor.vue
<script setup lang="ts">
import { ref } from 'vue';
import { PexelizeEditor, type PexelizeSDK } from '@pexelize/vue-editor';

const editorRef = ref<InstanceType<typeof PexelizeEditor>>();

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

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

<template>
  <div>
    <div style="padding: 8px">
      <button @click="handleExportHtml">Export HTML</button>
    </div>
    <PexelizeEditor
      ref="editorRef"
      editor-key="YOUR_EDITOR_KEY"
      editor-mode="email"
      height="600px"
      @ready="onReady"
    />
  </div>
</template>
Replace placeholder

Replace YOUR_EDITOR_KEY with the editor key from your Pexelize 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 Vue component exposes SDK methods directly on the template ref:

const handleExportHtml = async () => {
  const html = await editorRef.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 saveDesign / loadDesign:

// Save
editorRef.value?.saveDesign((design) => {
  // Send design JSON to your backend
  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

Use the usePexelizeEditor composable for a lower-level approach with direct SDK access:

<script setup lang="ts">
import { usePexelizeEditor } from '@pexelize/vue-editor';

const { editor, isReady, containerId } = usePexelizeEditor({
  editorKey: 'YOUR_EDITOR_KEY',
  editorMode: 'email',
});
</script>

<template>
  <div :id="containerId" style="height: 600px" />
</template>

Available events​

EventPayloadDescription
@readyPexelizeSDKEditor initialized and interactive
@loadunknownDesign loaded into the canvas
@change{ design, type }User modified the design
@errorErrorInitialization or runtime error
@commentCommentActionComment created/edited/resolved (requires collaboration)

Next steps​