Skip to main content

Vue

Integrate Swetrix with your Vue application to track page views, monitor errors, and capture custom events — all while staying privacy-friendly and GDPR-compliant.

This guide covers Vue 3 apps built with Vite (the recommended tooling). If you're using a Vue framework, see the dedicated guide for Nuxt instead.

Installation​

Install the Swetrix npm package:

npm install swetrix

Basic setup (single-page apps without routing)​

If your app doesn't use client-side routing, you can initialise Swetrix once in your entry point.

Open src/main.ts (or src/main.js):

import { createApp } from 'vue'
import * as Swetrix from 'swetrix'
import App from './App.vue'

Swetrix.init('YOUR_PROJECT_ID')
Swetrix.trackViews()

createApp(App).mount('#app')
caution

Replace YOUR_PROJECT_ID with your actual Project ID from the Swetrix dashboard, otherwise tracking won't work.

With Vue Router​

Most Vue SPAs use Vue Router for client-side navigation. Since page transitions don't trigger full page loads, you need to call trackViews() on every route change.

1. Create a router plugin

Create src/plugins/swetrix.ts:

import type { App } from 'vue'
import type { Router } from 'vue-router'
import * as Swetrix from 'swetrix'

export function swetrixPlugin(app: App, router: Router) {
  Swetrix.init('YOUR_PROJECT_ID')
  Swetrix.trackViews()

  router.afterEach(() => {
    Swetrix.trackViews()
  })
}

2. Register it in your entry point

Update src/main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { swetrixPlugin } from './plugins/swetrix'

const app = createApp(App)

app.use(router)
swetrixPlugin(app, router)

app.mount('#app')

Noscript fallback (optional)​

To track visitors who have JavaScript disabled, add a noscript image pixel to your index.html:

<body>
  <div id="app"></div>

  <noscript>
    <img
      src="https://api.swetrix.com/log/noscript?pid=YOUR_PROJECT_ID"
      alt=""
      referrerpolicy="no-referrer-when-downgrade"
    />
  </noscript>
</body>

Disable tracking in development​

By default, Swetrix ignores localhost traffic. You can also explicitly disable it based on your environment:

Swetrix.init('YOUR_PROJECT_ID', {
  disabled: import.meta.env.DEV,
})
tip

If you want to verify tracking locally during development, set devMode: true instead:

Swetrix.init('YOUR_PROJECT_ID', {
  devMode: true,
})

Remember to remove this before deploying to production.

Check your installation​

Build and deploy your application (or temporarily enable devMode) and visit a few pages. Within a minute you should see new pageviews appearing in your Swetrix dashboard.

Error tracking​

Enable automatic client-side error monitoring by adding trackErrors() to your initialisation. This captures unhandled JavaScript errors and reports them to Swetrix.

Update your plugin:

Swetrix.init('YOUR_PROJECT_ID')
Swetrix.trackViews()
Swetrix.trackErrors()

Errors will appear in the Errors tab of your project dashboard. See the tracking script reference for options like sampleRate and callback.

Tracking custom events​

Custom events let you track specific user interactions — button clicks, form submissions, sign-ups, purchases, and more. Import swetrix in any component and call track().

Example: tracking button clicks​

<script setup lang="ts">
import * as Swetrix from 'swetrix'

function handleClick() {
  Swetrix.track({
    ev: 'SIGNUP_CTA_CLICK',
    meta: {
      location: 'navbar',
    },
  })
}
</script>

<template>
  <button @click="handleClick">Sign up</button>
</template>

Example: tracking form submissions​

<script setup lang="ts">
import * as Swetrix from 'swetrix'

function handleSubmit() {
  Swetrix.track({
    ev: 'CONTACT_FORM_SUBMITTED',
    meta: {
      source: 'support_page',
    },
  })

  // ...submit logic
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input type="email" placeholder="you@example.com" required />
    <textarea placeholder="How can we help?" required />
    <button type="submit">Send</button>
  </form>
</template>

Create a reusable component for external links. Save as src/components/TrackedLink.vue:

<script setup lang="ts">
import * as Swetrix from 'swetrix'

const props = withDefaults(
  defineProps<{
    href: string
    eventName?: string
  }>(),
  {
    eventName: 'OUTBOUND_CLICK',
  },
)

function handleClick() {
  Swetrix.track({
    ev: props.eventName,
    meta: { url: props.href },
  })
}
</script>

<template>
  <a :href="href" target="_blank" rel="noopener noreferrer" @click="handleClick">
    <slot />
  </a>
</template>

Event naming rules​

Event names must:

  • Contain only English letters (a-Z), numbers (0-9), underscores (_), and dots (.)
  • Be fewer than 64 characters
  • Start with an English letter

We recommend UPPER_SNAKE_CASE for consistency (e.g. SIGNUP_CTA_CLICK, CONTACT_FORM_SUBMITTED).

Using environment variables for your Project ID​

Rather than hardcoding your Project ID, you can use an environment variable. With Vite, prefix with VITE_:

VITE_SWETRIX_PID=YOUR_PROJECT_ID
Swetrix.init(import.meta.env.VITE_SWETRIX_PID)

Further reading​

Help us improve Swetrix

Was this page helpful to you?

Learn how to contribute•Report a problem with this content