@lettrove/vue

npm install @lettrove/vue

Vue 3.3 or newer. Built on @lettrove/embed, which it installs.

<script setup lang="ts">
import { ref } from 'vue';
import { LettroveEditor, type LettroveEditorInstance } from '@lettrove/vue';

const props = defineProps<{ designId?: string }>();
const designer = ref<LettroveEditorInstance | null>(null);

async function exportHtml() {
  const email = await designer.value?.editor?.exportHtml();
  console.log(email?.html);
}
</script>

<template>
  <button @click="exportHtml">Export</button>
  <LettroveEditor
    ref="designer"
    publishable-key="lt_pk_test_…"
    :get-token="getToken"
    :design-id="props.designId"
    :appearance="{ variables: { accent: '#5b3df5' } }"
    @design-saved="({ designId }) => save(designId)"
    @error="(e) => console.error(e.code, e.message)"
    style="height: 720px"
  />
</template>

Props

Every option of createEditor except container, signal and on (the component provides those): publishable-key, get-token, design-id, release, mode, tabs, tools, features, branding, appearance, storage, providers. In a template, write them in kebab-case and bind values with :; class and style go to the element the editor fills. Give it a height.

Events

Event
@ready="(editor) => …"	The editor is on screen; editor is the EditorHandle.
@error="(error) => …"	It could not open, or reported an error while open. error.code, error.message.
@design-loaded	design:loaded
@design-updated	design:updated
@design-saved	design:saved
@selection-changed	selection:changed
@image-uploaded	image:uploaded
@config-adjusted	config:adjusted
@theme-changed	theme:changed

Payloads: Events.

Template ref

A template ref to the component is a LettroveEditorInstance: its editor is the EditorHandle once the editor is open, null before and after.

Behaviour you can rely on

• Server rendering (Nuxt): renders an empty element; the editor opens in the browser.
• Changing props: inline functions and objects may change on every render without reopening the editor. A new publishable-key, design-id, release or set of options opens it again; a new appearance.theme switches the open editor without reopening.
• An attribute that is no prop (featurs, say) reaches createEditor, which names it: refused with a test key, a warning with a live one. Never silently lost.
• Unmounting removes the editor and everything it set up.

Exports

LettroveEditor, LettroveEditorInstance, and the types of @lettrove/embed (EditorHandle, ExportResult, LettroveEmbedError…).