48.1K

clarity-analytics

Clarity Analytics Module for Nuxt

1.7K downloads
5 stars
BarbapapazesBarbapapazes

Nuxt Clarity Analytics

npm versionnpm downloadsLicense

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

Features

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

Quick Setup

  1. Add nuxt-clarity-analytics dependency to your project
# Using pnpmpnpm add -D nuxt-clarity-analytics# Using yarnyarn add --dev nuxt-clarity-analytics# Using npmnpm install --save-dev nuxt-clarity-analytics
  1. 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 dependenciesnpm install# Generate type stubsnpm run dev:prepare# Develop with the playgroundnpm run dev# Build the playgroundnpm run dev:build# Run ESLintnpm run lint# Run Vitestnpm run testnpm run test:watch# Release new versionnpm run release