Vue Email

Common errors

• Cannot find module '@vue-email/compiler'

  cause 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

  cause 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')

  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.
  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.

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install vue-email npm
• yarn add vue-email yarn
• pnpm add vue-email pnpm

Imports

• render
  wrong:

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

  correct:

  import { render } from '@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
  wrong:

  import EButton from 'vue-email/EButton'

  correct:

  import { EButton } from 'vue-email'

  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
  wrong:

  import { Tailwind } from 'vue-email'

  correct:

  import { ETailwind } 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`.

Quickstart

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();