Server Compiler | Vue Email

Introduction

Vue Email can also be used to render and send emails from the server using the supported runtimes:

Installation

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

pnpm add @vue-email/compiler

Config

The config method takes two arguments, the first is the path to the directory containing the template files, and the second is an optional config object.

Key	Default	Description
`verbose`	`false`	Whether to log the compilation process to the console.
`options`	`{}`	The options to pass to the compiler. Supported Options

import { config } from '@vue-email/compiler'

const vueEmail = config('./templates', {
  verbose: false,
  options: {
    baseUrl: 'https://vue-email-demo.vercel.app/',
  },
})

Render

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

const template = await vueEmail.render('DefineComponent.vue', {
  props: {
    name: 'John Doe',
  },
})

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

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

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

Deno

Deno is slightly different compared to Node and Bun, but with the support for npm, it is now possible to use Vue Email on the server side with Deno.

For this, you need to create the configuration file, and write the following:

deno.json

{
  "imports": {
    "vue": "npm:vue",
    "@vue-email/compiler": "npm:@vue-email/compiler@version"
  },
  "tasks": {
    "dev": "deno run --allow-net --allow-read index.ts"
  }
}

This will enable you to use the Vue Email on the server side without encountering any errors. The library relies on the vue package as a dependency, and if it is not found, an error will be thrown.

Now in your index.ts you can use the package:

index.ts

import { config } from '@vue-email/compiler'
import 'vue'

const vueEmail = config('/templates/path')

async function main() {
  const template = await vueEmail.render('Template.vue')

  console.log(template)
}

main()

Please note that you need to import the vue package in your index.ts file. This allows deno to import it correctly, and ensures that the library works as expected.

Finally you can run with:

deno task dev

Edge

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

Update your package.json to the following:

package.json

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

Then run pnpm install, yarn install or npm install.

Introduction

Consideretions before you start using the SSR feature

Nuxt

Server-Side Rendering with Nuxt