Real User Monitoring for Vue.js applications is available using the Raygun4JS provider.

Raygun4JS is a library you can easily add to your website and web applications which allows you to monitor frontend performance issues affecting your users.

Once Raygun is installed, it will automatically start monitoring your application for complete user sessions with Real User Monitoring.

Install the raygun4js library with NPM:

npm install raygun4js --save

Or with Yarn:

yarn add raygun4js

In your main.js file, or where ever your main app setup is, paste the following code to configure Raygun.

import rg4js from 'raygun4js';

rg4js('apiKey', 'paste_your_api_key_here');
rg4js('enablePulse', true); // Enables Real User Monitoring
rg4js('enableCrashReporting', true); // Optional, Enables Crash Reporting

To track route changes, the trackEvent method should be called when route change was successful.

rg4js('trackEvent', {
  type: 'pageView',
  path: location.pathname

More information about the trackEvent method can be found here.

If you are using Vue Router, you can register a Global After Hook to then call the trackEvent method automatically on each transition:

router.afterEach((to, from) => {
  rg4js('trackEvent', {
    type: 'pageView',
    path: to.path

For advanced setup instructions please refer to the Advanced Features documentation page.

For troubleshooting tips please refer to the Troubleshooting documentation page.

The provider is open source and available at the Raygun4js repository.