View profile

Building and Testing Email Templating Using Vue

Building and Testing Email Templating Using Vue
By Mastering JS Weekly • Issue #35 • View online
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.

My Vue-based email templating, using Mailgun to send emails
My Vue-based email templating, using Mailgun to send emails
The above code uses vue-server-renderer’s `renderToString()` function, which renders the current state of the Vue app as an HTML string.
Why Vue?
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.
Plain old HTML with <style> tags, nothing fancy about it
Plain old HTML with <style> tags, nothing fancy about it
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.
Working With The Quirks of Email
One of the hardest parts of building email templates is remembering all the quirky best practices of HTML emails:
  • Styles must be inlined, because not all email clients support style tags
  • Images cannot be SVGs, because many email clients don’t support SVG, including gmail.
  • Different clients render emails differently, so you need to test on multiple clients.
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.
Send 2 emails for a final check that the email looks right
Send 2 emails for a final check that the email looks right
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.
Most Recent Tutorials
Other Interesting Reads
Don't be a T-shaped developer, do this instead. 15 takeaways from Cracking the Coding Career | ian geckeler
Did you enjoy this issue?
Mastering JS Weekly

Pragmatic web development. No bloatware allowed!

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue