danielnegoita / vue-cookie-toggler

Vue 2 component for GDPR cookies consent.

# 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:

Name	Type	Default value	Description
category	string		This will be used in data-category	required
name	string		The cookie title used in Cookie Settings	required
description	string		The cookie description used in Cookie Settings	required
active	boolean		Whether to set the cookie ON or OFF by default	required
required	boolean	false	Disable the option to toggle cookie ON/OFF from the Cookie Settings	optional

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

vue-cookie-toggler's Issues

Duplicated script tags being added to the page

Hi,

I'm using laravel in combination with vue.js. I have added the text/plain script tags in the app layout blade template. The scripts are being added to the header as they are supposed to, but when i switch between pages i'm getting errors on wrong/missing script tags. My guess is that this is about the script tags that are being added based on wether or not the cookies are accepted.

Is there a way to prevent the scripts from being added multiple times? Something like a check to see if the script is already loaded on the page for example

Thanks in advance

Feature Request: Option to Disable Cookies additionally by name

First of all: Thanks for sharing such a fantastic cookie toggler! I was looking all over the place for a cookie consent tool that allows more than just consenting to everything. And yours does exactly that.
But I was also looking for just one more functionality – thus, this feature request.
I would love to see an option to disable cookies not only by categories but also by name implemented. E.g. If you have "Google Analytics" and "Google Optimize"under the category "analytics", you would be able to choose to allow "Google Analytics" but not "Google Optimize".