{"id":12442,"library":"vue-cookieconsent-component","title":"Vue Cookie Consent Component","description":"vue-cookieconsent-component is a straightforward Vue 2 component designed to display a cookie consent banner, helping websites comply with cookie regulations. Its primary function is to show a configurable message, a 'Got it!' button, and a 'Learn more' link, saving the user's consent status in a cookie. The current stable version is 1.2.0, released in 2017. As the project has seen no significant updates or new releases since then, and given its specific compatibility with Vue 2 (which is now in maintenance/end-of-life status), it is considered abandoned. It offers basic customization through props and slots for message, link, and button content, and allows styling overrides via Sass variables. It differentiates itself as a simple, unopinionated wrapper around basic cookie consent functionality, inspired by `insites/cookieconsent` (v2), without complex features like geolocation or multiple consent types.","status":"abandoned","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/EvodiaAut/vue-cookieconsent-component","tags":["javascript","vue","vuejs","vue2","vuejs2","vue-component","component","cookieconsent"],"install":[{"cmd":"npm install vue-cookieconsent-component","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cookieconsent-component","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cookieconsent-component","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a Vue 2 component and requires Vue as a peer dependency to function. It will not work with Vue 3.","package":"vue","optional":false}],"imports":[{"note":"For ESM-compatible environments (e.g., webpack with vue-loader). While CommonJS `require` might technically work in some setups, the component is primarily designed for import within Vue SFCs.","wrong":"const cookieconsent = require('vue-cookieconsent-component')","symbol":"cookieconsent","correct":"import cookieconsent from 'vue-cookieconsent-component'"},{"note":"Commonly used for local component registration in single-file components.","symbol":"CookieConsent","correct":"import CookieConsent from 'vue-cookieconsent-component'"},{"note":"The recommended global registration uses the kebab-case tag `'cookie-consent'`, not `'cookieconsent'`, for proper HTML usage. This pattern is specific to Vue 2 global component registration.","wrong":"Vue.component('cookieconsent', cookieconsent)","symbol":"Vue.component","correct":"import Vue from 'vue'\nimport cookieconsent from 'vue-cookieconsent-component'\n\nVue.component('cookie-consent', cookieconsent)"}],"quickstart":{"code":"import Vue from 'vue';\nimport App from './App.vue';\nimport cookieconsent from 'vue-cookieconsent-component';\n\n// Register the component globally\nVue.component('cookie-consent', cookieconsent);\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app');\n\n// In your App.vue or any other Vue component's template:\n// <template>\n//   <div id=\"app\">\n//     <!-- Other content -->\n//     <cookie-consent\n//       message=\"Our website uses cookies to improve your experience.\"\n//       button-label=\"Got it!\"\n//       link-label=\"Read our privacy policy\"\n//       href=\"/privacy-policy\"\n//       target=\"_self\"\n//     />\n//   </div>\n// </template>\n\n// To include the recommended CSS (e.g., in your main.scss or App.vue style block):\n// @import '~vue-cookieconsent-component/src/scss/cookie-consent';\n// @import '~vue-cookieconsent-component/src/scss/cookie-consent-bottom';\n// @import '~vue-cookieconsent-component/src/scss/cookie-consent-transition';","lang":"javascript","description":"This quickstart demonstrates global registration of the cookie consent component and its basic usage in a Vue 2 application's template, including configurable props and CSS import instructions."},"warnings":[{"fix":"For Vue 3 projects, consider actively maintained alternatives like `vue-cookie-accept-decline` (v6.0.0+) or `vue-cookieconsent` by eyecatchup (which also states a Vue 2 compatible version 'vue2-cookieconsent' would be published).","message":"This component is designed specifically for Vue 2 applications. It is not compatible with Vue 3 due to fundamental API changes in Vue's component system. Attempting to use it in a Vue 3 project will result in runtime errors.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Evaluate the risk of using unmaintained software. For new projects or if active maintenance is required, consider an alternative that is actively supported and compatible with modern Vue versions and web standards.","message":"The project is no longer actively maintained. The last release (v1.2.0) was in 2017, and there has been minimal activity on the GitHub repository since. This means there will be no future updates, bug fixes, or security patches.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your build configuration correctly handles `~` for `node_modules` resolution (common in Vue CLI projects). Alternatively, manually adjust the path if necessary, e.g., `@import '../node_modules/vue-cookieconsent-component/src/scss/cookie-consent';` if your SCSS file is located appropriately relative to `node_modules`.","message":"Importing the component's SCSS styles directly from `node_modules` requires a specific path. If your build system (e.g., webpack with sass-loader) does not resolve `~` to `node_modules`, the `@import` statements will fail.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Globally register the component using `Vue.component('cookie-consent', cookieconsent)` in your main application entry file (e.g., `main.js`), or locally register it in the `components` option of the parent Vue component: `export default { components: { CookieConsent } }`.","cause":"The `cookie-consent` component has not been registered either globally or locally within the Vue application where it's being used.","error":"Failed to compile component: Unknown custom element <cookie-consent> - did you register the component correctly?"},{"fix":"Change the `@import` statement to use the `~` alias for `node_modules`: `@import '~vue-cookieconsent-component/src/scss/cookie-consent';`. This is a common convention that build tools like Webpack understand for resolving packages. If `~` doesn't work, verify your webpack configuration for `sass-loader` or `css-loader`.","cause":"The Sass `@import` path for the component's styles is incorrect or your build system (e.g., webpack's `sass-loader`) is not configured to resolve paths starting with `./node_modules` correctly.","error":"Module not found: Error: Can't resolve './node_modules/vue-cookieconsent-component/src/scss/cookie-consent' in '...' or similar CSS import errors."}],"ecosystem":"npm"}