Docs
Installation

Install Visitors on Nuxt.js

Nuxt.js provides several built-in methods for adding third-party scripts. Here are the recommended approaches for integrating Visitors analytics.

Using nuxt.config.ts

The cleanest approach is to add the script in your Nuxt configuration file.

Replace YOUR_TOKEN with your project token.

nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://cdn.visitors.now/v.js',
          'data-token': 'YOUR_TOKEN',
          defer: true
        }
      ]
    }
  }
})

Using useHead Composable

You can add the script using Nuxt's useHead composable in your app.vue or layout:

app.vue
<script setup>
  useHead({
    script: [
      {
        src: 'https://cdn.visitors.now/v.js',
        'data-token': 'YOUR_TOKEN',
        defer: true,
        tagPosition: 'head'
      }
    ]
  })
</script>

<template>
  <div>
    <NuxtPage />
  </div>
</template>

Using Nuxt Script Module

If you have @nuxt/scripts installed, you can use it for better script management:

app.vue
<script setup>
  useScript('https://cdn.visitors.now/v.js', {
    'data-token': 'YOUR_TOKEN',
    defer: true,
    trigger: 'onNuxtReady'
  })
</script>

<template>
  <div>
    <NuxtPage />
  </div>
</template>

Plugin approach

Create a plugin for more control over the script loading:

plugins/visitors.client.ts
export default defineNuxtPlugin(() => {
  const script = document.createElement('script')
  script.src = 'https://cdn.visitors.now/v.js'
  script.setAttribute('data-token', 'YOUR_TOKEN')
  script.async = true
  script.defer = true
  document.head.appendChild(script)
})