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
pnpm add @lupinum/nuxt-email@nextnuxt-email package on npm is unrelated to this project. Always install and import @lupinum/nuxt-email.Register the unversioned package name in Nuxt configuration:
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:
{
"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:
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, plusECodeBlockwhen configured. - A Nitro-only
renderEmail(name, props)auto-import, typed fromapp/emails/. - The explicit
@lupinum/nuxt-email/define-emailentry 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.