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.

  <!-- Close -->
  <template #postponeContent>&times;</template>
  <!-- Message -->
  <template #message>
    We use cookies to ensure you get the best experience on our website.
    <a href="" target="_blank">Learn More...</a>
  <!-- Decline Button -->
  <template #declineContent>Opt Out</template>
  <!-- Accept Button -->
  <template #acceptContent>Got It!</template>

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,


GDPR Cookie Accept Decline Banner Component For Vue


v6.1.0 (08/29/2022)

  • Update demo build

v6.0.3 (05/17/2022)

  • Update demo build

Download Details:

Author: johndatserakis

Live Demo:

Download Link:

Official Website:

Install & Download:

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

$ npm i vue-cookie-accept-decline

Add Comment