Vue Integration

Add AI Search Index to your Vue.js application.

Method 1: HTML Script Tag (Recommended)

Add the script to your index.html:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    
    <!-- AI Search Index Tracking Pixel -->
    <script 
      src="https://www.aisearchindex.com/pixel.js" 
      data-tid="YOUR_TRACKING_ID"
      data-spa="true"
      async
    ></script>
    <noscript><img src="https://www.aisearchindex.com/api/pixel?tid=YOUR_TRACKING_ID" width="1" height="1" style="position:absolute;left:-9999px;visibility:hidden" alt="" /></noscript>
  </body>
</html>

Method 2: Vue 3 Composable

Create a composable to manage the tracking script:

src/composables/useAISearchIndex.ts

import { onMounted, onUnmounted } from 'vue'

interface Options {
  trackingId: string
  spa?: boolean
  debug?: boolean
}

export function useAISearchIndex(options: Options) {
  let script: HTMLScriptElement | null = null

  onMounted(() => {
    if (document.querySelector('script[data-ais-pixel]')) return

    script = document.createElement('script')
    script.src = 'https://www.aisearchindex.com/pixel.js'
    script.async = true
    script.setAttribute('data-tid', options.trackingId)
    script.setAttribute('data-ais-pixel', 'true')
    
    if (options.spa !== false) {
      script.setAttribute('data-spa', 'true')
    }
    if (options.debug) {
      script.setAttribute('data-debug', 'true')
    }
    
    document.body.appendChild(script)
  })

  onUnmounted(() => {
    if (script) script.remove()
  })
}

Use it in your App.vue:

src/App.vue

<script setup lang="ts">
import { useAISearchIndex } from './composables/useAISearchIndex'

useAISearchIndex({
  trackingId: 'YOUR_TRACKING_ID',
  spa: true,
})
</script>

<template>
  <RouterView />
</template>

Using Vue Router?

Enable SPA mode to automatically track route changes:

<script 
  src="https://www.aisearchindex.com/pixel.js" 
  data-tid="YOUR_TRACKING_ID"
  data-spa="true"
  async
></script>
<noscript><img src="https://www.aisearchindex.com/api/pixel?tid=YOUR_TRACKING_ID" width="1" height="1" style="position:absolute;left:-9999px;visibility:hidden" alt="" /></noscript>

SPA mode works with Vue Router 3 and 4, as well as other routing solutions.

Nuxt 3

For Nuxt 3 projects, use the useHead composable:

app.vue or a plugin

<script setup>
useHead({
  script: [
    {
      src: 'https://www.aisearchindex.com/pixel.js',
      'data-tid': 'YOUR_TRACKING_ID',
      'data-spa': 'true',
      async: true,
    },
  ],
})
</script>

<template>
  <NuxtPage />
</template>

Alternatively, add it to your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://www.aisearchindex.com/pixel.js',
          'data-tid': 'YOUR_TRACKING_ID',
          'data-spa': 'true',
          async: true,
        },
      ],
    },
  },
})

Learn more

SPA Support Details Configuration Options