Nuxt Cookie Control

!Nuxt Cookie Control
####
Try it out here:
Nuxt.js Cookie Control

🚀 Usage

``bash
npm i nuxt-cookie-control
`
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![npm downloads][kofi-src]][kofi-href]

`javascript
//nuxt.config.js
modules: [
'nuxt-cookie-control'
]
//or
modules: [
['nuxt-cookie-control', {
//your options
}]
]

//to open cookie modal anywhere:
$cookies.modal = true
//or
this.$cookies.modal = true
`
`html





`

Slot

$3

`html



`

$3

`html

`

$3

`html

`

Props

$3

`html

`
#### Default: en,
#### Currently available:
- en
- de
- it
- es
- fr
- pt
- hr
- no
- hu
- ja
- ru
- uk

🔧 Options

Options in nuxt.config.js
`javascript
modules: [
['nuxt-cookie-control', {
//default css (true)
//if css is set to false, you will still be able to access
//your color variables (example. background-color: var(--cookie-control-barBackground))
css: true,

//enable or disable css variables polyfill
cssPolyfill: true,

//in case you have subdomains (shop.yourdomain.com)
domain: 'yourdomain.com',

//if you want to tree-shake locales set locales you want to use
locales: ['en', 'de'],

//modal opener (cookie control)
controlButton: true,

//block iframes to prevent them from adding additional cookies
blockIframe: true,

//or if you want to set initialState to false (default value for initialState is true)
blockIframe: {
initialState: false
},

//position of cookie bar:
//'top-left', 'top-right', 'top-full',
//'bottom-left', 'bottom-right', 'bottom-full'
barPosition: 'bottom-full',

dashInDescription: true,

//default colors
//if you want to disable colors set colors property to false
colors: {
barTextColor: '#fff',
modalOverlay: '#000',
barBackground: '#000',
barButtonColor: '#000',
modalTextColor: '#000',
modalBackground: '#fff',
modalOverlayOpacity: 0.8,
modalButtonColor: '#fff',
modalUnsavedColor: '#fff',
barButtonHoverColor: '#fff',
barButtonBackground: '#fff',
modalButtonHoverColor: '#fff',
modalButtonBackground: '#000',
controlButtonIconColor: '#000',
controlButtonBackground: '#fff',
barButtonHoverBackground: '#333',
checkboxActiveBackground: '#000',
checkboxInactiveBackground: '#000',
modalButtonHoverBackground: '#333',
checkboxDisabledBackground: '#ddd',
controlButtonIconHoverColor: '#fff',
controlButtonHoverBackground: '#000',
checkboxActiveCircleBackground: '#fff',
checkboxInactiveCircleBackground: '#fff',
checkboxDisabledCircleBackground: '#fff',
},

//default texts
text: {
barTitle: 'Cookies',
barDescription: 'We use our own cookies and third-party cookies so that we can show you this website and better understand how you use it, with a view to improving the services we offer. If you continue browsing, we consider that you have accepted the cookies.',
acceptAll: 'Accept all',
declineAll: 'Delete all',
manageCookies: 'Manage cookies',
unsaved: 'You have unsaved settings',
close: 'Close',
save: 'Save',
necessary: 'Necessary cookies',
optional: 'Optional cookies',
functional: 'Functional cookies',
blockedIframe: 'To see this, please enable functional cookies',
here: 'here'
}
]
]

//for multilanguage see - Multilanguage
`
without options (Simple)
`javascript
modules: [
'nuxt-cookie-control'
]
`

$3

`javascript
modules: [
'nuxt-cookie-control'
]
...
...
...
cookies: {
necessary: [
{
//if multilanguage
name: {
en: 'Default Cookies'
},
//else
name: 'Default Cookies',
//if multilanguage
description: {
en: 'Used for cookie control.'
},
//else
description: 'Used for cookie control.',
cookies: ['cookie_control_consent', 'cookie_control_enabled_cookies']
}
],
optional: [
{
name: 'Google Analitycs',
//if you don't set identifier, slugified name will be used
identifier: 'ga',
//if multilanguage
description: {
en: 'Google GTM is ...'
},
//else
description: 'Google GTM is...',

initialState: true,
src: 'https://www.googletagmanager.com/gtag/js?id=',
async: true,
cookies: ['_ga', '_gat', '_gid'],
accepted: () =>{
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
},
declined: () =>{
}
}
]
}
`

$3

Set locale prop
`html

`
#### Default: en,
#### Currently available:
- en
- de
- it
- es
- fr
- pt
- hr
- no
- hu
- ja
- ru
- uk

If you don't like the default texts you can change them in options (nuxt.config.js)
`javascript
text: {
locale: {
en: {
barTitle: 'Cookies Different',
barDescription: 'We use our own cookies and third-party...',
},

de: {
...
}
},

//this will override locale text
barTitle: 'Override Title'
}
``

$3




[npm-version-src]: https://badgen.net/npm/v/nuxt-cookie-control/latest
[npm-version-href]: https://npmjs.com/package/nuxt-cookie-control

[kofi-src]: https://badgen.net/badge/icon/kofi?icon=kofi&label=support
[kofi-href]: https://ko-fi.com/darioferderber

[npm-downloads-src]: https://badgen.net/npm/dm/nuxt-cookie-control
[npm-downloads-href]: https://npmjs.com/package/nuxt-cookie-control