Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
VueMultianalytics
✓ import VueMultianalytics from 'vue-multianalytics'
✗ const VueMultianalytics = require('vue-multianalytics');
Standard ESM import. CommonJS `require` is not the idiomatic way for modern Vue plugins.
VueMultianalytics (Nuxt)
✓ import VueMultianalytics from 'vue-multianalytics/dist/vue-multianalytics'
✗ import VueMultianalytics from 'vue-multianalytics'
When used in a Nuxt.js environment with `returnModule: true`, a specific import path to the distributed build is required.
Vue
✓ import Vue from 'vue'
✗ const Vue = require('vue')
Although implicitly used by `Vue.use`, explicit import is standard practice, especially in TypeScript or modular setups. This package is compatible with Vue 2.
This quickstart demonstrates how to initialize Vue-multianalytics with Google Analytics and Mixpanel modules, integrate it with Vue Router for automatic page view tracking, and manually track a custom event from a Vue component.
import Vue from 'vue';
import VueMultianalytics from 'vue-multianalytics';
import VueRouter from 'vue-router';
const router = new VueRouter({
mode: 'history',
routes: [{ path: '/', name: 'Home' }, { path: '/about', name: 'About' }],
});
let gaConfig = {
appName: 'MyVueApp', // Mandatory
appVersion: '1.0.0', // Mandatory
trackingId: process.env.VUE_APP_GA_TRACKING_ID ?? 'UA-XXXXX-Y', // Mandatory
debug: true,
};
let mixpanelConfig = {
token: process.env.VUE_APP_MIXPANEL_TOKEN ?? 'YOUR_MIXPANEL_TOKEN',
};
Vue.use(VueMultianalytics, {
modules: {
ga: gaConfig,
mixpanel: mixpanelConfig,
},
routing: {
vueRouter: router,
preferredProperty: 'name',
},
});
new Vue({
router,
el: '#app',
render: h => h({
template: `
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
<button @click="trackCustomEvent">Track Custom Event</button>
</div>
`,
methods: {
trackCustomEvent() {
this.$ma.trackEvent({
category: 'User Interaction',
action: 'Button Click',
label: 'Custom Button',
});
console.log('Custom event tracked!');
},
},
})
});
console.log('Vue-multianalytics initialized and ready.');
Debug
Known issues
gotchaEach analytics module typically requires specific mandatory configuration properties (e.g., `appName`, `appVersion`, `trackingId` for Google Analytics; `token` for Mixpanel). Failing to provide these will result in modules not initializing or events not being sent.fixConsult the documentation for each specific module you intend to use and ensure all 'mandatory' configuration fields are populated during initialization.
affects: >=1.0.0
gotchaFor Nuxt.js applications, the import path for `VueMultianalytics` is typically `vue-multianalytics/dist/vue-multianalytics` when using the `returnModule: true` option for plugin injection, rather than the root package import.fixAdjust your import statement to `import VueMultianalytics from 'vue-multianalytics/dist/vue-multianalytics'` in your Nuxt plugin file.
affects: >=1.0.0
gotchaIf you only require Google Analytics tracking, the original `vue-ua` library (now `vue-analytics` but deprecated) or its modern alternatives like `@web-analytics/vue` might be simpler or more performant as `vue-multianalytics` adds overhead for its multi-platform capabilities. `vue-analytics` is no longer maintained, so consider `vue-gtag` or `@web-analytics/vue` instead.fixFor Google Analytics-only needs, evaluate modern, dedicated Google Analytics libraries for Vue 2/3 instead of `vue-multianalytics`.
affects: >=1.0.0
breakingThis package is designed for Vue 2. If migrating to Vue 3, significant breaking changes in Vue's core API (e.g., global API, component lifecycle, plugin installation) mean this plugin is unlikely to work directly without substantial updates or a Vue 3 compatible version.fixFor Vue 3 projects, seek a dedicated multi-analytics solution compatible with Vue 3's composition API and application instance-based plugin registration, or consider alternatives like `@web-analytics/vue` which supports both Vue 2 and Vue 3.
affects: <2.0.0 (hypothetical, as this package is v1.x)
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'trackEvent') or this.$ma is undefined
The plugin has not been correctly installed using `Vue.use()` in your main application file, or you are trying to access `$ma` before the Vue instance is fully initialized.
fixEnsure `Vue.use(VueMultianalytics, { modules: { ... } })` is called before your root Vue instance is created. For Nuxt, ensure the plugin is correctly injected and available as `$ma`. Error: Missing mandatory 'appName' or 'appVersion' or 'trackingId' for Google Analytics module.
The Google Analytics configuration object (`gaConfig`) is missing one or more of its required properties.
fixVerify that `appName`, `appVersion`, and `trackingId` are all provided and correctly populated within your `gaConfig` object during plugin initialization.
Error: Mixpanel token is missing or invalid.
The Mixpanel configuration object (`mixpanelConfig`) is missing the required `token` property, or the provided token is not a valid Mixpanel project token.
fixEnsure your `mixpanelConfig` object includes a valid `token` string from your Mixpanel project settings.
Audit
Dependencies
vuerequiredCore dependency for any Vue.js plugin, providing the `Vue.use()` mechanism and instance properties.
vue-routeroptionalRequired for automatic page view tracking integration, passed as an option during plugin installation.