How to integrate mailchimp with nuxt js app?

Question

I'd like to embed the following script into my component in nuxtjs app. But since nuxt has no solution for this. I'd like to ask the vue community to see if there was a better way of embedding external 3rd party js scripts?

Where should I be embedding this type of scipt? And what sort of external configurations do I need to add to enable this to work?

I tried adding directly into my template but it doesn't seem to be working.

<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.us17.list-manage.com","uuid":"XXXXXX","lid":"XXXXXX"}) })</script>

Thanks!

Answer 1

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!