consentBanner() doesn't work on the latest version

[pieterjanmaes]

Hi,

in v.3.2.1 the consentBanner() function doesn't work anymore. I'am using the latest version of Nuxt (v3.13.0)

When I downgrade to v3.0.1 it works like intended.

I make use of following versions of packages:

• node: v18.19.0
• Nuxt: v3.13.0
• Vue: 3.4.38

// nuxt.config.ts

cookiebot: {
    blockingMode: 'none',
    culture: 'en',
    autoConsentBanner: false,
    cookieBotId: process.env.COOKIEBOT_ID,
  },

// app.vue

const { consentBanner } = useCookiebot();

consentBanner();

[ambitiondevbot]

Hi @pieterjanmaes, thank you for your issue. I can't seem to reproduce it with a "standard" Vite-setup. Do you have anything logged to your console by chance? Are you using Vite or Webpack? Can you provide a minimal reproduction project (e.g. CodeSandbox) in which I can view and test the issue?

[pieterjanmaes]

Hi @ambitiondev,

I've had some time to dive deeper into my issue.

Currently I load the Cookiebot banner after an intro animation + timeout. With v3.0.1 that works perfectly. But in the newer version when you do something like a the following code, the Cookiebot banner doesn't load anymore.

// app.vue

<template>
  <CHeader/>

  <CIntro v-if="!introAnimated" @animated="onIntroAnimated"/>

  <div class="{ 'introAnimated' : introAnimated }" class="page-container">
    <NuxtPage/>
  </div>

</template>

<script setup lang="ts">
    const { consentBanner } = useCookiebot();
    const viewport = useViewport();

    const introAnimated = ref(false);

    function onIntroAnimated() {
        introAnimated.value = true;
        setTimeout(onAfterEnter, 1000);
    }

    // there's no intro animation on smaller viewports
    onMounted(() => {
        if (viewport.isLessThan('lg')) {
            introAnimated.value = true;
            setTimeout(onAfterEnter, 1000);
        }
    });

    function onAfterEnter() {
        consentBanner();
    }
</script>

When i place useCookiebot() in the root, everything works like it should be.

The website I'm working on => onlyhumans.com

[bnachtweh]

@pieterjanmaes I think that I have a good grasp as to why your implementation doesn't work (anymore).

In more recent versions of the plugin, we've moved to rendering the script tag for cookiebot on the server side. Hence the only working usage is to call the consentBanner method outside the onMounted hook.

This is to make sure the script gets loaded in time, but from a Nuxt perspective it is also safer to inject scripts on the server side. My best guess in what you want to achieve is that you would like to show the consent banner after the intro animation is finished and not before, because that would look weird, am I right?

Maybe it's an idea to create a fromTo or enter animation for the div of the consent banner, so it gets loaded beforehand, but it doesn't mess up your intro, because it's not directly visible? You probably want to look for a div with the id CybotCookiebotDialogContentWrapper and add such an animation for it when the intro animation is finished.

[bnachtweh]

Hi @pieterjanmaes, as this issue has become a bit stale, I will close it for now. Please feel free to follow up on any questions you have in another issue.