GDPR Cookie Accept Decline Banner Component For Vue

Install & Download:

# Yarn
$ yarn add vue-cookie-accept-decline
# NPM
$ npm i vue-cookie-accept-decline

Description:

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,
},