Building a Gmail/Outlook email preview component for Vue

If you have ever built transactional emails in a Vue app, you have probably hit the same wall. You...

If you have ever built transactional emails in a Vue app, you have probably hit the same wall. You write the HTML, send a test, open it in Gmail, and half your styling is gone. Then you open it in Outlook and it looks like it was rendered in 2003.

The React ecosystem has react.email, which gives you components, a preview server, and a whole development workflow. Vue has nothing equivalent. There is a thin wrapper around Unlayer that requires an account, an abandoned MJML builder with zero dependents on npm, and a lot of Stack Overflow threads telling you to just use Litmus.

I'm on a mission to improve this workflow for Vue developers, starting with @mailpeek/preview.

What it does

It is a single Vue 3 component that renders your email HTML in an isolated iframe, simulating how Gmail and Outlook actually handle it, including their CSS restrictions.

npm install @mailpeek/preview

<script setup lang="ts">
import { EmailPreview } from '@mailpeek/preview'
import '@mailpeek/preview/style.css'
</script>

<template>
  <EmailPreview :html="yourEmailHtml" />
</template>

You get a Gmail chrome preview, a client switcher, a mobile and desktop toggle, and metadata extraction including subject line, preheader text, and file size, all out of the box.

How the CSS filtering works

The biggest challenge was simulating what each email client actually does to your CSS.

Gmail strips a surprising amount. No position, no transform, no animation, no box-shadow, no CSS Grid, no flexbox sub-properties. It also strips external stylesheets and @import rules entirely.

Outlook desktop (the Word engine versions from 2016 to 2021) is worse. Everything Gmail strips, plus border-radius, display: flex, background-size, max-width, and min-width.

Mailpeek processes your HTML through a CSS filter before rendering it in the iframe. If your email uses border-radius: 8px and you switch to Outlook mode, the property is stripped and a warning appears in the console:

[mailpeek] Outlook: removed "border-radius: 8px" — Outlook Word renderer does not support border-radius

The filter is regex-based with no DOM dependency, making it fully SSR-safe and compatible with Nuxt 3. The restriction lists are sourced from the Google Developers Gmail CSS documentation and caniemail.com.

What it does not do yet

It is not a replacement for Litmus or Email on Acid. It will not catch every rendering quirk, it does not simulate VML for Outlook, and it does not account for every edge case in every client version. Think of it as a linter that catches obvious issues during development rather than a screenshot testing service.

Dark mode simulation for Gmail, Apple Mail, and Outlook is the next thing on the roadmap.

Try it out!

Live Demo · GitHub

npm install @mailpeek/preview

Zero runtime dependencies beyond Vue 3. TypeScript types included.

If you build HTML emails in Vue and have thoughts on what is missing, I would love to hear them in the comments or as a GitHub issue.