@tickboxhq/nuxt
@tickboxhq/nuxt
Nuxt module for Tickbox. Wires up the Vue adapter, auto-imports useConsent, auto-registers <ConsentBanner>, and reads the consent cookie on the server so SSR'd pages reflect the visitor's choice.
Install
npm install @tickboxhq/nuxt
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@tickboxhq/nuxt'],
})
// consent.config.ts (project root)
import { defineConsent, jurisdictions } from '@tickboxhq/core'
export default defineConsent({
jurisdiction: jurisdictions.UK_DUAA,
policy: { version: '2026-05-06', url: '/privacy' },
categories: {
necessary: { required: true },
analytics: { vendors: ['plausible', 'fathom'] },
},
})
Use it
useConsent is auto-imported. <ConsentBanner> is auto-registered.
<script setup lang="ts">
const { granted, grant, deny } = useConsent('analytics')
</script>
<template>
<div>
<p v-if="granted">Analytics on</p>
<button @click="deny">Turn off</button>
</div>
</template>
Module options
| Option | Default | Description |
|---|---|---|
configPath |
'~/consent.config' |
Path to the consent config file (relative to project root or using ~ / @ aliases) |
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 1.0.1 | ^3.0 | MIT | |
| 1.0.0 | ^3.0 | MIT | |
| 0.1.3 | ^3.0 | MIT | |
| 0.1.2 | ^3.0 | MIT | |
| 0.1.1 | ^3.0 | MIT | |
| 0.1.0 | ^3.0 | MIT | |
| 0.0.17 | ^3.0 | MIT | |
| 0.0.16 | ^3.0 | MIT | |
| 0.0.15 | ^3.0 | MIT | |
| 0.0.14 | ^3.0 | MIT | |
| 0.0.13 | ^3.0 | MIT | |
| 0.0.12 | ^3.0 | MIT | |
| 0.0.11 | ^3.0 | MIT | |
| 0.0.10 | ^3.0 | MIT | |
| 0.0.9 | ^3.0 | MIT | |
| 0.0.8 | ^3.0 | MIT | |
| 0.0.7 | ^3.0 | MIT | |
| 0.0.6 | ^3.0 | MIT | |
| 0.0.5 | ^3.0 | MIT | |
| 0.0.4 | ^3.0 | MIT | |
| 0.0.1 | ^3.0 | MIT |