useCookieFirst()

Nuxt CookieFirst comes with one neat composable to make your GDPR and Cookie Consent life way easier. useCookieFirst() enables you to listen to various events from CookieFirst, see accepted services, decline or even accept them and play around with the CookieBanner itself.

Reactive Properties

categories

The current consent categories enabled.

<script setup>
const {categories} = useCookieFirst();
console.log(categories.value);
</script>

export interface CookieFirstCategories{
  advertising: boolean,
  functional: boolean,
  necessary: boolean,
  performance: boolean
}

export type CookieFirstCategoriesType = 'advertising' | 'functional' | 'necessary' | 'performance'

services

The current consent services enabled.

<script setup>
const {services} = useCookieFirst();
console.log(services.value);
</script>

export interface CookieFirstServices {
  cookiefirst: boolean

  [key: string]: boolean
}

Methods

openPanel(tab?: "settings" | "cookie" | "policy")

Opens the Cookie Preference Center if not currently open. The tab to open can be provided, and if not, the last opened tab will be used.

<template>
  <button @click="openPanel()">Open Panel</button>
</template>

<script setup>
const {openPanel} = useCookieFirst();
</script>

closePanel()

Closes the Cookie Preference Center if currently open.

<template>
  <button @click="closePanel()">Close Panel</button>
</template>

<script setup>
const {closePanel} = useCookieFirst();
</script>

withdrawConsent()

Consent withdraw function will clear the visitor's consent and log such change in our consent log. After this action is performed, the website will reload to allow visitors to have a fresh start on a domain. The banner will be shown again, and no methods changing consent will be available until the visitor consents again.

<script setup>
const {withdrawConsent} = useCookieFirst();
withdrawConsent();
</script>

updateConsent(categories: CookieFirstCategories)

Update visitors consent categories and set it to the given value.

<script setup>
const {updateConsent} = useCookieFirst();
updateConsent({
  advertising: false,
  functional: true,
  necessary: true,
  performance: true
});
</script>

acceptCategory(category: 'advertising' | 'functional' | 'necessary' | 'performance')

Accept a single consent category.

<script setup>
const {acceptCategory} = useCookieFirst();
acceptCategory('advertising');
</script>

acceptAllCategories()

Accept all consent categories.

<script setup>
const {acceptAllCategories} = useCookieFirst();
acceptAllCategories();
</script>

acceptPreselectedCategories()

This function allows you to accept only the categories, which have been previously pre-selected in the domain settings screen in CookieFirst admin panel.

<script setup>
const {acceptPreselectedCategories} = useCookieFirst();
acceptPreselectedCategories();
</script>

declineAllCategories()

This function allows you to accept only the necessary category and decline all other categories, with one line of code. Although it may seem similar to the withdrawConsent() function, it doesn't erase the consent completely and doesn't show the cookie banner. It updates the consent to have only the necessary cookies enabled.

<script setup>
const {declineAllCategories} = useCookieFirst();
declineAllCategories();
</script>

declineCategory(category: 'advertising' | 'functional' | 'necessary' | 'performance')

This function allows you to decline only one cookie category and preserve the rest of the consent as it was previously saved.

<script setup>
const {declineCategory} = useCookieFirst();
declineCategory('advertising');
</script>

acceptService(service: string | string [])

This function allows you to accept specified services by their unique identifier. If consent policy option is set to “category-based” and not “service-based”, the function will accept all categories of which this service is part.

<script setup>
const {acceptService} = useCookieFirst();
acceptService('google-analytics');

//or accept multiple services
acceptService(['google-analytics', 'google-tag-manager']);
</script>

declineService(service: string | string [])

This function allows you to decline one or multiple services and preserve the rest of the consent as it was previously saved. If consent policy option is set to “category-based” and not “service-based”, the function will decline all categories of which this service is part.

<script setup>
const {declineService} = useCookieFirst();
declineService('google-analytics');

//or decline multiple services
declineService(['google-analytics', 'google-tag-manager']);
</script>

changeLanguage(language: string)

This function allows you to change the language of the Cookie Preference Center. The language must be a valid ISO 639-1 language code.

<script setup>
const {changeLanguage} = useCookieFirst();
changeLanguage('de');
</script>

Events

init()

This function will be called when CookieFirst is ready.

<script setup>
const {init} = useCookieFirst();
init((cookieFirst) => {
  console.log('CookieFirst object is ready:', cookieFirst);
});
</script>

onConsentCategoryChange()

Is triggered when the consent categories change.

<script setup>
const {onConsentCategoryChange} = useCookieFirst();
onConsentCategoryChange(categories => {
  console.log('Consent categories changed:', categories);
});
</script>

onConsentServiceChange()

Is triggered when the consent services change.

<script setup>
const {onConsentServiceChange} = useCookieFirst();
onConsentServiceChange(services => {
  console.log('Consent services changed:', services);
});
</script>

onLayerReady()

Is triggered when the layer is visible/ready.

<script setup>
const {onLayerReady} = useCookieFirst();
onLayerReady(layer => {
  console.log('Layer ready:', layer);
});
</script>