vue-email

💌 Write email templates with vue

vue-email

💌 vue-email

npm versionnpm downloadslicensedocs

Simple way to build email templates in vue.

Features

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