Skip to main content
View as Markdown

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 → Settings → Embed (step 1 of the Quickstart), and Node.js 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.

mkdir -p lettrove-vue/server
cd lettrove-vue/server
npm init -y
npm install express @lettrove/node
server/.env
LETTROVE_SECRET_KEY=lt_sk_test_paste_yours_here
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:

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

2. The Vue app​

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

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:

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.

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​

npm run dev

Open the address it prints (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​