vue-cookieconsent-component

Vue Cookieconsent

Inspired by cookieconsent

Demo

Demo here

Install

npm install vue-cookieconsent-component or yarn add vue-cookieconsent-component

Usage

The most common use case is to register the component globally.

// in your main.js or similar file
import Vue from 'vue'
import cookieconsent from 'vue-cookieconsent-component'

Vue.component('cookie-consent', cookieconsent)

Alternatively you can do this to register the components:

// HelloWorld.vue
import CookieConsent from 'vue-cookieconsent-component'

export default {
  name: 'HelloWorld',
  components: {
    CookieConsent
  }
}

On your page you can now use html like this:

// see slots or props if you want to extend something
<cookie-consent/>

CSS

// required and to get updates
@import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent";
// example or use it
@import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent-bottom";
@import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent-transition";

Do you like my theme but not the colors or paddings, ...?

// overwrite variables
$cookieconstent-padding: 1rem;
$cookieconstent-space: .7rem;
$cookieconstent-compliance-padding: .5rem 2rem;
// find more variables in /src/scss/_cookie-consent-variables.scss

@import "./node_modules/vue-cookieconsent-component/src/scss/cookie-consent";

Props

|Prop|Type|Required|Default|Description |-|-|-|-|-| |transition|String|false|cookie-consent-transition|Transition name |message|String|false|This website uses...|Main message |linkLabel|String|false|Learn more|Link label |buttonLabel|String|false|Got it!|Button label |href|String|false|http://cookiesandyou.com|Target link |target|String|false|blank|New window |rel|String|false|noopener|Referrer Policy |cookieName|String|false|cookieconsentstatus|Cookie name |cookiePath|String|false|/|Cookie path |cookieDomain|String|false|''|Cookie domain |cookieExpiryDays|Number|false|365|Cookie expiry days

Slots

|Name|Description |-|-| |message|Message and link |link|Only the link |button|Only the button

Slots example

Create your own content

<cookie-consent>
  <template
    slot="message"
  >
    This website uses cookies
    <a class="btn btn-link" href="#">Read more</a>
  </template>
  <template
    slot="button"
  >
    <button class="btn btn-info">Accept</button>
  </template>
</cookie-consent>

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test