metastable/vue-cookieconsent-component

Vue Cookieconsent

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	cookieconsent_status	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