npm i -D @dargmuesli/nuxt-cookie-controlyarn add -D @dargmuesli/nuxt-cookie-controlpnpm i -D @dargmuesli/nuxt-cookie-control

// nuxt.config.jsmodules: [  '@dargmuesli/nuxt-cookie-control'],cookieControl: {  // typed module options}// ormodules: [  ['@dargmuesli/nuxt-cookie-control', {    // untyped module options  }]]

<!-- app.vue --><template>  <CookieControl locale="en" /></template><script setup lang="ts">const {  cookiesEnabled,  cookiesEnabledIds,  isConsentGiven,  isModalActive,  moduleOptions,} = useCookieControl()// example: react to a cookie being acceptedwatch(  () => cookiesEnabledIds.value,  (current, previous) => {    if (      !previous?.includes('google-analytics') &&      current?.includes('google-analytics')    ) {      // cookie with id `google-analytics` got added      window.location.reload() // placeholder for your custom change handler    }  },  { deep: true },)</script>

//  plugins/analytics.client.ts// example: initialization based on enabled cookiesconst cookieControl = useCookieControl()if (cookieControl.cookiesEnabledIds.value.includes('google-analytics')) {  initGoogleAnalytics() // placeholder for your custom initialization}

// Position of cookie bar.// 'top-left', 'top-right', 'top-full', 'bottom-left', 'bottom-right', 'bottom-full'barPosition: 'bottom-full',// Switch to toggle if clicking the overlay outside the configuration modal closes the modal.closeModalOnClickOutside: true,// 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',  focusRingColor: '#808080',  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: [],}// The milliseconds from now until expiry of the cookies that are being set by this module.cookieExpiryOffsetMs: 1000 * 60 * 60 * 24 * 365, // one year// Names for the cookies that are being set by this module.cookieNameIsConsentGiven: 'ncc_c',cookieNameCookiesEnabledIds: 'ncc_e',// Options to pass to nuxt's useCookiecookieOptions: {  path: '/',}// 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 concatenation of target cookie ids to the cookie description.isCookieIdVisible: false,// 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 ponyfill.isCssPonyfillEnabled: false,// 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,// Switch to toggle the modal being shown right away, requiring a user's decision.isModalForced: false,// The locales to include.locales: ['en'],// Translations to override.localeTexts: {  en: {    save: 'Remember',  }}

{  description: {    en: 'This cookie stores preferences.'  },  id: 'p', // if unset, `getCookieId(cookie)` returns the cookie's slugified name instead, which e.g. is used to fill the state's `enabledCookieIds` list  // use a short cookie id to save bandwidth!  name: {    en: 'Preferences' // you always have to specify a cookie name (in English)  },  links: {    'https://example.com/privacy': 'Privacy Policy',    'https://example.com/terms': 'Terms of Service',  },  src: 'https://example.com/preferences/js?id=<API-KEY>',  targetCookieIds: ['xmpl_a', 'xmpl_b']}

<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>

<CookieControl locale="de" />