> ## Documentation Index
> Fetch the complete documentation index at: https://docs.germainux.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Deploy Monitoring for VueJS

> Deploy GermainUX monitoring for a Vue.js application.

Components
[`Engine`](https://docs.germainux.com/main/germain-ux-engine)
[`JS Profiler`](https://docs.germainux.com/main/germain-ux-js-profiler)
[`Mobile App`](https://docs.germainux.com/main/germain-ux-mobile-app)
[`RPA Bot Recorder`](https://docs.germainux.com/main/germain-ux-rpa-bot-recorder)
[`RUM JS`](https://docs.germainux.com/main/germain-ux-rum-js)

Availability
2017.2

> [card] [Deploy Monitoring for Vue.js](#overview)
>
> Vue RUM via wizard

> [card] [4. Deploy Using npm or Yarn](#4-deploy-using-npm-or-yarn)
>
> Bundle RUM with build

> [card] [7. Retrieve Deployment Instructions Later](#7-retrieve-deployment-instructions-later)
>
> Reopen Vue instructions anytime

> [card] [13. Validate the Deployment](#13-validate-the-deployment)
>
> Verify Vue deployment

## Overview

Deploy GermainUX monitoring for a Vue.js application.

The Vue.js Wizard generates the required Real User Monitoring configuration and provides the supported installation methods for your application.

### Monitoring Components

Depending on the required monitoring coverage, Vue.js monitoring can use:

| Monitoring Area | GermainUX Component |
| - | - |
| Real User Monitoring | RUM JS |
| Session Replay | RUM JS |
| Browser performance | RUM JS |
| JavaScript errors | RUM JS |
| Network monitoring | RUM JS |
| Advanced JavaScript analysis | JS Profiler |
| Synthetic user monitoring | RPA Bot Recorder |
| Backend/API monitoring | Engine |
| Logs and infrastructure | Engine or applicable monitoring component |

Deploy only the components required for your use cases.

## Prerequisites

Before deployment, confirm:

* You have access to Germain Workspace.
* You have the Vue.js application URL.
* You can modify the Vue.js application or its deployment configuration.
* The application can communicate with the GermainUX environment.
* Required privacy and security requirements have been defined.
* You know which application environments will be monitored.

Examples include:

* Development
* QA
* Staging
* Production

## 1. Open the Vue.js Wizard

Go to:

**Germain Workspace > Left Menu > Wizards > Vue.js**

Start the Vue.js Wizard.

![Deploy Monitoring for VueJS: 1. Open the Vue.js Wizard](https://mintcdn.com/germain-ux/hPK2RwO7wyn44bNw/images/main/deploy-monitoring-for-vuejs/image-20260901-224539.png?fit=max\&auto=format\&n=hPK2RwO7wyn44bNw\&q=85\&s=cf238f1ad3f040b1ab40c41c796c3cb2)

## 2. Configure the Application

Enter:

* Application Name
* Application URL

Use a descriptive name that clearly identifies the application and environment.

For example:

`Customer Portal - Vue.js - Production`

![VueJS wizard details](https://mintcdn.com/germain-ux/hPK2RwO7wyn44bNw/images/main/deploy-monitoring-for-vuejs/v2.png?fit=max\&auto=format\&n=hPK2RwO7wyn44bNw\&q=85\&s=f34980f54e44ed2787fd623be21b53c0)

VueJS wizard details - GermainUX

## 3. Complete the Wizard

Continue through the Vue.js Wizard.

At the end of the wizard, GermainUX displays the available deployment options.

Supported deployment methods include:

* Package dependency using npm or yarn
* Script tag injection
* JavaScript code snippet

Choose the deployment method appropriate for your application architecture and deployment process.

## 4. Deploy Using npm or Yarn

Use the package dependency option when GermainUX RUM JS should be included as part of the Vue.js application's dependency and build process.

Follow the package installation and initialization instructions generated by the Vue.js Wizard.

Use the exact package name and configuration generated for your GermainUX environment.

After installation:

1. Build the application.
2. Deploy it to the target environment.
3. Open the application.
4. Verify that GermainUX monitoring initializes.

   ![Deploy Monitoring for VueJS: 4. Deploy Using npm or Yarn](https://mintcdn.com/germain-ux/hPK2RwO7wyn44bNw/images/main/deploy-monitoring-for-vuejs/v3.png?fit=max\&auto=format\&n=hPK2RwO7wyn44bNw\&q=85\&s=a383f07cc7cccacca7e50dbdee5098e7)

## 5. Deploy Using Script Tag Injection

Use script tag deployment when monitoring is loaded separately from the Vue application bundle.

Follow the script-tag instructions generated by the Wizard.

Depending on the selected configuration, the monitoring script may be hosted:

* Locally
* Remotely

Deploy the generated script exactly as provided for the selected UX Monitoring Profile.

## 6. Deploy Using a JavaScript Code Snippet

Use the JavaScript snippet option when the monitoring configuration needs to be initialized directly within application code or an approved application bootstrap location.

Follow the code-snippet instructions generated by the Wizard.

Ensure that the monitoring code executes early enough in the application lifecycle to capture the required user activity.

## 7. Retrieve Deployment Instructions Later

You can return to the generated deployment instructions after completing the Wizard.

Go to:

**Germain Workspace > Left Menu > Analytics > UX Monitoring Profiles**

Select the UX Monitoring Profile created for the Vue.js application.

In the Configuration Editor, select:

**Installation**

The generated installation instructions are displayed.

![NPM/Yarn package install for VueJS](https://mintcdn.com/germain-ux/hPK2RwO7wyn44bNw/images/main/deploy-monitoring-for-vuejs/v4.png?fit=max\&auto=format\&n=hPK2RwO7wyn44bNw\&q=85\&s=67c49fd917d191250bb5b2220453f49a)

NPM/Yarn package install for VueJS - GermainUX

## 8. Deploy JS Profiler — Optional

Deploy GermainUX JS Profiler when deeper JavaScript analysis is required.

Use JS Profiler when Real User Monitoring identifies issues that require additional visibility into:

* JavaScript execution
* Slow functions
* Browser processing
* Network activity
* Integration activity

Validate profiling in a non-production environment before enabling broad production collection when appropriate.

## 9. Deploy Synthetic Monitoring — Optional

Use GermainUX RPA Bot Recorder to create synthetic scenarios for critical Vue.js workflows.

Examples include:

Open Application
Sign In
Navigate
Verify Result

or:

Open Application
Search
Select
Submit
Verify Confirmation

Use dedicated test accounts and test data when appropriate.

Avoid workflows that unintentionally modify production data.

## 10. Deploy Backend Monitoring — Optional

When the Vue.js application depends on customer-controlled backend services, deploy GermainUX monitoring for those systems separately.

Examples include:

* REST APIs
* Application servers
* Databases
* Logs
* Operating systems
* Containers
* Cloud infrastructure

This allows backend telemetry to be correlated with Vue.js user activity.

## 11. Validate Real User Monitoring

After deployment:

**1. Open the Vue.js application**

**2. Navigate through several pages or views**

**3. Perform representative interactions**

**4. Execute a representative workflow**

In GermainUX, verify that the expected data appears.

Depending on configuration, this can include:

* User session
* Navigation
* User interactions
* Performance
* Network requests
* JavaScript errors

## 12. Validate Session Replay

When Session Replay is enabled:

**1. Open the application**

**2. Perform representative actions**

**3. End the test session**

**4. Locate the session in GermainUX**

**5. Open Session Replay**

**6. Verify that expected activity can be replayed**

Before production rollout, verify that sensitive information is appropriately masked or excluded.

## 13. Validate the Deployment

Confirm:

* RUM JS loads successfully.
* The correct application is assigned.
* The correct environment is assigned.
* Sessions reach GermainUX.
* Navigation is captured.
* User interactions are captured.

> [accordion] Show all 13
>
> * Performance data is captured.
> * Network activity is captured as configured.
> * JavaScript errors are detected.
> * Session Replay works when enabled.
> * Sensitive information is protected.
> * JS Profiler works when deployed.
> * Synthetic monitoring works when configured.

Once deployment has been validated, continue with **Configure Monitoring for Vue.js**.

### Get More Information

GermainUX can help determine which monitoring, analytics and automation capabilities are appropriate for your Vue environment.

[Contact GermainUX Support](https://docs.germainux.com/main/support.md).

## Get Help

> [card] [Contact GermainUX Support](https://docs.germainux.com/main/support.md)
>
> The GermainUX team helps you get up and running faster, empower your team, turn data into actionable insights, and optimize performance to deliver measurable business outcomes.

> [card] Can't find what you need?
>
> Search all GermainUX docs with **Ctrl + K**, or use the feedback buttons at the bottom of this page to tell us what is missing.

The content of this document is proprietary to GERMAIN SOFTWARE.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.