From bbb7d850c9962d2b8056c06eba55a50e66e61c07 Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Thu, 25 Dec 2025 22:54:16 +0000
Subject: [PATCH] Add Vercel Web Analytics to Nuxt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented Vercel Web Analytics integration for Nuxt as requested.

## Changes Made:

### 1. Installed @vercel/analytics package
- Ran `pnpm add @vercel/analytics` to install the latest version (1.6.1)
- Updated package.json with the new dependency
- Updated pnpm-lock.yaml with resolved dependencies

### 2. Updated app/app.vue
- Added import statement: `import { Analytics } from "@vercel/analytics/nuxt";` in the `<script setup>` section
- Added `<Analytics />` component to the template within the UApp component
- Positioned alongside other root-level components like NuxtPage and LazyUContentSearch

### 3. Code Quality
- Ran linter (eslint) which auto-fixed quote style and trailing comma issues throughout the file
- Build verification: Successfully built the Nuxt application with no errors
- No breaking changes to existing functionality

## Files Modified:
- `package.json` - Added @vercel/analytics dependency
- `app/app.vue` - Added Analytics import and component
- `pnpm-lock.yaml` - Updated with new dependency resolution

## Verification Steps Completed:
✓ Package installation successful
✓ Build completed successfully (70.2 MB total size)
✓ Linter passed with no errors
✓ No test suite configured in this project (test step skipped)
✓ No breaking changes to existing code

## Implementation Notes:
- The Analytics component is placed at the root level of the app within the UApp component
- It will automatically track page views and user interactions when deployed
- No configuration is required - the component works out of the box with Vercel deployments
- The import follows the Nuxt-specific entry point (@vercel/analytics/nuxt) for optimal integration

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
---
 app/app.vue    | 84 ++++++++++++++++++++++++++------------------------
 package.json   |  1 +
 pnpm-lock.yaml | 35 +++++++++++++++++++++
 3 files changed, 80 insertions(+), 40 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 03a227e..bf2d658 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,68 +1,70 @@
 <script setup lang="ts">
-const colorMode = useColorMode();
+import { Analytics } from '@vercel/analytics/nuxt'
+
+const colorMode = useColorMode()
 
 const color = computed(() =>
-  colorMode.value === "dark" ? "#020618" : "white",
-);
+  colorMode.value === 'dark' ? '#020618' : 'white'
+)
 
 useHead({
   meta: [
-    { charset: "utf-8" },
-    { name: "viewport", content: "width=device-width, initial-scale=1" },
-    { key: "theme-color", name: "theme-color", content: color },
+    { charset: 'utf-8' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { key: 'theme-color', name: 'theme-color', content: color }
   ],
-  link: [{ rel: "icon", href: "/favicon.ico" }],
+  link: [{ rel: 'icon', href: '/favicon.ico' }],
   htmlAttrs: {
-    lang: "en",
-  },
-});
+    lang: 'en'
+  }
+})
 
 useSeoMeta({
-  titleTemplate: "%s - Nuxt SaaS template",
-  ogImage: "https://ui.nuxt.com/assets/templates/nuxt/saas-light.png",
-  twitterImage: "https://ui.nuxt.com/assets/templates/nuxt/saas-light.png",
-  twitterCard: "summary_large_image",
-});
+  titleTemplate: '%s - Nuxt SaaS template',
+  ogImage: 'https://ui.nuxt.com/assets/templates/nuxt/saas-light.png',
+  twitterImage: 'https://ui.nuxt.com/assets/templates/nuxt/saas-light.png',
+  twitterCard: 'summary_large_image'
+})
 
 const { data: navigation } = await useAsyncData(
-  "navigation",
-  () => queryCollectionNavigation("docs"),
+  'navigation',
+  () => queryCollectionNavigation('docs'),
   {
-    transform: (data) =>
-      data.find((item) => item.path === "/docs")?.children || [],
-  },
-);
+    transform: data =>
+      data.find(item => item.path === '/docs')?.children || []
+  }
+)
 
 const { data: files } = useLazyAsyncData(
-  "search",
-  () => queryCollectionSearchSections("docs"),
-  { server: false },
-);
+  'search',
+  () => queryCollectionSearchSections('docs'),
+  { server: false }
+)
 
 const links = [
   {
-    label: "Docs",
-    icon: "i-lucide-book",
-    to: "/docs/getting-started",
+    label: 'Docs',
+    icon: 'i-lucide-book',
+    to: '/docs/getting-started'
   },
   {
-    label: "Pricing",
-    icon: "i-lucide-credit-card",
-    to: "/pricing",
+    label: 'Pricing',
+    icon: 'i-lucide-credit-card',
+    to: '/pricing'
   },
   {
-    label: "Blog",
-    icon: "i-lucide-pencil",
-    to: "/blog",
+    label: 'Blog',
+    icon: 'i-lucide-pencil',
+    to: '/blog'
   },
   {
-    label: "Changelog",
-    icon: "i-lucide-history",
-    to: "/changelog",
-  },
-];
+    label: 'Changelog',
+    icon: 'i-lucide-history',
+    to: '/changelog'
+  }
+]
 
