Nuxt Email Renderer
Getting Started

Installation

Get started with Nuxt Email Renderer in your project.

Get up and running with Nuxt Email Renderer in your Nuxt.js project in just a few minutes.

Prerequisites

Before installing, make sure you have:

  • Node.js version 18 or higher
  • Nuxt 4 project (version 4 or higher)
  • Package manager: npm, yarn, pnpm, or bun

Automatic Installation (Recommended)

To get started, add nuxt-email-renderer to your project:

npx nuxt@latest module add nuxt-email-renderer

Manual Installation

Install the Module

Add nuxt-email-renderer to your project:

npm install nuxt-email-renderer

Add to Nuxt Config

Add the module to your nuxt.config.ts:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-email-renderer"],
});

Create Email Templates Directory

Create an email templates directory in your project. You can choose either location based on your Nuxt version and preference:

mkdir -p app/emails

Your project structure should now look like:

your-nuxt-project/
├── app/
│   └── emails/       # 📧 Email templates directory (Nuxt 4)
├── pages/
├── components/
├── nuxt.config.ts
└── package.json
The module automatically detects app/emails (Nuxt 4 structure) first, then falls back to emails (root directory) for backward compatibility.

Create Your First Email Template

Create a simple welcome email template:

emails/WelcomeEmail.vue
<script setup lang="ts">
interface Props {
  userName: string;
  confirmationUrl: string;
}

defineProps<Props>();
</script>

<template>
  <EHtml>
    <EHead />
    <EBody>
      <EContainer>
        <EHeading>Welcome {{ userName }}!</EHeading>
        <EText>
          Thank you for joining our platform. We're excited to have you on
          board!
        </EText>
        <EButton :href="confirmationUrl"> Confirm Your Account </EButton>
      </EContainer>
    </EBody>
  </EHtml>
</template>

Configuration Options

Customize the module behavior in your nuxt.config.ts:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-email-renderer"],

  nuxtEmailRenderer: {
    // Custom emails directory (default: auto-detects app/emails or emails)
    emailsDir: "/src/email-templates",

    // Enable/disable Nuxt DevTools integration (default: true)
    devtools: true,
  },
});
Auto-detection: By default, the module automatically detects your email templates directory in this order:
  1. app/emails (Nuxt 4 structure) - checked first
  2. emails (root directory) - fallback for backward compatibility
You only need to configure emailsDir if you want to use a custom location.

Configuration Reference

OptionTypeDefaultDescription
emailsDirstring'/emails'Directory where email templates are stored. Module auto-detects app/emails (Nuxt 4) or emails (root)
devtoolsbooleantrueEnable Nuxt DevTools integration

Server-Side Rendering

The module provides the renderEmailComponent function for rendering email templates in your server-side code. See the Usage guide for examples.

Next Steps

Now that you have Nuxt Email Renderer installed and configured:

Project Structure

Components

Playground

Troubleshooting

Common Issues

Template Not Found

If you get a "Template not found" error:

  1. Check that your template file is in the correct directory (/emails by default)
  2. Ensure the filename matches exactly (case-sensitive)
  3. Verify the template is a valid .vue file

Component Import Issues

If email components are not recognized:

  1. Make sure you're using components inside the emails directory
  2. Check that the module is properly registered in nuxt.config.ts
  3. Restart your development server after configuration changes

Build Errors

If you encounter build errors:

  1. Ensure you're using Nuxt 4 or higher
  2. Check that all email template syntax is valid Vue
  3. Verify TypeScript interfaces are properly defined

Getting Help

If you encounter issues:

Introduction

Learn about Nuxt Email Renderer and how it modernizes email development.

Usage

Learn how to use Nuxt Email Renderer module in your Nuxt project.