Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
nuxt-cookie-control-only-button-2
Advanced tools
Readme
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-only-button-2 receives a total of 3 weekly downloads. As such, nuxt-cookie-control-only-button-2 popularity was classified as not popular.
We found that nuxt-cookie-control-only-button-2 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.