Simple way to build email templates in vue.
Important
Experimental and under heavy development. APIs are subject to change.
- ๐งฉ Build email templates with Vue components
- ๐ค๏ธ SSR support, preview/send emails both on server and client.
- ๐ i18n support
- ๐จ Integrates with many email providers
- ๐งช Tested against popular email clients
- ๐จ Supports Tailwind CSS
- ๐ First-class support for Nuxt 3
- โจ Written in TypeScript
# pnpm
pnpm add -D vue-email
# npm
npm i -D vue-email
// components/template-email.vue
<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>
<script setup>
import { EButton, EHr, EHtml, EText } from 'vue-email';
import { ref } from 'vue';
const user = ref('Dave');
</script>
You can see the full example here
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);
- Clone this repository
- Enable Corepack using
corepack enable
- Install dependencies using
pnpm install
If you like our work, please feel to free to support us!
- BTC:
1Bwo1Htd47rLRM4PZhydWtoC5ZAR4Fv9KZ
- USDT: binance-qr
This project is inspired by react-email
This project is licensed under MIT