Introduction

Welcome to Nuxt Email Renderer, a modern solution for building beautiful, responsive email templates using Vue.js components and Nuxt.js server-side rendering capabilities.

What is Nuxt Email Renderer?

Nuxt Email Renderer is a Nuxt.js module that allows you to build email templates using the same component-based approach you use for web applications. It provides:

• Vue Components: Pre-built email components optimized for email client compatibility
• Server-Side Rendering: Generate HTML emails on the server with dynamic content
• TypeScript Support: Full type safety and IntelliSense for all components
• Email Client Testing: Components tested across Gmail, Outlook, Apple Mail, and more
• Development Tools: Built-in playground and devtools integration

Why Use Nuxt Email Renderer?

Modern Development Experience

Stop writing table-based HTML and inline styles. Use modern Vue.js syntax with components, props, and computed properties.

<template>
  <EHtml>
    <EBody>
      <EContainer>
        <EHeading>Welcome {{ user.name }}!</EHeading>
        <EText>Thank you for joining our platform.</EText>
        <EButton :href="confirmationUrl"> Confirm Your Account </EButton>
      </EContainer>
    </EBody>
  </EHtml>
</template>

Server-Side Rendering

Leverage Nuxt's powerful SSR to generate personalized emails with dynamic content, data fetching, and template rendering.

Email Client Compatibility

All components are thoroughly tested and optimized for major email clients including:

Key Features

Component Library

A comprehensive set of email-optimized components:

• Structure: EHtml, EHead, EBody, EContainer
• Layout: ESection, ERow, EColumn
• Content: EText, EHeading, EButton, ELink
• Media: EImg
• Formatting: EHr, ECodeBlock, ECodeInline
• Styling: EStyle, EFont, EPreview

Server API Routes

Built-in API endpoints for rendering emails:

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

Development Tools

Enhanced development experience with:

• Live Preview: See changes instantly in development
• Playground: Test templates across different viewport sizes
• Devtools Integration: Debug and inspect email templates
• TypeScript: Full type safety and autocompletion

Getting Started

Ready to modernize your email development? Let's get started with the installation and setup process.

Key Features

This theme includes a range of features designed to improve documentation management:

• Powered by Nuxt 4: Utilizes the latest Nuxt framework for optimal performance.
• Built with Nuxt UI: Integrates a comprehensive suite of UI components.
• MDC Syntax via Nuxt Content: Supports Markdown with component integration for dynamic content.
• Nuxt Studio Compatible: Write and edit your content visually. No Markdown knowledge is required!
• Auto-generated Sidebar Navigation: Automatically generates navigation from content structure.
• Full-Text Search: Includes built-in search functionality for content discovery.
• Optimized Typography: Features refined typography for enhanced readability.
• Dark Mode: Offers dark mode support for user preference.
• Extensive Functionality: Explore the theme to fully appreciate its capabilities.