---
title: Vue integration
description: This document covers how to use Real User Monitoring JavaScript agent with Vue applications. This integration supports Vue.js versions ≥ 3.0 Install the...
url: https://www.elastic.co/docs/reference/apm/agents/rum-js/vue-integration
products:
- APM Agent
---
# Vue integration
This document covers how to use Real User Monitoring JavaScript agent with Vue applications.
## Supported versions
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 a [prior release](https://www.elastic.co/guide/en/apm/agent/rum-js/4.x/vue-integration.html).
## Installing Elastic APM Vue package
Install the `@elastic/apm-rum-vue` package as a dependency to your application:
```bash
npm install --save @elastic/apm-rum-vue
```
### Using APM Plugin
```js
app.use(ApmVuePlugin, options)
```
### Options
- `config` (required) - RUM agent [configuration options](https://www.elastic.co/docs/reference/apm/agents/rum-js/configuration).
- `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 to `true`. 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
The package exposes `ApmVuePlugin` which is a Vue Plugin and can be installed in your application using `Vue.use` method.
```js
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
Instance of the agent can be accessed inside all the components using `this.$apm`
```html
Component timings as span
```
In case of both SFC and Composition API usage via the recommended `
```
`ApmVuePlugin` expects the router option to be an instance of VueRouter since it uses the [navigation guards](https://next.router.vuejs.org/guide/advanced/navigation-guards.html) 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.