Add Privatus Analytics to Nuxt

Add privacy-friendly analytics to a Nuxt app with the @privatus/nuxt module or a head script in nuxt.config, with route changes tracked automatically.

# Add Privatus Analytics to Nuxt

> Add privacy-friendly analytics to a Nuxt app with the @privatus/nuxt module or a head script in nuxt.config, with route changes tracked automatically.

## With `@privatus/nuxt`

> **Warning:** `@privatus/nuxt` is not published on npm yet. Until it is,
> don't install a package with this name from the public registry,
> because anyone could have published it. Use the setup under
> [Without the package](#without-the-package) instead.

```sh
npm install @privatus/nuxt
```

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@privatus/nuxt'],
  privatus: {
    site: 'pa_YOURSITEID',
    modules: ['engage', 'auto'],
  },
})
```

The module server-renders the tracker into `<head>` and auto-imports
`usePrivatus()`:

```vue
<script setup lang="ts">
const privatus = usePrivatus()
</script>

<template>
  <button @click="privatus.track('Download', { file: 'guide.pdf' })">Download</button>
</template>
```

## Without the package

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: 'https://privatusanalytics.com/js/pa.js', defer: true, 'data-site': 'pa_YOURSITEID' },
      ],
    },
  },
})
```

Vue Router uses `history.pushState`, so route changes are tracked
automatically.

Markdownで表示

With `@privatus/nuxt`#

Warning: @privatus/nuxt is not published on npm yet. Until it is, don't install a package with this name from the public registry, because anyone could have published it. Use the setup under Without the package instead.

npm install @privatus/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@privatus/nuxt'],
  privatus: {
    site: 'pa_YOURSITEID',
    modules: ['engage', 'auto'],
  },
})

The module server-renders the tracker into <head> and auto-imports usePrivatus():

vue

<script setup lang="ts">
const privatus = usePrivatus()
</script>

<template>
  <button @click="privatus.track('Download', { file: 'guide.pdf' })">Download</button>
</template>

Without the package#

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: 'https://privatusanalytics.com/js/pa.js', defer: true, 'data-site': 'pa_YOURSITEID' },
      ],
    },
  },
})

Vue Router uses history.pushState, so route changes are tracked automatically.

With @privatus/nuxt#

Without the package#

With `@privatus/nuxt`#