-provide("navigation", navigation);
+provide('navigation', navigation)
 </script>
 
 <template>
@@ -82,5 +84,7 @@ provide("navigation", navigation);
         :fuse="{ resultLimit: 42 }"
       />
     </ClientOnly>
+
+    <Analytics />
   </UApp>
 </template>
diff --git a/package.json b/package.json
index 01cf6a2..2e64311 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@nuxt/image": "^2.0.0",
     "@nuxt/ui": "^4.2.1",
     "@standard-schema/spec": "^1.0.0",
+    "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
     "@vueuse/nuxt": "^13.9.0",
     "better-sqlite3": "^12.4.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f86550..524e5ff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
       '@standard-schema/spec':
         specifier: ^1.0.0
         version: 1.0.0
+      '@vercel/analytics':
+        specifier: ^1.6.1
+        version: 1.6.1(react@19.2.3)(vue-router@4.6.3(vue@3.5.25(typescript@5.9.3)))(vue@3.5.25(typescript@5.9.3))
       '@vercel/speed-insights':
         specifier: ^1.3.1
         version: 1.3.1(react@19.2.3)(vue-router@4.6.3(vue@3.5.25(typescript@5.9.3)))(vue@3.5.25(typescript@5.9.3))
@@ -2155,6 +2158,32 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@vercel/analytics@1.6.1':
+    resolution: {integrity: sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg==}
+    peerDependencies:
+      '@remix-run/react': ^2
+      '@sveltejs/kit': ^1 || ^2
+      next: '>= 13'
+      react: ^18 || ^19 || ^19.0.0-rc
+      svelte: '>= 4'
+      vue: ^3
+      vue-router: ^4
+    peerDependenciesMeta:
+      '@remix-run/react':
+        optional: true
+      '@sveltejs/kit':
+        optional: true
+      next:
+        optional: true
+      react:
+        optional: true
+      svelte:
+        optional: true
+      vue:
+        optional: true
+      vue-router:
+        optional: true
+
   '@vercel/nft@0.30.3':
     resolution: {integrity: sha512-UEq+eF0ocEf9WQCV1gktxKhha36KDs7jln5qii6UpPf5clMqDc0p3E7d9l2Smx0i9Pm1qpq4S4lLfNl97bbv6w==}
     engines: {node: '>=18'}
@@ -8232,6 +8261,12 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
+  '@vercel/analytics@1.6.1(react@19.2.3)(vue-router@4.6.3(vue@3.5.25(typescript@5.9.3)))(vue@3.5.25(typescript@5.9.3))':
+    optionalDependencies:
+      react: 19.2.3
+      vue: 3.5.25(typescript@5.9.3)
+      vue-router: 4.6.3(vue@3.5.25(typescript@5.9.3))
+
   '@vercel/nft@0.30.3(rollup@4.52.5)':
     dependencies:
       '@mapbox/node-pre-gyp': 2.0.0