Open Analytics
Vue 3, Nuxt 3 & Vue Router

Open-source web analytics for Vue.js and Nuxt

Cookieless web analytics and Core Web Vitals RUM for Vue 3 and Nuxt applications. Zero-overhead SPA routing integration, custom event tracking, and runtime crash triage.

Launch DashboardUniversal Integration
Nuxt 3 App Head IntegrationVue Router Automatic PageviewsVue Error Handler InterceptionComposition API ComposableSub-3.2KB Brotli PayloadNo Cookie Banner Requirement
Quick Installation
Inject script in nuxt.config.ts or index.html

Complete Vue.js & Nuxt Integration Guide

Follow these steps to track pageviews, custom events, Core Web Vitals, and errors.

1Nuxt 3 Setup via nuxt.config.ts

Add the script directly to your Nuxt 3 `app.head.script` configuration array with the `defer` flag enabled.

nuxt.config.ts
// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://api.openanalytics.org.in/open.js",
          "data-project-id": "prj_your_project_id",
          defer: true,
        },
      ],
    },
  },
});

2Vue 3 Vite SPA Setup

For standalone Vue 3 applications built with Vite, place the script tag in the root `index.html` file.

index.html
<!-- index.html (before </head>) -->
<script
  defer
  src="https://api.openanalytics.org.in/open.js"
  data-project-id="prj_your_project_id"
></script>

3Vue Global Error Handler Integration

Connect Vue's global error handler to Open Analytics to capture component lifecycle crashes.

src/main.ts
// src/main.ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.config.errorHandler = (err, instance, info) => {
  console.error("Vue Error:", err, info);
  if (window.OpenAnalytics) {
    window.OpenAnalytics.captureError(err as Error, { vueInfo: info });
  }
};

app.mount("#app");
Custom Events & Conversions

Custom Event Composable in Vue 3

Create a reusable `useAnalytics` composable for Vue 3 Composition API components.

// composables/useAnalytics.ts
export function useAnalytics() {
  const track = (event: string, properties?: Record<string, unknown>) => {
    if (process.client && window.OpenAnalytics) {
      window.OpenAnalytics.track(event, properties);
    }
  };

  return { track };
}

// Usage inside <script setup>:
// const { track } = useAnalytics();
// track("download_clicked", { file: "whitepaper.pdf" });
Core Web Vitals RUM

Automated Field Performance

In Nuxt and Vue applications, Open Analytics tracks continuous Core Web Vitals (LCP, INP, CLS) without requiring separate Vue plugins or interfering with Pinia/Vuex state managers.

Error Observability

Runtime Crash Triage

Vue component lifecycle errors captured via `app.config.errorHandler` are forwarded seamlessly along with uncaught window exceptions and unhandled promise rejections.

Developer Questions

Frequently Asked Questions

Add Open Analytics to your Vue.js & Nuxt app today

Zero cookies, sub-3.2 KB payload, real-time Core Web Vitals RUM, and automated crash triage.

Launch Dashboard FreeExplore Documentation