Skip to main content

Introduction

What Nuxt Email is, why its output is trustworthy, and how it is compared with a fixed React Email version.

Nuxt Email is typed transactional email for Nuxt, with email-safe Tailwind v4. You write Vue single-file components (.vue files) 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.

Nuxt Email is one focused option among Vue, Nuxt, standalone, and React email tools. Compare the product boundaries before installing it.

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, with fixed versions of React Email (6.9.0) and @react-email/render (2.1.0). The conformance report records the tested scope and intentional differences. 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.
  • Limits are documented. No global "React Email compatible" claim exists. Differences are recorded per behavior in the conformance report and migration guide.
Choose the right tool
Compare the closest workflows by where templates run and who owns delivery.
Install the module
Add the scoped package to a supported Nuxt app and register it.
Author your first email
Write a Vue .vue file 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

1.0.0-beta.2 is published on npm's next tag. The three-client beta smoke test passed against beta.1. The full eight-client checklist and an external transactional beta still block stable 1.0.0.

The package identity is @lupinum/nuxt-email; the unscoped npm package is unrelated.

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.40.

Nuxt 4.5.1 and Vue 3.5.40 are the compatibility baseline. Release consumers verify that minimum and the current compatible Nuxt 4 and Vue 3 versions 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.

The Node range follows the supported even-numbered Node release lines that can run the Nuxt baseline. Keeping that range narrow lets the renderer use the platform Nuxt already requires and avoids compatibility code for old or short-lived Node releases.