Vue.js / Nuxt.js

Jetrack works seamlessly with both Vue 3 and Nuxt 3 applications.

Vue 3 with Vite

For Vue 3 projects using Vite, add the script to your 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>
    
    <!-- Jetrack -->
    <script
      async
      defer
      data-website-id="your-unique-id"
      src="https://analytics.brandjet.ai/script.js">
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Nuxt 3

For Nuxt 3 applications, add the script configuration to your nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://analytics.brandjet.ai/script.js',
          'data-website-id': 'your-unique-id',
          async: true,
          defer: true
        }
      ]
    }
  }
})

Using Environment Variables in Nuxt

Create .env:

NUXT_PUBLIC_BRANDJET_WEBSITE_ID=your-unique-id

Update nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://analytics.brandjet.ai/script.js',
          'data-website-id': process.env.NUXT_PUBLIC_BRANDJET_WEBSITE_ID,
          async: true,
          defer: true
        }
      ]
    }
  }
})

Nuxt 2

For Nuxt 2, update your nuxt.config.js:

export default {
  head: {
    script: [
      {
        src: 'https://analytics.brandjet.ai/script.js',
        'data-website-id': 'your-unique-id',
        async: true,
        defer: true
      }
    ]
  }
}