Nuxt

Quick Start

1. Install @vue-email/nuxt dependency to your project:

pnpm add @vue-email/nuxt

2. Add it to your modules section in your nuxt.config:

export default defineNuxtConfig({
  modules: ['@vue-email/nuxt']
})

That's it! You can now use all the components and composables in your Nuxt app ✨

Options

Configure options in your nuxt.config.ts as such:

export default defineNuxtConfig({
  modules: ['@vue-email/nuxt'],
  vueEmail: {
    baseUrl: 'https://vue-email-demo.vercel.app/',
    autoImport: true,
  }
})

Server API

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',
  }
})

// returns { html: '...', text: '...' }

template will contain both the rendered HTML and the text version of the email.

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

Example

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

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.

Bugs and Issues

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

Edge

To use the latest updates pushed on the dev branch, you can use @vue-email/nuxt-edge.

Update your package.json to the following:

{
  "devDependencies": {
-   "@vue-email/nuxt": "^0.8.0-beta.2"
+   "@vue-email/nuxt": "npm:@vue-email/nuxt-edge@latest"
  }
}

Then run pnpm install, yarn install or npm install.