Registry / azure / vue-application-insights

vue-application-insights

library1.0.7jsnpmunverified

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.

azure observability

npm install vue-application-insights

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-APPLICATION-IN

vue-application-insights

azurejavascriptv1.0.7

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.

VueAppInsights

✓ import VueAppInsights from 'vue-application-insights'

✗ const VueAppInsights = require('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

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

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

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

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');

Debug

Known issues

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

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: >=1.0.7

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'trackEvent') or this.$appInsights is undefined

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.

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.

Upgrade

Version history

1.0.7latest on npm

Audit

Dependencies

vuerequiredPeer dependency, the plugin is built for Vue 2 applications.

@microsoft/applicationinsights-webrequiredCore underlying Application Insights JavaScript SDK used for telemetry collection.

Agent activity

61 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/latelierco/vue-application-insights ↗

packagehttps://www.npmjs.com/package/vue-application-insights ↗