通过 100+ 条技巧学习 Nuxt！
55.5K

fathom-analytics
nuxt-fathom

用于 Nuxt 的 Fathom 分析集成
4.4K 次下载
6 个星标
v0.0.2
valgeirbvalgeirb

Nuxt Fathom module

Nuxt Fathom

npm versionnpm downloadsLicenseNuxt

用于集成 Fathom 分析的 Nuxt 模块。

特性

设置

# pnpm
pnpm add -D nuxt-fathom

# npm
npm i -D nuxt-fathom

# yarn
yarn add -D nuxt-fathom

基本用法

将 nuxt-fathom 添加到您的 Nuxt 配置的 modules 部分，并提供您的 Fathom 站点 ID。

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ["nuxt-fathom"],

  fathom: {
    siteId: "FATHOM_SITE_ID",
  },
});

提示：您也可以使用 .env 文件 而不是 fathom 键。

完成！Fathom 分析现在将在您应用程序的客户端中运行。

配置

所有 受支持的模块选项 都可以使用 Nuxt 配置中的 fathom 键进行配置

export default defineNuxtConfig({
  modules: ['nuxt-fathom'],

  fathom: {
    // The Fathom Analytics site ID to use for tracking
    siteId: string,
    // Additional configuration
    config: {
      manual?: boolean
      auto?: boolean
      honorDNT?: boolean
      canonical?: boolean
      spa?: 'auto' | 'history' | 'hash'
    }
  }
})

运行时配置

您可以在项目的 .env 文件中设置所需的选项，而不是在 Nuxt 配置中硬编码您的 Fathom 分析站点 ID，从而利用 运行时通过匹配环境变量自动替换的公共运行时配置值。

# Overwrites the `fathom.siteId` module option
NUXT_PUBLIC_FATHOM_SITE_ID=YOUR_SITE_ID

通过此设置，如果您只想设置站点 ID，则可以省略 Nuxt 配置中的 fathom 键。

模块选项

属性类型描述默认值
manualboolean如果您想手动控制页面视图跟踪。false
autoboolean当 false 时，跳过脚本加载时自动跟踪页面视图。true
honorDNTboolean当 true 时，遵守访问者浏览器中的 DNT 标头。false
canonicalboolean当 false 时，忽略 canonical 标签（如果存在）。true
spa'auto', 'history', 'hash'接受以下值之一：auto、history 或 hash（请参阅高级文档）。undefined

组合式函数

与 Nuxt 3 生态系统中的其他组合式函数一样，它们是自动导入的，可以在应用程序的组件中使用。

useFathom

支持 SSR 的 useFathom 组合式函数提供对以下内容的访问

  • blockTrackingForMe 方法。
  • enableTrackingForMe 方法。
  • isTrackingEnabled 方法。
  • setSite 方法。
  • trackEvent 方法。
  • trackPageview 方法。

它可以如下使用

// Each method is destructurable from the composable
const {
  blockTrackingForMe,
  enableTrackingForMe,
  isTrackingEnabled,
  setSite,
  trackEvent, // The method most likely to be used.
  trackPageview,
} = useFathom();

!注意 由于 fathom 实例仅在客户端可用，因此在服务器上执行的任何 useFathom 方法调用都不会产生任何效果。

开发

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
pnpm run release

贡献者