@23perspective/pdpa

wrap cookie consent management as a Nuxt.js module

Usage no npm install needed!

<script type="module">
  import 23perspectivePdpa from 'https://cdn.skypack.dev/@23perspective/pdpa';
</script>

README

@23perspective/pdpa

Nuxt.js cookie consent management

Setup

  1. Add @23perspective/pdpa dependency to your project
npm i @23perspective/pdpa # or yarn add @23perspective/pdpa
  1. Add @23perspective/pdpa to the modules section of nuxt.config.js
{
  modules: [
    // Simple usage
    '@23perspective/pdpa',

    // With options
    ['@23perspective/pdpa', {
      position: 'bottom',
      configEndpoint: 'api/pdpa/cookie/config',
      policyPageUrl: '#your-full-path-to-policy-page',
      companyLogoUrl: '#your-logo-url',
      strictlyGroup: ['C0001'],
      ...
    }],
  ],

  // Or you can define your options by this
  pdpa: {
    position: 'bottom',
    configEndpoint: 'api/pdpa/cookie/config',
    policyPageUrl: '#your-full-path-to-policy-page',
    companyLogoUrl: '#your-logo-url',
    strictlyGroup: ['C0001'],
    ...
  }
}
  1. Add component <CookieBanner /> or <cookie-banner /> into your last section of main layout (layouts\default.vue)

Available Parameters

{
  position: 'bottom', // only 'bottom' or 'center' (Default: 'bottom')
  configEndpoint: 'api/pdpa/cookie/config',
  policyPageUrl: '#your-full-path-to-policy-page',

  // Alternative: Multiple locale policy page (only select one)
  policyPageUrl: {
    th: '#your-full-path-to-thai-policy-page',
    en: '#your-full-path-to-eng-policy-page'
  }, 

  companyLogoUrl: '#your-logo-url',
  strictlyGroup: ['C0001'],
  gtm: { id: 'GTM-xxxxxxx', pageTracking: true }, // Optional
  gtmGroupCode: 'C0006', // Optional (which group is related to GTM, you have to provide this if you enable GTM)

  bannerText: {
    th: 'เราใช้คุกกี้เพื่อมอบประสบการณ์การใช้งานที่ดีที่สุดบนเว็บไซต์ของเรา รวมทั้งเพื่อ....',
    en: 'By clicking “Allow All”, you agree to the storing of cookies on your device to...'
  },

  defaultLang: 'th', // Optional (Default: 'th')
  langs: ['th', 'en'] // Optional (Locale switcher in cookies setting)
  
}

Example Usage

  • Component emit onSaveSetting event with selected cookies when settings are saved
<CookieBanner @onSaveSetting="yourFunction" \>

// Or with pug
cookie-banner(@onSaveSetting="yourFunction")

methods: {
  yourFunction(list) {
    console.log(list)
  }
}
  • You can check if cookie group is allowed by
this.$consent.isUserAllowed('C0001') // return Boolean
  • Manually toggle cookie settings by
this.$consent.showSetting()
  • Initial Consent Locale
<cookie-banner lang="en" />

License

MIT License

Copyright (c) 23perspective