Vue integration
This document covers how to use Real User Monitoring JavaScript agent with Vue applications.
This 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 aprior release.
Install the@elastic/apm-rum-vue package as a dependency to your application:
npm install --save @elastic/apm-rum-vueapp.use(ApmVuePlugin, options)config(required) - RUM agentconfiguration 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.
The package exposesApmVuePlugin which is a Vue Plugin and can be installed in your application usingVue.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')Instance of the agent can be accessed inside all the components usingthis.$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>In case of both SFC and Composition API usage via the recommended<script setup> syntax the access of the instance is supported by the vueplugin injection
<template> <div>Component timings as span</div></template><script setup>import { inject, onMounted, onUnmounted, ref } from 'vue'const $apm = inject('$apm')const span = ref(null)onMounted(() => span.value = $apm.startSpan('mount-unmount-duration', 'custom'))onUnmounted(() => span.value.end())</script>ApmVuePlugin expects the router option to be an instance of VueRouter since it uses thenavigation guards functionality.
Once the plugin is initialized, both page load and SPA navigation events will be captured as transactions with thepath of the route as its name andpage-load orroute-change as type.