Creating Responsive Emails with Vue.js and MJML

MJML is a modern email tool that enables developers to create stunning emails that are beautiful, responsive, and work across all devices and mail clients. This markup language was designed to take the pain out of writing responsive emails.

Its semantic syntax makes it easy to use. It also has feature-rich standard components that reduce development time. In this tutorial, we will use MJML to build beautiful responsive emails and test them on multiple email clients.

Start MJML

You can install MJML using npm to use it with Node.js or the CLI:

$ npm install -g mjml

Structuring our email

First, create a file called email.mjml, although you can choose any other name. Once the files are created, our responsive email will be divided into the following sections:

Company header
Image header
Email Introduction
Column section
icon
Social Icons

Columns

These sections are the framework for our responsive emails. As shown above, our email will be divided into six sections in our email.mjml file:

<mjml>
 <mj-body>
  <!-- Company Header -->
  <mj-section background-color="#f0f0f0"></mj-section>
  <!-- Picture Header -->
  <mj-section background-color="#f0f0f0"></mj-section>
  <!-- Email Introduction-->
  <mj-section background-color="#fafafa"></mj-section>
  <!-- Column section-->
  <mj-section background-color="white"></mj-section>
  <!-- Icon -->
  <mj-section background-color="#fbfbfb"></mj-section>
  <!-- Social Icons -->
  <mj-section background-color="#f0f0f0"></mj-section>
 </mj-body>
</mjml>

As you can see above, we are using two MJML components: mj-body and mj-section. mj-body defines the starting point of our email, while mj-section defines a section that contains other components.

For each section defined, a background-color property with the respective hexadecimal value is also defined.

Company Header

This section of our email contains only our company/brand name in a center banner position:

<!-- Company Header -->
<mj-section background-color="#f0f0f0">
 <mj-column>
  <mj-text font-style="bold"
    font-size="20px"
    align="center"
    color="#626262">
  Central Park Cruise
  </mj-text>
 </mj-column>
</mj-section>

The mj-column component is used to define a column. The mj-text component is used for our text content and takes style properties such as font style, font size, color, etc.

Image Header

In this section, we will have a background image and a piece of text that should represent our company slogan. We will also have a call to action button that leads to a page with more detailed information.

To add an image title, you have to replace the background-color of that section with background-url. Similar to the first heading, you will have to center the text both vertically and horizontally, leaving the padding the same.

The href of the button sets the position of the button. To make the background appear full width in the column, set the column width to 600px, width="600px" .

This section of our email will only contain a center banner placement of our company/brand name.

<!-- Image Header -->
<mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2Fwww.trbimg.com%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055"
      background-size="cover"
      background-repeat="no-repeat">
 <mj-column width="600px">
  <mj-text align="center"
       color="#fff"
       font-size="40px"
       Christmas Discount
  <mj-button background-color="#F63A4D" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   See Promotions
  </mj-button>
 </mj-column>
</mj-section>

To use an image header, we'll add a background-url property to the jms-section component and then style the image using the background-size and background-repeat properties.

For our slogan text block, we use the align property to center the text both horizontally and vertically. You can also set the text color, font size, font family, etc. according to your needs.

The call-to-action button is implemented using the mj-button component. The background-color property allows us to specify the background color of the button, and then we use href to specify the location of the link or page.

Email Introduction

The intro text will consist of a title, body text, and a call to action.

<!-- Intro text -->
<mj-section background-color="#fafafa">
 <mj-column width="400px">
  <mj-text font-style="bold"
       font-size="20px"
       font-family="Helvetica Neue"
       Ultimate Christmas Experience
  <mj-text color="#525252">
   I am afraid that the water will not evaporate, which will cause the skin to swell. The sap is so strong that it can be easily absorbed. The sap is so strong that it can be easily absorbed.
  </mj-text>
  <mj-button background-color="#F45E43" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Learn more</mj-button>
 </mj-column>
</mj-section>

Column section

In this email section, we will have two columns: one is a descriptive image, and the second is our text block, which will complement the image in the first section.

<!-- Side image -->
<mj-section background-color="white">
 <!-- Left image -->
 <mj-column>
  <mj-image width="200px"
       src="https://navis-consulting.com/wp-content/uploads/2019/09/Cruise1-1.png"/>
 </mj-column>
 <!-- right paragraph -->
 <mj-column>
  <mj-text font-style="bold"
       font-size="20px"
       font-family="Helvetica Neue"
       color="#626262">
   Amazing Experiences
  </mj-text>
  <mj-text color="#525252">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Because the rut is so efficient, it is very effective. 
   Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus 
   lectus.
  </mj-text>
 </mj-column>
