2

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.

Improve this question
5
  • What you're looking for is the equivalent of app.html in Nuxt2. You can give a try to that one for Nuxt3. Commented Nov 22, 2022 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... Commented Nov 22, 2022 at 13:44
  • 1
    You can also use this approach or that one depending on your needs. Injecting that kind of code is always a bit messy and an NPM package is always preferred. Commented Nov 22, 2022 at 13:54
  • Thanks @kissu — I'll try those and report back Commented Nov 22, 2022 at 15:01
  • 1
    See answer here about adding metrics raw JS scripts to pages: stackoverflow.com/questions/65713431/… Commented Nov 23, 2022 at 10:33

1 Answer 1

Reset to default
5

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 : enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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, <Script></Script> works in the <template> but throws a warning in the console saying Failed to resolve component: Script? Thanks again though everyone! 👍

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.