vue-application-insights

Installation

$ npm install vue-application-insights --save

Get started

import Vue from 'vue'
import VueAppInsights from 'vue-application-insights'

Vue.use(VueAppInsights, {
  id: 'XXXXXXXX--XXXX-XXXX-XXXXXXXXXXXX'
})

With vue router

import Vue from 'vue'
import router from './router'

import VueAppInsights from 'vue-application-insights'

Vue.use(VueAppInsights, {
  baseName: 'My app name', // prefix to track route changes as page views with AppInsights
  id: 'XXXXXXXX--XXXX-XXXX-XXXXXXXXXXXX',
  router
})

Example with custom track event

Vue.extend({

  methods: {
    custom_action() {
      this.$appInsights.trackEvent({
        name: 'custom_action', 
        properties: { value: 'ok' }
      });
    }   
  }
  
});

Options

• id - The instrumentation key of your AppInsights resource on Azure.
• router - The router instance, which events should be tracked as page views (optional).
• baseName String that will prefix the name of the tracked page (optional, default is '(Vue App)')
• appInsights Instance of the Application Insights client (optional).
• trackInitialPageView - Boolean that determines whether or not the initial page view should be tracked. (optional, defaults to true)
• onAfterScriptLoaded Callback function that will be invoked after AppInsights script have loaded. (optional, defaults to undefined)
• appInsightsConfig Object where you can put custom AppInsights configuration (optional, defaults to empty object)

Initializing AppInsights from outside the Vue application

Maybe you use server side code to include the javascript snippet that initializes AppInsights. In that case you want to provide the AppInsights instance to this Vue plugin and prevent it from tracking the initial page view.

import Vue from 'vue'
import router from './router'

import VueAppInsights from 'vue-application-insights'

Vue.use(VueAppInsights, {
  appInsights: window.appInsights,
  trackInitialPageView: false,
  router
})