Skip to content

Commit 39b0184

Browse files
authored
Add Vercel Web Analytics to Nuxt (#37)
# Vercel Web Analytics Implementation for Nuxt Successfully implemented Vercel Web Analytics for the Nuxt Shadcn Dashboard project. ## Changes Made ### 1. Package Installation - Installed `@vercel/analytics` (v1.6.1) as a production dependency using pnpm - Updated `package.json` and `pnpm-lock.yaml` to reflect the new dependency ### 2. App Integration - **File Modified:** `app/app.vue` - Added import: `import { Analytics } from '@vercel/analytics/nuxt'` (imported first among external packages, in alphabetical order) - Added `<Analytics />` component in the template, positioned alongside other root components like `<Toaster />` - Maintained existing code structure and layout consistency ## Implementation Details The Analytics component was added at the root level of the Nuxt application in `app/app.vue` template, placed after the `ConfigProvider` closing tag but within the `Body` wrapper. This ensures the component is properly integrated into the application lifecycle without interfering with existing components. Import ordering follows the project's eslint configuration (perfectionist/sort-imports rule): 1. External packages sorted alphabetically (@vercel/analytics before reka-ui) 2. Internal imports from aliases (@/...) 3. Style imports ## Testing & Verification ✅ **Build:** Project builds successfully with no errors ✅ **Linting:** ESLint passed with no new errors introduced ✅ **Code Structure:** Existing functionality preserved, only Analytics component added ✅ **Dependencies:** Lock file updated correctly with pnpm ## Files Changed - `app/app.vue` - Added Analytics import and component - `package.json` - Added @vercel/analytics dependency - `pnpm-lock.yaml` - Updated lock file for dependency resolution Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
1 parent c72e485 commit 39b0184

File tree

3 files changed

+38
-0
lines changed

3 files changed

+38
-0
lines changed

app/app.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import { Analytics } from '@vercel/analytics/nuxt'
23
import { ConfigProvider } from 'reka-ui'
34
import { Toaster } from '@/components/ui/sonner'
45
import 'vue-sonner/style.css'
@@ -64,5 +65,7 @@ const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
6465

6566
<Toaster :theme="colorMode.preference as any || 'system'" />
6667
</ConfigProvider>
68+
69+
<Analytics />
6770
</Body>
6871
</template>

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"@tanstack/vue-table": "^8.21.3",
5959
"@unovis/ts": "^1.6.1",
6060
"@unovis/vue": "^1.6.1",
61+
"@vercel/analytics": "^1.6.1",
6162
"embla-carousel": "^8.6.0",
6263
"embla-carousel-vue": "^8.6.0",
6364
"nanoid": "^5.1.6",

pnpm-lock.yaml

Lines changed: 34 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)