Nuxt Clarity Analytics

A module to easily integrate Clarity Analytics into your Nuxt 3 project.

• ✨  Release Notes

Features

• ✅  Works with Nuxt 3 using Nitro (SSR and SSG)

Quick Setup

1. Add nuxt-clarity-analytics dependency to your project

# Using pnpm
pnpm add -D nuxt-clarity-analytics

# Using yarn
yarn add --dev nuxt-clarity-analytics

# Using npm
npm install --save-dev nuxt-clarity-analytics

2. Add nuxt-clarity-analytics to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-clarity-analytics'
  ]
})

Then, you must register your clarity ID project MICROSOFT_CLARITY_ID in your environment variables.

And Voilà!

You can easily check that the script is correctly injected by inspecting your page on your browser. Note that nothing is injected if the key is missing!

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release