Vue.js

Vue.js integration guide

Integrating PureStats with your Vue.js application is simple. Here's how to set it up for Vue 2, Vue 3, and Nuxt.

Vue 3 (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>My Vue App</title>

    <!-- PureStats Analytics -->
    <script defer data-domain="yourdomain.com" src="https://purestats.io/pf.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
</body>
</html>

Vue 2 (Vue CLI)

For Vue CLI projects, add the script to 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>My Vue App</title>

    <!-- PureStats Analytics -->
    <script defer data-domain="yourdomain.com" src="https://purestats.io/pf.min.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Nuxt 3

For Nuxt 3, use the useHead composable in your app.vue:

<!-- app.vue -->
<script setup>
useHead({
  script: [
    {
      defer: true,
      'data-domain': 'yourdomain.com',
      src: 'https://purestats.io/pf.min.js'
    }
  ]
})
</script>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Tracking Custom Events

Create a composable for tracking events:

// composables/useAnalytics.js
export function useAnalytics() {
  const trackEvent = (eventName, props = {}) => {
    if (typeof window !== 'undefined' && window.purestats) {
      window.purestats(eventName, { props })
    }
  }

  return { trackEvent }
}

// Usage in a component
<script setup>
import { useAnalytics } from '@/composables/useAnalytics'

const { trackEvent } = useAnalytics()

const handleDownload = () => {
  trackEvent('Download', { file: 'guide.pdf' })
  // Download logic
}
</script>

<template>
  <button @click="handleDownload">Download Guide</button>
</template>

Vue Router Integration

PureStats automatically tracks route changes when using Vue Router. No additional configuration needed.

Automatic tracking: PureStats detects navigation events from Vue Router automatically, tracking every page view without extra code.

TypeScript Support

Add type declarations for TypeScript:

// src/types/global.d.ts
declare global {
  interface Window {
    purestats: (event: string, options?: { props?: Record<string, any> }) => void
  }
}

export {}