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:

The consent banner is the popup that appears when (first) visiting the site. It will prompt the visiter to either accept or reject cookies of choice.

To add the consent banner to your app, simply do:

src/App.vue
<script setup lang="ts">
    // Vendor
    import { useCookiebot } from '@ambitiondev/vue-cookiebot';
    import { onMounted } from 'vue';

    // Composable
    const { consentBanner } = useCookiebot();

    consentBanner();
</script>

<template>
    <!-- template goes here -->
</template>

The cookie declaration generates your configured policy from the Cookiebot control center, as well as a possibility for visitors to adjust their cookie preferences. It can be used as follows:

src/App.vue
<script setup lang="ts">
    // Vendor
    import { useCookiebot } from '@ambitiondev/vue-cookiebot';
    import { onMounted, ref } from 'vue';

    // Refs
    const cookieDeclarationRef = ref<HTMLDivElement | null>(null);

    // Composable
    const { cookieDeclaration } = useCookiebot();

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

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