Nice And Clean Cookie Consent Component For Vue

Install & Download:

# NPM
$ npm i @norvikit/vue-cookies-consent

Description:

A pretty clean and fully customizable cookie consent bar component for Vue.js and Nuxt.js.

How to use it:

1. Import and register the VueCookiesConsent component.

import Vue from "vue";
import VueCookiesConsent from "@norvikit/vue-cookies-consent";
Vue.use(VueCookiesConsent)

2. Add the cookie consent bar to the app.

<template>
  <client-only>
    <vue-cookies-consent>
      <template #title>Cookie Consent Title</template>
      <template #description>
        <p>Cookie Consent Message</p>
      </template>
      <template #button>Accept Cookies</template>
    </vue-cookies-consent>
  </client-only>
</template>

3. Available component props.

/**
 * Color of window title
 */
colorTitle: {
  type: String,
  default: "#1F2030",
},
/**
 * Color of window description
 */
colorDescription: {
  type: String,
  default: "#4D4D4D",
},
/**
 * Color of button text
 */
colorButton: {
  type: String,
  default: "#FFF",
},
/**
 * Background of window
 */
backgroundWindow: {
  type: String,
  default: "#FFF",
},
/**
 * Background of button
 */
backgroundButton: {
  type: String,
  default: "#C11E31",
},
/**
 * Background of button on hover state
 */
backgroundButtonHover: {
  type: String,
  default: "#de2b40",
},
/**
 * Window has shadow
 */
hasShadow: {
  type: Boolean,
  default: true,
},
/**
 * Border radius of window in px
 */
borderRadius: {
  type: Number,
  default: 16,
},
/**
 * Position of window
 * @values top, bottom
 */
position: {
  type: String,
  default: "bottom", // or 'top'
},
/**
 * Offset of window by Y in px
 */
offsetY: {
  type: Number,
  default: 32,
},
/**
 * Offset of window by X in px
 */
offsetX: {
  type: Number,
  default: 32,
},
/**
 * Method to save window state after accept
 * @values ls, cookies
 */
saveMethod: {
  type: String,
  default: "ls", 
},

4. Events.