Vue.js Integration
Monitor Vue Router navigation timing, Pinia store mutations, Core Web Vitals, and component lifecycle performance across your Vue 3 applications. Full-stack visibility from a single plugin.
How It Works
Install the Vue Plugin
Run npm install @tigerops/vue. The package provides a Vue 3 plugin that you install with app.use(). It hooks into the Vue component lifecycle, Vue Router navigation guards, and Pinia plugin system automatically.
Register in main.ts
Call app.use(TigerOps, config) before mounting your app. TigerOps auto-detects Vue Router and Pinia if they are registered and instruments them without any additional configuration.
Configure Fetch Instrumentation
TigerOps wraps the global fetch and XMLHttpRequest to add traceparent headers to your API requests. Configure allowed origins to control where trace headers are sent and avoid CORS preflight issues.
Connect to Backend Traces
Your backend TigerOps SDK reads the traceparent header from incoming requests and links the server span to the browser span. You get a full trace from Vue component interaction to database query.
What You Get Out of the Box
Vue Router Navigation Tracing
Route navigation start-to-commit timing per route path, including navigation guard execution time and async component resolution. Identify which routes are slowest to activate.
Pinia Store Mutation Tracing
Track Pinia action dispatches, mutation duration, and store state size per store. Identify slow actions, large state objects, and stores that trigger excessive component re-renders.
Core Web Vitals Per Route
LCP, INP, CLS, FCP, and TTFB measured after each Vue Router navigation. TigerOps gives you SPA-accurate Web Vitals rather than page-load-only measurements.
Component Lifecycle Timing
onMounted, onUpdated, and onUnmounted duration per component name. TigerOps identifies components with expensive mount logic and correlates slow renders with route transitions.
Global Error & Warning Capture
TigerOps registers a Vue app.config.errorHandler and warnHandler to capture all unhandled component errors and warnings with component stack trace, props, and user session context.
Composable & async Tracking
Track composable execution time and async data fetching patterns (useFetch, useAsyncData with Nuxt). Identify which composables are blocking component hydration or re-renders.
main.ts Vue Plugin Setup
Register the TigerOps Vue plugin before calling app.mount() to instrument Vue Router, Pinia, and global error handling.
// src/main.ts — TigerOps Vue 3 plugin setup
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createPinia } from 'pinia'
import { TigerOps } from '@tigerops/vue'
import App from './App.vue'
import { routes } from './router'
const app = createApp(App)
const router = createRouter({ history: createWebHistory(), routes })
const pinia = createPinia()
app.use(router)
app.use(pinia)
// Install TigerOps AFTER router and pinia so it can auto-instrument them
app.use(TigerOps, {
apiKey: import.meta.env.VITE_TIGEROPS_API_KEY,
service: 'my-vue-app',
environment: import.meta.env.MODE,
// Real User Monitoring
rum: {
trackCoreWebVitals: true, // LCP, INP, CLS per route
trackRouteChanges: true, // Vue Router navigation timing
trackPinia: true, // Pinia action + mutation tracing
trackComponents: true, // Component lifecycle timing
componentSampleRate: 0.2, // Profile 20% of component renders
},
// Distributed tracing — add traceparent to fetch/XHR
tracing: {
instrumentFetch: true,
instrumentXhr: true,
propagateToOrigins: [
'https://api.myapp.com',
/^https://.*.myapp.com/,
],
},
// Session replay
sessionReplay: {
enabled: true,
sampleRate: 0.05,
maskAllInputs: true,
},
})
app.mount('#app')Common Questions
Does TigerOps support Vue 2 as well as Vue 3?
TigerOps has full support for Vue 3 with the Composition API, Options API, and script setup. For Vue 2, TigerOps provides a legacy plugin that supports Vue 2.6+ with Options API instrumentation. Vue 3 is recommended for the best observability coverage.
Does TigerOps work with Nuxt.js?
Yes. TigerOps has a dedicated Nuxt module (@tigerops/nuxt) that instruments both the Nuxt server (Nitro) and the Vue client application. It tracks SSR render time, hydration duration, and useAsyncData / useFetch composable latency.
How does Pinia store tracing work without impacting performance?
TigerOps registers as a Pinia plugin and wraps each store action using the $onAction hook. The overhead is less than 0.1ms per action dispatch. Store mutation data is sampled and batched, so there is no impact on hot-path rendering.
Can TigerOps trace Axios requests from Vue components?
Yes. TigerOps provides an optional Axios adapter that adds trace headers to all Axios requests from your Vue application. If you use the native fetch API, TigerOps patches it automatically when tracing is enabled.
Does TigerOps support Vue DevTools in the browser?
Yes. TigerOps integrates with Vue DevTools by exposing a devtools plugin that shows TigerOps performance data — component render times, Pinia action durations, and navigation timing — directly in the Vue DevTools panel during development.
Full Visibility Into Your Vue.js Application
No credit card required. Install in minutes. Router timing, Pinia traces, and Core Web Vitals immediately.