Nuxt Cookie 控件
翻译为:ar, az, be, bg, ca, cs, da, de, en, es, fi, fr, hr, hu, id, it, ja, km, ko, it, nl, no, oc, pt-BR, pl, ro, r, ru, sk, sv, tr, uk and zh
✅ Vue 3 支持
QQ 对于 Nuxt 2, 请使用 nuxt- cookie- control < 3. 0.0
自从Dario Ferderber继续从事 gitlab.com/broj42/nuxt-cookie-控制一定要读读读读!
开始
安装
npx nuxi@latest module add cookie-control
配置
// nuxt.config.js
modules: [
'@dargmuesli/nuxt-cookie-control'
],
cookieControl: {
// typed module options
}
// or
modules: [
['@dargmuesli/nuxt-cookie-control', {
// untyped module options
}]
]
使用量
<!-- app.vue -->
<template>
<CookieControl locale="en" />
</template>
<script setup lang="ts">
const {
cookiesEnabled,
cookiesEnabledIds,
isConsentGiven,
isModalActive,
moduleOptions,
} = useCookieControl()
// example: react to a cookie being accepted
watch(
() => cookiesEnabledIds.value,
(current, previous) => {
if (
!previous?.includes('google-analytics') &&
current?.includes('google-analytics')
) {
// cookie with id `google-analytics` got added
window.location.reload() // placeholder for your custom change handler
}
},
{ deep: true },
)
</script>
// plugins/analytics.client.ts
// example: initialization based on enabled cookies
const cookieControl = useCookieControl()
if (cookieControl.cookiesEnabledIds.value.includes('google-analytics')) {
initGoogleAnalytics() // placeholder for your custom initialization
}
程序化 Cookie 注册( Kit)
其他 Nuxt 模块可以在设置阶段使用 @dargmuesli/nuxt-cookie-control/kit 输出。 这在饼干由外部模块管理时是有用的,这些模块需要自己在饼干控制系统中注册.
// modules/my-analytics-module.ts
import { defineNuxtModule } from '@nuxt/kit'
import { addCookieControl, CookieType } from '@dargmuesli/nuxt-cookie-control/kit'
export default defineNuxtModule({
setup() {
addCookieControl(
{
id: 'google-analytics',
name: 'Google Analytics',
description: 'Tracks user interactions and page views.',
src: 'https://www.googletagmanager.com/gtag/js',
},
CookieType.OPTIONAL
)
}
})
addCookieControl(cookie, type, nuxt?)
在模块设置时将饼干添加到饼干控制配置中.
- 饼干
Cookie- 要注册的饼干对象 - 类型
CookieType- 类别:CookieType.NECESSARY或者说CookieType.OPTIONAL - 纳克特
Nuxt(可选) - Nuxt 实例(如果不提供则自动从上下文中检测)
注释:
- 在模块设置阶段必须调用, 而非运行时
- 通过检查所有类别的现有饼干ID来防止饼干的重复
- 如果一个具有相同ID的饼干已经存在, 则悄悄返回
API 密码
模块选项
// Position of cookie bar.
// 'top-left', 'top-right', 'top-full', 'bottom-left', 'bottom-right', 'bottom-full'
barPosition: 'bottom-full',
// Position of the cookie control button.
// 'top-left', 'top-right', 'bottom-left', 'bottom-right'
// @default 'bottom-right'
controlButtonPosition: 'bottom-right',
// Switch to toggle if clicking the overlay outside the configuration modal closes the modal.
closeModalOnClickOutside: true,
// Component colors.
// If you want to disable colors set colors property to false.
colors: {
barBackground: '#000',
barButtonBackground: '#fff',
barButtonColor: '#000',
barButtonHoverBackground: '#333',
barButtonHoverColor: '#fff',
barTextColor: '#fff',
checkboxActiveBackground: '#000',
checkboxActiveCircleBackground: '#fff',
checkboxDisabledBackground: '#ddd',
checkboxDisabledCircleBackground: '#fff',
checkboxInactiveBackground: '#000',
checkboxInactiveCircleBackground: '#fff',
controlButtonBackground: '#fff',
controlButtonHoverBackground: '#000',
controlButtonIconColor: '#000',
controlButtonIconHoverColor: '#fff',
focusRingColor: '#808080',
modalBackground: '#fff',
modalButtonBackground: '#000',
modalButtonColor: '#fff',
modalButtonHoverBackground: '#333',
modalButtonHoverColor: '#fff',
modalOverlay: '#000',
modalOverlayOpacity: 0.8,
modalTextColor: '#000',
modalUnsavedColor: '#fff',
},
// The cookies that are to be controlled.
// See detailed explanation further down below!
cookies: {
necessary: [],
optional: [],
}
// The milliseconds from now until expiry of the cookies that are being set by this module.
cookieExpiryOffsetMs: 1000 * 60 * 60 * 24 * 365, // one year
// Names for the cookies that are being set by this module.
cookieNameIsConsentGiven: 'ncc_c',
cookieNameCookiesEnabledIds: 'ncc_e',
// Options to pass to nuxt's useCookie
cookieOptions: {
path: '/',
sameSite: 'strict',
},
// Switch to toggle the "accept necessary" button.
isAcceptNecessaryButtonEnabled: true,
// Switch to toggle the button that opens the configuration modal.
isControlButtonEnabled: true,
// Switch to toggle the concatenation of target cookie ids to the cookie description.
isCookieIdVisible: false,
// Switch to toggle the inclusion of this module's css.
// If css is set to false, you will still be able to access your color variables.
isCssEnabled: true,
// Switch to toggle the css variables ponyfill.
isCssPonyfillEnabled: false,
// Switch to toggle the separation of cookie name and description in the configuration modal by a dash.
isDashInDescriptionEnabled: true,
// Switch to toggle the blocking of iframes.
// This can be used to prevent iframes from adding additional cookies.
isIframeBlocked: false,
// Switch to toggle the modal being shown right away, requiring a user's decision.
isModalForced: false,
// "Decline all" in the modal removes all cookies by default (which will re-open the cookie bar).
// Set this to true to decline all optional cookies and accept necessary cookies.
declineAllAcceptsNecessary: false,
// The locales to include.
locales: ['en'],
// Translations to override.
localeTexts: {
en: {
save: 'Remember',
}
}
饼干
所有财产,包括 { en: ... } 值是一个可变属性,它只能指定字符串('...')或其他地点({ de: ..., uk: ... }) (中文(简体) ).
{
description: {
en: 'This cookie stores preferences.'
},
id: 'p', // use a short cookie id to save bandwidth and prefixes to separate
isPreselected: false // `true` is not GDPR compliant! This flag does not enable any cookies, it only preselects the cookie's modal toggle. The default is `false`.
name: {
en: 'Preferences' // you always have to specify a cookie name (in English)
},
links: {
'https://example.com/privacy': 'Privacy Policy',
'https://example.com/terms': 'Terms of Service',
},
src: 'https://example.com/preferences/js?id=<API-KEY>',
targetCookieIds: ['xmpl_a', 'xmpl_b'],
}
组件槽
栏
<CookieControl>
<template #bar>
<h2>Bar title</h2>
<p>Bar description (you can use $cookies.text.barDescription)</p>
<n-link>Go somewhere</n-link>
</template>
</CookieControl>
模式
<CookieControl>
<template #modal>
<h2>Modal title</h2>
<p>Modal description</p>
</template>
</CookieControl>
饼干
<CookieControl>
<template #cookie="{ cookie }">
<h3 v-text="cookie.name" />
<span v-html="cookie.description" />
<div v-if="cookie.targetCookieIds">
<b>Cookie ids: </b>
<span v-text="cookie?.targetCookieIds?.join(', ')" />
</div>
</template>
</CookieControl>
框架
<CookieIframe>
<template #iframe>
Content to display if iframes are blocked.
</template>
</CookieIframe>
控制按钮
<CookieIframe>
<template #controlButton>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="currentColor" d="M247.2 17c-22.1-3.1-44.6.9-64.4 11.4l-74 39.5c-19.7 10.5-35.6 27-45.4 47.1l-36.7 75.6c-9.8 20.1-13 42.9-9.1 64.9l14.5 82.8c3.9 22.1 14.6 42.3 30.7 57.9l60.3 58.4c16.1 15.6 36.6 25.6 58.7 28.7l83 11.7c22.1 3.1 44.6-.9 64.4-11.4l74-39.5c19.7-10.5 35.6-27 45.4-47.2l36.7-75.5c9.8-20.1 13-42.9 9.1-64.9l-14.6-82.8c-3.9-22.1-14.6-42.3-30.7-57.9l-60.2-58.3c-16.1-15.6-36.6-25.6-58.7-28.7zM208 144a32 32 0 1 1 0 64a32 32 0 1 1 0-64m-64 192a32 32 0 1 1 64 0a32 32 0 1 1-64 0m224-64a32 32 0 1 1 0 64a32 32 0 1 1 0-64"/></svg>
</template>
</CookieIframe>
道具
- 语言 :
['en']
<CookieControl locale="de" />