Skip to main content

Introduction

What Nuxt Email is, why its output is trustworthy, and how it is verified against a pinned React Email oracle.

Nuxt Email is typed transactional email for Nuxt, with email-safe Tailwind v4. You write ordinary Vue SFCs in app/emails/; the module discovers them, generates typed Nitro render calls, and compiles Tailwind utilities into email output.

It does one job and stops there. Nuxt Email does not send mail, choose providers, or manage recipients. You hand the rendered html, text, and optional computed subject to your provider SDK.

Where it fits

Choose Nuxt Email when transactional messages belong to a Nuxt application and should share its Vue authoring model, TypeScript contracts, and Nitro deployment. The generated renderEmail('welcome', props) call is the product: no sidecar renderer, separate registry, or module configuration.

Maizzle is a better fit for standalone email projects, static or marketing builds, non-Nuxt stacks, and teams that want a broad configurable transformation pipeline. Nuxt Email stays intentionally narrower instead of becoming a second general-purpose email framework.

Why the output is trustworthy

Email HTML is unforgiving: clients strip <style>, break flexbox, and mangle padding. Nuxt Email combines conservative primitives with reproducible checks while keeping live-client claims separate.

  • Checked against React Email. Covered behaviors are compared, case by case, to a pinned React Email oracle (version 6.9.0, @react-email/render 2.1.0). The conformance report is the source of truth for the tested scope and intentional divergences. It is regression evidence, not a universal inbox-rendering guarantee.
  • Tailwind v4 for email. ETailwind inlines compatible utilities, preserves author-style precedence, and moves media-query and pseudo-class rules into the head.
  • Deterministic. Two renders of the same template and props return byte-identical HTML and a matching plain-text fallback. No IDs, timestamps, hydration payload, or mutable renderer state.
  • Server-only and typed. renderEmail('welcome', props) is generated from your app/emails/ folder. Unknown template names, missing props, and wrong types fail at compile time.
  • Honest about limits. No global "React Email compatible" claim is made. Divergences are documented per behavior. See the conformance report and the migration guide.
Install the module
Add the scoped package to a supported Nuxt app and register it.
Author your first email
Write a Vue SFC and add a preview fixture.
Render from Nitro
Call renderEmail from a server handler and read the result.
Component reference
The built-in E* primitives and optional syntax-highlighted code blocks.

Release status

The package identity is @lupinum/nuxt-email; the unscoped npm package is unrelated. The project remains pre-1.0 while real-client QA and an external transactional beta are completed.

Supported environment

  • Node.js ^22.18.0 || ^24.11.0 || ^26.0.0 — the supported even-numbered Node 22, 24, and 26 lines.
  • Nuxt >=4.5.1 <5.
  • Vue ^3.5.35.

Nuxt 4.5.1 is the compatibility baseline. The release consumer installs Nuxt 4.5.2 without a dependency shim. CI covers Node 22, 24, and 26. Other Node majors, Nuxt 3, Nuxt 5, edge runtimes, and client-side email rendering are outside the support contract.