Vue Application Insights Integration

1.0.7 · abandoned · verified Sun Apr 19

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.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'trackEvent') or this.$appInsights is undefined
```
cause The `vue-application-insights` plugin was not properly installed with `Vue.use()` or the `id` (instrumentation key) was missing/invalid during initialization.

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.
```
Application Insights not logging custom events or page views in Azure portal.
```
cause Incorrect instrumentation key, network blocking, or insufficient sampling. Sometimes, events might take a few minutes to appear in the Azure portal.

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.

Warnings

breaking 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.
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.
gotcha 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.
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.
deprecated 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.
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.

Install

npm install vue-application-insights npm
yarn add vue-application-insights yarn
pnpm add vue-application-insights pnpm

Imports

VueAppInsights
wrong:
```
const VueAppInsights = require('vue-application-insights')
```
correct:
```
import VueAppInsights from 'vue-application-insights'
```
While the README shows ESM import, older Vue 2 projects might use CommonJS. This plugin is primarily for browser environments.
Vue
```
import Vue from 'vue'
```
Required to register the plugin using `Vue.use()`.

$appInsights

wrong:

Vue.$appInsights.trackEvent(...) // Accessing on global Vue instance (incorrect for component methods)

correct:

this.$appInsights.trackEvent("eventName", { property: 'value' })

The Application Insights instance is injected onto Vue component instances and the global Vue prototype for easy access.

Quickstart

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`.

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueAppInsights from 'vue-application-insights';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: { template: '<div>Home Page <button @click="custom_action">Track Custom Action</button></div>' } },
    { path: '/about', component: { template: '<div>About Page</div>' } }
  ]
});

Vue.use(VueAppInsights, {
  id: process.env.VUE_APP_APPINSIGHTS_KEY ?? 'YOUR_INSTRUMENTATION_KEY_HERE',
  router,
  baseName: '(My Vue 2 App)',
  trackInitialPageView: true
});

new Vue({
  router,
  methods: {
    custom_action() {
      this.$appInsights.trackEvent({
        name: "custom_action",
        properties: { value: 'ok', source: 'quickstart' }
      });
      console.log('Custom action event tracked!');
    }
  },
  render: h => h({ template: `
    <div>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <router-view></router-view>
    </div>`})
}).$mount('#app');

view raw JSON →