How to implement Cookiebot in Vue 3

Question

I used cookiebot already for my vue 2 projects but now I switched to vue 3 and the cookiebot does not work anymore. I did the following steps:

1. Install the cookiebot plugin

npm install @ambitiondev/vue-cookiebot-plugin --save

2. Put the cookiebot configuration in the main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import VueGoogleCharts from 'vue-google-charts'
import VueCookieBot from '@ambitiondev/vue-cookiebot-plugin'

import App from './App.vue'
import router from './router'

import './assets/main.css'

import 'vuetify/styles'
import { vuetify } from './plugins/vuetify'


const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

const app = createApp(App)

// IMPLEMENTATION OF COOKIE CONSENT TOOL COOKIEBOT
app.use(VueCookieBot, {
    cookieBotID: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx'
  })


//app.use(createPinia())
app.use(pinia)
app.use(router)
app.use(vuetify)
app.use(VueGoogleCharts)

//app.mount('#app')
router.isReady().then(() => {
    app.mount('#app')
})

3. Implement the cookiebot in the App.vue file that it is loaded onMounted.

<script setup>
    import { onMounted} from 'vue';
    import { RouterView } from 'vue-router'

    onMounted( async () => {
        $cookiebot.consentBanner() 
    })
</script>

But it doesn't work. I always get the error message:

Uncaught TypeError: Vue.prototype is undefined install vue-cookiebot-plugin.esm.js:195 use runtime-core.esm-bundler.js:4349 main.js:22 vue-cookiebot-plugin.esm.js:195:35 install vue-cookiebot-plugin.esm.js:195 use runtime-core.esm-bundler.js:4349 main.js:22

Does anybody know what I do wrong? Does the plugin not work with vue 3 (last update from on Sep 9, 2020) or do I do anything wrong?

Thanks and br, Chris

Answer 1

captainskippah was right, the plugin does not support vue 3. I deinstalled the plugin completele, deleted the entry in the main.js and implemented the Cookiebot for vue 3 directly via the script as shown below:

App.vue

<script setup>
    import { onMounted} from 'vue';
    import { RouterView } from 'vue-router'

    onMounted( async () => {
        let externalScript = document.createElement('script')
        externalScript.setAttribute('src', 'https://consent.cookiebot.com/uc.js?cbid=xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx')
        document.head.appendChild(externalScript)
    })
</script>

<template>
      <v-app>
        <Nav />

        <v-main>
            <RouterView />
        </v-main>
        
        <Footer />
    </v-app>
</template>

<style>
</style>

For details please check the link (which was provided captainskippah) cookiebot.com/en/developer

Answer 2

UPDATE OCTOBER 2023

This version of the plugin now works with vue3/Nuxt3:

https://github.com/ambitiondev/vue-cookiebot

You might need to install the package @netvlies/utility-collection for it to work, but it works perfectly.

Answer 3

Update februari 2024

The plugin that has been mentioned before now also has official Nuxt support. Installing additional packages is no longer required.

https://vue-nuxt-cookiebot.netlify.app/

Simple setup goes like

npm install @ambitiondev/vue-cookiebot

// Vendor
import { cookieBot } from '@ambitiondev/vue-cookiebot';
import { createApp } from 'vue';

// Components
import App from './App.vue';

const app = createApp(App);

app.use(cookieBot, {
    cookieBotId: 'MY_COOKIEBOT_ID',
});

app.mount('#app');

and then you can use it in App.vue like this:

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

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

    onMounted(() => {
        consentBanner();
    });
</script>

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