Required APM-RUM agent for VueJs Apps

[Kiran30 (Kiran)]

Currently we are using 7.17.1 version of ELK Stack Enterprise edition.
I implemented APM and RUM features for .Net and Python applications.

Now I want to implement RUM features for VueJs application to see "User Experience" in Kibana. I don't find a package. Could someone help please?

I have referred to the below documentation but no luck.

[type or paste code here](https://www.elastic.co/guide/en/apm/agent/rum-js/master/vue-integration.html)

I have tried with the below agent for js applications which is working fine. I am looking for a similar agent for Veujs applications.

<script src='https://unpkg.com/@elastic/apm-rum@4.0.1/dist/bundles/elastic-apm-rum.umd.min.js'></script>
 
<script>
 
elasticApm.init({
'serviceName': 'mon-app-viewspec--Vuejs-Frontend', // Set required service name (allowed characters: a-z, A-Z, 0-9, -, _, and space)
'serverUrl': "https://elk.xyz.abcdcom/:8200",   // Set custom APM Server URL
'environment': 'Prod',
'serviceVersion': '1.0' // Set the version of your application, used on the APM Server to find the right sourcemap
});
 
</script>

Appreciate your help. Thanks!

[Alberto_Delgado]

Hi @Kiran30

Thanks for using Elastic!

Now I want to implement RUM features for VueJs application to see "User Experience" in Kibana. I don't find a package. Could someone help please?

This is the documentation for using the integration for Vuejs:

Vue integration | APM Real User Monitoring JavaScript Agent Reference [master]...

Bear in mind that the "normal" RUM agent will also work with websites that use Vuejs. For instance, the features you can see on the introduction page are meant to work with any webpage (with counted exceptions). This means that you should also see information on your user experience page.

Important to highlight, that the main goal of the Vue integration is to enhance how the agent:

• captures errors triggered in Vue apps
• detects and captures SPA route navigations

And last but not least, when using the RUM agent (this includes the integration) you can also see information in the APM area (things like transactions, spans, traces, etc)

Steps to go there (being in Kibana):

In your case instead of seeing "interval-app" you will see the serviceName (mon-app-viewspec--Vuejs-Frontend) you set in your RUM agent.

Hope this helps!

Thanks,
Alberto

[Kiran30 (Kiran)]

Thank you @Alberto_Delgado ,

I just inetgrated the common RUM JS agent and its perfectly working.