CODEWITHSUNDEEP
javascriptvue.jsvuejs2nuxt.js
Yasin Okumuş
Yasin Okumuş

Reputation: 2398

How to put a simple JS widget/gadget block on a Nuxtjs?

Some services like Google Analytics or Statcounter give a basic code to add to the website. What is the best way to integrate this type script blocks to the Nuxtjs based webapps/sites?

An example code block from Statcounter to add Nuxtjs;

<!-- Default Statcounter code for project
http://www.example.com -->
<script type="text/javascript">
var sc_project=1234567; 
var sc_invisible=1; 
var sc_security="abcdefg"; 
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="https://statcounter.com/" target="_blank"><img
class="statcounter"
src="https://c.statcounter.com/1234567/0/abcdefg/1/"
alt="Web Analytics"></a></div></noscript>
<!-- End of Statcounter Code -->

Upvotes: 0

Views: 1512

Answers (1)

wrahim
wrahim

Reputation: 1168

You can add external resources using the nuxt.config.js: https://nuxtjs.org/faq/#global-settings

For example:

// nuxt.config.js

export default {
  head: {
    script: [
      { src: 'https://www.statcounter.com/counter/counter.js', async: true },
      { src: '/customscript.js' } // customscript.js located in "static/" directory
    ]
  }
}

You can also add these in a component. For example, if the <noscript> has to go in the body, you can add body: true: https://github.com/nuxt/nuxt.js/blob/dev/examples/meta-info/pages/index.vue#L18

Upvotes: 2

Related Questions