Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
nuxt-cookie-control
Advanced tools
Try it out here: Nuxt.js Cookie Control
npm i nuxt-cookie-control
//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
<!--template-->
<!--
CookieControl component is registered globally,
you don't need to register it anywhere.
-->
<CookieControl/>
<!--or-->
<CookieControl></CookieControl>
<CookieControl>
<template v-slot:bar>
<h3>Bar title</h3>
<p>Bar description (you can use $cookies.text.barDescription)</p>
<n-link>Go somewhere</n-link>
</template>
</CookieControl>
<template v-slot:modal>
<h3>Modal title</h3>
<p>Modal description</p>
</template>
<template v-slot:cookie="{config}">
<span v-for="c in config" :key="c.id" v-text="c.cookies"/>
</template>
<CookieControl locale="de"/>
Options in nuxt.config.js
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)
modules: [
'nuxt-cookie-control'
]
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=<API-KEY>',
async: true,
cookies: ['_ga', '_gat', '_gid'],
accepted: () =>{
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
},
declined: () =>{
}
}
]
}
Set locale prop
<CookieControl locale="de"/>
If you don't like the default texts you can change them in options (nuxt.config.js)
text: {
locale: {
en: {
barTitle: 'Cookies Different',
barDescription: 'We use our own cookies and third-party...',
},
de: {
...
}
},
//this will override locale text
barTitle: 'Override Title'
}
FAQs
Nuxt Cookies Control Module
The npm package nuxt-cookie-control receives a total of 1,535 weekly downloads. As such, nuxt-cookie-control popularity was classified as popular.
We found that nuxt-cookie-control demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.