Integración de Nuxt

Con nuestro dashboard de Nuxt, puede rastrear fácilmente la tasa de error de su aplicación, el promedio de carga inicial de la página, los cambios de ruta, el rendimiento y las vistas de página con errores de JavaScript. Construido con nuestro agente de infraestructura y nuestro Vue , el panel de control de Nuxt le permite ver información crítica, todo en un solo lugar.

Después de configurar nuestra integración de Nuxt, le proporcionamos un dashboard para las métricas de su aplicación web Nuxt.

Instalar

Opcional: instalar el agente de infraestructura

Instalar el agente de infraestructura es opcional, pero al hacerlo obtendrá métricas importantes sobre el host donde se ejecuta su aplicación.

Para hacer esto, siga los pasos de instalación del agente de infraestructura.

Instalar la supervisión del navegador Nuxt

Desde one.newrelic.com, ve a la página+ Integrations & Agents .
Busca Nuxt. (Nota: El mosaico de Nuxt no está en la colección de navegador o móvil, por lo que deberás usar la función de búsqueda).
Haz clic en el mosaico Nuxt cuando aparezca en los resultados de la búsqueda y sigue las instrucciones para generar el fragmento de código JavaScript.

Configurar la integración

Para agregar el fragmento de código JavaScript en la aplicación Nuxt:

Cree un archivo JavaScript en la carpeta public de su aplicación Nuxt:
bash
```
$touch public/<FILENAME>.js
```
Copie y pegue el fragmento del agente del navegador en el nuevo archivo JavaScript sin las etiquetas <script> (solo el fragmento en sí, no hay ninguna función para definir):
```
// PASTE THE GENERATED BROWSER AGENT SNIPPET HERE WITHOUT <script> TAGS
```

Abre tu archivo nuxt.config.js (o nuxt.config.ts) y agrega el script a la sección app.head:

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

Reinicie su aplicación.
En un par de minutos, tu aplicación se enviará métrica a one.newrelic.com.

Monitor su aplicación

Ahora debería poder ver su aplicación en one.newrelic.com seleccionando Browser en la barra de navegación. Elige tu aplicación para ver todas las métricas que se capturan en la plataforma one.newrelic.com . También puede ver los datos con NRQL utilizando la siguiente consulta:

SELECT firstPaint
FROM PageView

¿Que sigue?

Para obtener más información sobre cómo crear una consulta NRQL y generar un dashboard, consulte estos documentos:

Introducción al generador de consultas para crear consultas básicas y avanzadas.
Introducción al dashboard para personalizar tu dashboard y realizar diferentes acciones.
Administre su dashboard para ajustar el modo de visualización de su o para agregar más contenido a sus dashboards.