Get real time web analytics for your Nuxt 3 app with Vercel for free

Introduction

You can keep track of how many visitors come to your app, what pages they view, and where they are coming from in real-time. All without a single cent with Vercel's web analytics under the free plan.

Add Vercel Analytics to your project

With pnpm add the @vercel/analytics package by running this command in a terminal in your project.

pnpm i @vercel/analytics

Create a file analytics.client.ts under your plugins folder and insert the following:

//plugins/analytics.client.tsimport { inject } from "@vercel/analytics";export default defineNuxtPlugin(() => {  inject();});

Now re-deploy your project with Vercel. If you are using Git like us from this article, just commit and push your changes with Git and it will automatically re-deploy with Vercel.

Enable Web Analytics in Vercel

Click here to go to the Analytics tab in your Vercel dashboard and click Enable from the dialog.

✨ You have now enabled free analytics with Vercel. Just wait for it to update when it picked up traffic from your web app and it will display the dashboard as follow:

What's next

Check out more related articles below!

Create a Nuxt 3 Content blog with Tailwind CSS in one hour.
Deploy your Nuxt 3 app with Vercel for free in 5 mins