Copy page

Guides

Nuxt

The official Lettermint Nuxt module adds type-safe email sending to any Nuxt app. It works in two places: a useLettermint composable for your Vue components, and a sendEmail helper plus a fluent builder for Nitro server routes. When you send from the client, the module posts to an API route it generates for you, so your Project API token stays on the server and is never exposed to the browser.

Every message is delivered through Lettermint's European infrastructure, which runs entirely inside the EU and processes mail in line with GDPR. That makes the module a good fit for transactional email from a Nuxt front end or backend, such as order confirmations, password resets, and account notifications.

Requirements

Before you start you need:

• A Nuxt 3 or Nuxt 4 project running on Node.js 18 or newer
• A Lettermint account with a verified sending domain
• A Project API token from your project settings

If your domain is not verified yet, follow the domain setup guide first so your mail reaches the inbox instead of the spam folder.

1. Installation

Add the module to nuxt.config.ts:

Code
export default defineNuxtConfig({
  modules: ['nuxt-lettermint']
})

2. Configuration

Set your Project API token in .env. The Nuxt module reads it from NUXT_LETTERMINT_API_KEY.

Code
NUXT_LETTERMINT_API_KEY=your-lettermint-project-token

Or configure directly in nuxt.config.ts:

Code
export default defineNuxtConfig({
  modules: ['nuxt-lettermint'],
  lettermint: {
    apiKey: 'your-lettermint-project-token',
    autoEndpoint: true  // Creates /api/lettermint/send (default: true)
  }
})

3. Send Your First Email

The module gives you three ways to send, so you can pick the one that fits where your code runs.

Client-Side (Composable)

Use the useLettermint composable in Vue components. The composable posts to the module's server endpoint, which holds your token, so nothing sensitive reaches the browser:

Code
<script setup lang="ts">
const { send, sending, error } = useLettermint()

async function sendWelcomeEmail() {
  await send({
    from: 'John Doe <john@yourdomain.com>',
    to: 'recipient@example.com',
    subject: 'Hello from Lettermint',
    text: 'This is a test email sent using the Lettermint Nuxt module.'
  })
}
</script>

<template>
  <button @click="sendWelcomeEmail" :disabled="sending">
    {{ sending ? 'Sending...' : 'Send Email' }}
  </button>
  <p v-if="error">{{ error }}</p>
</template>

Server-Side (API Routes)

Send emails from Nitro server routes:

Code
import { sendEmail } from '#imports'

export default defineEventHandler(async () => {
  return await sendEmail({
    from: 'John Doe <john@yourdomain.com>',
    to: 'recipient@example.com',
    subject: 'Welcome to our platform',
    html: '<h1>Welcome!</h1><p>Thanks for signing up.</p>',
    tags: ['welcome']
  })
})

Fluent API

Build emails with a chainable API from server code:

Code
import { useLettermint } from '#imports'

export default defineEventHandler(async () => {
  const lettermint = useLettermint()

  return await lettermint.email
    .from('John Doe <john@yourdomain.com>')
    .to('recipient@example.com')
    .subject('Hello from Lettermint')
    .html('<h1>Hello!</h1>')
    .tag('welcome')
    .send()
})

4. Email Features

HTML and Text Content

Code
await send({
  from: 'John Doe <john@yourdomain.com>',
  to: 'recipient@example.com',
  subject: 'Your account is ready!',
  html: '<h1>Welcome!</h1><p>Thanks for signing up.</p>',
  text: 'Welcome! Thanks for signing up.'
})

Multiple Recipients

Code
await send({
  from: 'John Doe <john@yourdomain.com>',
  to: ['user1@example.com', 'user2@example.com'],
  cc: 'manager@yourdomain.com',
  bcc: 'archive@yourdomain.com',
  subject: 'Monthly Newsletter',
  html: '<h1>This Month\'s Updates</h1>'
})

Reply-To and Custom Headers

Code
await send({
  from: 'support@yourdomain.com',
  to: 'customer@example.com',
  replyTo: 'help@yourdomain.com',
  subject: 'Support Ticket #12345',
  headers: {
    'X-Priority': '1',
    'X-Ticket-ID': '12345'
  },
  html: '<p>Your support ticket has been updated.</p>'
})

Metadata

Attach data such as an order or customer ID for tracking and webhook payloads. This is what lets you map a later delivery or bounce event back to the right record in your app:

Code
await send({
  from: 'notifications@yourdomain.com',
  to: 'user@example.com',
  subject: 'Order Confirmation',
  metadata: {
    orderId: 'ORD-12345',
    customerId: 'CUST-678'
  },
  html: '<p>Your order has been confirmed.</p>'
})

Tags

Categorize emails for filtering and analytics:

Attachments

5. Custom Endpoint

By default, the module creates an endpoint at /api/lettermint/send. Disable it for custom implementations:

Code
export default defineNuxtConfig({
  modules: ['nuxt-lettermint'],
  lettermint: {
    autoEndpoint: false
  }
})

Create your own endpoint with validation:

Code
import { sendEmail } from '#imports'

export default defineEventHandler(async (event) => {
  const body = await readBody(event)

  // Add your validation logic
  if (!body.email || !body.message) {
    throw createError({ statusCode: 400, message: 'Missing required fields' })
  }

  return await sendEmail({
    from: 'contact@yourdomain.com',
    to: 'support@yourdomain.com',
    subject: `Contact form: ${body.subject}`,
    html: `<p>From: ${body.email}</p><p>${body.message}</p>`,
    tags: ['contact-form']
  })
})

Track delivery, opens, and bounces

Sending is only half of a transactional setup. To see what happens after a message leaves your Nuxt app, combine the module with Lettermint's platform features:

• Email tracking records opens and clicks, with bot filtering so your metrics stay accurate.
• Webhooks push delivery, bounce, and complaint events to your server in real time, so you can update order records or suppress bad addresses.
• Test addresses let you trigger a hard or soft bounce on demand while you build and verify your webhook handler.

The metadata you attach to a send is included in those webhook payloads, so an orderId or customerId maps each event straight back to the right record in your database.

FAQ

Does the module work with Nuxt 3 and Nuxt 4?

Yes. The module is built on @nuxt/kit and runs on both Nuxt 3 and Nuxt 4. The quickest way to add it is npx nuxi module add lettermint, which installs the package and registers it in nuxt.config.ts for you.

Can I send email directly from the browser?

The useLettermint composable runs in your components, but it does not talk to Lettermint directly. It posts to a server route the module generates (/api/lettermint/send), and that route holds your Project API token. Your token is never shipped to the browser. Set autoEndpoint: false if you want to build your own route with custom validation.

Is Lettermint email GDPR compliant and EU-hosted?

Yes. Lettermint runs exclusively on European infrastructure and processes email in line with GDPR, so transactional mail from your Nuxt app is handled inside the EU.

How do I track opens, clicks, and bounces from a Nuxt app?

Enable tracking on your route and subscribe to webhooks to receive delivery, open, and bounce events. Use the test addresses to simulate bounces while you build your handler.

Next Steps