> Lettrove docs 1.x · https://docs.lettrove.com/docs/api/vue

# `@lettrove/vue`

```bash
npm install @lettrove/vue
```

Vue 3.3 or newer. Built on [`@lettrove/embed`](/docs/api/embed), which it installs.

```vue
<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`](/docs/api/embed#options) 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`](/docs/api/embed#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](/docs/editor/events).

## Template ref

A template ref to the component is a `LettroveEditorInstance`: its `editor` is the
[`EditorHandle`](/docs/api/embed#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`…).