Vue-Cookiebar [1.0]
Purpose
Add a cookiebar to your project, very easy when vue and vueX is already loaded.
Component preview
Installation
yarn add dn-cookiebar
or npm install dn-cookiebar
Usage
CSS
Add the file node_modules/cookiebar/dist/dn-cookiebar.css
to your styling or use your own styles.
Javascript Component
Add the cookiebar component to your app. And make sure it uses the VueX store!
'use strict';
import Cookiebar from 'dn-cookiebar';
new Vue({
'el': '#container',
components: {
Cookiebar,
},
});
Slots
The component uses slots to define the content.
<cookiebar>
<h2 slot="header">
Cookies gebruik
</h2>
<p slot="message">
XXX wil u een goed werkende website aanbieden. Om dit te kunnen doen, plaatsen we cookies op uw computer.
</p>
<span slot="acceptText">
Ja, ik accepteer cookies
</span>
<span slot="denyText">
Nee, liever niet
</span>
</cookiebar>
VueX
Register the vueX module in your store.
'use strict';
import VueX from 'vuex';
import { store as cookiesStore } from 'dn-cookiebar';
export default new VueX.Store({
modules: {
cookiesStore,
},
});
Getters
Use the following getters from this module to read the status.
- Accepted:
accepted
- Denied:
denied
- Dismissed:
dismissed
Events
The component also throws an event when the user chooses to accept or deny the cookies.
- Accept:
accept
- Deny:
deny
The events are also exported from the module as:
- Accept:
EVENT_ACCEPT
- Deny:
EVENT_DENY
<cookiebar
v-on:accept="onAccept"
v-on:deny="onDeny"
></cookiebar>
Cookies
The following cookies are set by this component:
- Accepted:
cookie-disabled: 0
- Denied:
cookie-disabled: 1
- Dismissed:
cookie-dismissed: 1
Code sample
Below, there's a code example for the inclusion of this component.
<template>
<div>
<cookiebar>
<h2 slot="header">
Toestemming voor opslaan cookies
</h2>
<p slot="message">
XXX wil u een goed werkende website aanbieden. Om dit te kunnen doen, plaatsen we cookies op uw computer.
</p>
<span slot="acceptText">
Ja, ik accepteer cookies
</span>
<span slot="denyText">
Nee, liever niet
</span>
</cookiebar>
</div>
</template>
Questions & contributing
For questions, contact Ezra Pool at ezra@digitalnatives.nl