feat(nuxt): Add support for injectAnalytics() and Nuxt module

.nvmrc

@@ -1 +1 @@
-18.19.0
+22.21.0

apps/nuxt/app/app.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+/**
+ * Uncomment only when disabling the module in nuxt.config.ts
+ * As well as using the deprected <Analytics> component
+ * We recommend using the module or the injectAnalytics function in a Nuxt plugin
+ */
+// import { Analytics, type BeforeSendEvent } from '@vercel/analytics/nuxt';
+
+// const beforeSend = (event: BeforeSendEvent) => {
+//   console.log('Sending event:', event);
+//   return event;
+// };
+</script>
+
+<template>
+  <!-- <Analytics :before-send="beforeSend" /> -->
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

apps/nuxt/layouts/default.vue → apps/nuxt/app/layouts/default.vue

@@ -1,25 +1,11 @@
-<script setup lang="ts">
-import { track } from '@vercel/analytics';
-
-function navigate(event: { target: { href: string } }) {
-  track('navigation', { to: event.target.href });
-}
-</script>
-
 <template>
   <header>
-    <img
-      alt="Vue logo"
-      class="logo"
-      src="@/assets/logo.svg"
-      width="125"
-      height="125"
-    />
+    <img alt="Nuxt logo" class="logo" src="@/assets/logo.svg" width="180" />
     <div class="wrapper">
       <nav>
-        <NuxtLink @click="navigate" to="/">Home</NuxtLink>
-        <NuxtLink @click="navigate" to="/blog/various/hi">Hi!</NuxtLink>
-        <NuxtLink @click="navigate" to="/blog/various/hallo">Hallo!</NuxtLink>
+        <NuxtLink to="/">Home</NuxtLink>
+        <NuxtLink to="/blog/various/hi">Hi!</NuxtLink>
+        <NuxtLink to="/blog/various/hallo">Hallo!</NuxtLink>
       </nav>
     </div>
     <slot />
@@ -32,11 +18,12 @@ function navigate(event: { target: { href: string } }) {
 header {
   line-height: 1.5;
   max-height: 100vh;
+  text-align: center;
 }
 
 .logo {
   display: block;
-  margin: 0 auto 2rem;
+  margin: 2rem auto 2rem;
 }
 
 nav {

apps/nuxt/app/pages/blog.vue

@@ -0,0 +1,4 @@
+<template>
+  <h2>Blog</h2>
+  <NuxtPage />
+</template>

apps/nuxt/app/pages/blog/[category].vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const route = useRoute();
+const category = route.params.category;
+</script>
+
+<template>
+  <h2>Category: {{ category }}</h2>
+  <NuxtPage />
+</template>

apps/nuxt/pages/blog/[category]/[slug].vue → apps/nuxt/app/pages/blog/[category]/[slug].vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import { track } from '@vercel/analytics/nuxt';
+
 const route = useRoute();
 </script>
 
 <template>
   <div class="greetings">
     <h1 class="green">{{ route.params.slug }}!</h1>
-    <h3>Category {{ route.params.category }}</h3>
+    <button @click="track('click-button', { route: $route.path })">
+      Button with tracking
+    </button>
   </div>
 </template>

apps/nuxt/app/plugins/analytics.ts

@@ -0,0 +1,16 @@
+/**
+ * Uncomment only when disabling the module in nuxt.config.ts
+ */
+// import { injectAnalytics } from "@vercel/analytics/nuxt"
+
+// export default defineNuxtPlugin(() => {
+//   injectAnalytics({
+//     beforeSend(event) {
+//       console.log('beforeSend', event.url)
+//       if (event.url.includes('/private')) {
+//         return null;
+//       }
+//       return event
+//     }
+//   })
+// })

apps/nuxt/nuxt.config.ts

@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2024-04-03',
+  compatibilityDate: '2025-11-06',
+  modules: ['@vercel/analytics/nuxt/module'],
   devtools: { enabled: true },
 });

apps/nuxt/package.json

@@ -6,12 +6,11 @@
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
-    "postinstall": "nuxt prepare",
     "preview": "nuxt preview"
   },
   "dependencies": {
     "@vercel/analytics": "workspace:*",
-    "nuxt": "^3.14.0",
+    "nuxt": "^4.2.0",
     "vue": "latest",
     "vue-router": "latest"
   }

apps/nuxt/tsconfig.json

