CookieConsent in a VUE component

[ghost]

Hi,
Is there any documentation to get this plugin up and running on a VUE component?

[orestbida]

Hi @SumentsJavi,
unfortunately there is no public documentation for vue (or react). Heck there isn't even an npm package yet.

I'm not a vue expert but you should be able to use this in your vue app by simply initializing the plugin inside vue's own mounted hook to make sure that the DOM exists before the plugin tries to append the modal to the body.

Something like this:

mounted() {
  const cc = window.initCookieConsent();

  cc.run({
        current_lang : 'en',
        theme_css : '<path-to-cookieconsent.css>',
        ...
  });
}

as for how to load the plugin, you could load it using plain javascript, before initialization:

mounted() {
  const script = document.createElement('script');
  script.src = "<path-to-cookieconsent.js>";
  script.type = "application/javascript";
  document.head.appendChild(script);
 
  const cc = window.initCookieConsent();
  ...
}

Probably there's a better way to load external javascript in vue?

[tillsanders]

I published the library on the NPM Registry (vanilla-cookieconsent, more here) and added it to my Nuxt 2 installation as a client-only plugin:

// plugins/cookieconsent.client.ts
import { Plugin } from '@nuxt/types'
import 'vanilla-cookieconsent/dist/cookieconsent.css'
import 'vanilla-cookieconsent/src/cookieconsent.js'

const cookieConsentPlugin: Plugin = () => {
  // @ts-ignore
  const cookieConsent = window.initCookieConsent()
  cookieConsent.run({/* ... */})
}

export default cookieConsentPlugin

// nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/cookieconsent.client.ts' },
  ],
}

Works like a charm so far!

[ghost]

Awesome! I'll follow up this.

[eyecatchup]

I wrapped this as a Vue plugin and published to NPM: https://www.npmjs.com/package/vue-cookieconsent

Just do npm i vue-cookieconsent and set up as follows:

// main.[js|ts]
import CookieConsent from 'vue-cookieconsent'

const consentOptions = { /* your config */ }

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

A Cookieconsent instance is now globally available via this.$cc in your Vue components, providing the full library API. To react on consent changes (and to hook into the lib's callback functions), there's an additional on method on $cc:

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..
        })
    }
})

[costafrancesco94]

Would be really nice if we could integrate some of the Vue layout features to add more styling to the banner/modal and eventually inject other buttons/texts and features using vue slots...

The same could be achieved for react/angular counterpart if there are

[Vitomir2]

Are there any updates for vue2-cookieconsent @eyecatchup ?

[JavascriptMick]

Works as a Nuxt3 plugin with some rearrangement
Note, no messing about with nuxt.config.ts required.
https://gist.github.com/JavascriptMick/3fc3af09dd66691c25dd3e815fa1b499

[YusufTezel]

I spent an hour looking for a good way to add cookie consent to my Nuxt 3 project and found a helpful example here: https://stackblitz.com/edit/nuxt-starter-l5k2ny?file=app.vue. Also, the solution from @JavascriptMick is pretty good too.