Nuxt Email Layer Introduction

The Nuxt Email Layer is a comprehensive email solution that brings powerful email functionality to your Nuxt applications. It provides everything you need to send beautiful, template-driven emails with multiple provider support, development tools, and an extensible architecture.

Key Features

What's Included

Email Templates

Pre-built, production-ready email templates for common use cases:

• Welcome emails
• Password reset
• Email verification
• Two-factor authentication
• Account notifications
• Login alerts

Email Providers

Support for popular email services:

• Mailgun - Production email delivery
• MailCatcher - Development email testing and debugging

Development Experience

Integrated tools for email development:

• Email Devtools - Visual interface for testing and previewing emails
• Template Hot Reload - See changes instantly during development
• Email Storage - Review sent emails in development

Quick Start

1. Install the layer
   npm install nuxt-email-layer
   # or
   pnpm add nuxt-email-layer
   

2. Add to your Nuxt config
   // nuxt.config.ts
   export default defineNuxtConfig({
     extends: ['nuxt-email-layer']
   })
   

3. Send your first email
   // server/api/send-welcome.ts
   export default defineEventHandler(async (event) => {
     const email = useEmail()
   
     return await email.send({
       to: 'user@example.com',
       subject: 'Welcome!',
       body: 'Welcome to our platform!'
     })
   })
   

Architecture

The Nuxt Email Layer is built with modularity and extensibility in mind:

nuxt-email-layer/
├── server/
│   ├── libs/
│   │   ├── useEmail/           # Core email functionality
│   │   │   ├── providers/      # Email provider implementations
│   │   │   └── types.ts        # Type definitions
│   │   └── hookLib/            # Hooks system
│   ├── emails/                 # Email template components
│   └── utils/                  # Email utilities and rendering
├── modules/
│   └── mail-devtools/          # Development tools integration
└── app/
    └── pages/                  # Devtools UI pages

Use Cases

The Nuxt Email Layer is perfect for:

• SaaS Applications - User onboarding, notifications, and account management
• E-commerce Sites - Order confirmations, shipping updates, and marketing emails
• Content Platforms - Newsletter subscriptions and content notifications
• Authentication Systems - Password resets, email verification, and security alerts
• Any Nuxt App - Add professional email functionality to any project

Next Steps

Ready to get started? Check out our guides:

• Installation & Configuration - Set up the layer in your project
• Sending Emails - Learn the useEmail() composable
• Email Templates - Create beautiful Vue email templates
• Email Providers - Configure Mailgun, MailCatcher, and custom providers
• Development Tools - Use the integrated email devtools