{"id":15047,"library":"vue-yandex-metrika","title":"Yandex Metrika Plugin for Vue.js","description":"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.","status":"abandoned","version":"1.8.3","language":"javascript","source_language":"en","source_url":"https://github.com/vchaptsev/vue-yandex-metrika","tags":["javascript","vue","tracking","Yandex","yandex","Yandex Metrica","yandex metrica","Yandex Metrika","yandex metrika"],"install":[{"cmd":"npm install vue-yandex-metrika","lang":"bash","label":"npm"},{"cmd":"yarn add vue-yandex-metrika","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-yandex-metrika","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for a Vue plugin.","package":"vue","optional":false},{"reason":"Optional dependency required for automatic page view tracking.","package":"vue-router","optional":true}],"imports":[{"note":"This package exports a default plugin object for Vue.use().","wrong":"import { VueYandexMetrika } from 'vue-yandex-metrika'","symbol":"VueYandexMetrika","correct":"import VueYandexMetrika from 'vue-yandex-metrika'"},{"note":"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.","wrong":"this.$metrika.reachGoal(goalName)","symbol":"this.$metrika.hit","correct":"this.$metrika.hit(path, options)"},{"note":"Vue plugins are typically installed using Vue.use(). The second argument is an options object for the plugin.","wrong":"VueYandexMetrika.install(Vue, { id: XXXXXXXX })","symbol":"Vue.use","correct":"Vue.use(VueYandexMetrika, { id: XXXXXXXX, router })"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueRouter from 'vue-router';\nimport VueYandexMetrika from 'vue-yandex-metrika';\n\nconst routes = [\n  { path: '/', component: { template: '<div>Home Page</div>' }, name: 'home' },\n  { path: '/about', component: { template: '<div>About Page</div>' }, name: 'about' },\n  { path: '/contact', component: { template: '<div>Contact Page</div>' }, name: 'contact' }\n];\n\nconst router = new VueRouter({ routes, mode: 'history' });\n\nVue.use(VueYandexMetrika, {\n  id: process.env.VUE_APP_YANDEX_METRIKA_ID ?? '12345678',\n  router: router,\n  env: process.env.NODE_ENV,\n  debug: process.env.NODE_ENV !== 'production',\n  options: {\n    clickmap: true,\n    trackLinks: true,\n    accurateTrackBounce: true,\n    webvisor: true\n  }\n});\n\nnew Vue({\n  router,\n  template: `\n    <div id=\"app\">\n      <router-link to=\"/\">Home</router-link> |\n      <router-link to=\"/about\">About</router-link> |\n      <router-link to=\"/contact\">Contact</router-link>\n      <router-view></router-view>\n    </div>\n  `\n}).$mount('#app');","lang":"javascript","description":"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."},"warnings":[{"fix":"Update any calls from `this.$metrika.userParam()` to `this.$metrika.userParams()`.","message":"The `userParam` method was renamed to `userParams`. Calls using the old name will fail.","severity":"breaking","affected_versions":">=1.8.3"},{"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 })`.","message":"API 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'.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":"<=1.8.3"},{"fix":"If you need to track repeated visits to the same URL, set `skipSamePath: false` in the plugin options: `Vue.use(VueYandexMetrika, { ..., skipSamePath: false })`.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `Vue.use(VueYandexMetrika, { ... })` is called at the application's entry point before any component tries to access `this.$metrika`.","cause":"The $metrika object is not available on the Vue instance, likely due to the plugin not being installed correctly or called before Vue.use().","error":"TypeError: Cannot read properties of undefined (reading 'hit')"},{"fix":"Provide a valid Yandex Metrika counter ID in the plugin options: `Vue.use(VueYandexMetrika, { id: 'YOUR_COUNTER_ID', ... })`.","cause":"The `id` option, which specifies your Yandex Metrika counter ID, was not provided or was null/undefined during plugin initialization.","error":"Yandex Metrika counter ID is not set."},{"fix":"Ensure `import Vue from 'vue'` is present at the top of your main JavaScript file where the plugin is being installed.","cause":"The Vue library itself has not been imported or made globally available before attempting to use the plugin.","error":"ReferenceError: Vue is not defined"}],"ecosystem":"npm"}