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/
├── app/
│ ├── assets/ # Build-processed assets for ?inline imports
│ │ ├── logo.png
│ │ └── hero-banner.jpg
│ └── 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
your-nuxt-app/
├── app/
│ └── assets/ # Build-processed assets for ?inline imports
│ ├── logo.png
│ └── hero-banner.jpg
├── 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
Nuxt 4 Support: The module automatically detects and prioritizes the
app/emails directory for Nuxt 4 projects. If not found, it falls back to the root emails directory for backward compatibility.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>
Using Local Assets
If the image should be served by your app at a URL, place it in public/ and reference it by its public path.
app/emails/components/EmailHeader.vue
<template>
<ESection style="background-color: #f8f9fa; padding: 20px;">
<EContainer>
<EImg
src="/images/logo.png"
alt="Company Logo"
:width="150"
style="display: block; margin: 0 auto;"
/>
</EContainer>
</ESection>
</template>
If the image should be embedded directly in the rendered email HTML, place it in app/assets/ and import it with the ?inline suffix:
app/emails/components/EmailHeader.vue
<script setup lang="ts">
import logoSrc from '~/app/assets/logo.png?inline'
</script>
<template>
<ESection style="background-color: #f8f9fa; padding: 20px;">
<EContainer>
<EImg
:src="logoSrc"
alt="Company Logo"
:width="150"
style="display: block; margin: 0 auto;"
/>
</EContainer>
</ESection>
</template>
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: