Cookie Consent Plugin For Vue.js

Cookie Consent Plugin For Vue.js

Yet another Vue.js cookie consent plugin to makes your web app comply the European cookie law.


Vue Cookieconsent

npm license npm

Inspired by cookieconsent


Demo here


npm install vue-cookieconsent-component or yarn add vue-cookieconsent-component


The most common use case is to register the component globally.

// in your main.js or similar file
import Vue from 'vue'
import cookieconsent from 'vue-cookieconsent-component'

Vue.component('cookie-consent', cookieconsent)

Alternatively you can do this to register the components:

// HelloWorld.vue
import CookieConsent from 'vue-cookieconsent-component'

export default {
  name: 'HelloWorld',
  components: {

On your page you can now use html like this:

// see slots or props if you want to extend something


// required and to get updates
@import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent";
// example or use it
@import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent-bottom";
@import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent-transition";

Do you like my theme but not the colors or paddings, ...?

// overwrite variables
$cookieconstent-padding: 1rem;
$cookieconstent-space: .7rem;
$cookieconstent-compliance-padding: .5rem 2rem;
// find more variables in /src/scss/_cookie-consent-variables.scss

@import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent";


Prop Type Required Default Description
transition String false cookie-consent-transition Transition name
message String false This website uses... Main message
linkLabel String false Learn more Link label
buttonLabel String false Got it! Button label
href String false Target link
target String false _blank New window
rel String false noopener Referrer Policy
cookieName String false cookieconsent_status Cookie name
cookiePath String false / Cookie path
cookieDomain String false '' Cookie domain
cookieExpiryDays Number false 365 Cookie expiry days


Name Description
message Message and link
link Only the link
button Only the button

Slots example

Create your own content

    This website uses cookies
    <a class="btn btn-link" href="#">Read more</a>
    <button class="btn btn-info">Accept</button>

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

Github Repository

Tags: #VueJs