Registry / observability / vue-yandex-metrika

vue-yandex-metrika

library1.8.3jsnpmunverified

Vue Yandex Metrika is a utility package designed to integrate Yandex Metrika tracking into Vue.js applications. It simplifies the process of sending page view data to Yandex Metrika, offering both automatic tracking when integrated with Vue Router and manual tracking capabilities. The current stable version is v1.8.3, released in September 2019, indicating a lack of active development since then. Its primary differentiator is its direct integration with the Vue ecosystem, abstracting the raw Yandex Metrika API calls. It allows configuration of tracking ID, environment-based tracking (e.g., only in production), script source, debug mode, route ignoring, and other Yandex Metrika counter options, providing a convenient wrapper for web analytics in Vue projects. Given its last update in 2019, it primarily supports older Vue 2 applications and may not be compatible with Vue 3 without community efforts or significant adaptations.

observability web-framework

npm install vue-yandex-metrika

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-YANDEX-METRIKA

vue-yandex-metrika

observabilityjavascriptv1.8.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueYandexMetrika

✓ import VueYandexMetrika from 'vue-yandex-metrika'

✗ import { VueYandexMetrika } from 'vue-yandex-metrika'

This package exports a default plugin object for Vue.use().

this.$metrika.hit

✓ this.$metrika.hit(path, options)

✗ this.$metrika.reachGoal(goalName)

After Vue.use(), the plugin exposes a global $metrika object on Vue instances for manual tracking methods. Ensure 'hit' is used for page views, not 'reachGoal' unless explicitly sending a goal.

Vue.use

✓ Vue.use(VueYandexMetrika, { id: XXXXXXXX, router })

✗ VueYandexMetrika.install(Vue, { id: XXXXXXXX })

Vue plugins are typically installed using Vue.use(). The second argument is an options object for the plugin.

This quickstart demonstrates the automatic page view tracking with Vue Router, configuring Yandex Metrika with a placeholder ID, environment-specific settings, debug mode, and additional Metrika options.

import Vue from 'vue'; import VueRouter from 'vue-router'; import VueYandexMetrika from 'vue-yandex-metrika'; const routes = [ { path: '/', component: { template: '<div>Home Page</div>' }, name: 'home' }, { path: '/about', component: { template: '<div>About Page</div>' }, name: 'about' }, { path: '/contact', component: { template: '<div>Contact Page</div>' }, name: 'contact' } ]; const router = new VueRouter({ routes, mode: 'history' }); Vue.use(VueYandexMetrika, { id: process.env.VUE_APP_YANDEX_METRIKA_ID ?? '12345678', router: router, env: process.env.NODE_ENV, debug: process.env.NODE_ENV !== 'production', options: { clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true } }); new Vue({ router, template: ` <div id="app"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | <router-link to="/contact">Contact</router-link> <router-view></router-view> </div> ` }).$mount('#app');

Debug

Known issues

breakingThe `userParam` method was renamed to `userParams`. Calls using the old name will fail.

fix

Update any calls from `this.$metrika.userParam()` to `this.$metrika.userParams()`.

affects: >=1.8.3

gotchaAPI calls for Yandex Metrika are only performed if the `env` option matches 'production' by default. If you are testing in a development environment, you need to set `debug: true` or ensure `env` is not 'production'.

fix

For testing in non-production environments, set `debug: true` in your Vue.use() options: `Vue.use(VueYandexMetrika, { ..., env: process.env.NODE_ENV, debug: true })`.

affects: >=1.0.0

gotchaThe package has not been updated since September 2019 (v1.8.3). It is primarily designed for Vue 2 applications and may not be compatible with Vue 3 without significant manual adaptation or a community fork.

fix

If targeting Vue 3, consider using an alternative, or be prepared to fork and update the package for Vue 3 compatibility. For Vue 2, proceed with caution regarding potential unpatched bugs or security vulnerabilities.

affects: <=1.8.3

gotchaThe `skipSamePath` option is `true` by default, preventing tracking of consecutive page visits to the same URL. This might lead to undercounting if users refresh or navigate back to the same page.

fix

If you need to track repeated visits to the same URL, set `skipSamePath: false` in the plugin options: `Vue.use(VueYandexMetrika, { ..., skipSamePath: false })`.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'hit')

The $metrika object is not available on the Vue instance, likely due to the plugin not being installed correctly or called before Vue.use().

fix

Ensure `Vue.use(VueYandexMetrika, { ... })` is called at the application's entry point before any component tries to access `this.$metrika`.

Yandex Metrika counter ID is not set.

The `id` option, which specifies your Yandex Metrika counter ID, was not provided or was null/undefined during plugin initialization.

fix

Provide a valid Yandex Metrika counter ID in the plugin options: `Vue.use(VueYandexMetrika, { id: 'YOUR_COUNTER_ID', ... })`.

ReferenceError: Vue is not defined

The Vue library itself has not been imported or made globally available before attempting to use the plugin.

fix

Ensure `import Vue from 'vue'` is present at the top of your main JavaScript file where the plugin is being installed.

Upgrade

Version history

1.8.3latest on npm

Audit

Dependencies

vuerequiredRuntime dependency for a Vue plugin.

vue-routeroptionalOptional dependency required for automatic page view tracking.

Agent activity

35 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vchaptsev/vue-yandex-metrika ↗

packagehttps://www.npmjs.com/package/vue-yandex-metrika ↗