@@ -1,4 +1,17 @@
 {
-  // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
 }

packages/web/package.json

@@ -31,6 +31,11 @@
       "import": "./dist/nuxt/index.mjs",
       "require": "./dist/nuxt/index.js"
     },
+    "./nuxt/module": {
+      "browser": "./dist/nuxt/module.mjs",
+      "import": "./dist/nuxt/module.mjs",
+      "require": "./dist/nuxt/module.js"
+    },
     "./react": {
       "browser": "./dist/react/index.mjs",
       "import": "./dist/react/index.mjs",
@@ -109,6 +114,8 @@
     ]
   },
   "devDependencies": {
+    "@nuxt/kit": "^4.2.0",
+    "@nuxt/schema": "^4.2.0",
     "@swc/core": "^1.9.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
@@ -126,6 +133,7 @@
     "@remix-run/react": "^2",
     "@sveltejs/kit": "^1 || ^2",
     "next": ">= 13",
+    "nuxt": ">= 3",
     "react": "^18 || ^19 || ^19.0.0-rc",
     "svelte": ">= 4",
     "vue": "^3",

packages/web/src/nuxt/index.ts

@@ -1,6 +1,43 @@
+import { onNuxtReady, useRouter, useRoute } from 'nuxt/app';
 import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from '../types';
 import { createComponent } from '../vue/create-component';
+import { inject, pageview, track } from '../generic';
+import { isBrowser, computeRoute } from '../utils';
+import { getBasePath } from './utils';
 
+// Export the Analytics component
+// Not recommended as must be used in both app.vue and error.vue
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- vue's defineComponent return type is any
 export const Analytics = createComponent('nuxt');
 export type { AnalyticsProps, BeforeSend, BeforeSendEvent };
+
+// Export the injectAnalytics script with automatic tracking on page changes
+function injectAnalytics(props: Omit<AnalyticsProps, 'framework'> = {}): void {
+  if (isBrowser()) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- we are not using a React here
+    const router = useRouter();
+
+    onNuxtReady(() => {
+      inject({
+        ...props,
+        framework: 'nuxt',
+        disableAutoTrack: true,
+        basePath: getBasePath(),
+      });
+      const route = useRoute();
+      pageview({
+        route: computeRoute(route.path, route.params),
+        path: route.path,
+      });
+    });
+    // On navigation to a new page
+    router.afterEach((to) => {
+      pageview({
+        route: computeRoute(to.path, to.params),
+        path: to.path,
+      });
+    });
+  }
+}
+
+export { injectAnalytics, track };

packages/web/src/nuxt/module.ts

@@ -0,0 +1,29 @@
+import { defineNuxtModule, addPlugin, addTemplate } from '@nuxt/kit';
+import type { NuxtModule } from '@nuxt/schema';
+
+// eslint-disable-next-line import/no-default-export -- default export is required for nuxt module
+export default defineNuxtModule({
+  meta: {
+    name: '@vercel/analytics',
+    configKey: 'analytics',
+    docs: 'https://vercel.com/docs/analytics/quickstart',
+  },
+  setup() {
+    const template = addTemplate({
+      filename: 'vercel-analytics.client.ts',
+      getContents: () => `
+import { injectAnalytics } from '@vercel/analytics/nuxt'
+import { defineNuxtPlugin } from '#imports'
+
+export default defineNuxtPlugin(() => {
+  injectAnalytics()
+})
+`,
+    });
+
+    addPlugin({
+      src: template.dst,
+      mode: 'client',
+    });
+  },
+}) as NuxtModule;

packages/web/src/nuxt/utils.ts

@@ -0,0 +1,12 @@
+export function getBasePath(): string | undefined {
+  // !! important !!
+  // do not access env variables using import.meta.env[varname]
+  // some bundles won't replace the value at build time.
+  try {
+    return import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH as
+      | string
+      | undefined;
+  } catch {
+    // do nothing
+  }
+}

packages/web/tsup.config.js

@@ -29,8 +29,9 @@ export default defineConfig([
     ...cfg,
     entry: {
       index: 'src/nuxt/index.ts',
+      module: 'src/nuxt/module.ts',
     },
-    external: ['vue', 'vue-router'],
+    external: ['vue', 'vue-router', 'nuxt', '@nuxt/kit', '@nuxt/schema'],
     outDir: 'dist/nuxt',
   },
   {