@c15t/vue:Vue 和 Nuxt cookie 横幅和 cookie 同意管理
Cookie 横幅, 同意对话框, 以及 Vue 3 和 Nuxt 3 和 Nuxt 4 的首选中心, 您按地点设定的同意政策, 如 GDPR 选择入选或 CCPA 选择出选 。 一个软件包会给你一个Vue插件和一个Nuxt模块,当您需要自己的设计时,会带有可堆肥.
c15t用于 2 100个以上地点包括expo.dev, sed.dev, unkey.dev, mintlify.com, 和 sazabi.com.
关键特性
- 努克特模块:添加
c15t/vue改为modules和服务器解决每个访客的政策,所以横幅在第一个 HTML 中 - Vite 应用程序的 Vue 插件
consentManifest()在构建时将您的策略捆绑 - 预建 cookie 横幅、 同意对话框和优先选择中心
- 完全自定义设计的可编解
- 分析、广告和像素通过@c15t/整合跟踪每个访客的选择:Google Tag管理器、Google的同意模式v2、GA4、Meta像素、PostHog等
- IAB TCF 2.4 横幅和对话框组件
- 通过@c15t/翻译翻译53种语文
先决条件
- Vue 3.5 或以后,或 Nuxt 3 或 4
- 节点.js 20.19或以后
- 一个 内部项目 (免费报名). 对于开发和测试,本地模式不需要后端
安装
pnpm add c15t
这个 c15t 软件包再导出此软件包 c15t/vue,而文件使用该路径。 要安装此软件包, 请运行 pnpm add @c15t/vue 从 @c15t/vue 换句话说.
使用量
- 坚果: 注册模块并设定
NUXT_PUBLIC_C15T_BACKEND_URL到您的 Inth 后端 URL
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['c15t/vue'],
})
- 添加
ConsentRoot和打开偏好对话框的链接app.vue
<!-- app/app.vue -->
<template>
<ConsentRoot />
<NuxtPage />
<footer>
<ConsentDialogLink>Privacy settings</ConsentDialogLink>
</footer>
</template>
- 使用 Vite 键: 安装插件
app.use(c15tVue, { mode: hosted() })从c15t/vue/vue-plugin,并提交ConsentRoot内App.vue - 关于完整的设置,见 Nuxt 快速启动 或 快速启动
在 Inth 上运行 c15t
c15t需要一个后端来服务政策和保存同意记录. 输入 为您运行它。 它把每个选择都储存在它的区域和政策版本中,审计你的现场,并拉动隐私风险请求,在Pro和以上上,每个地区的同意规则都有管理的政策包。 你不运行同意数据库, 地理检索, 上升时间,或升级.
注册是免费的。 运行 npx @inth/cli c15t 创建项目并设置 c15t,或用手创建并复制其后端 URL.
对于开发和测试,本地模式在浏览器中保留选择,不保存同意记录. 别把它运去生产 它的工厂 local()旧名, offline(),仍然工作,在v4离开.
文档
见 文档 用于指南、API参考和示例.
AI 代理文件
这个软件包以Markdown为载体,与已安装的版本相匹配。 安装后,请指定编码代理 node_modules/@c15t/vue/AGENTS.md它将每个向导在 node_modules/@c15t/vue/docs/。 。 。 .
在网络上,每页 c15吨文件 拥有Markdown版本,并且 页:1 全部列出 安装 c15t 代理技能 npx skills add c15t/skills。 。 。 .
支助
- 加入我们 Discord 社区
- 打开我们的问题 GitHub 仓库
- 访问 inth.com (英语) 并使用聊天部件
- 通过电子邮件联系我们的支援团队 支持@inth.com
捐款
警卫
不为安全弱点打开一个公共问题。 私下通过报告 GitHub 的脆弱性报告我们审查所有的报告.
- 不在公共论坛、议题或请求中分担脆弱性
- 给它复制的步骤 和它影响的版本
- 在你透露之前给我们点时间
许可证
由 输入