dn-cookiebar

Vue-Cookiebar [1.0]

Purpose

Add a cookiebar to your project, very easy when vue and vueX is already loaded.

Component preview

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 [e-mail]