GDPR Cookie Accept Decline Banner Component For Vue

A customizable cookies accept decline banner component to make your app comply with EU cookie law.

How to use it:

1. Import and register the component.

import { createApp } from 'vue';
import VueCookieAcceptDecline from 'vue-cookie-accept-decline';
import 'vue-cookie-accept-decline/dist/vue-cookie-accept-decline.css';
const app = createApp(App);
app.component('vue-cookie-accept-decline', VueCookieAcceptDecline);

2. Create a Cookie Accept Decline Banner in your app.

<vue-cookie-accept-decline
  :debug="false"
  :disableDecline="false"
  :showPostponeButton="false"
  @clicked-accept="cookieClickedAccept"
  @clicked-decline="cookieClickedDecline"
  @clicked-postpone="cookieClickedPostpone"
  @removed-cookie="cookieRemovedCookie"
  @status="cookieStatus"
  elementId="myPanel1"
  position="bottom-left"
  ref="myPanel1"
  transitionName="slideFromBottom"
  type="floating"
>
  <!-- Close -->
  <template #postponeContent>&times;</template>
  <!-- Message -->
  <template #message>
    We use cookies to ensure you get the best experience on our website.
    <a href="https://cookiesandyou.com/" target="_blank">Learn More...</a>
  </template>
  <!-- Decline Button -->
  <template #declineContent>Opt Out</template>
  <!-- Accept Button -->
  <template #acceptContent>Got It!</template>
</vue-cookie-accept-decline>

3. All available component props.

elementId: {
  type: String,
  required: true,
},
debug: {
  type: Boolean,
  default: false,
},
disableDecline: {
  type: Boolean,
  default: false,
},
// floating: bottom-left, bottom-right, top-left, top-rigt
// bar:  bottom, top
position: {
  type: String,
  default: 'bottom-left',
},
// floating, bar
type: {
  type: String,
  default: 'floating',
},
// slideFromBottom, slideFromTop, fade
transitionName: {
  type: String,
  default: 'slideFromBottom',
},
showPostponeButton: {
  type: Boolean,
  default: false,
},
forceCookies: {
  type: Boolean,
  default: false,
},

Preview:

Changelog:

v6.1.0 (08/29/2022)

• Update demo build

v6.0.3 (05/17/2022)

• Update demo build

Download Details:

Author: johndatserakis

Live Demo: https://johndatserakis.github.io/vue-cookie-accept-decline/

Download Link: https://github.com/johndatserakis/vue-cookie-accept-decline/archive/refs/heads/develop.zip

Official Website: https://github.com/johndatserakis/vue-cookie-accept-decline

Install & Download:

# Yarn
$ yarn add vue-cookie-accept-decline

# NPM
$ npm i vue-cookie-accept-decline