@cherrypulp/vue-gdpr

    0.0.1 • Public • Published

    Vue GDPR

    Cookie bar with modal preferences and helpers.

    Installation

    Make sure all dependencies have been installed before moving on:

    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

    Register VueGdprPlugin in your Vue application :

    // 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

    License

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

    TODO

    • [ ] unit tests

    Keywords

    Install

    npm i @cherrypulp/vue-gdpr

    DownloadsWeekly Downloads

    6

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    1.64 MB

    Total Files

    52

    Last publish

    Collaborators

    • dbennani_cherry
    • danielsum
    • cherrypulpcom
    • monkeymonk
    • anthonypauwels