Registry / communication / vue-email-edge

vue-email-edge

JSON →
library0.8.11-28628376.5de6d8djsnpmunverified

Vue Email lets you build and render email templates using Vue components. The current stable version is 0.8.11 (prerelease) with frequent releases. Key differentiators include SSR support (compiler for server/client, Deno, Bun), i18n, Tailwind CSS integration, first-class Nuxt 3 support, and integration with many email providers. Written in TypeScript, it is tested against popular email clients and provides a component-based approach to email templating.

communication
npm install vue-email-edge
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · VUE-EMAIL-EDGE
V
vue-email-edge
communicationjavascriptv0.8.11-28628376.5de6d8d
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

render
✓ import { render } from 'vue-email'
✗ const { render } = require('vue-email')
ESM-only; CommonJS require will fail.
VueEmailPlugin
✓ import { VueEmailPlugin } from 'vue-email'
✗ import VueEmailPlugin from 'vue-email'
VueEmailPlugin is a named export, not default.
Button
✓ import { Button } from 'vue-email'
✗ import Button from 'vue-email/components/Button'
Components are re-exported from 'vue-email' directly.

Renders a basic welcome email template using Vue components and the render function.

import { render, Button, Text, Html, Head, Body, Container, Section, Row, Column, Img, Link, Hr, Preview, Heading } from 'vue-email'; const template = { props: { firstName: String }, components: { Button, Text, Html, Head, Body, Container, Section, Row, Column, Img, Link, Hr, Preview, Heading }, template: ` <Html> <Head /> <Preview>Welcome</Preview> <Body> <Container> <Section> <Row> <Column> <Img src="https://example.com/logo.png" alt="Logo" /> </Column> </Row> <Row> <Column> <Heading as="h1">Welcome, {{ firstName }}!</Heading> <Text>Thank you for joining.</Text> <Button href="https://example.com">Get Started</Button> </Column> </Row> </Section> <Hr /> <Section> <Row> <Column> <Link href="https://example.com/unsubscribe">Unsubscribe</Link> </Column> </Row> </Section> </Container> </Body> </Html> ` }; async function main() { const { html, text } = await render(template, { firstName: 'John' }); console.log(html); } main();
Debug
Known issues
breakingExperimental and under heavy development. APIs subject to change without notice.
fix
Pin exact version and monitor changelog for breaking changes.
affects: all
gotchaThe render function is async and returns an object with html and text (not just a string).
fix
Use await and destructure the result: const { html, text } = await render(...).
affects: >=0.1.0
gotchaSome components like VHtml or VBody are only wrappers; they may require specific Vue version compatibility.
fix
Ensure Vue 3 is installed as peer dependency (vue@^3.2).
affects: >=0.1.0
Errors
Common errors & fixes
Cannot find module 'vue-email' or its corresponding type declarations.
Package not installed or TypeScript cannot resolve types.
fix
Install vue-email: npm install vue-email. Ensure tsconfig.json includes 'moduleResolution': 'node' or 'bundler'.
require() of ES Module /path/to/node_modules/vue-email/dist/index.mjs not supported.
vue-email is ESM-only, require() not supported.
fix
Use import syntax or set type: 'module' in package.json. For dynamic imports, use import() instead of require().
TypeError: render is not a function
Wrong import: default import used instead of named import.
fix
Change to: import { render } from 'vue-email'. Or check if render is a named export.
Upgrade
Version history
0.8.11-28628376.5de6d8dlatest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
39 hits · last 30 days
node
34
OpenAI (training)
1
Resources
githubhttps://github.com/vue-email/vue-email ↗
packagevue-email-edge ↗
homepagehttps://vuemail.net/ ↗
vue-email-edge — npm install vue-email-edge · libregistry