Ryggs / vue-email

Write email templates with vue

💌 vue-email

Simple way to build email templates in vue.

• ✨  Release Notes
• 📖  Read the documentation
• 💚  Nuxt Module

Features

• 🧩 Build email templates with Vue components
• 🛤️ SSR support, Runs on the server and client
• 📨 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

# pnpm
pnpm add -D vue-email

# npm
npm i -D vue-email

Basic Usage

📖 Read the documentation

// 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

Advanced Usage - SSR

📖 Read the SSR documentation

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);

💻 Development

1. Clone this repository
2. Enable Corepack using corepack enable
3. Install dependencies using pnpm install

🛟 Support

If you like our work, please feel to free to support us!

• BTC: 1Bwo1Htd47rLRM4PZhydWtoC5ZAR4Fv9KZ
• USDT: binance-qr

Contributors

Repo Activity

📝 Annotations

This project is inspired by react-email

License

This project is licensed under MIT