{"id":15025,"library":"vue-application-insights","title":"Vue Application Insights Integration","description":"vue-application-insights is a JavaScript plugin designed to integrate Microsoft Azure Application Insights telemetry into Vue.js 2 applications. It provides a straightforward `Vue.use()` interface for initialization, accepting an Azure Application Insights instrumentation key and optionally integrating with Vue Router for automatic page view tracking. The plugin exposes the Application Insights client instance as `$appInsights` on Vue components, enabling developers to easily track custom events, metrics, exceptions, and traces within their application logic. The package, currently at version 1.0.7, appears to be targeting Vue 2 exclusively, with its last significant update several years ago, indicating it is likely abandoned in favor of newer, Vue 3-compatible alternatives like `vue3-application-insights`. Its primary utility lies in simplifying the setup of the Application Insights JavaScript SDK within the Vue 2 ecosystem, abstracting away manual script loading and initialization.","status":"abandoned","version":"1.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/latelierco/vue-application-insights","tags":["javascript","vue","vuejs","application-insights"],"install":[{"cmd":"npm install vue-application-insights","lang":"bash","label":"npm"},{"cmd":"yarn add vue-application-insights","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-application-insights","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, the plugin is built for Vue 2 applications.","package":"vue","optional":false},{"reason":"Core underlying Application Insights JavaScript SDK used for telemetry collection.","package":"@microsoft/applicationinsights-web","optional":false}],"imports":[{"note":"While the README shows ESM import, older Vue 2 projects might use CommonJS. This plugin is primarily for browser environments.","wrong":"const VueAppInsights = require('vue-application-insights')","symbol":"VueAppInsights","correct":"import VueAppInsights from 'vue-application-insights'"},{"note":"Required to register the plugin using `Vue.use()`.","symbol":"Vue","correct":"import Vue from 'vue'"},{"note":"The Application Insights instance is injected onto Vue component instances and the global Vue prototype for easy access.","wrong":"Vue.$appInsights.trackEvent(...) // Accessing on global Vue instance (incorrect for component methods)","symbol":"$appInsights","correct":"this.$appInsights.trackEvent(\"eventName\", { property: 'value' })"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueRouter from 'vue-router';\nimport VueAppInsights from 'vue-application-insights';\n\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n  mode: 'history',\n  routes: [\n    { path: '/', component: { template: '<div>Home Page <button @click=\"custom_action\">Track Custom Action</button></div>' } },\n    { path: '/about', component: { template: '<div>About Page</div>' } }\n  ]\n});\n\nVue.use(VueAppInsights, {\n  id: process.env.VUE_APP_APPINSIGHTS_KEY ?? 'YOUR_INSTRUMENTATION_KEY_HERE',\n  router,\n  baseName: '(My Vue 2 App)',\n  trackInitialPageView: true\n});\n\nnew Vue({\n  router,\n  methods: {\n    custom_action() {\n      this.$appInsights.trackEvent({\n        name: \"custom_action\",\n        properties: { value: 'ok', source: 'quickstart' }\n      });\n      console.log('Custom action event tracked!');\n    }\n  },\n  render: h => h({ template: `\n    <div>\n      <router-link to=\"/\">Home</router-link> |\n      <router-link to=\"/about\">About</router-link>\n      <router-view></router-view>\n    </div>`})\n}).$mount('#app');","lang":"javascript","description":"This quickstart demonstrates how to set up `vue-application-insights` with Vue Router for automatic page view tracking and how to trigger a custom event from a Vue component using `$appInsights`."},"warnings":[{"fix":"For Vue 3 projects, migrate to a compatible plugin like `vue3-application-insights` or integrate the `@microsoft/applicationinsights-web` SDK directly using Vue 3's plugin API.","message":"This plugin is specifically designed for Vue 2 applications and is not compatible with Vue 3. Vue 3 introduced breaking changes to the global API and plugin registration (`app.use()` instead of `Vue.use()`). For Vue 3, consider using `vue3-application-insights` or the official `@microsoft/applicationinsights-web` SDK directly.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use environment variables (e.g., `process.env.VUE_APP_APPINSIGHTS_KEY` in Vue CLI projects) to inject the instrumentation key at build time, preventing direct hardcoding.","message":"Exposing the Application Insights Instrumentation Key directly in client-side code (e.g., in a bundled JavaScript file) means it is publicly accessible. While common for client-side telemetry, ensure you understand the security implications. It's best practice to manage this key via environment variables.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For new projects or if advanced features/latest SDK stability are required, consider direct integration with `@microsoft/applicationinsights-web` or use the actively maintained `vue3-application-insights` for Vue 3 projects.","message":"The `vue-application-insights` package itself appears to be unmaintained, with its last significant update several years ago. While it wraps the underlying Application Insights JavaScript SDK, this plugin might not incorporate the latest features, bug fixes, or performance improvements from Microsoft's actively developed Application Insights SDKs.","severity":"deprecated","affected_versions":">=1.0.7"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `Vue.use(VueAppInsights, { id: 'YOUR_KEY' })` is called before your Vue application mounts and that the `id` option is provided with a valid Application Insights instrumentation key.","cause":"The `vue-application-insights` plugin was not properly installed with `Vue.use()` or the `id` (instrumentation key) was missing/invalid during initialization.","error":"TypeError: Cannot read properties of undefined (reading 'trackEvent') or this.$appInsights is undefined"},{"fix":"Verify the `id` (instrumentation key) is correct. Check network requests in your browser's developer tools for calls to `dc.services.visualstudio.com` to confirm telemetry is being sent. Adjust sampling settings in your Application Insights resource if necessary.","cause":"Incorrect instrumentation key, network blocking, or insufficient sampling. Sometimes, events might take a few minutes to appear in the Azure portal.","error":"Application Insights not logging custom events or page views in Azure portal."}],"ecosystem":"npm"}