On this page
Vue.js
Last updated
Integrate vTilt with a standalone Vue 3 app — npm package or inline script, Vue Router pageviews, identify on page load.
vTilt drops into a standalone Vue 3 app (Vite, vue-cli, Vue + Vite SPA). If you have a server-rendered shell, see the Vue + PHP guide for the SSR identify pattern.
#1. Add your environment variables
# .env
VITE_VTILT_TOKEN=YOUR_PROJECT_TOKEN
VITE_VTILT_HOST=https://www.vtilt.com#2. Install & initialise
Choose how you load the Browser SDK. npm initialises the SDK in main.ts; the inline script drops a stub in index.html with no package to install. Both expose the same window.vt global — the rest of this guide is identical either way.
Install the package:
npm install @v-tilt/browserBoot the SDK before mounting the app so the first paint is captured:
// src/main.ts
import { createApp } from 'vue'
import { vt } from '@v-tilt/browser'
import App from './App.vue'
import { router } from './router'
vt.init(import.meta.env.VITE_VTILT_TOKEN, {
api_host: import.meta.env.VITE_VTILT_HOST,
autocapture: true,
capture_pageview: true,
capture_pageleave: true,
})
const app = createApp(App)
app.config.globalProperties.$vt = vt
app.provide('vt', vt)
app.use(router)
app.mount('#app')#3. Vue Router pageviews
With the standard History API, the SDK patches pushState / replaceState so SPA navigation works automatically. The manual afterEach below is only needed when you bypass it (custom routers, hash-mode). Disable capture_pageview first to avoid double-counting.
// src/router.ts
import { createRouter, createWebHistory } from 'vue-router'
import { vt } from '@v-tilt/browser'
export const router = createRouter({
history: createWebHistory(),
routes: [
/* ... */
],
})
router.afterEach((to, from, failure) => {
if (failure) return
vt.capture('$pageview', {
$current_url: window.location.href,
$pathname: to.fullPath,
$referrer: from.fullPath,
})
})#4. Use vt from any component
<script setup lang="ts">
import { inject } from 'vue'
import type { vt as VtType } from '@v-tilt/browser'
const vt = inject<typeof VtType>('vt')!
function trackCta() {
vt.capture('cta_clicked', { location: 'hero' })
}
</script>
<template>
<button @click="trackCta">Get started</button>
</template>#5. Identify users
// src/plugins/vtilt-identity.ts
import { watch } from 'vue'
import { useUserStore } from './stores/user'
export function setupVtiltIdentity() {
const store = useUserStore()
watch(
() => [store.user, store.isReady] as const,
([user, isReady]) => {
if (!isReady) return
const vt = window.vt
if (!vt) return
if (user?.id) {
vt.identify(user.id, {
email: user.email,
name: user.name,
plan: user.plan,
})
} else if (vt.getUserState() === 'identified') {
vt.resetUser()
}
},
{ immediate: true },
)
}Call setupVtiltIdentity() from App.vue setup(). Your store must expose isReady (or equivalent) so you do not reset anonymous visitors while the session is still hydrating. See Identify & alias for the full model.
#6. Logout
import { vt } from '@v-tilt/browser'
async function logout() {
vt.capture('user_logged_out')
vt.resetUser()
await fetch('/api/auth/logout', { method: 'POST' })
window.location.href = '/'
}#Next steps
- Vue + PHP integration guide — full server-rendered identify pattern.
- Nuxt.js integration guide — same SDK with Nuxt's runtime config + plugins.
- Identify & alias — anonymous → known user merge.
- Autocapture — what's captured automatically.
- Common mistakes — integration pitfalls to avoid before you ship.