Nuxt

The @vuemaildev/nuxt module lets Nitro, the server of Nuxt, import emails written as single file components, so your server routes can render them with render and send them with any email provider. It works with Nuxt 4 (and Nuxt 3.13 or later).

1. Install dependencies

Install Vuemail and its Nuxt module, and the preview app as a dev dependency.

npm install @vuemaildev/vuemail @vuemaildev/nuxt -E
npm install @vuemaildev/ui -D -E

yarn add @vuemaildev/vuemail @vuemaildev/nuxt -E
yarn add @vuemaildev/ui -D -E

pnpm add @vuemaildev/vuemail @vuemaildev/nuxt -E
pnpm add @vuemaildev/ui -D -E

bun add @vuemaildev/vuemail @vuemaildev/nuxt -E
bun add @vuemaildev/ui -D -E

2. Add the module

Add @vuemaildev/nuxt to the modules of your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@vuemaildev/nuxt'],
});

That’s all the configuration it needs. It takes one option, under the vuemail key:

object

Options for the compiler of the single file components Nitro bundles, the emails your server routes import. They are the options of unplugin-vue.

3. Write your emails

Create an emails folder at the root of your project, next to app and server. It’s where email dev looks for emails by default, so the preview and your server routes use the same files.

my-nuxt-app
├── app
├── emails
│   ├── static
│   └── welcome.vue
├── server
│   └── api
│       └── send.post.ts
├── nuxt.config.ts
└── package.json

Then, write your first email in emails/welcome.vue:

emails/welcome.vue

<script setup lang="ts">
import {
  Body,
  Button,
  Container,
  Head,
  Html,
  Preview,
  Tailwind,
  Text,
} from '@vuemaildev/vuemail';

const { name } = defineProps<{ name: string }>();

defineOptions({
  PreviewProps: { name: 'Ana' },
});
</script>

<template>
  <Html>
    <Tailwind>
      <Head />
      <Preview>Welcome, {{ name }}</Preview>
      <Body class="bg-white font-sans">
        <Container class="mx-auto p-4 sm:p-8">
          <Text class="text-lg text-green-700">Welcome, {{ name }}!</Text>
          <Button
            href="https://vuemail.dev"
            class="rounded bg-green-600 px-4 py-2 text-white"
          >
            Get started
          </Button>
        </Container>
      </Body>
    </Tailwind>
  </Html>
</template>

4. Render and send it from a server route

Import the email in a server route, render it into HTML and plain text, and send it. This example uses Resend, but any of the integrations works the same way.

npm install resend

yarn add resend

pnpm add resend

bun add resend

Keep the API key in the runtime config, so it can be set with the NUXT_RESEND_API_KEY environment variable:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@vuemaildev/nuxt'],
  runtimeConfig: {
    resendApiKey: '',
  },
});

server/api/send.post.ts

import { Resend } from 'resend';
import { render } from '@vuemaildev/vuemail';
import WelcomeEmail from '~~/emails/welcome.vue';

export default defineEventHandler(async (event) => {
  const { name, email } = await readBody<{ name: string; email: string }>(event);
  const resend = new Resend(useRuntimeConfig(event).resendApiKey);

  const html = await render(WelcomeEmail, { name });
  const text = await render(WelcomeEmail, { name }, { plainText: true });

  const { data, error } = await resend.emails.send({
    from: 'Acme <onboarding@resend.dev>',
    to: [email],
    subject: `Welcome, ${name}`,
    html,
    text,
  });

  if (error) {
    throw createError({ statusCode: 500, statusMessage: error.message });
  }

  return data;
});

~~ is the root of your project in Nuxt, so ~~/emails/welcome.vue points to the emails folder whether the route is in server/api or deeper.

5. Preview your emails

Add a script for the preview. Nuxt’s development server runs on port 3000, which is the default of email dev too, so give the preview another one:

package.json

{
  "scripts": {
    "email:dev": "email dev --port 3001"
  }
}

Run it next to nuxt dev and visit localhost:3001 to see your emails change as you edit them.

npm run email:dev

yarn email:dev

pnpm email:dev

bun email:dev

The files in emails/static are only served by the preview. For the images of the emails you send, use absolute URLs to files you host, like the ones in the public folder of your Nuxt app.

Tailwind CSS 4

If your app uses Tailwind CSS 4, with @tailwindcss/vite, keep it as it is:

nuxt.config.ts

import tailwindcss from '@tailwindcss/vite';

export default defineNuxtConfig({
  modules: ['@vuemaildev/nuxt'],
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [tailwindcss()],
  },
});

The Tailwind component of your emails works on its own: it compiles the classes an email uses, with Tailwind CSS 4, and inlines them while the email renders. It doesn’t read the stylesheet of your app, so to use your design tokens in emails too, pass them to its theme prop:

emails/theme.ts

export const theme = `
@theme {
  --color-brand: #42b883;
}
`;

emails/welcome.vue

<script setup lang="ts">
import { Body, Button, Html, Tailwind } from '@vuemaildev/vuemail';
import { theme } from './theme';
</script>

<template>
  <Html>
    <Tailwind :theme="theme">
      <Body>
        <Button href="https://vuemail.dev" class="bg-brand px-4 py-2 text-white">
          Get started
        </Button>
      </Body>
    </Tailwind>
  </Html>
</template>

Tailwind CSS detects the classes of your whole project, including the emails folder, for the stylesheet of your app. To leave the emails out of it, add @source not "../../../emails"; to app/assets/css/main.css.

Next steps

Try adding these other components to your email.

Image

Display an image in your email.

Link

A hyperlink to web pages or anything else a URL can address.

Divider

Display a divider that separates content areas in your email.

Preview

A preview text that will be displayed in the inbox of the recipient.

Overview

Getting Started

Guides

Components

Utilities

Integrations

Contributing

1. Install dependencies

2. Add the module

3. Write your emails

4. Render and send it from a server route

5. Preview your emails

Tailwind CSS 4

Next steps

Image

Link

Divider

Preview

​1. Install dependencies

​2. Add the module

​3. Write your emails

​4. Render and send it from a server route

​5. Preview your emails

​Tailwind CSS 4

​Next steps

Image

Link

Divider

Preview

1. Install dependencies

2. Add the module

3. Write your emails

4. Render and send it from a server route

5. Preview your emails

Tailwind CSS 4

Next steps