Advanced Usage

Each instance of the Cookiebot composable can be configured and thus using app configuration / stateful logic to enhance your Cookiebot implementation.

For a full list of options, consult the api reference.
Setting culture from nuxt-i18n is done automatically.
src/app.vue
<script setup lang="ts">
    const { consentBanner } = useCookiebot({
        // Add your custom options here
        level: 'implied'
    });

    // Make sure to load the consent banner in the root!
    // Do not implement in onMounted hook
    consentBanner();
</script>

<template>
    <!-- templating here -->
</template>
nuxt.config.ts
export default defineNuxtConfig({
    modules: ["@ambitiondev/nuxt-cookiebot"],
    cookiebot: {
        // disable auto consent banner when overriding with composable
        autoConsentBanner: false,
        cookieBotId: "COOKIEBOT_ID_HERE",
    },
});

Blocking mode example

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

    const { cookieDeclaration } = useCookiebot({
        blockingMode: 'auto'
    });

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

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