Skip to content
NuxtBase logo NuxtBase Docs

Email Templates

NuxtBase ships Vue-based email templates, plus server-side message builders that decide subject lines and props.

Shared Email Shell

Section titled “Shared Email Shell”

The shared visual shell is:

app/emails/components/BaseActionEmail.vue

This component controls the common visual language for action-based emails:

  • card layout
  • button styling
  • heading style
  • fallback link block
  • font stack and spacing

If you want all action emails to look more branded, start here.

Individual Email Templates

Section titled “Individual Email Templates”

The template set currently includes:

  • VerifyEmail
  • ResetPassword
  • MagicLink
  • OrganizationInvitation
  • WaitlistVerification
  • VerificationCode
  • CreditsAlert
  • SubscriptionChange

These files live under:

app/emails/

Server-Side Message Builders

Section titled “Server-Side Message Builders”

The message definitions are built in:

server/utils/email-templates.ts

That file controls:

  • subjects
  • template names
  • props passed into each email
  • debug message definitions used by email debugging flows

This means a real email customization often touches both:

  • the Vue template
  • the corresponding builder function

Safe Customization Pattern

Section titled “Safe Customization Pattern”

Use this rule of thumb:

  • change BaseActionEmail.vue for shared visual style
  • change app/emails/*.vue for template-specific structure
  • change server/utils/email-templates.ts for subject lines and dynamic copy assembly