通过 100+ 技巧集合学习 Nuxt!

nuxt-clarity-analytics

Nuxt 的 Clarity 分析模块

Nuxt Clarity 分析

npm versionnpm downloadsLicense

一个可以轻松将 Clarity Analytics 集成到您的 Nuxt 3 项目中的模块。

!注意 我建议您尝试 Nuxt Scripts,一个更完整的解决方案。

功能

  • ✅  适用于使用 Nitro (SSR 和 SSG) 的 Nuxt 3

快速设置

  1. nuxt-clarity-analytics 依赖项添加到您的项目
npx nuxi@latest module add clarity-analytics
  1. nuxt-clarity-analytics 添加到 nuxt.config.tsmodules 部分
export default defineNuxtConfig({
  modules: [
    'nuxt-clarity-analytics'
  ]
})

然后,您必须在您的环境变量中注册您的 clarity ID 项目 NUXT_CLARITY_ID

然后,瞧!

您可以通过在浏览器上检查您的页面来轻松检查脚本是否已正确注入。请注意,如果缺少密钥,则不会注入任何内容!

您还可以使用实用程序 clarityContent 在用户同意时使用 cookie。它是 window.clarity 的一个封装器。请参阅 Clarity 文档

开发

# 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