vue-email

library0.8.11jsnpmunverified

Vue Email is a JavaScript library designed for crafting email templates using Vue components. While the current stable release is v0.8.11, the project recently underwent a significant rewrite with v1.0.0, aiming for simpler integration where standard Vue components can be used out-of-the-box. The library provides a comprehensive set of email-specific components (e.g., `EHtml`, `EButton`, `ETailwind`) that abstract away the complexities of cross-client email compatibility. Key differentiators include full SSR support (with a dedicated compiler for Node.js, Deno, and Bun), i18n capabilities, integrations with various email providers like Nodemailer, extensive testing against popular email clients, first-class support for Tailwind CSS, and robust TypeScript typing. The project is under active development, with frequent updates, though it's still noted as experimental, and APIs are subject to change. It integrates particularly well with the Nuxt.js ecosystem.

crm-productivity web-framework serialization

npm install vue-email

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-EMAIL

vue-email

crm-productivityjavascriptv0.8.11

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

render

✓ import { render } from '@vue-email/compiler'

✗ const { render } = require('@vue-email/compiler')

The `render` function from the `@vue-email/compiler` package is essential for server-side rendering Vue email components into HTML and plain text. Ensure you install `@vue-email/compiler` separately.

EButton

✓ import { EButton } from 'vue-email'

✗ import EButton from 'vue-email/EButton'

Vue Email components like `EButton`, `EHtml`, `EText` are named exports directly from the `vue-email` package. These are standard Vue components designed for email contexts.

ETailwind

✓ import { ETailwind } from 'vue-email'

✗ import { Tailwind } from 'vue-email'

The `ETailwind` component is used to enable Tailwind CSS styling within your email templates. All Vue Email components are prefixed with `E`.

Demonstrates how to define a simple email template using Vue Email components and programmatically render it to HTML and plain text using the `@vue-email/compiler`.

import { render } from '@vue-email/compiler'; import { defineComponent, h } from 'vue'; import { EHtml, EHead, EBody, EContainer, EText, EButton } from 'vue-email'; // Define your email template as a standard Vue component using Vue Email's components const WelcomeEmail = defineComponent({ setup() { return () => h(EHtml, { lang: 'en' }, [ h(EHead), h(EBody, [ h(EContainer, { style: 'border: 1px solid #ddd; padding: 20px; border-radius: 8px;' }, [ h(EText, { style: 'font-size: 16px; margin-bottom: 20px;' }, 'Hello from Vue Email!'), h(EButton, { href: 'https://vuemail.net', style: 'background-color: #007bff; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none;' }, 'Visit Vue Email Docs') ]) ]) ]); } }); async function main() { try { // Render the Vue component to HTML and plain text const { html, text } = await render(WelcomeEmail); console.log('Generated HTML Output:\n', html); console.log('\nGenerated Plain Text Output:\n', text); } catch (error) { console.error('Failed to render email:', error); } } main();

Debug

Known issues

breakingVersion 1.0.0 introduces a 'Project Rewrite' with significant internal changes to how Vue components are processed. While the goal is to make component usage 'normal,' it may introduce breaking changes to how components are registered or imported in certain setups, particularly if you were relying on undocumented internals.

fix

Review the official documentation for v1.0.0 and ensure your component definitions and rendering logic align with the new, simpler approach. Verify component import paths and compiler usage.

affects: >=1.0.0

gotchaThe library is marked as 'Experimental and under heavy development,' with APIs subject to change. This implies that future minor or patch releases might introduce breaking changes or significant modifications without a major version bump, requiring careful dependency management.

fix

Pin your `vue-email` dependency to a specific version (e.g., `"vue-email": "^0.8.x"` or `"vue-email": "~0.8.11"`) and thoroughly test updates before deploying to production environments. Monitor GitHub releases closely.

affects: >=0.x.x

gotchaVue Email relies on `@vue-email/compiler` for server-side rendering. For full functionality outside of a framework like Nuxt, this compiler must be installed and configured separately. Merely installing `vue-email` does not provide the rendering utility.

fix

Ensure you explicitly install `npm install @vue-email/compiler` in addition to `npm install vue-email`. Use the `render` function from `@vue-email/compiler` to process your Vue email components.

affects: >=0.8.3

Errors

Common errors & fixes

Cannot find module '@vue-email/compiler'

The `@vue-email/compiler` package, which provides the `render` function, is not installed or incorrectly imported.

fix

Install the compiler: `npm install @vue-email/compiler` or `yarn add @vue-email/compiler`. Verify the import statement: `import { render } from '@vue-email/compiler'`.

Error: [Vue warn]: Failed to resolve component: EHtml

Vue Email components (e.g., `EHtml`, `EButton`) are not correctly imported or registered within your Vue application context.

fix

Ensure you are importing the components as named exports from `vue-email`: `import { EHtml, EBody } from 'vue-email';`. If using a build setup, verify the bundler correctly handles these imports.

TypeError: Cannot read properties of undefined (reading 'config')

This often occurs when Vue Email components are used outside of a proper Vue application context or when the Vue instance is not correctly provided to the compiler.

fix

When using `render` from `@vue-email/compiler`, ensure the component definition is valid and does not rely on global Vue instances that are not available in the rendering environment. If using a `.vue` file, ensure your build process correctly transpiles and makes the component available to the compiler.

Upgrade

Version history

0.8.11latest on npm

Audit

Dependencies

vuerequiredPeer dependency for defining Vue components and rendering logic.

Agent activity

41 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vue-email/vue-email ↗

packagehttps://www.npmjs.com/package/vue-email ↗

homepagehttps://vue-email.dev ↗