/vue-cookieconsent

Vue wrapper for the awesome `cookieconsent` library.

Primary LanguageTypeScript

vue-cookieconsent

A Vue plugin that wraps the awesome Cookieconsent library.

Note: A Vue 2 compatible plugin will be published as vue2-cookieconsent soon.

Cookie Consent cover

Install

Run npm install vue-cookieconsent.

Setup

In your main.[js|ts]:

import CookieConsent from 'vue-cookieconsent'

import '../node_modules/vue-cookieconsent/vendor/cookieconsent.css'
//import './theme/cookieconsent_custom.css' // custom cookie consent styles

// See: https://github.com/orestbida/cookieconsent#all-configuration-options
const consentOptions = {}

const app = createApp(App)
  .use(CookieConsent, consentOptions)
  .use(router);

Usage

The Cookieconsent instance is globally available via this.$cc, providing the full library API. See the Cookieconsent API documentation for all available methods.

To hook into the library's event callbacks, there's an additional on method, which can be used in your Vue components to register a handler to be executed whenever the consent settings change.

export default defineComponent({
    name: 'Foo',
    beforeCreate () {
        this.$cc.on('consent-changed', () => {
            console.log('cookie consent changed, new user preferences:', 
                this.$cc.getUserPreferences())
            // your business logic..
        })
    }
})