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"/>- en
- de
- it
- es
- fr
- pt
- hr
- no
- hu
- ja
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, //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', //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 - Multilanguagewithout 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"/>- en
- de
- it
- es
- fr
- pt
- hr
- no
- hu
- ja
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' }