How to use MailChimp popup subscriber form in Nuxt.js?

Recently, I created my course Building Krypton — crypto currency tracker using vue.js and used Nuxt.js to build a static landing-page for the course.

Everything went well, till I wanted to integrate MailChimp popup subscribe feature on the course landing-page for visitors to subscribe for updates.

Popup form in bottom-right corner, is what I was trying to build on my landing-page. Visit http://krypton-tutorials.surge.sh/ to see the popup (and subscribe!)

I went ahead and built my popup subscriber form in MailChimp and got the code to embed in HTML. Since I’m using Nuxt.js, there is no index.html file available in Nuxt project because it is generated by Nuxt dynamically with relevant css and script files.

I started searching for possible solution on Google, Stack Overflow and online forums but none of the solution worked because they were meant to be used with jQuery and WordPress websites.

So, here is my solution to use MailChimp popup subscriber form in Nuxt project.

Step 1: Get the popup subscriber form code from MailChimp and that would look something like below.

<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us12.list-manage.com","uuid":"20ea756acb03e3d13e0f6","lid":"e3d459"}) })</script>

In above code only 3 things are of our interest baseUrl, uuid, lid; so note down their values.

Step 2: In your Nuxt.js project, open the layouts folder and open default.vue then open the file and paste the following code in the file.

In the following code, contents of template section could be different based on your project. However script section is where all the magic is happening.

In setupMailchimpPopup, replace the values of baseUrl, uuid and lid MailChimp configuration variables which you have noted in step 1 from MailChimp popup form builder.

layouts/default.vue

Use mounted lifecycle method of vue.js to ensure that DOM is ready before we execute our code. In setupMailchimpPopup method, create MailChimp configuration variables.

// Configuration variables for mailchimp popup
var mailchimpConfig = {
baseUrl: 'mc.us12.list-manage.com',
uuid: '20ea756acb03e3d13e0f6',
lid: 'e3d459'
};

Create a dynamic script tag for MailChimp popup loader script as below.

var chimpPopupLoader = document.createElement("script");
chimpPopupLoader.src = '//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js';
chimpPopupLoader.setAttribute('data-dojo-config', 'usePlainJson: true, isDebug: false');

After that, create another dynamic script tag for actual MailChimp popup. You can also use configuration variables in the function so that popup will send the subscriber data to correct MailChimp list.

var chimpPopup = document.createElement("script");
chimpPopup.appendChild(document.createTextNode('require(["mojo/signup-forms/Loader"], function (L) { L.start({"baseUrl": "' + mailchimpConfig.baseUrl + '", "uuid": "' + mailchimpConfig.uuid + '", "lid": "' + mailchimpConfig.lid + '"})});'));

Now, let’s ensure chimpPopup script is loaded only after chimpPopupLoader script is loaded in DOM. Use onload function on chimpPopupLoader to append our chimpPopup script in DOM. And after that append chimpPopupLoader to the DOM.

Now, when default layout is rendered in the browser, it will append chimpPopupLoader script immediately to the DOM. And once the script is loaded, it will load chimpPopup script in the DOM.

chimpPopupLoader.onload = function() {
document.body.appendChild(chimpPopup);
}
document.body.appendChild(chimpPopupLoader);

Once all of the above is setup, save the layout file and run your project using the following command. You will see MailChimp popup displayed.

$ npm run dev

Let me know in the comments below, if my solution above was helpful to you.