Composables

All composables are auto-imported.

useRequestConsent

Ask for consent just-in-time. Resolves to a boolean once the user decides. If the category is already granted (or is necessary), it resolves immediately; otherwise it opens the settings modal with the relevant context.

const granted = await useRequestConsent('analytics')
if (granted) {
  // load analytics, set the cookie, etc.
}

useConsentCookie

A useCookie-like ref that only persists once its category has been consented. Before consent, reads/writes stay in memory; after consent, it reads from and writes to the real cookie.

const theme = useConsentCookie<'light' | 'dark'>('theme_preference', 'preferences', {
  default: () => 'light',
})

async function toggleTheme() {
  if (await useRequestConsent('preferences')) {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }
}

Signature: useConsentCookie<T>(name, category, options?) — options are standard Nuxt CookieOptions<T>.

useConsentText

Resolve a localized text key into renderable parts. Link placeholders like {privacy} become link parts using your linkMap; everything else is a string part.

const parts = useConsentText('bannerDescription')
// → [{ type: 'string', content: '…' }, { type: 'link', content: 'Privacy Policy', href: '/privacy-policy' }, …]

// With replacements:
useConsentText('contextMessage', { categoryName: 'Analytics' })

Render parts like this:

<template v-for="part in useConsentText('bannerDescription')" :key="part.content">
  <a v-if="part.type === 'link'" :href="part.href">{{ part.content }}</a>
  <span v-else>{{ part.content }}</span>
</template>

useConsentLocalized

Resolve a config value that may be translated — a cookie's provider or duration, a category's description — in the active locale. A string comes back as it is; { en: '1 year', de: '1 Jahr' } gives the active locale's entry, else the fallbackLocale one. Use it in a custom modal:

<td>{{ useConsentLocalized(cookie.duration) }}</td>

Component composables

These back the built-in components and are handy when building custom UI:

• useConsentBanner() → { isVisible, acceptAll, customize, colors, darkColors }
• useConsentModal() → { isOpen, categories, localConsentState, openAccordions, contextualMessage, acceptAll, saveSelection, closeModal, toggleAccordion, colors, darkColors }
• useConsentFab() → { isVisible, openModal, colors, darkColors }