如何在 Vue 3 中实现 Cookiebot-解网

问：

我已经在我的 vue 2 项目中使用了 cookiebot，但现在我切换到 vue 3，cookiebot 不再工作了。我执行了以下步骤：

安装 cookiebot 插件

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

将 cookiebot 配置放在主 .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')
})

在加载 cookie 的 App.vue 文件中实现 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 使用 runtime-core.esm-bundler.js：4349 主 .js：22 vue-cookiebot-plugin.esm.js：195：35 安装 vue-cookiebot-plugin.esm.js：195 使用 runtime-core.esm-bundler.js：4349 主 .js：22

有人知道我做错了什么吗？该插件是否不适用于 vue 3（最后更新于 2020 年 9 月 9 日）还是我做错了什么？

谢谢和br，克里斯

vue.js vuejs3 cookieconsent cookiebot

<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>

有关详细信息，请查看链接（提供 captainskippah）cookiebot.com/en/developer

0赞 Marghen 10/12/2023 #2

更新日期：2023 年 10 月

这个版本的插件现在可以与 vue3/Nuxt3 一起使用：

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

您可能需要安装 @netvlies/utility-collection 软件包才能使其正常工作，但它运行良好。

上一个：在 chrome 开发者中识别 shopify 同意 Cookie 名称

下一个：jQuery DataTables：添加额外的列

如何在 Vue 3 中实现 Cookiebot

How to implement Cookiebot in Vue 3

评论