</mj-section>

The first column on the left uses the mj-image component to specify the image to use. The image can be a local file or, in our case, a remotely hosted image.

The second column on the right contains two blocks of text, one for our title and the other for the main body text.

icon

The icons section will be divided into three columns. You can also add more content, depending on how you want the email to look.

<!-- Icons -->
<mj-section background-color="#fbfbfb">
 <mj-column>
  <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" />
 </mj-column>
 <mj-column>
  <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" />
 </mj-column>
 <mj-column>
  <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" />
 </mj-column>
</mj-section>

Each column has its own mj-image component, which is used to render the icon image.

Social Icons

This section will contain icons pointing to our social media accounts.

<mj-section background-color="#e7e7e7">
 <mj-column>
  <mj-social>
   <mj-social-element name="instagram" />
  </mj-social>
 </mj-column>
</mj-section>

MJML comes with the mj-social component which can be easily used to display social media icons. In our emails we used the Twitter mj-social-element.

Putting it all together

At this point, we have implemented all the parts, and the complete email.mjml should look like this:

<mjml>
 <mj-body>
  <!-- Company Header -->
  <mj-section background-color="#f0f0f0">
   <mj-column>
    <mj-text font-style="bold"
         font-size="20px"
         align="center"
         color="#626262">
     Central Park Cruises
    </mj-text>
   </mj-column>
  </mj-section>
  <!-- Image Header -->
  <mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2Fwww.trbimg.com%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055"
        background-size="cover"
        background-repeat="no-repeat">
   <mj-column width="600px">
    <mj-text align="center"
         color="#fff"
         font-size="40px"
         Christmas Discount
    <mj-button background-color="#F63A4D" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     See Promotions
    </mj-button>
   </mj-column>
  </mj-section>
  <!-- Email Introduction -->
  <mj-section background-color="#fafafa">
   <mj-column width="400px">
    <mj-text font-style="bold"
         font-size="20px"
         font-family="Helvetica Neue"
         Ultimate Christmas Experience
    <mj-text color="#525252">
     I am afraid that the water will not evaporate, which will cause the skin to swell. The sap is so strong that it can be easily absorbed. The sap is so strong that it can be easily absorbed.
    </mj-text>
    <mj-button background-color="#F45E43" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Learn more</mj-button>
   </mj-column>
  </mj-section>
  <!-- Columns section -->
  <mj-section background-color="white">
   <!-- Left image -->
   <mj-column>
    <mj-image width="200px"
         src="https://navis-consulting.com/wp-content/uploads/2019/09/Cruise1-1.png"/>
   </mj-column>
   <!-- right paragraph -->
   <mj-column>
    <mj-text font-style="bold"
         font-size="20px"
         font-family="Helvetica Neue"
         color="#626262">
     Amazing Experiences
    </mj-text>
    <mj-text color="#525252">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Because the rut is so efficient, it is very effective. 
     Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus 
     lectus.
    </mj-text>
   </mj-column>
  </mj-section>
  <!-- Icons -->
  <mj-section background-color="#fbfbfb">
   <mj-column>
    <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" />
   </mj-column>
   <mj-column>
    <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" />
   </mj-column>
   <mj-column>
    <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" />
   </mj-column>
  </mj-section>
  <!-- Social icons -->
  <mj-section background-color="#e7e7e7">
   <mj-column>
    <mj-social>
     <mj-social-element name="instagram" />
    </mj-social>
   </mj-column>
  </mj-section>
 </mj-body>
</mjml>

Running our application

Now that we have finished building our email, we can go ahead and compile it to see what it looks like. To do this, we type the following into the terminal:

mjml -r email.mjml -o .

-r: Allow MJML to read and compile our mjml files
-o .: tells MJML to save the compiled mjml output to the same directory

Once MJML has finished compiling, you should now see an email.html file in the same directory. Open it with your favorite email client or browser and it should look similar to the image below:

Summarize

As we've just seen, MJML helps us generate high-quality, beautiful HTML emails that are responsive across multiple browsers and clients.

This is the end of this article about using Vue.js and MJML to create responsive emails. For more information about using Vue.js and MJML to create responsive emails, please search for previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: