Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/barbapapazes/nuxt-clarity-analytics
A module to easily integrate Clarity Analytics into your Nuxt 3 project.
https://github.com/barbapapazes/nuxt-clarity-analytics
Last synced: about 2 months ago
JSON representation
A module to easily integrate Clarity Analytics into your Nuxt 3 project.
- Host: GitHub
- URL: https://github.com/barbapapazes/nuxt-clarity-analytics
- Owner: Barbapapazes
- Created: 2023-02-24T10:26:28.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-06T11:54:29.000Z (9 months ago)
- Last Synced: 2024-04-06T12:37:23.558Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 175 KB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nuxt Clarity Analytics
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
A module to easily integrate Clarity Analytics into your Nuxt 3 project.
> [!NOTE]
> I recommend you to give a try to [Nuxt Scripts](https://scripts.nuxt.com/scripts/marketing/clarity), a more complete solution.
- [✨ Release Notes](https://github.com/Barbapapazes/nuxt-clarity-analytics/releases)
## Features
- ✅ Works with Nuxt 3 using Nitro (SSR and SSG)
## Quick Setup
1. Add `nuxt-clarity-analytics` dependency to your project
```bash
npx nuxi@latest module add clarity-analytics
```
2. Add `nuxt-clarity-analytics` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: [
'nuxt-clarity-analytics'
]
})
```
Then, you must register your clarity ID project `NUXT_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!
You can also use the util `clarityContent` to use a cookie when the user consent to it. It's a wrapper around `window.clarity`. [See Clarity documentation](https://learn.microsoft.com/en-us/clarity/setup-and-installation/cookie-consent).
## Development
```bash
# 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
```
[npm-version-src]: https://img.shields.io/npm/v/nuxt-clarity-analytics/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-clarity-analytics
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-clarity-analytics.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-clarity-analytics
[license-src]: https://img.shields.io/npm/l/nuxt-clarity-analytics.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-clarity-analytics