$ npm install vue-application-insights --save
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' }
});
}
}
});
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
})