vue-cookie-toggler

# vue-cookie-toggler

Vue 2 component for GDPR cookies consent.

• Categorize the cookies in your application
• Block all categorized cookies until the visitor agrees with the cookie policy
• Allow the visitor to update his/her privacy options through a modal

Currently iframe and script tags are supported.

# npm
npm i vue-cookie-toggler

#yarn
yarn add vue-cookie-toggler

Usage

Import the component like this:

import VueCookieToggler from 'vue-cookie-toggler';

Then you can use it in your app like this (see a complete example below):

<vue-cookie-toggler :cookies-groups="cookiesGroups" title="Cookie policy title">
    Cookie policy message
</vue-cookie-toggler>

cookiesGroups example:

[
  {
    category: 'essential',
    name: 'Essential website cookies',
    description:'Lorem ipsum dolor sit amet <a href="#">cookie policy</a>.',
    active: true,
    required: true,
  },
  {
    category: 'analytics',
    name: 'Analytics and customization',
    description:'Lorem ipsum dolor sit amet.',
    active: false,
  },
  {
    category: 'social_networking',
    name: 'Social networking',
    description:'Lorem ipsum dolor sit amet.',
    active: false,
  },
]

Then in your HTML the iframes and scripts tags should be written like this:

script tag examples:

Example 1:
<script type="text/plain" data-cookie data-category="analytics" src="/path/to/file"></script>

Example 2:
<script type="text/plain" data-cookie data-category="essential">
    // .. your awesome code here
</script>

iframe tag example:

<iframe
  data-cookie
  data-category="analytics"
  data-placeholder="true"
  alt="Please accept the cookie policy to see the content"
  data-src="/path/to/file"
></iframe>

Later, if you want to modify the cookie settings, you can add a link to trigger the cookie settings modal like this:

<a href="#" data-cookie-toggler"settings">Update cookie settings</a>

cookiesGroups options:

Example with all the options:

<vue-cookie-toggler
    :cookies-groups="cookiesGroups"
    title="Cookie policy title"
    settings-title="Cookie settings title"
    settings-label="Settings button label"
    accept-label="Accept button label"
    save-label="Save button label"
    cancel-label="Cancel button label"
>
    <!-- This content will show up the main view (1st view) -->
    Cookie policy message

    <!-- (optional) use '#settingsContent' slot if you what to add content in Cookie Settings view (2nd view) -->
    <template #settingsContent> Cookie settings message </template>

    <!-- (optional) use '#mainButtons' slot if you what to change the buttons in the main view (1st view) -->
    <template #mainButtons="{ accept, settings, save, cancel }">
      <button class="vct__btn vct__btn--default" @click="settings">
        Customize settings
      </button>
      <button class="vct__btn vct__btn--primary" @click="accept">
        Accept all cookies
      </button>
    </template>

    <!-- (optional) use '#settingsButtons' slot if you what to change the buttons in Cookie Settings view (2nd view) -->
    <template #settingsButtons="{ accept, save, save, cancel }">
      <button class="vct__btn vct__btn--default" @click="accept">
        Accept all cookies
      </button>
      <button class="vct__btn vct__btn--primary" @click="save">
        Save settings
      </button>
    </template>
</vue-cookie-toggler>

How it works

Becase we have defined the script tags with type="text/plain" and the iframes with data-src, the browser will not load them.

At first load the parsers will scan the DOM for data-cookie tagged elements and categorize them.

After the visitor accepts the cookie policy, the parsers will enable all script tags and iframes categorized in the previous step.

TODO:

• make the component more flexible (props & slots)
• improve variables names
• move CSS to an assets folder
• create a parser for links
• remove lodash dependency
• vue-js-modal issue on mobile for when the modal is to heigh
• add some examples
• write proper documentation