💌 vue-email

Simple way to build email templates in vue.

!IMPORTANT
Experimental and under heavy development. APIs are subject to change.

Features

🧩 Build email templates with Vue components
🛤️ SSR support, preview/send emails both on server and client, now with support for deno and bun.
🌍 i18n support
📨 Integrates with many email providers
🧪 Tested against popular email clients
🎨 Supports Tailwind CSS
🚚 First-class support for Nuxt 3
✨ Written in TypeScript

Setup

📖 Read the documentation

# pnpmpnpm add -D vue-email# npmnpm i -D vue-email

Basic Usage

📖 Read the documentation

// components/template-email.vue<script setup>import { EButton, EHr, EHtml, EText } from 'vue-email';import { ref } from 'vue';   const user = ref('Dave');</script><template>   <e-html lang="en">      <e-text>Hello, {{ user }}!</e-text>      <e-hr />      <e-button href="vuejs.org">Visit vue</e-button>   </e-html></template>

You can see the full example here

Advanced Usage - SSR

📖 Read the SSR documentation

For SSR, you need to install @vue-email/compiler, now compiler with support for deno, and bun.

import express from "express";import { config } from "@vue-email/compiler";const app = express();const vueEmail = config("./templates", {  verbose: false,  options: {    baseUrl: "https://vue-email-demo.vercel.app/",  },});app.get("/", async function (req, res) {  const template = await vueEmail.render("WelcomeEmail.vue", {    props: {      name: "John Doe",    },  });  res.send(template);});app.listen(3000);