Build and send emails with Vue. A Vue 3 component library for crafting
responsive HTML emails, with feature parity to
react-email. The package also
re-exports the @vuemailer/render
engine, so render is available straight from vuemailer.
pnpm add vuemailer<!-- emails/welcome.vue -->
<script setup lang="ts">
import { Body, Button, Container, Head, Html, Text } from 'vuemailer'
defineProps<{ name: string }>()
</script>
<template>
<Html lang="en">
<Head />
<Body :style="{ backgroundColor: '#f6f9fc', fontFamily: 'sans-serif' }">
<Container>
<Text>Hi {{ name }}, welcome aboard!</Text>
<Button
href="https://example.com"
:style="{ background: '#2563eb', color: '#fff', padding: '12px 20px' }"
>
Get started
</Button>
</Container>
</Body>
</Html>
</template>import { render } from 'vuemailer'
import Welcome from './emails/welcome.vue'
const html = await render(Welcome, { name: 'Ada' }, { pretty: true })
const text = await render(Welcome, { name: 'Ada' }, { plainText: true })Html, Head, Body, Container, Section, Row, Column, Heading,
Text, Link, Button, Img, Hr, Font, Preview, Markdown,
CodeInline, and Tailwind — write Tailwind utility
classes and have them inlined into email-safe CSS (built on react-email's
Tailwind v4 + css-tree engine).
CodeBlock is published under a separate entry point so the rest of the library
doesn't pull in prismjs. It's an optional peer
dependency — install it only if you use CodeBlock:
pnpm add prismjsimport { CodeBlock } from 'vuemailer/code-block'@vuemailer/render— the SSR rendering engine.@vuemailer/cli— a live-preview dev server.
MIT. Derived from react-email and vue-email (both MIT) — see Credits.