How to include external javascript [StatCounter] in a Vue Nuxt 3 project?

Question

I need to include the following code in a Nuxt 3 project but I can't seem to get it to work:

<script type="text/javascript">
var sc_project=XXXXXXXX; 
var sc_invisible=1; 
var sc_security="XXXXXXXX"; 
</script>

<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics
Made Easy - Statcounter" href="https://statcounter.com/"
target="_blank"><img class="statcounter"
src="https://c.statcounter.com/XXXXXX/0/XXXXXX/1/"
alt="Web Analytics Made Easy - Statcounter"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
<!-- End of Statcounter Code -->

In Vue (without Nuxt) there is/was an index.html page that I used to place this code in, but there isn't an index.html file in a Nuxt 3 project anymore.

What you're looking for is the equivalent of [`app.html` in Nuxt2](https://stackoverflow.com/a/67535277/8816585). You can give a try to [that one](https://github.com/nuxt/framework/issues/5565#issuecomment-1252879154) for Nuxt3. — kissu, Nov 22 '22 at 12:55
That could work — thank you. But it seems very long-winded for such a simple task. I'm sure there's an easier way that some clever person on here will enlighten me with... — Ben Clarke, Nov 22 '22 at 13:44
You can also use [this approach](https://nuxt.com/docs/api/configuration/nuxt-config#head) or [that one](https://github.com/nuxt/framework/discussions/5283#discussioncomment-2880529) depending on your needs. Injecting that kind of code is always a bit messy and an NPM package is always preferred. — kissu, Nov 22 '22 at 13:54
See answer here about adding metrics raw JS scripts to pages: https://stackoverflow.com/questions/65713431/how-to-add-text-javascript-to-head-in-nuxt — DAVIDhaker, Nov 23 '22 at 10:33

sadeq shahmoradi · Accepted Answer · 2022-12-14T08:40:09.870

useHead()

you can use this in your app.vue file's script:

useHead({
  script: [
    { src: "https://www.statcounter.com/counter/counter.js", body: true },
    {
      children:
        "var sc_project=XXXXXXXX;  var sc_invisible=1;  var sc_security='XXXXXXXX'; ",
      body: true,
    },
  ],
  noscript: [
    {
      children: "<div class='statcounter'><a title='Web Analytics Made Easy - Statcounter' href='https://statcounter.com/' target='_blank'><img class='statcounter' src='https://c.statcounter.com/XXXXXX/0/XXXXXX/1/' alt='Web Analytics Made Easy - Statcounter' referrerPolicy='no-referrer-when-downgrade'></a></div>",
      body: true,
    },
  ],
});

Learn more: https://nuxt.com/docs/getting-started/seo-meta#components

or

app config

use this in your nuxt.config.ts file:

export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: { dir: "ltr", lang: "en" },
      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
      script: [
        { src: "https://www.statcounter.com/counter/counter.js", body: true },
        {
          children: "var sc_project=XXXXXXXX;  var sc_invisible=1;  var sc_security='XXXXXXXX'; ",
          body: true,
        },
      ],
      noscript: [
        {
          children: "<div class='statcounter'><a title='Web Analytics Made Easy - Statcounter' href='https://statcounter.com/' target='_blank'><img class='statcounter' src='https://c.statcounter.com/XXXXXX/0/XXXXXX/1/' alt='Web Analytics Made Easy - Statcounter' referrerPolicy='no-referrer-when-downgrade'></a></div>",
          body: true,
        },
      ],
    },
  },

Learn more: https://nuxt.com/docs/api/configuration/nuxt-config#head

Components

use <NoScript> and <Script> components in your template:

<template>     
   <Script :body="true">
     var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security="XXXXXXXX";
   </Script>
   <Script
     type="text/javascript"
     src="https://www.statcounter.com/counter/counter.js"
     :async="true"
   ></Script>
   <NoScript :body="true">
     <div class="statcounter">
       <a
         title="Web Analytics Made Easy - Statcounter"
         href="https://statcounter.com/"
         target="_blank"
         ><img
           class="statcounter"
           src="https://c.statcounter.com/XXXXXX/0/XXXXXX/1/"
           alt="Web Analytics Made Easy - Statcounter"
           referrerPolicy="no-referrer-when-downgrade"
        /></a>
     </div>
   </NoScript>
</template>

Learn more: https://nuxt.com/docs/getting-started/seo-meta#body-tags

the result will be this :

Thank you for this comprehensive answer. I went with the `useHead()` method in the end and it works perfectly. The only difference is I used `innerHTML` instead of `children` because I saw it somewhere else first. Anyone know the difference? Also, `` works in the ` — Ben Clarke, Nov 23 '22 at 13:06

How to include external javascript [StatCounter] in a Vue Nuxt 3 project?

1 Answers1

useHead()

app config

Components