mailpeek is the only Vue-native email toolkit. Build cross-client emails with 14 type-safe components and server-side rendering, then preview across Gmail, Outlook, and dark mode. Compatibility scoring, WCAG accessibility checks, and CSS filtering — enterprise features that SaaS tools charge hundreds for, free and open source.
mailpeek is the only Vue-native toolkit for both building and previewing HTML emails. It provides two focused packages: @mailpeek/preview for visualising how emails render across different clients and devices, and @mailpeek/components for composing emails with type-safe, SSR-compatible Vue components. Completely free and open source.
render() function.npm install @mailpeek/preview
<script setup lang="ts">
import { EmailPreview } from '@mailpeek/preview'
import '@mailpeek/preview/style.css'
const emailHtml = `
<html>
<head>
<title>Welcome to Our Service</title>
</head>
<body>
<h1>Hello!</h1>
<p>Thanks for signing up.</p>
</body>
</html>
`
</script>
<template>
<EmailPreview :html="emailHtml" />
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
html | string | undefined | Raw email HTML to preview |
width | string | '600px' | CSS width for the preview container |
client | 'gmail' | 'outlook' | 'raw' | 'gmail' | Email client to preview |
mobile | boolean | false | Enable mobile chrome variant |
deviceWidth | 'mobile' | 'tablet' | 'desktop' | 'desktop' | Device width preset |
<template>
<EmailPreview
:html="emailHtml"
@client-change="onClientChange"
@device-change="onDeviceChange"
/>
</template>
<script setup lang="ts">
function onClientChange(client: string) {
console.log('Switched to:', client)
}
function onDeviceChange(device: string) {
console.log('Device changed to:', device)
}
</script>
@mailpeek/preview filters CSS properties that are unsupported by the selected email client and logs a console warning for each property removed:
[mailpeek] Gmail Web: removed "position: fixed" — Gmail does not support CSS positioning
Compatible with all modern browsers that support ES2020 and CSS Custom Properties.
npm install @mailpeek/components
Build a complete email using the component primitives:
<script setup lang="ts">
import {
EmailHtml, EmailHead, EmailBody, EmailContainer,
EmailSection, EmailHeading, EmailText, EmailButton,
EmailPreviewText,
} from '@mailpeek/components'
</script>
<template>
<EmailHtml>
<EmailHead>
<EmailPreviewText>Thanks for signing up — here's what's next.</EmailPreviewText>
</EmailHead>
<EmailBody>
<EmailContainer>
<EmailSection>
<EmailHeading>Welcome aboard</EmailHeading>
<EmailText>Thanks for creating an account. We're glad to have you.</EmailText>
<EmailButton href="https://example.com/get-started">
Get started
</EmailButton>
</EmailSection>
</EmailContainer>
</EmailBody>
</EmailHtml>
</template>
Use the render() function to generate an HTML string from any email component:
import { render } from '@mailpeek/components'
import WelcomeEmail from './WelcomeEmail.vue'
const html = await render(WelcomeEmail, { name: 'Aoife' })
// html is a fully rendered HTML string ready to send
| Component | Description |
|---|---|
EmailHtml | Root element, renders the <html> tag |
EmailHead | Renders the <head> tag |
EmailBody | Renders the <body> tag |
EmailContainer | Centred layout wrapper |
EmailSection | Full-width section block |
EmailRow | Horizontal row within a section |
EmailColumn | Column within a row |
EmailHeading | Heading element (h1–h6) |
EmailText | Paragraph text |
EmailButton | Call-to-action button with a link |
EmailImage | Image with email-safe defaults |
EmailLink | Inline hyperlink |
EmailDivider | Horizontal rule / divider |
EmailPreviewText | Hidden preview text shown in inbox snippet views |
mailpeek is designed to make email development in Vue feel like any other component-driven workflow — from composing the template to previewing it in context. For full documentation and examples, visit mailpeek.dev.
No comments yet.
Sign in to be the first to comment.