Vue.js 3

Add Analytiq to your Vue 3 app with a single init() call and manual event tracking.

Before starting: Get your API key from the Settings page

---

Step 1 — Install the SDK

npm install analytiq

---

Step 2 — Initialize in src/main.js (One-time setup)

Open src/main.js. This is the only file you need to change for the core setup. Add the init() call before you mount the app.

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { init, track } from 'analytiq'

// Initialize the SDK once before mounting the app
init(import.meta.env.VITE_ANALYTIQ_KEY)

// Optional: Track page views on every Vue Router navigation
router.afterEach((to) => {
  track('page_view', { path: to.path })
})

const app = createApp(App)
app.use(router)
app.mount('#app')

Add your API key to .env:

VITE_ANALYTIQ_KEY=pk_live_your_actual_key_here

That’s the core setup! You can now track events from anywhere in your app.

---

What the SDK handles automatically

Action	What happens
App initializes	init() runs once, anonymous tracking begins
User goes offline	Events saved to localStorage, retried on reconnect

---

Step 3 — Identify users and reset on logout

Vue doesn’t use hooks, so you call identify() and reset() directly. The best place is your Pinia store or auth composable:

Pinia Store (Recommended)

src/stores/auth.js

import { defineStore } from 'pinia'
import { identify, reset } from 'analytiq'

export const useAuthStore = defineStore('auth', {
  state: () => ({ user: null }),
  actions: {
    async login(email, password) {
      const res = await api.post('/auth/login', { email, password })
      this.user = res.data.user
      identify(this.user)  // call immediately after login succeeds
    },
    logout() {
      this.user = null
      reset()                 // call immediately on logout
      router.push('/login')
    }
  }
})

Inside a component

src/pages/Login.vue

<script setup>
import { identify } from 'analytiq'
import { useRouter } from 'vue-router'

const router = useRouter()

async function handleLogin(email, password) {
  const res = await api.post('/auth/login', { email, password })
  identify(res.data.user)  // call right after login
  router.push('/dashboard')
}
</script>

<template>
  <form @submit.prevent="handleLogin(email, password)">
    <!-- your form fields -->
    <button type="submit">Login</button>
  </form>
</template>

---

Step 4 — Track Custom Events

For specific actions (button clicks, purchases, etc.), import track() in any component:

Button click

src/components/PricingCard.vue

<script setup>
import { track } from 'analytiq'

function handleUpgrade(plan) {
  track('upgrade_clicked', { plan: plan.name, price: plan.price })
  // your existing upgrade logic...
}
</script>

<template>
  <button @click="handleUpgrade(plan)">Upgrade to {{ plan.name }}</button>
</template>

On page load with extra data

src/pages/ProductPage.vue

<script setup>
import { onMounted } from 'vue'
import { track } from 'analytiq'

const props = defineProps(['product'])

// Only needed if you want extra data beyond the URL
onMounted(() => {
  track('product_viewed', {
    product_id: props.product.id,
    name: props.product.name,
    price: props.product.price
  })
})
</script>

After an API call

src/pages/Checkout.vue

<script setup>
import { track } from 'analytiq'

async function handlePayment(paymentData) {
  const result = await processPayment(paymentData)

  if (result.success) {
    track('order_completed', { order_id: result.id, total: result.total })
  } else {
    track('payment_failed', { reason: result.error })
  }
}
</script>

---

Step 5 — Verify it’s working

1. Run: npm run dev
2. Open your browser, Press F12 and go to Console
3. You should see:

[analytiq] Initialized successfully. {host: "...", userId: null}
[analytiq] Auto page view tracking enabled.

4. Navigate between pages in your app
5. Go to your Analytiq Dashboard → Events — page_view events appear within 10 seconds.