Nuxt.js Integration
Full-stack observability for Nuxt.js with one module registration. Nitro server tracing, Vue SSR rendering spans, client-side Core Web Vitals, and Pinia action traces — no code changes required.
How It Works
Install the npm Package
Run npm install @tigerops/nuxt or yarn add @tigerops/nuxt. The package is a Nuxt module that bundles server-side OTLP export for Nitro and a lightweight browser SDK for client-side Core Web Vitals collection.
Register the Nuxt Module
Add "@tigerops/nuxt" to the modules array in nuxt.config.ts. The module auto-registers a Nitro plugin for server-side tracing and injects the browser SDK into the client bundle via a Nuxt plugin. No manual plugin registration needed.
Configure in nuxt.config.ts
Set your API key and service name under the tigerops key in nuxt.config.ts, or use runtimeConfig for environment-specific values. The module reads NUXT_TIGEROPS_API_KEY from the environment automatically for Nitro server builds.
SSR Spans, Vitals & Nitro Metrics
TigerOps immediately begins capturing Nitro server request spans, Vue SSR hydration times, page load Core Web Vitals (LCP, CLS, INP), useFetch latencies, Pinia action traces, and Nitro route handler execution timings.
What You Get Out of the Box
Nitro Server Request Tracing
Every Nitro HTTP request creates a server span with route pattern, HTTP method, status code, and response time. Nitro event handler chain and middleware timings are captured as ordered child spans. Works across Node.js, Bun, and edge runtimes.
Vue SSR Rendering Spans
Server-side rendering time per page route is traced as a child span. Component renderToString duration, Pinia store initialization, and async data resolution via useAsyncData and useFetch are individually measured and correlated.
Client-Side Core Web Vitals
TigerOps collects LCP, CLS, INP, FID, and TTFB for every page navigation using the Web Vitals API. Scores are attributed to route paths and segmented by device type, connection speed, and geography in the TigerOps dashboard.
useFetch & useAsyncData Tracing
Composable data fetching calls via useFetch and useAsyncData create spans with the fetch key, target URL, deduplication status, and server-vs-client execution context. SSR payload transfer sizes are tracked as span attributes.
Pinia Store Action Traces
Pinia store actions are instrumented with action name, store ID, execution duration, and any thrown errors. Async actions with await chains produce child spans for each awaited call. Devtools integration is preserved alongside TigerOps tracing.
Nitro Route Handler & Middleware Timing
Individual Nitro route handlers and server middleware execution times are measured. Slow handlers above a configurable threshold are flagged with their file path and handler name. H3 event object context is included in error spans.
Install & Initialize
One npm install and two lines in nuxt.config.ts. Full SSR and client observability.
# Install the TigerOps Nuxt module
npm install @tigerops/nuxt
# Set environment variables
export NUXT_TIGEROPS_API_KEY="your-api-key"
export NUXT_TIGEROPS_SERVICE_NAME="my-nuxt-app"
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@tigerops/nuxt'],
tigerops: {
apiKey: process.env.NUXT_TIGEROPS_API_KEY,
serviceName: 'my-nuxt-app',
environment: process.env.NODE_ENV,
nitro: {
traceMiddleware: true,
slowHandlerThresholdMs: 200,
},
browser: {
webVitals: true,
tracePageNavigation: true,
},
},
runtimeConfig: {
tigeropsApiKey: process.env.NUXT_TIGEROPS_API_KEY,
public: {
tigeropsEnv: process.env.NODE_ENV,
},
},
})
// Custom span in a server route: server/api/orders/[id].get.ts
import { useSpan } from '#tigerops/server'
export default defineEventHandler(async (event) => {
const id = getRouterParam(event, 'id')
return useSpan('order.fetch', async (span) => {
span.setAttribute('order.id', id!)
const order = await db.order.findUnique({ where: { id } })
return order
})
})Common Questions
Which Nuxt.js versions are supported?
Nuxt 3.x (Nitro-based) is fully supported. Nuxt 2 with Bridge is supported via the legacy @tigerops/nuxt2 module. The module targets Vue 3 and works with all official Nuxt rendering modes: SSR, SSG, SPA, and hybrid.
How does TigerOps handle Nuxt deployed to edge runtimes like Cloudflare Workers?
The Nitro plugin uses the fetch-based OTLP HTTP exporter which is compatible with edge runtimes. For Cloudflare Workers, TigerOps batches spans and flushes them via waitUntil() so tracing does not add to response latency.
Does TigerOps trace Nuxt Content and Nuxt Image module operations?
Yes. Nuxt Content query operations and Nuxt Image optimization requests are traced via H3 middleware injection. Content query execution time, cache hit status, and image transformation parameters are included in the spans.
How are server-side and client-side spans correlated for a single user request?
The Nitro plugin injects a traceId into the page payload during SSR. The browser SDK picks up the server traceId on hydration and links client-side spans as children of the SSR request span, giving you a single unified trace per page load.
Does the browser SDK impact Nuxt bundle size?
The TigerOps browser SDK is under 6KB gzipped. It is injected as an async script to avoid render-blocking. The module supports tree-shaking so only the Web Vitals collector and error reporter are included if you disable manual tracing.
Full Nuxt.js Observability in One Module
Nitro server traces, Vue SSR spans, Core Web Vitals, and Pinia action visibility — no code changes required.