Vue.js Installation

theBizness.ai Analytics

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

Environment Variables (Vite)

Configure analytics securely using environment variables

Create .env File

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

Use in 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
2. Open browser DevTools
3. Check Network tab for script.js
4. Navigate between routes

📊 Production Check

1. Build and deploy your app
2. Visit production site
3. Check analytics dashboard
4. Verify real-time tracking

Vue Router Integration

For SPA navigation tracking with Vue Router, the script automatically tracks route changes. No additional configuration needed!

• Page views tracked on route navigation
• Works with history and hash mode
• Compatible with all Vue Router versions

🎉 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