Vue Cookie Consent Component

Common errors

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

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

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

Warnings

• breaking 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.
  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).
• gotcha 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.
  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.
• gotcha 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.
  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`.

Install

• npm install vue-cookieconsent-component npm
• yarn add vue-cookieconsent-component yarn
• pnpm add vue-cookieconsent-component pnpm

Imports

• cookieconsent
  wrong:

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

  correct:

  import cookieconsent from '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
  wrong:

  Vue.component('cookieconsent', cookieconsent)

  correct:

  import Vue from 'vue'
  import cookieconsent from 'vue-cookieconsent-component'
  
  Vue.component('cookie-consent', 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.

Quickstart

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">
//     <!-- Other content -->
//     <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';