# APM Vue plugin

**URL:** <https://discuss.elastic.co/t/apm-vue-plugin/223798>\
**Category:** APM\
**Tags:** rum\
**Created:** [March 16, 2020, 4:56pm UTC](https://discuss.elastic.co/t/apm-vue-plugin/223798 "2020-03-16T16:56:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vergara92](https://avatars.discourse-cdn.com/v4/letter/v/5daacb/32.png) [@Vergara92](https://discuss.elastic.co/u/Vergara92)\
**Post date:** [March 16, 2020, 4:56pm UTC](https://discuss.elastic.co/t/apm-vue-plugin/223798/1 "2020-03-16T16:56:19Z")

</div>

Hi everyone I'm new in the community (And in the use of APM RUM) I install APM vue plugin through yarn and I have this versions:

@elastic/apm-rum-core@^4.10.1  
@elastic/apm-rum-vue@^0.4.1

And have the next code on my router.js:

```
Vue.use(ApmVuePlugin, {
  router,
  config: {
    serviceName: 'project-name',
    serverUrl: 'https://apm.my-project.com'
    logLevel: 'debug'
  }
})

```

I don't have any additional configuration. When I see the logs I see in page-load all the events name correct but my app is a SPA so I feel the tab 'route-change' give me more relevant information.

The problem is in the route-change tab I lose some information about the user navigation, I think the agent get the route change between the web pages, but when i change the page from the side bar of my web I get things like [Click - li] or [Click - a]

 ![Captura de pantalla 2020-03-16 a las 17.52.06](https://us1.discourse-cdn.com/elastic/original/3X/a/b/abb2d17852342fdfdacf3095270fc6222e1e41e9.png)

Anyone know why this can be?

Thank you for read my post! 😃

---

<div class="post-metadata">

**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\
**Post date:** [March 17, 2020, 2:01pm UTC](https://discuss.elastic.co/t/apm-vue-plugin/223798/2 "2020-03-17T14:01:28Z")

</div>

Hi Rafael,

Thanks for using the RUM agent. To answer about the transactions with `Click`, We started instrumenting [click events](https://www.elastic.co/guide/en/apm/agent/rum-js/current/supported-technologies.html#user-interactions) in the agent and when the agent figures out the click event is interesting ( network activity), creates a transaction with `Click - <tagName>` and captures all the network events as spans associated with the transaction.

Does that help? Also if you are missing some information on the transactions, can you enable the debug logs on the agent via `logLevel: 'debug'` config and paste the console logs from the browser.

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![Vergara92](https://avatars.discourse-cdn.com/v4/letter/v/5daacb/32.png) [@Vergara92](https://discuss.elastic.co/u/Vergara92)\
**Post date:** [March 18, 2020, 8:31am UTC](https://discuss.elastic.co/t/apm-vue-plugin/223798/3 "2020-03-18T08:31:02Z")

</div>

Hi! Thanks for the quick reply!!

```auto
{
  "name": "Click - li",
  "type": "route-change",
   "options": {
     "pageLoadTraceId": "",
     "pageLoadSampled": false,
     "pageLoadSpanId": "",
     "pageLoadTransactionName": "",
     "transactionSampleRate": 1,
     "managed": true,
     "canReuse": true,
     "reuseThreshold": 100
   },
[...]

```

The event throws much more information but I don't know if it usefull for what we are talking about.

The other thing I see strange is when I click on a button inside my page the event work well and I get something like this:

```auto
{
  "name": "/create-order",
  "type": "route-change",
  "options": {
    "pageLoadTraceId": "",
    "pageLoadSampled": false,
    "pageLoadSpanId": "",
    "pageLoadTransactionName": "",
    "transactionSampleRate": 1,
    "managed": true,
    "canReuse": true,
    "reuseThreshold": 100
 },
[...]

```

the only difference I see between the first event log and the second one is the last event is a programmatic $router.push and the first one is a router-link tag, both natives of vue.

I can try to change the first event log to a programmatic router.push and see what's going on, but do you think the default way of log the router change should be with the route and not with the event that triggers the change? I think the tag that trigger doesn't give too much information and when I see the logs in kibana the different views are grouped in the same tag.

Thanks for the response and greetings!!

Edit: I discover a way to get the information like I want, making on the vue-router beforeResolve and add this line  
`Vue.prototype.$apm.getCurrentTransaction().name = to.path`  
Now I have some problems with 'unknowns' metric

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [April 8, 2020, 4:31am UTC](https://discuss.elastic.co/t/apm-vue-plugin/223798/4 "2020-04-08T04:31:21Z")

</div>

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.