---
title: Nuxt integration
source: https://docs.newrelic.com/docs/browser/browser-integrations/nuxt-integration
---

With our Nuxt dashboard, you can easily track your application error rate, initial page load average, route changes, throughput, and page views with JavaScript errors. Built with our infrastructure agent and our Vue browser monitoring, the Nuxt dashboard lets you view critical information all in one place.

![A screenshot of a Nuxt dashboard](https://docs.newrelic.com/images/infrastructure_screenshot-crop_nuxtjs-dashboard.webp "Nuxt dashboard")

After setting up our Nuxt integration, we give you a dashboard for your Nuxt web app metrics.

## Install [#install]

### Optional: Install the infrastructure agent [#infra-install]

Installing the infrastructure agent is optional, but doing this will get you important metrics about the host where your app is running.

To do this, follow [the infrastructure agent install steps](https://docs.newrelic.com/docs/infrastructure/install-infrastructure-agent/get-started/install-infrastructure-agent).

### Install Nuxt browser monitoring [#browser-install]

1.  From **[one.newrelic.com](https://one.newrelic.com)**, go to the [**+ Integrations & Agents** page](https://one.newrelic.com/marketplace).
2.  Search for **Nuxt**. (Note: The Nuxt tile is not in the browser or mobile collection, so you'll need to use the search function.)
3.  Click on the **Nuxt** tile when it appears in the search results and follow the instructions to generate the JavaScript code snippet.

### Configure the integration [#config]

To add the JavaScript snippet in the Nuxt application:

1.  Create a JavaScript file in the **`public`** folder of your Nuxt application:

    ```bash
    touch public/<FILENAME>.js
    ```

2.  Copy-paste the browser agent snippet into the new JavaScript file without the `<script>` tags (just the snippet itself, there's no function to define):

    ```js
    // PASTE THE GENERATED BROWSER AGENT SNIPPET HERE WITHOUT <script> TAGS
    ```

3.  Open your `nuxt.config.js` (or `nuxt.config.ts`) file and add the script to the `app.head` section:

    ```js
    export default defineNuxtConfig({
      compatibilityDate: '2025-07-15',
      devtools: { enabled: true },
      app: {
        head: {
          script: [
            {
              src: "/<FILENAME>.js"
            },
          ],
        },
      },
    })
    ```

4.  Restart your application.

    In a couple of minutes, your application will send metrics to [one.newrelic.com](https://one.newrelic.com).

## Monitor your application [#monitor]

Now, you should be able to see your application on **[one.newrelic.com](https://one.newrelic.com)** by selecting **Browser** from the navigation bar. Choose your application to see all the metrics which are captured on the **one.newrelic.com** platform. You can also view the data with NRQL using the following query:

```sql
SELECT firstPaint
FROM PageView
```

## What's next? [#whats-next]

To learn more about building NRQL queries and generating dashboards, check out these docs:

-   [Introduction to the query builder](https://docs.newrelic.com/docs/query-your-data/explore-query-data/query-builder/introduction-query-builder) to create basic and advanced queries.
-   [Introduction to dashboards](https://docs.newrelic.com/docs/query-your-data/explore-query-data/dashboards/introduction-dashboards) to customize your dashboard and carry out different actions.
-   [Manage your dashboard](https://docs.newrelic.com/docs/query-your-data/explore-query-data/dashboards/manage-your-dashboard) to adjust the display mode for your dashboards, or to add more content to your dashboards.