mailpeek is a powerful email preview and testing toolkit specifically designed for Vue.js. It allows users to simulate email rendering in popular clients like Gmail and Outlook, ensuring emails look perfect across devices. With features like metadata extraction, device responsiveness, and zero dependencies, it's an invaluable tool for developers seeking to enhance their email workflows.
mailpeek is a powerful Vue.js email preview and testing toolkit designed to help developers visualize how their emails will render across different platforms, specifically in Gmail, Outlook, and more. This robust component offers a range of features to enhance the email development process.
Key Features
- Email Client Simulation: Accurately preview emails as they are displayed in Gmail and Outlook, with built-in CSS filtering to ensure a realistic rendering.
- Responsive Device Preview: Easily toggle between mobile (375px), tablet (768px), and desktop views to ensure designs are optimized across devices.
- Email Metadata Extraction: Automatically pulls in the subject line, preview text, and file size for added context and usability.
- File Size Warnings: Alerts when email content exceeds Gmail's 102KB clipping threshold to help avoid truncated messages.
- Zero Dependencies: Only requires Vue 3 as a peer dependency, making integration seamless.
- TypeScript Support: Full type definitions included for enhanced development experience.
- SSR Compatibility: Fully functional with Nuxt 3 for server-side rendering scenarios.
Getting Started
Utilizing mailpeek is straightforward. The following code snippet demonstrates how to integrate the component into your Vue application:
<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>
Customization Options
The EmailPreview component supports various props to tailor the preview experience:
| 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 simulate |
mobile | boolean | false | Enable mobile chrome variant |
deviceWidth | 'mobile' | 'tablet' | 'desktop' | 'desktop' | Device width preset |
Event Listeners
Respond to user interactions with included event listeners:
<template>
<EmailPreview
:html="emailHtml"
@client-change="onClientChange"
@device-change="onDeviceChange"
/>
</template>
<script setup lang="ts">
function onClientChange(client) {
console.log('Switched to:', client);
}
function onDeviceChange(device) {
console.log('Device changed to:', device);
}
</script>
CSS Compatibility and Warnings
mailpeek automatically filters CSS properties unsupported by Gmail and Outlook. Developers receive console warnings regarding removed properties, enhancing clarity during email design:
[mailpeek] Gmail Web: removed "position: fixed" — Gmail does not support CSS positioning
Modern Browser Support
mailpeek is fully compatible with all modern browsers that support ES2020 and CSS Custom Properties, ensuring a wide range of usability.
This toolkit is designed to simplify the email creation process while ensuring emails look great across all platforms and devices, making it an essential component for any developer focused on delivering high-quality email experiences.
No comments yet.
Sign in to be the first to comment.