Vue.js

Vue.js integration

Add theBizness.ai analytics to your Vue.js application with modern Composition API or classic Options API.

Setup time

3 minutes

Difficulty

Easy

Performance

Reactive

Choose your Vue.js style

Composition API (Vue 3)

Modern reactive approach using the Composition API

Add to your main component

Add this to your App.vue or main component:

<!-- App.vue or main component -->
<template>
  <div id="app">
    <!-- Your app content -->
  </div>
</template>

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

const websiteId = 'your-website-id'
const domain = 'yourdomain.com'

let scriptElement = null

onMounted(() => {
  // Create and append the tracking script
  scriptElement = document.createElement('script')
  scriptElement.async = true
  scriptElement.defer = true
  scriptElement.setAttribute('data-website-id', websiteId)
  scriptElement.setAttribute('data-domain', domain)
  scriptElement.src = 'https://thebizness.ai/js/script.js'
  
  document.head.appendChild(scriptElement)
})

onUnmounted(() => {
  // Cleanup: remove script when component unmounts
  if (scriptElement && scriptElement.parentNode) {
    scriptElement.parentNode.removeChild(scriptElement)
  }
})
</script>

Composition API benefits

• Clean and reactive script setup
• Better TypeScript support
• Automatic cleanup with lifecycle hooks

Options API (Vue 2 & 3)

Classic Vue approach compatible with Vue 2 and Vue 3

Add to your component

<!-- App.vue or main component -->
<template>
  <div id="app">
    <!-- Your app content -->
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      websiteId: 'your-website-id',
      domain: 'yourdomain.com',
      scriptElement: null
    }
  },
  mounted() {
    // Create and append the tracking script
    this.scriptElement = document.createElement('script')
    this.scriptElement.async = true
    this.scriptElement.defer = true
    this.scriptElement.setAttribute('data-website-id', this.websiteId)
    this.scriptElement.setAttribute('data-domain', this.domain)
    this.scriptElement.src = 'https://thebizness.ai/js/script.js'
    
    document.head.appendChild(this.scriptElement)
  },
  beforeUnmount() {
    // Vue 3 lifecycle hook
    if (this.scriptElement && this.scriptElement.parentNode) {
      this.scriptElement.parentNode.removeChild(this.scriptElement)
    }
  },
  beforeDestroy() {
    // Vue 2 lifecycle hook
    if (this.scriptElement && this.scriptElement.parentNode) {
      this.scriptElement.parentNode.removeChild(this.scriptElement)
    }
  }
}
</script>

Cross-version compatibility

This approach works with both Vue 2 and Vue 3, using appropriate lifecycle hooks for each version.

Vue plugin (global)

App-wide analytics plugin for consistent tracking

Create the analytics plugin

// plugins/analytics.js
export default {
  install(app, options) {
    const { websiteId, domain } = options
    
    if (!websiteId || !domain) {
      console.warn('Analytics plugin: missing websiteId or domain')
      return
    }
    
    // Create and append script
    const script = document.createElement('script')
    script.async = true
    script.defer = true
    script.setAttribute('data-website-id', websiteId)
    script.setAttribute('data-domain', domain)
    script.src = 'https://thebizness.ai/js/script.js'
    
    document.head.appendChild(script)
    
    // Make analytics available globally
    app.config.globalProperties.$analytics = {
      websiteId,
      domain
    }
  }
}

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import AnalyticsPlugin from './plugins/analytics'

const app = createApp(App)

app.use(AnalyticsPlugin, {
  websiteId: 'your-website-id',
  domain: 'yourdomain.com'
})

app.mount('#app')

Environment variables (Vite)

Configure analytics using environment variables so each environment can use its own

Create the .env file

# .env
VITE_WEBSITE_ID=your-website-id
VITE_DOMAIN=yourdomain.com

Use in a component

<!-- Using environment variables -->
<script setup>
import { onMounted, onUnmounted } from 'vue'

const websiteId = import.meta.env.VITE_WEBSITE_ID
const domain = import.meta.env.VITE_DOMAIN

let scriptElement = null

onMounted(() => {
  if (!websiteId || !domain) {
    console.warn('Analytics not configured: missing environment variables')
    return
  }
  
  scriptElement = document.createElement('script')
  scriptElement.async = true
  scriptElement.defer = true
  scriptElement.setAttribute('data-website-id', websiteId)
  scriptElement.setAttribute('data-domain', domain)
  scriptElement.src = 'https://thebizness.ai/js/script.js'
  
  document.head.appendChild(scriptElement)
})

onUnmounted(() => {
  if (scriptElement && scriptElement.parentNode) {
    scriptElement.parentNode.removeChild(scriptElement)
  }
})
</script>

Advanced: custom composable

Reusable analytics composable for multiple components

// composables/useAnalytics.js
import { onMounted, onUnmounted } from 'vue'

export function useAnalytics(websiteId, domain) {
  let scriptElement = null
  
  onMounted(() => {
    if (!websiteId || !domain) {
      console.warn('Analytics not initialized: missing websiteId or domain')
      return
    }
    
    // Check if script already exists
    const existingScript = document.querySelector('[data-website-id]')
    if (existingScript) return
    
    scriptElement = document.createElement('script')
    scriptElement.async = true
    scriptElement.defer = true
    scriptElement.setAttribute('data-website-id', websiteId)
    scriptElement.setAttribute('data-domain', domain)
    scriptElement.src = 'https://thebizness.ai/js/script.js'
    
    document.head.appendChild(scriptElement)
  })
  
  onUnmounted(() => {
    if (scriptElement && scriptElement.parentNode) {
      scriptElement.parentNode.removeChild(scriptElement)
    }
  })
}

// Usage in component:
// import { useAnalytics } from '@/composables/useAnalytics'
// useAnalytics('your-website-id', 'yourdomain.com')

Composable benefits

• Reusable across multiple components
• Prevents duplicate script loading
• Centralized analytics configuration

Verify installation

Test your Vue.js analytics integration

Development check

1. Run npm run dev or yarn dev to check that the page loads
2. Open browser DevTools
3. Check Network tab for script.js. The console shows a "Tracking disabled on localhost" warning here, which is expected
4. Navigate between routes

Production check

1. Build and deploy your app
2. Visit production site
3. Check analytics dashboard
4. Reload the Overview and confirm today's pageviews increase

Vue Router integration

For SPA navigation tracking with Vue Router, the script tracks route changes automatically. Most apps need no extra configuration.

• Page views tracked on route navigation
• Works with history mode and with hash routes such as #/about
• For fragment routes without a slash (#about), add data-hash-routing="true" to the script tag; they appear as /#/about in your reports
• Compatible with all Vue Router versions

Local development

The tracker does nothing on localhost, *.local, *.test, private IP addresses or file:// pages. It logs a "Tracking disabled on localhost" warning in the console. Verify on a publicly reachable domain.

Content-Security-Policy

If your site sends a Content-Security-Policy header, allow https://thebizness.ai in script-src and connect-src. Blocked requests show only as CSP errors in the browser console.

Vue.js integration complete

Your Vue.js application is now tracking analytics with theBizness.ai. Here's what to explore next:

Router events

Automatic page tracking with Vue Router navigation

Custom events

Track user interactions and custom conversions

Performance

Optimize with lazy loading and code splitting

Set up event tracking View dashboard