Nuxt.js: Using external scripts?

[antcook]

I'm looking to integrate a custom Stripe payment page into a Nuxt project. In their docs it says to include their library via a script tag in your page head/footer:

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

How would I handle this with Nuxt seen as their docs states that "Stripe.js should always be loaded directly from this URL: https://js.stripe.com/v2/", my first instinct was to just drop a script tag in my default layout template but this doesn't seem to work?

Is there a way I can do this correctly?

_{This question is available on Nuxt.js community (#c205)}

[Atinux]

Hi @antcook

Take a look at https://nuxtjs.org/faq

So can do in your nuxt.config.js (or in your layout):

head: {
  script: [
      { src: 'https://js.stripe.com/v2/' }
  ]
}

[antcook]

Ah, fantastic. Thank you! :)

[binggg]

@Atinux
Put script in head is not good for loading performance. It will delay first screen time, especially ssr pages.

[andrade1379]

How can one add scripts to the footer of a Nuxt project?

[Atinux]

Hi @andrade1379

You can use the body: true attribute with the latest version of Nuxt.js, see https://github.com/declandewet/vue-meta#script-object

Example:

{
  head: {
    script: [
      { innerHTML: 'console.log("I am in body");', type: 'text/javascript', body: true }
    ]
  }
}

[Isa79]

@Atinux Hi, how would you add google adsense?

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    script: [
      { src: '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' }
    ]

but where do you put async?

[NicoPennec]

@Isa79
think to look in the resolved nuxt issues: https://github.com/nuxt/nuxt.js/issues/2437

    script: [
      { src: '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', async: true }
    ]

[purrplingcat]

InnerHTML not works in nuxt 1.3.0. JS is escaped.

location.href = \"/oldbrowser.html\"

<script data-n-head="true" type="text/javascript">if (!self.Promise || !self.WeakSet || !self.Proxy || !Array.prototype.slice || !Object.values) { location.href = &quot;/oldbrowser.html&quot; }</script>

script: [
      { innerHTML: 'if (!self.Promise || !self.WeakSet || !self.Proxy || !Array.prototype.slice || !Object.values) { location.href = \'/oldbrowser.html\' }', type: 'text/javascript' }
    ]

[pi0]

I also confirm @EllenFawkes :D /cc @Atinux

[Atinux]

Hi @EllenFawkes

This is to avoid XSS attack, it's a feature of vue-meta, if you want to disable the sanitizer, you can use __dangerouslyDisableSanitizersByTagID:

head: {
  script: [
    { hid: 'oldbrowser', innerHTML: 'if (!self.Promise || !self.WeakSet || !self.Proxy || !Array.prototype.slice || !Object.values) { location.href = \'/oldbrowser.html\' }', type: 'text/javascript' }
  ],
  __dangerouslyDisableSanitizersByTagID: {
    oldbrowser: 'innerHTML'
  }
}

/cc @pi0

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.