Skip to main content

Installation

Add @lupinum/nuxt-email to a supported Nuxt application and optionally configure syntax highlighting.

Nuxt Email installs into an existing, supported Nuxt 4 application. Its email discovery and rendering conventions require no configuration.

1. Add the Nuxt module

bash
pnpm add @lupinum/nuxt-email@next
Use the scoped name
The unscoped nuxt-email package on npm is unrelated to this project. Always install and import @lupinum/nuxt-email.

Register the unversioned package name in Nuxt configuration:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@lupinum/nuxt-email'],
})

Use a coding agent

A coding agent is a development tool that can inspect and change your project. After installation, copy this prompt into your coding agent:

Add Nuxt Email to this Nuxt application and render one transactional email from
a Vue template. Read the project's existing instructions first. Resolve
@lupinum/nuxt-email/agent-docs from this application's directory and read its
starting pages. Use the installed version's examples and public types. Preserve
existing routes, security boundaries, conventions, and AGENTS.md instructions.
Add or update one short Nuxt Email pointer in AGENTS.md if the project allows
it; do not duplicate the documentation. If the file is absent, create only that
pointer. Report missing guidance. Verify the server render, HTML and plain-text
output, and one invalid request. Keep delivery in application-owned code.

If the installed package has no agent-docs export, read its packaged README, types, and CONFORMANCE.md. Use documentation from the matching source tag when more detail is needed. Installing or updating the package does not edit project instructions. The pointer resolves the installed package, so upgrades and rollbacks select the matching documentation without copying it into your application.

2. Confirm the TypeScript entry point

If your app does not already have one, add the ordinary Nuxt tsconfig.json:

tsconfig.json
{
  "extends": "./.nuxt/tsconfig.json"
}

Optional code blocks

Syntax highlighting is opt-in. Nuxt Email uses the Shiki syntax highlighter. Configure exactly the languages your templates use and one theme:

ts
export default defineNuxtConfig({
  modules: ['@lupinum/nuxt-email'],
  nuxtEmail: {
    codeBlock: {
      languages: ['typescript'],
      theme: 'github-dark',
    },
  },
})

Without codeBlock, ECodeBlock is not registered. Shiki is not loaded during module setup or included in the production server bundle.

Shiki remains an installation-time dependency of @lupinum/nuxt-email. The option controls build and runtime cost, not package download cost. Discovery directories, the preview route, and the render API remain fixed. See the module behavior reference for the full contract.

What the module registers

  • Server-only auto-imports for eighteen built-in E* components, plus ECodeBlock when configured.
  • A Nitro-only renderEmail(name, props) auto-import, typed from app/emails/.
  • The explicit @lupinum/nuxt-email/define-email entry point for declaring a subject inside a template.
  • A development-only preview application at /__email (never present in production output).

Next, author your first email.