如何在Vue 3中实现Cookiebot
如何在Vue 3中实现Cookiebot
提问于 2022-10-17 14:44:53
我已经在我的vue 2项目中使用了cookiebot，但是现在我切换到vue 3，并且cookiebot不再工作了。我做了以下步骤：
- 安装cookiebot插件
npm install @ambitiondev/vue-cookiebot plugin-save
- 将cookiebot配置放在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')
})- 在加载App.vue的onMounted文件中实现cookiebot。
<script setup>
import { onMounted} from 'vue';
import { RouterView } from 'vue-router'
onMounted( async () => {
$cookiebot.consentBanner()
})
</script>但不起作用。我总是收到错误消息：
未定义的TypeError: Vue.prototype是未定义的安装vue-cookiebot plugin.esm.js:195使用运行时-core.esm-bundler.js:4349 main.js:22 vue- main.js:22 is plugin.esm.js:195:35 install vue-core.esm-bundler.js:4349 main.js:22
有人知道我做错了什么吗？这个插件不适用于vue 3(最近一次更新是在2020年9月9日)，还是我做错了什么？
谢谢你，克里斯
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-17 19:46:20
captainskippah是对的，插件不支持vue 3。我卸载了插件完全，删除了main.js中的条目，并通过脚本直接为vue 3实现了Cookiebot，如下所示：
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>有关详细信息，请查看链接(提供的链接是船长) cookiebot.com ibot.com/en/developer
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74099026
复制相关文章
相似问题
腾讯云开发者
