Getting Started
Project Structure
Learn how to organize your email templates and assets in your project.
Learn how to effectively organize your email templates, assets, and configuration for optimal development experience.
Recommended Structure
Here's the recommended project structure when using Nuxt Email Renderer:
your-nuxt-app/
├── emails/ # Email templates directory
│ ├── components/ # Reusable email components
│ │ ├── EmailHeader.vue
│ │ ├── EmailFooter.vue
│ │ └── ProductCard.vue
│ ├── layouts/ # Email layout templates
│ │ ├── MarketingLayout.vue
│ │ └── TransactionalLayout.vue
│ ├── WelcomeEmail.vue # Individual email templates
│ ├── ResetPassword.vue
│ ├── OrderConfirmation.vue
│ └── Newsletter.vue
├── public/
│ └── images/ # Static images for emails
│ ├── logo.png
│ └── hero-banner.jpg
├── nuxt.config.ts
└── package.json
Email Templates Directory
Template Files
Each email template is a Vue component that represents a complete email:
emails/WelcomeEmail.vue
<template>
<EHtml>
<EHead />
<EBody>
<EmailHeader />
<EContainer>
<!-- Email content -->
</EContainer>
<EmailFooter />
</EBody>
</EHtml>
</template>
<script setup lang="ts">
interface Props {
userName: string;
confirmationUrl: string;
}
defineProps<Props>();
</script>
Component Organization
Organize reusable components within your emails directory:
emails/components/EmailHeader.vue
<template>
<ESection style="background-color: #f8f9fa; padding: 20px;">
<EContainer>
<EImg
:src="logoUrl"
alt="Company Logo"
:width="150"
style="display: block; margin: 0 auto;"
/>
</EContainer>
</ESection>
</template>
<script setup lang="ts">
interface Props {
logoUrl?: string;
}
withDefaults(defineProps<Props>(), {
logoUrl: "/images/logo.png",
});
</script>
Configuration Options
Custom Template Directory
You can customize the email templates directory location:
nuxt.config.ts
export default defineNuxtConfig({
modules: ["nuxt-email-renderer"],
nuxtEmailRenderer: {
// Absolute path
emailsDir: "/src/email-templates",
// Or relative to project root
emailsDir: "./src/emails",
},
});
Best Practices
Component Naming
Use descriptive names with the Email prefix for clarity:
✅ Good:
- EmailWelcome.vue
- EmailPasswordReset.vue
- EmailOrderConfirmation.vue
❌ Avoid:
- Welcome.vue
- Reset.vue
- Order.vue
Style Organization
Keep styles inline for better email client compatibility:
<template>
<EContainer
style="
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
"
>
<!-- Content -->
</EContainer>
</template>
What's Next?
Now that you understand the project structure: