{"id":12467,"library":"vue-email","title":"Vue Email","description":"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.","status":"active","version":"0.8.11","language":"javascript","source_language":"en","source_url":"https://github.com/vue-email/vue-email","tags":["javascript","vue","vue-email","templates","mailing","vue-templates","typescript"],"install":[{"cmd":"npm install vue-email","lang":"bash","label":"npm"},{"cmd":"yarn add vue-email","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-email","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for defining Vue components and rendering logic.","package":"vue","optional":false}],"imports":[{"note":"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.","wrong":"const { render } = require('@vue-email/compiler')","symbol":"render","correct":"import { render } from '@vue-email/compiler'"},{"note":"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.","wrong":"import EButton from 'vue-email/EButton'","symbol":"EButton","correct":"import { EButton } from 'vue-email'"},{"note":"The `ETailwind` component is used to enable Tailwind CSS styling within your email templates. All Vue Email components are prefixed with `E`.","wrong":"import { Tailwind } from 'vue-email'","symbol":"ETailwind","correct":"import { ETailwind } from 'vue-email'"}],"quickstart":{"code":"import { render } from '@vue-email/compiler';\nimport { defineComponent, h } from 'vue';\nimport { EHtml, EHead, EBody, EContainer, EText, EButton } from 'vue-email';\n\n// Define your email template as a standard Vue component using Vue Email's components\nconst WelcomeEmail = defineComponent({\n  setup() {\n    return () =>\n      h(EHtml, { lang: 'en' }, [\n        h(EHead),\n        h(EBody, [\n          h(EContainer, {\n            style: 'border: 1px solid #ddd; padding: 20px; border-radius: 8px;'\n          }, [\n            h(EText, { style: 'font-size: 16px; margin-bottom: 20px;' }, 'Hello from Vue Email!'),\n            h(EButton, {\n              href: 'https://vuemail.net',\n              style: 'background-color: #007bff; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none;'\n            }, 'Visit Vue Email Docs')\n          ])\n        ])\n      ]);\n  }\n});\n\nasync function main() {\n  try {\n    // Render the Vue component to HTML and plain text\n    const { html, text } = await render(WelcomeEmail);\n    console.log('Generated HTML Output:\\n', html);\n    console.log('\\nGenerated Plain Text Output:\\n', text);\n  } catch (error) {\n    console.error('Failed to render email:', error);\n  }\n}\n\nmain();","lang":"typescript","description":"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`."},"warnings":[{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=0.x.x"},{"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.","message":"Vue 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.","severity":"gotcha","affected_versions":">=0.8.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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'`.","cause":"The `@vue-email/compiler` package, which provides the `render` function, is not installed or incorrectly imported.","error":"Cannot find module '@vue-email/compiler'"},{"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.","cause":"Vue Email components (e.g., `EHtml`, `EButton`) are not correctly imported or registered within your Vue application context.","error":"Error: [Vue warn]: Failed to resolve component: EHtml"},{"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.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'config')"}],"ecosystem":"npm"}