Skip to content

Add Vercel Web Analytics to Nuxt#36

Merged
Andreas-Froyland merged 1 commit intomainfrom
vercel/vercel-web-analytics-to-nuxt-pp4uim
Mar 6, 2026
Merged

Add Vercel Web Analytics to Nuxt#36
Andreas-Froyland merged 1 commit intomainfrom
vercel/vercel-web-analytics-to-nuxt-pp4uim

Conversation

@vercel
Copy link
Copy Markdown
Contributor

@vercel vercel bot commented Mar 4, 2026

Installed and configured Vercel Web Analytics for Nuxt

Changes Made

1. Package Installation

  • Added @vercel/analytics version 1.6.1 to dependencies in package.json
  • Updated yarn.lock with the new dependency

2. App.vue Configuration

  • Added a <script setup> section to import Analytics component from '@vercel/analytics/nuxt'
  • Added <Analytics /> component to the template alongside existing components (Toaster, NuxtPage)
  • Preserved existing code structure including the legacy <script> section for Toaster component

Implementation Details

The Analytics component was placed at the root level of the app alongside the Toaster component, ensuring it tracks all page views and interactions across the application. The implementation uses Nuxt's native integration path (@vercel/analytics/nuxt) for optimal compatibility.

Testing & Verification

✅ Build completed successfully (yarn build)
✅ Linting passed with no new errors (yarn lint)
✅ All unit tests passed (yarn test - 6/6 test files, 19/19 tests)
✅ Lock file updated (yarn.lock)

Files Modified

  • app.vue - Added Analytics component and script setup
  • package.json - Added @vercel/analytics dependency
  • yarn.lock - Updated with new dependency resolution

The implementation follows Nuxt best practices and preserves all existing functionality while adding Vercel Web Analytics tracking capabilities.


View Project · Web Analytics

Created by Andreas Frøyland (ananords) with Vercel Agent

Installed and configured Vercel Web Analytics for Nuxt

## Changes Made

### 1. Package Installation
- Added `@vercel/analytics` version 1.6.1 to dependencies in package.json
- Updated yarn.lock with the new dependency

### 2. App.vue Configuration
- Added a `<script setup>` section to import Analytics component from '@vercel/analytics/nuxt'
- Added `<Analytics />` component to the template alongside existing components (Toaster, NuxtPage)
- Preserved existing code structure including the legacy `<script>` section for Toaster component

### Implementation Details
The Analytics component was placed at the root level of the app alongside the Toaster component, ensuring it tracks all page views and interactions across the application. The implementation uses Nuxt's native integration path (`@vercel/analytics/nuxt`) for optimal compatibility.

### Testing & Verification
✅ Build completed successfully (yarn build)
✅ Linting passed with no new errors (yarn lint)
✅ All unit tests passed (yarn test - 6/6 test files, 19/19 tests)
✅ Lock file updated (yarn.lock)

## Files Modified
- `app.vue` - Added Analytics component and script setup
- `package.json` - Added @vercel/analytics dependency
- `yarn.lock` - Updated with new dependency resolution

The implementation follows Nuxt best practices and preserves all existing functionality while adding Vercel Web Analytics tracking capabilities.

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
@vercel
Copy link
Copy Markdown
Contributor Author

vercel bot commented Mar 4, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
veerify Ready Ready Preview, Comment Mar 4, 2026 10:23pm

@Andreas-Froyland Andreas-Froyland marked this pull request as ready for review March 6, 2026 08:05
@Andreas-Froyland Andreas-Froyland merged commit 5376fad into main Mar 6, 2026
9 of 11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant