Docs
Installation

Install Visitors on Vue.js

For Vue.js applications, you can integrate Visitors analytics in your app using several approaches.

Replace YOUR_TOKEN with your project token.

Simplest approach

The simplest approach is to add the script tag directly to your public/index.html file.

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue App</title>
    <script 
      src="https://cdn.visitors.now/v.js" 
      data-token="YOUR_TOKEN">
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Using Vue Meta

If you're using Vue Meta for managing document head:

App.vue
<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  metaInfo: {
    script: [
      {
        src: 'https://cdn.visitors.now/v.js',
        'data-token': 'YOUR_TOKEN',
        async: true,
        defer: true
      }
    ]
  }
})
</script>

Dynamic loading

For dynamic script loading in your main Vue component:

App.vue
<script setup>
import { onMounted, onUnmounted } from 'vue'

let scriptElement = null

onMounted(() => {
  const script = document.createElement('script')
  script.src = 'https://cdn.visitors.now/v.js'
  script.setAttribute('data-token', 'YOUR_TOKEN')
  script.async = true
  
  document.head.appendChild(script)
  scriptElement = script
})

onUnmounted(() => {
  if (scriptElement) {
    document.head.removeChild(scriptElement)
  }
})
</script>

<template>
  <div>
    <!-- Your app content -->
  </div>
</template>