Installation

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

Install the Module

Add nuxt-email-renderer to your project:

npm install nuxt-email-renderer

yarn add nuxt-email-renderer

pnpm add nuxt-email-renderer

bun add nuxt-email-renderer

Add to Nuxt Config

Add the module to your nuxt.config.ts:

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

Create Email Templates Directory

Create an emails directory in your project root:

mkdir emails

Your project structure should now look like:

your-nuxt-project/
├── emails/           # 📧 Email templates directory
├── pages/
├── components/
├── nuxt.config.ts
└── package.json

Create Your First Email Template

Create a simple welcome email template:

<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>

<script setup lang="ts">
interface Props {
  userName: string;
  confirmationUrl: string;
}

defineProps<Props>();
</script>

Test Your Setup

Start your Nuxt development server:

npm run dev

yarn dev

pnpm dev

bun run dev

Verify Installation

In your code, you can now render the template by calling the render API endpoint provided by the module:

const response = await $fetch("/api/emails/render", {}, {
  method: "POST",
  body: {
    template: "WelcomeEmail",
    props: {
      userName: "John Doe",
      confirmationUrl: "https://example.com/confirm?token=abc123",
    },
  },
});

Configuration Options

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

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

  nuxtEmailRenderer: {
    // Custom emails directory (default: '/emails')
    emailsDir: "/src/email-templates",

    // Enable/disable Nuxt DevTools integration (default: true)
    devtools: true,
  },
});

Configuration Reference

API Routes

The module automatically adds these API routes to your project:

• GET /api/emails - Get all available email templates
• POST /api/emails/render - Render email templates to HTML
• POST /api/emails/source - Get email template source code

Next Steps

Now that you have Nuxt Email Renderer installed and configured:

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:

• 📖 Check the documentation
• 🐛 Report bugs on GitHub Issues
• 💬 Ask questions in GitHub Discussions# Installation