ActionLab Analytics for Vue.js
Add privacy-first, AI-powered analytics to your Vue.js site in under 60 seconds. No cookies, no consent banners, no complex setup.
Setup at a Glance
Add ActionLab to Vue.js in 4 simple steps. Copy one script tag, paste it into your project, and start collecting privacy-friendly analytics immediately.
About Vue.js
Vue.js is a progressive JavaScript framework known for its approachable learning curve, excellent documentation, and versatile ecosystem spanning from simple page enhancements to full-scale applications. Vue Router provides client-side navigation for Vue SPAs, and Nuxt.js builds on Vue to add server-side rendering, static generation, and file-based routing. ActionLab integrates with all Vue configurations through a simple script tag and automatically detects Vue Router navigation, making it the simplest analytics addition to any Vue project.
Why Add Analytics to Vue.js
Vue developers value simplicity and clean architecture, and ActionLab integration reflects those values. Adding analytics to a Vue project should not require installing a plugin, registering it globally, adding navigation guards, or wrapping components in tracking providers. ActionLab works by adding a script tag to your HTML — the same integration method regardless of whether you are building with Vue 2, Vue 3, Options API, Composition API, or Nuxt. The automatic History API detection handles Vue Router navigation without any Vue-specific code, maintaining the clean separation between your application logic and your analytics tooling.
Installation Code
<!-- Add to your index.html -->
<script
src="https://cdn.actionlabanalytics.com/actionlab.js"
data-site="YOUR_SITE_ID"
defer
></script>
<!-- Works with Vue Router automatically -->Step-by-Step Setup
- 1
Open your index.html entry file (in the public or root directory of your Vue project).
- 2
Add the ActionLab script tag to the <head> section.
- 3
Replace YOUR_SITE_ID with your actual site ID from the ActionLab dashboard.
- 4
ActionLab automatically detects Vue Router navigation via the History API. No Vue plugin, composable, or mixin is needed.
Why Use ActionLab with Vue.js
- Automatic Vue Router navigation tracking captures every route change in your Vue application without adding plugins, composables, or router guards.
- No Vue plugin to install, configure, or maintain — the analytics script is completely decoupled from your Vue application code.
- Works with Vue 2 and Vue 3, both Options API and Composition API, and both Vue Router 3 and Vue Router 4.
- Works with Nuxt.js — add the script to nuxt.config.ts app.head.script array for Nuxt 3, or to the head section of nuxt.config.js for Nuxt 2.
Frequently Asked Questions
Does ActionLab work with Nuxt.js?
Yes. In Nuxt 3, add the script configuration to your nuxt.config.ts under app.head.script as an object with src, data-site, and defer properties. In Nuxt 2, add it to the head section of nuxt.config.js. ActionLab detects Nuxt client-side route changes automatically via the History API. Both Nuxt SSR and static generation modes are supported. No Nuxt module or plugin is required.
Does ActionLab track Vue Router navigation?
Yes. ActionLab detects Vue Router route changes via the History API pushState events and records each navigation as a pageview. This works with both hash mode and history mode routing, and with both Vue Router 3 (Vue 2) and Vue Router 4 (Vue 3). No router guards, afterEach hooks, or navigation observers are needed.
Can I use ActionLab with Pinia or Vuex?
ActionLab operates completely independently of your Vue state management. It does not interact with Pinia, Vuex, or any other store. The tracking script runs at the browser level, below your Vue application, so there are no conflicts with state management libraries regardless of how your application is structured.
Does ActionLab work with Vue transitions?
Yes. Vue page transitions are visual effects applied during route changes. ActionLab tracks the route change itself via the History API, which fires before the transition animation begins. The analytics are not affected by transition duration, easing, or whether transitions are enabled or disabled.
Can I fire custom events from Vue components?
Yes. ActionLab provides a JavaScript API for custom events that you can call from any Vue component method, lifecycle hook, or composable. This lets you track specific interactions like button clicks, form submissions, or modal opens without any Vue-specific SDK or plugin.