vue.jsvuejs3cookieconsentcookiebot

How to implement Cookiebot in Vue 3


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

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


Solution

  • 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