Building and Testing Email Templating Using Vue

Recently, I was working on a custom eCommerce application, and got to the stage where I needed to design and build a checkout email. Naturally, my first decision was what templating language to use.

I’ve used Pug, Handlebars, and plain old JavaScript template strings for email templating in the last few years. I even once tried to use React + JSX for HTML email templates, but found it a bit too cumbersome to add a transpiler for just one file. This time, I wanted to write the template in vanilla HTML, so I decided to use Vue for templating.

The above code uses vue-server-renderer’s `renderToString()` function, which renders the current state of the Vue app as an HTML string.

Vue has some neat advantages over the other HTML templating tools I’ve used. The number one killer feature is that the email template, `checkout.html`, is a plain old HTML file that works in the browser without any extra work. Below is what `checkout.html` looks like. You can open the below file in Chrome and it looks roughly like what it would look like in a real email client.

The fact that `checkout.html` is plain old HTML comes with two great consequences. First, unlike with template strings, you get syntax highlighting for free. Second, unlike with Handlebars, Pug, or JSX, a designer can work on the email template without having any knowledge of JavaScript.

One of the hardest parts of building email templates is remembering all the quirky best practices of HTML emails:

The beauty of JavaScript is that there’s an easy-to-use solution for most problems. I use the inline-css npm module to handle inlining CSS in the above example. I also ran a one-off script using sharp to convert SVG social media icons into PNGs.

Testing how emails look in different clients is trickier. The gold standard of email testing is Litmus, which lets you test how your email will render on dozens of different clients. Litmus is powerful, but expensive - it starts at $99/mo, with no free tier.

My alternative approach is to instead write a Mocha test that sends a test checkout email to my Gmail and Outlook accounts. Those are the email services that my clients use, so this ensures the clients are happy, and I figure if the email looks good on 2 common clients (both mobile and desktop), it will probably look fine on most others.

I don’t run this test with my normal test suite, it’s just a handy script to run when I’m iterating on the email.