{"id":16260719,"url":"https://github.com/dargmuesli/nuxt-cookie-control","last_synced_at":"2026-05-10T20:04:04.911Z","repository":{"id":64419879,"uuid":"530444149","full_name":"dargmuesli/nuxt-cookie-control","owner":"dargmuesli","description":"A highly configurable cookie banner for Nuxt.","archived":false,"fork":false,"pushed_at":"2026-05-04T04:36:00.000Z","size":8424,"stargazers_count":347,"open_issues_count":10,"forks_count":60,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-05-04T06:32:14.837Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dargmuesli.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["dargmuesli"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2022-08-30T00:44:04.000Z","updated_at":"2026-05-04T04:35:31.000Z","dependencies_parsed_at":"2023-12-26T13:43:20.018Z","dependency_job_id":"9e4d8926-d306-47d8-bdba-b80c920e12c1","html_url":"https://github.com/dargmuesli/nuxt-cookie-control","commit_stats":{"total_commits":1345,"total_committers":45,"mean_commits":29.88888888888889,"dds":"0.44089219330855023","last_synced_commit":"0b2094e0745796dea236ae96a3ea27bcc0b9d845"},"previous_names":[],"tags_count":213,"template":false,"template_full_name":null,"purl":"pkg:github/dargmuesli/nuxt-cookie-control","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dargmuesli%2Fnuxt-cookie-control","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dargmuesli%2Fnuxt-cookie-control/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dargmuesli%2Fnuxt-cookie-control/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dargmuesli%2Fnuxt-cookie-control/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dargmuesli","download_url":"https://codeload.github.com/dargmuesli/nuxt-cookie-control/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dargmuesli%2Fnuxt-cookie-control/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32759542,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest"],"created_at":"2024-10-10T16:20:54.459Z","updated_at":"2026-05-10T20:04:04.856Z","avatar_url":"https://github.com/dargmuesli.png","language":"TypeScript","funding_links":["https://github.com/sponsors/dargmuesli"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Nuxt Cookie Control\n\n[![ci status][ci-image]][ci-url]\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n\n![nuxt-cookie-control](https://drive.google.com/a/broj42.com/uc?id=19sFguJo7SKUvmH4xu9DhK9ZXzR6oWLX8)\n\n✅ Translated for: ar, az, be, bg, ca, cs, da, de, en, es, fi, fr, hr, hu, id, it, ja, km, ko, lt, nl, no, oc, pt, pl, ro, rs, ru, sk, sl, sv, tr, uk and zh-CN\n\n✅ Vue 3 support\n\n⚠️ For Nuxt 2, please use nuxt-cookie-control \u003c 3.0.0\n\n🚩 API changes since continuing Dario Ferderber's work on [gitlab.com/broj42/nuxt-cookie-control](https://gitlab.com/broj42/nuxt-cookie-control), make sure to read the README!\n\n\n## 🚀 Getting Started\n\n[![Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/dargmuesli/nuxt-cookie-control?file=playground%2Fapp.vue)\n\n\n### Installation\n\n```bash\nnpx nuxi@latest module add cookie-control\n```\n\n\n### Configuration\n\n```javascript\n// nuxt.config.js\n\nmodules: [\n  '@dargmuesli/nuxt-cookie-control'\n],\ncookieControl: {\n  // typed module options\n}\n\n// or\n\nmodules: [\n  ['@dargmuesli/nuxt-cookie-control', {\n    // untyped module options\n  }]\n]\n```\n\n\n### Usage\n\n```html\n\u003c!-- app.vue --\u003e\n\n\u003ctemplate\u003e\n  \u003cCookieControl locale=\"en\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nconst {\n  cookiesEnabled,\n  cookiesEnabledIds,\n  isConsentGiven,\n  isModalActive,\n  moduleOptions,\n} = useCookieControl()\n\n// example: react to a cookie being accepted\nwatch(\n  () =\u003e cookiesEnabledIds.value,\n  (current, previous) =\u003e {\n    if (\n      !previous?.includes('google-analytics') \u0026\u0026\n      current?.includes('google-analytics')\n    ) {\n      // cookie with id `google-analytics` got added\n      window.location.reload() // placeholder for your custom change handler\n    }\n  },\n  { deep: true },\n)\n\u003c/script\u003e\n```\n\n```ts\n//  plugins/analytics.client.ts\n\n// example: initialization based on enabled cookies\nconst cookieControl = useCookieControl()\n\nif (cookieControl.cookiesEnabledIds.value.includes('google-analytics')) {\n  initGoogleAnalytics() // placeholder for your custom initialization\n}\n```\n\n\n## API\n\n### Module Options\n\n```javascript\n// Position of cookie bar.\n// 'top-left', 'top-right', 'top-full', 'bottom-left', 'bottom-right', 'bottom-full'\nbarPosition: 'bottom-full',\n\n// Switch to toggle if clicking the overlay outside the configuration modal closes the modal.\ncloseModalOnClickOutside: true,\n\n// Component colors.\n// If you want to disable colors set colors property to false.\ncolors: {\n  barBackground: '#000',\n  barButtonBackground: '#fff',\n  barButtonColor: '#000',\n  barButtonHoverBackground: '#333',\n  barButtonHoverColor: '#fff',\n  barTextColor: '#fff',\n  checkboxActiveBackground: '#000',\n  checkboxActiveCircleBackground: '#fff',\n  checkboxDisabledBackground: '#ddd',\n  checkboxDisabledCircleBackground: '#fff',\n  checkboxInactiveBackground: '#000',\n  checkboxInactiveCircleBackground: '#fff',\n  controlButtonBackground: '#fff',\n  controlButtonHoverBackground: '#000',\n  controlButtonIconColor: '#000',\n  controlButtonIconHoverColor: '#fff',\n  focusRingColor: '#808080',\n  modalBackground: '#fff',\n  modalButtonBackground: '#000',\n  modalButtonColor: '#fff',\n  modalButtonHoverBackground: '#333',\n  modalButtonHoverColor: '#fff',\n  modalOverlay: '#000',\n  modalOverlayOpacity: 0.8,\n  modalTextColor: '#000',\n  modalUnsavedColor: '#fff',\n},\n\n// The cookies that are to be controlled.\n// See detailed explanation further down below!\ncookies: {\n  necessary: [],\n  optional: [],\n}\n\n// The milliseconds from now until expiry of the cookies that are being set by this module.\ncookieExpiryOffsetMs: 1000 * 60 * 60 * 24 * 365, // one year\n\n// Names for the cookies that are being set by this module.\ncookieNameIsConsentGiven: 'ncc_c',\ncookieNameCookiesEnabledIds: 'ncc_e',\n\n// Options to pass to nuxt's useCookie\ncookieOptions: {\n  path: '/',\n  sameSite: 'strict',\n},\n\n// Switch to toggle the \"accept necessary\" button.\nisAcceptNecessaryButtonEnabled: true,\n\n// Switch to toggle the button that opens the configuration modal.\nisControlButtonEnabled: true,\n\n// Switch to toggle the concatenation of target cookie ids to the cookie description.\nisCookieIdVisible: false,\n\n// Switch to toggle the inclusion of this module's css.\n// If css is set to false, you will still be able to access your color variables.\nisCssEnabled: true,\n\n// Switch to toggle the css variables ponyfill.\nisCssPonyfillEnabled: false,\n\n// Switch to toggle the separation of cookie name and description in the configuration modal by a dash.\nisDashInDescriptionEnabled: true,\n\n// Switch to toggle the blocking of iframes.\n// This can be used to prevent iframes from adding additional cookies.\nisIframeBlocked: false,\n\n// Switch to toggle the modal being shown right away, requiring a user's decision.\nisModalForced: false,\n\n// \"Decline all\" in the modal removes all cookies by default (which will re-open the cookie bar).\n// Set this to true to decline all optional cookies and accept necessary cookies.\ndeclineAllAcceptsNecessary: false,\n\n// The locales to include.\nlocales: ['en'],\n\n// Translations to override.\nlocaleTexts: {\n  en: {\n    save: 'Remember',\n  }\n}\n```\n\n#### Cookies\n\nEvery property that includes a `{ en: ... }` value is a translatable property that could instead only specify a string (`'...'`) or other locales as well (`{ de: ..., uk: ... }`).\n\n```javascript\n{\n  description: {\n    en: 'This cookie stores preferences.'\n  },\n  id: 'p', // use a short cookie id to save bandwidth and prefixes to separate\n  isPreselected: false // `true` is not GDPR compliant! This flag does not enable any cookies, it only preselects the cookie's modal toggle. The default is `false`.\n  name: {\n    en: 'Preferences' // you always have to specify a cookie name (in English)\n  },\n  links: {\n    'https://example.com/privacy': 'Privacy Policy',\n    'https://example.com/terms': 'Terms of Service',\n  },\n  src: 'https://example.com/preferences/js?id=\u003cAPI-KEY\u003e',\n  targetCookieIds: ['xmpl_a', 'xmpl_b'],\n}\n```\n\n### Component Slots\n\n#### Bar\n\n```html\n\u003cCookieControl\u003e\n  \u003ctemplate #bar\u003e\n    \u003ch2\u003eBar title\u003c/h2\u003e\n    \u003cp\u003eBar description (you can use $cookies.text.barDescription)\u003c/p\u003e\n    \u003cn-link\u003eGo somewhere\u003c/n-link\u003e\n  \u003c/template\u003e\n\u003c/CookieControl\u003e\n```\n\n#### Modal\n\n```html\n\u003cCookieControl\u003e\n  \u003ctemplate #modal\u003e\n    \u003ch2\u003eModal title\u003c/h2\u003e\n    \u003cp\u003eModal description\u003c/p\u003e\n  \u003c/template\u003e\n\u003c/CookieControl\u003e\n```\n\n#### Cookie\n\n```html\n\u003cCookieControl\u003e\n  \u003ctemplate #cookie=\"{ cookie }\"\u003e\n    \u003ch3 v-text=\"cookie.name\" /\u003e\n    \u003cspan v-html=\"cookie.description\" /\u003e\n\n    \u003cdiv v-if=\"cookie.targetCookieIds\"\u003e\n      \u003cb\u003eCookie ids: \u003c/b\u003e\n      \u003cspan v-text=\"cookie?.targetCookieIds?.join(', ')\" /\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/CookieControl\u003e\n```\n\n#### Iframe\n\n```html\n\u003cCookieIframe\u003e\n  \u003ctemplate #iframe\u003e\n    Content to display if iframes are blocked.\n  \u003c/template\u003e\n\u003c/CookieIframe\u003e\n```\n\n#### Control button\n\n```html\n\u003cCookieIframe\u003e\n  \u003ctemplate #controlButton\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"512\" height=\"512\" viewBox=\"0 0 512 512\"\u003e\u003cpath fill=\"currentColor\" d=\"M247.2 17c-22.1-3.1-44.6.9-64.4 11.4l-74 39.5c-19.7 10.5-35.6 27-45.4 47.1l-36.7 75.6c-9.8 20.1-13 42.9-9.1 64.9l14.5 82.8c3.9 22.1 14.6 42.3 30.7 57.9l60.3 58.4c16.1 15.6 36.6 25.6 58.7 28.7l83 11.7c22.1 3.1 44.6-.9 64.4-11.4l74-39.5c19.7-10.5 35.6-27 45.4-47.2l36.7-75.5c9.8-20.1 13-42.9 9.1-64.9l-14.6-82.8c-3.9-22.1-14.6-42.3-30.7-57.9l-60.2-58.3c-16.1-15.6-36.6-25.6-58.7-28.7zM208 144a32 32 0 1 1 0 64a32 32 0 1 1 0-64m-64 192a32 32 0 1 1 64 0a32 32 0 1 1-64 0m224-64a32 32 0 1 1 0 64a32 32 0 1 1 0-64\"/\u003e\u003c/svg\u003e\n  \u003c/template\u003e\n\u003c/CookieIframe\u003e\n```\n\n### Props\n\n- locale: `['en']`\n```html\n\u003cCookieControl locale=\"de\" /\u003e\n```\n\n\n\u003c!-- Badges --\u003e\n[ci-image]: https://img.shields.io/github/actions/workflow/status/dargmuesli/nuxt-cookie-control/ci.yml\n[ci-url]: https://github.com/dargmuesli/nuxt-cookie-control/actions/workflows/ci.yml\n\n[npm-version-src]: https://badgen.net/npm/v/@dargmuesli/nuxt-cookie-control/latest\n[npm-version-href]: https://npmjs.com/package/@dargmuesli/nuxt-cookie-control\n\n[npm-downloads-src]: https://badgen.net/npm/dm/@dargmuesli/nuxt-cookie-control\n[npm-downloads-href]: https://npmjs.com/package/@dargmuesli/nuxt-cookie-control\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdargmuesli%2Fnuxt-cookie-control","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdargmuesli%2Fnuxt-cookie-control","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdargmuesli%2Fnuxt-cookie-control/lists"}