Nuxt - Vue Email

This feature is new and experimental. Please report any issues you find on GitHub. Note this feature is only available on version 0.6.0 and above, please update your package to use it.

Introduction

Vue Email can be used with nuxt to render and send emails from the nuxt server.

Now, you need to install the @vue-email/nuxt package.

For versions 0.7.2 and below, you will need to extract the nuxt package from vue-email using the syntax vue-email/nuxt.

Installation

To use Vue Email you need to install the @vue-email/nuxt package.

Config

The useCompiler method takes two arguments, the first is the name of the template file, and the second is an optional props object.

import { useCompiler } from '#vue-email'

const template = await useCompiler('WelcomeEmail.vue', {
    props: {
      username: 'John Doe',
    }
})

To configure the compiler, you can use the nuxt.config.ts file, and add your global config to the vueEmail key as shown in the Nuxt config

Your Email templates must be located in the ~/emails directory. at the root of your nuxt project. They will also be auto imported in ur nuxt project, so you dont have to add them to the components nuxt config.

Example

in this example we will use Nuxt.js to render and view an email.

Nuxt 3

import { useCompiler } from '#vue-email'

export default defineEventHandler(async () => {
  try {
    const template = await useCompiler('WelcomeEmail.vue', {
      props: {
        username: 'John Doe',
      }
    })

    if (!template) {
      throw createError({
        statusCode: 404,
        statusMessage: 'Not Found',
      })
    }

    return template
  }
  catch (error) {
    console.error(error)

    throw createError({
      statusCode: 500,
      statusMessage: 'Internal Server Error',
    })
  }
})

Sending Emails

Once you have rendered your email template, you can send it using any email provider you like.

Vue Email does not provide any email sending functionality, you will need to use a third party email provider to send your emails, check the integration section for more information. Integrations

Bugs and Issues

If you encounter any bugs or issues, feel free to open an issue at GitHub

Deno

Server-Side Rendering with Deno

HTML

A Vue html component to wrap emails.