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:
npm install @ambitiondev/vue-cookiebot-plugin --save
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')
})
<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
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