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:

Install the cookiebot plugin

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

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')
})

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

vue-cookiebot simply doesn't support Vue 3. [it was made with Vue 2 in mind](https://github.com/ambitiondev/vue-cookiebot-plugin/blob/1.0.1/package.json#L44). you're going to most likely just use cookiebot yourself: https://www.cookiebot.com/en/developer/ — captainskippah, Oct 17 '22 at 17:56
Thanks captainskippah, you were right. I implemented the cookiebot directly via the script as described in the solution. — Chris, Oct 17 '22 at 19:42

score 0 · Accepted Answer · answered Oct 17 '22 at 19:46

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

How to implement Cookiebot in Vue 3

1 Answers1