README

Vue GDPR

Cookie bar with modal preferences and helpers.

Installation

Make sure all dependencies have been installed before moving on:

Node.js >= 8.0.0
VueJS >= 2.x

NPM

Use our private GDPR component :

npm install git+ssh://git@gitlab.com/cherrypulp/components/vue-gdpr.git

Or use as a local module :

git clone git@gitlab.com:cherrypulp/components/vue-gdpr.git ./assets/local_modules/@cherrypulp/vue-gdpr

then install :

npm install file:./assets/local_modules/@cherrypulp/vue-gdpr

// main.js - without trunk
import Vue from 'vue';
import { VueGdprPlugin } from '@cherrypulp/gdpr';

// Add VueGdprPlugin
Vue.use(VueGdprPlugin);

new Vue().$mount('.app');

To use with Trunk refer to Trunk GDPR.

HTML

<script type="application/json" id="gdpr-levels">{"required":{"title":"Strictly necessary cookies","content":"These cookies are essential for the operation of the site.","scripts":[{"position":"head","content":""},{"position":"body","content":""},{"position":"footer","content":""}]},"third_party":{"title":"3rd party cookies","content":"Keeping this cookie enabled helps us to improve our website.","scripts":[{"position":"head","content":""},{"position":"body","content":""},{"position":"footer","content":""}]}}</script>
<gdpr-modal button-agreement="Save changes" button-close="" title="Cookie settings" content="You can find out more about which cookies we use, or switch them off. Here, you'll also find links to our [gdpr_policy]Cookie Policies[/gdpr_policy], which explain how we process your personal data." label-active="Enabled" label-inactive="Disabled" ></gdpr-modal>
<gdpr-bar button-agreement="Accept" button-preferences="Settings" content="This website uses cookies to provide you the best browsing experience. [gdpr_policy]Find out more[/gdpr_policy] or adjust your [gdpr_settings]settings[/gdpr_settings]." ></gdpr-bar>

Documentation

VueGdprPlugin will expose a $gdpr object that you can use in you Vue application.

...
mounted() {
    const level = this.$gdpr.getLevel();
    
    if (level === 'third_party') {
        this.$gdpr.loadScripts(this.$gdpr.levels[level]);
    }
},

setLevel(level)

Set cookie level and append related scripts.

this.$gdpr.setLevel('required');

getLevel()

Get level from cookie.

this.$gdpr.getLevel(); // return "required"

loadScripts(scripts)

Load given scripts in head, body or footer.

this.$gdpr.loadScripts([
    {
        position: 'head',
        content: '...',
    },
    {
        position: 'body',
        content: '...',
    },
    {
        position: 'footer',
        content: '...',
    },
]);

Versioning

Versioned using SemVer.

Contribution

Please raise an issue if you find any. Pull requests are welcome!

Author

Stéphan Zych - monkey_monk

License

This project is licensed under the MIT License - see the LICENSE file for details.

TODO

unit tests

Usage no npm install needed!