[Vuejs]-How to integrate mailchimp with nuxt js app?

by

0👍

Open up your nuxt.config.js file, and search for the head object. You can add your third party scripts there like this:

// nuxt.config.js
module.exports = {
  head: {
    title: 'My title',
    // etc.
    script: [
      { src: "//downloads.mailchimp.com/js/signup-forms/popup/embed.js" },
      // You can add multiple third-party scripts here
    ]
  },
  // Other stuff
}

Docs: How to use external resources?

I haven’t tested it, but I think, since the other part is just javascript, you can add into your page you wan’t to show it or a layout file (if you want to show it on multiple pages), like this:

// layout/default.vue
<template>
  <!-- Your template -->
</template>

<script>
  require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"XXXXXX","lid":"XXXXXX"}) });
  export default {
    // etc...
  }
</script>

Although the require part might mess things up…

Let me know if this works!

👤mywebstuff.hq

0👍

Insert the MailChimp code inside the <head>

  head() {
    return {
      script: [
        {
          type: "text/javascript", // mailchimp universal script
          src:
            "//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js",
          "data-dojo-config": "usePlainJson: true, isDebug: false"
        },
        {
          type: "text/javascript", // mailchimp script for specific popup form
          innerHTML: this.getMailchimp
        }
      ],
      __dangerouslyDisableSanitizers: ["script"]
    };
  },

  computed: {
    getMailchimp() {
      if (process.client) {
        return JSON.stringify(
          window.dojoRequire(["mojo/signup-forms/Loader"], function(L) {
            L.start({
              baseUrl: "your base url",
              uuid: "your uuid",
              lid: "your lid",
              uniqueMethods: true
            });
          })
        );
      }
    }
  }
👤Mark Perez

Leave a comment