Usage

Now that your Cookiebot plugin has been configured, let's see how we can use it.

The Cookiebot composable has two major functionalities: the consent banner and the cookie declaration. Here's how you can use them:

Using nuxt-i18n? The locale will be used to set the culture prop for your Cookiebot implementation.

For basic usage, nothing else has to be done! Just follow the example from the configuration step.

The consent banner will be triggered automatically, unless the autoConsentBanner option is set tofalse in the Nuxt config file. To override consent banner settings, head over to the advanced usage section.

The cookie declaration generates your configured policy from the Cookiebot control center, as well as a possibility for visitors to adjust their cookie preferences. Nuxt auto-imports the composable for you, so you don't have to import it explicitly.

It can be used as follows:

src/app.vue
<script setup lang="ts">
    const cookieDeclarationRef = ref<HTMLElement | null>(null);

    const { cookieDeclaration } = useCookiebot();

    onMounted(() => {
        cookieDeclaration(cookieDeclarationRef);
    });
</script>

<template>
    <div ref="cookieDeclarationRef" />
</template>
Table of Contents