Registry / web-framework / vue-cookieconsent-component

vue-cookieconsent-component

library1.2.0jsnpmunverified

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.

web-framework

npm install vue-cookieconsent-component

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-COOKIECONSENT-

vue-cookieconsent-component

web-frameworkjavascriptv1.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

cookieconsent

✓ import cookieconsent from 'vue-cookieconsent-component'

✗ const cookieconsent = require('vue-cookieconsent-component')

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.

CookieConsent

✓ import CookieConsent from 'vue-cookieconsent-component'

Commonly used for local component registration in single-file components.

Vue.component

✓ import Vue from 'vue' import cookieconsent from 'vue-cookieconsent-component' Vue.component('cookie-consent', cookieconsent)

✗ Vue.component('cookieconsent', cookieconsent)

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.

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.

import Vue from 'vue'; import App from './App.vue'; import cookieconsent from 'vue-cookieconsent-component'; // Register the component globally Vue.component('cookie-consent', cookieconsent); new Vue({ render: h => h(App), }).$mount('#app'); // In your App.vue or any other Vue component's template: // <template> // <div id="app"> //  // <cookie-consent // message="Our website uses cookies to improve your experience." // button-label="Got it!" // link-label="Read our privacy policy" // href="/privacy-policy" // target="_self" // /> // </div> // </template> // To include the recommended CSS (e.g., in your main.scss or App.vue style block): // @import '~vue-cookieconsent-component/src/scss/cookie-consent'; // @import '~vue-cookieconsent-component/src/scss/cookie-consent-bottom'; // @import '~vue-cookieconsent-component/src/scss/cookie-consent-transition';

Debug

Known issues

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

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

affects: >=1.0.0

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

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.

affects: >=1.0.0

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

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

affects: >=1.0.0

Errors

Common errors & fixes

Failed to compile component: Unknown custom element <cookie-consent> - did you register the component correctly?

The `cookie-consent` component has not been registered either globally or locally within the Vue application where it's being used.

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 } }`.

Module not found: Error: Can't resolve './node_modules/vue-cookieconsent-component/src/scss/cookie-consent' in '...' or similar CSS import errors.

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.

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

Upgrade

Version history

1.2.0latest on npm

Audit

Dependencies

vuerequiredThis is a Vue 2 component and requires Vue as a peer dependency to function. It will not work with Vue 3.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/EvodiaAut/vue-cookieconsent-component ↗

packagehttps://www.npmjs.com/package/vue-cookieconsent-component ↗