> Lettrove docs 1.x · https://docs.lettrove.com/docs/get-started/vue

# Vue

The editor in a Vue 3 app (Vite): the `<LettroveEditor>` component from `@lettrove/vue`, and a small
Express server that mints its tokens.

You need a project's two **test** keys from [lettrove.com](https://lettrove.com) → **Settings →
Embed** (step 1 of the [Quickstart](/docs/get-started/quickstart#1-create-a-project-and-copy-its-test-keys)),
and [Node.js](https://nodejs.org) 22.18 or newer (what `create-vue` asks for).

## 1. The token server

The editor opens with a short-lived **token** that your server mints with the secret key, so the
key never reaches a browser. In your product this is one route in the server you already have.

```bash
mkdir -p lettrove-vue/server
cd lettrove-vue/server
npm init -y
npm install express @lettrove/node
```

```bash title="server/.env"
LETTROVE_SECRET_KEY=lt_sk_test_paste_yours_here
```

```js title="server/server.mjs"
import express from 'express';
import { Lettrove } from '@lettrove/node';

const lettrove = new Lettrove({ secretKey: process.env.LETTROVE_SECRET_KEY });
const app = express();

// The page asks this route for a token whenever the editor needs one.
app.post('/lettrove-token', async (req, res) => {
  // In your product: your own id for the signed-in person, from your session.
  const userId = 'demo-user';
  try {
    const { token } = await lettrove.tokens.create({
      user: { id: userId },
      origin: req.get('origin'), // the page the editor opens on
    });
    res.set('Cache-Control', 'no-store').json({ token });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: error.message, code: error.code });
  }
});

app.listen(3000, () => console.log('Token server on http://localhost:3000'));
```

Start it, and leave it running:

```bash
node --env-file=.env server.mjs
```

## 2. The Vue app

In a second terminal, from the `lettrove-vue` folder:

```bash
npm create vue@latest app -- --ts --bare
cd app
npm install
npm install @lettrove/vue
```

Send the app's `/lettrove-token` requests to the token server:

```ts title="app/vite.config.ts"
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: { proxy: { '/lettrove-token': 'http://localhost:3000' } },
});
```

Replace `src/App.vue`. Put your publishable key where it says so.

```vue title="app/src/App.vue"
<script setup lang="ts">
import { ref } from 'vue';
import { LettroveEditor, type LettroveEditorInstance } from '@lettrove/vue';

const designer = ref<LettroveEditorInstance | null>(null);

async function getToken() {
  const response = await fetch('/lettrove-token', { method: 'POST' });
  return (await response.json()).token;
}

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

<template>
  <div class="page">
    <button @click="exportHtml">Export HTML</button>
    <LettroveEditor
      ref="designer"
      publishable-key="lt_pk_test_paste_yours_here"
      :get-token="getToken"
      @design-saved="({ designId }) => console.log('saved', designId)"
      class="editor"
    />
  </div>
</template>

<style>
body { margin: 0; }
.page { height: 100vh; display: flex; flex-direction: column; }
.editor { flex: 1; }
</style>
```

## 3. Run it

```bash
npm run dev
```

Open the address it prints ([http://localhost:5173](http://localhost:5173)). Add a **Heading** from
the panel on the left; the browser's console prints `saved` and the design's id. Keep that id to
open the same design again: pass it as `design-id`. Click **Export HTML** and the console prints the
whole email, compiled for every inbox.

## Next

- If the box shows a code instead of the editor: [the Quickstart's checklist](/docs/get-started/quickstart#if-something-is-not-right).
- [`@lettrove/vue`](/docs/api/vue): every prop and event, and the template ref.
- [Getting designs out](/docs/editor/exports) · [Theming](/docs/editor/theming) · [Test and live keys](/docs/going-live/test-and-live).