
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 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.cs
Continue reading on Dev.to Webdev
Opens in a new tab



