Continuing Dario Ferderber's work on gitlab.com/broj42/nuxt-cookie-control.
Try it out here: Nuxt.js Cookie Control
npm i -D @dargmuesli/nuxt-cookie-control
yarn add -D @dargmuesli/nuxt-cookie-control
pnpm i -D @dargmuesli/nuxt-cookie-control
// nuxt.config.js
modules: [
'@dargmuesli/nuxt-cookie-control'
]
// or
modules: [
['@dargmuesli/nuxt-cookie-control', {
// module options
}]
]Components and composables are auto-imported!
<!-- component.vue -->
<template>
<CookieControl locale="en" />
</template>
<script setup lang="ts">
const {
cookiesEnabled,
cookiesEnabledIds,
isConsentGiven,
isModalActive,
moduleOptions
} = useCookieControl()
</script><CookieControl>
<template #bar>
<h3>Bar title</h3>
<p>Bar description (you can use $cookies.text.barDescription)</p>
<n-link>Go somewhere</n-link>
</template>
</CookieControl><template #modal>
<h3>Modal title</h3>
<p>Modal description</p>
</template><template #cookie="{config}">
<span v-for="c in config" :key="c.id" v-text="c.cookies"/>
</template>- locale:
['en']
<CookieControl locale="de"/>Currently available:
- ar
- de
- en
- es
- fr
- hr
- hu
- it
- ja
- nl
- no
- pt
- ru
- uk
// Position of cookie bar.
// 'top-left', 'top-right', 'top-full', 'bottom-left', 'bottom-right', 'bottom-full'
barPosition: 'bottom-full',
// 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',
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: [],
}
// 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 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 polyfill.
isCssPolyfillEnabled: true,
// 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,
// or:
// isIframeBlocked: {
// initialState: false
// },
// The domain to set cookies on.
// This is useful in case you have subdomains (shop.yourdomain.com)
domain: 'yourdomain.com',
// The locales to include.
locales: ['en'],
// Translations to override.
localeTexts: {
en: {
save: 'Remember',
}
}Every property the includes a { en: ... } value is a translatable property that could instead only specify a string ('...') or other locales as well ({ de: ..., uk: ... }).
{
description: {
en: 'Used for cookie control.'
},
id: 'ga', // if unset, the slugified name will be used
name: {
en: 'Google Analytics'
},
src: 'https://www.googletagmanager.com/gtag/js?id=<API-KEY>',
targetCookieIds: ['cookie_control_consent', 'cookie_control_enabled_cookies']
}
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent