Handle the EU Cookie Law in Vue.js with vue-cookie-law

Install vue-cookie-law via. Yarn or NPM.

# Yarn
$ yarn add vue-cookie-law
# NPM
$ npm install vue-cookie-law --save

The most basic usage of vue-cookie-law would be as follows:

<template>
  <div class="main-wrapper">
    <cookie-law theme="blood-orange--rounded"></cookie-law>
  </div>
</template>

<script>
import CookieLaw from 'vue-cookie-law';

export default {
  components: {
    CookieLaw
  }
}
</script>

vue-cookie-law has a few props you can customize, including:

• buttonText - Change the text on the acceptance button.
• message - The message displayed to your users when they first visit. The default is This website uses cookies to ensure you get the best experience on our website.
• theme - The theme of the component. Six themes are included by default, and additional ones may be created easily with CSS as shown below.
• position - top or bottom.
• transitionName - The transition used to hide and show the notice. Currently supports slideFromBottom, slideFromTop, and fade.

Theming:

You can create custom themes for vue-cookie-law simply by wrapping all your classes with .Cookie–themeName Then just pass your theme’s name with <vue-cookie-law theme="themeName"></vue-cookie-law>.

Example: (Batman-style)

.Cookie--batman {
  background: black;

  > .Cookie__button {
      background: black;
      color: yellow;
  }

  > .Cookie__message {
    color: yellow;
  }
}

There you go! Have fun complying!