Vue integration
editVue integration
editThis document covers how to use Real User Monitoring JavaScript agent with Vue applications.
Supported versions
editThis integration supports Vue.js versions ≥ 3.0
If you are using an Vuejs version < 3.0, use @elastic/apm-rum-vue 1.x to instrument your application. Details are available in a prior release.
Installing Elastic APM Vue package
editInstall the @elastic/apm-rum-vue
package as a dependency to your application:
npm install --save @elastic/apm-rum-vue
Using APM Plugin
editapp.use(ApmVuePlugin, options)
Options
edit-
config
(required) - RUM agent configuration options. -
router
(optional) - Instance of Vue Router. If provided, will start capturing both page load and SPA navigation events as transactions with path of the route as its name. -
captureErrors
(optional) - If enabled, will install a global Vue error handler to capture render errors inside the components. Defaults totrue
. The plugin captures the component name, lifecycle hook and file name (if it’s available) as part of the error context.
Instrumenting your Vue application
editThe package exposes ApmVuePlugin
which is a Vue Plugin and can be installed in your application using Vue.use
method.
import { createApp, defineComponent, h } from 'vue' import { createRouter, createWebHashHistory } from 'vue-router' import { ApmVuePlugin } from '@elastic/apm-rum-vue' import App from './App.vue' const Home = defineComponent({ render: () => h("div", {}, "home") }) const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', component: Home } ] }) createApp(App) .use(router) .use(ApmVuePlugin, { router, config: { serviceName: 'app-name', // agent configuration } }) // app specific code .mount('#app')
Accessing agent instance inside components
editInstance of the agent can be accessed inside all the components using this.$apm
<template> <div>Component timings as span</div> </template> <script> export default { data() { return { span: null } }, created() { this.span = this.$apm.startSpan('create-mount-duration', 'custom') }, mounted() { this.span && this.span.end() } } </script>
ApmVuePlugin
expects the router option to be an instance of VueRouter since it uses the
navigation guards functionality.
Once the plugin is initialized, both page load and SPA navigation events will be captured
as transactions with the path
of the route as its name and page-load
or route-change
as type.