Nuxt-iubenda NPM

Iubenda Nuxt Module

Easily integrate Iubenda with Nuxt.js

Setup

Add iubenda-module dependency to your project

yarn add iubenda-module # or npm install iubenda-module

Add iubenda-module to the modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    'iubenda-module',

    // With options
    ['iubenda-module', { /* module options */ }]
  ]
}

Module Options

{
  iubenda: {
    // Defaults:
    dev: true, // Activate module in dev environment.
    consentMode: true, // Use Google's consent mode.
    links: {
      enable: true, // Add script to include links to policy pages.
      style: 'nostyle', // Add styling to links. (nostyle, white or black)
      whiteLabel: true, // White label links.
      embed: true // Open links in embedded popup.
    },

    // Entire iubenda configuration
    config: {
      siteId: 12345, // Required
      cookiePolicyId: 12345, // Required

      // ...all other config options. (See Iubenda cookie banner script)
      // Example defaults:
      lang: 'en',
      gdprAppliesGlobally: false,
      cookiePolicyInOtherWindow: false,
      consentOnContinuedBrowsing: false,
      perPurposeConsent: true,
      banner: {
        acceptButtonDisplay: true,
        customizeButtonDisplay: true,
        rejectButtonDisplay: false,
        acceptButtonColor: 'black',
        acceptButtonCaptionColor: 'white',
        customizeButtonColor: '#bbb',
        customizeButtonCaptionColor: 'black',
        rejectButtonColor: 'white',
        rejectButtonCaptionColor: 'black',
        closeButtonDisplay: false,
        position: 'float-bottom-right',
        textColor: '#333',
        backgroundColor: '#ddd'
      }
    }

    i18n: {} // See integrations.
  }
}

Use in Vue templates

The included plugin provides the following properties to use in your Vue components:

$iubenda.privacyPolicyUrl // Link to privacy policy
$iubenda.cookiePolicyUrl // Link to cookie policy
$iubenda.privacyPolicyApiUrl // Url to use in an API call for the privacy policy
$iubenda.cookiePolicyApiUrl // Url to use in an API call for the cookie policy
$iubenda.getPrivacyPolicyLinkHtml('Label', attributes) // Link tag to the privacy policy page / popup
$iubenda.getCookiePolicyLinkHtml('Label', attributes) // Link tag to the cookie policy page / popup

Example:

  <template>
    <div v-html="$iubenda.getPrivacyPolicyLinkHtml('Privacybeleid', {classes: 'link'})"></div>
    <div v-html="$iubenda.getCookiePolicyLinkHtml('Cookiebeleid', {classes: 'another-link'})"></div>
  </template>

Will render (depending on your 'links' options):

  <div>
    <a 
      href="https://www.iubenda.com/privacy-policy/12345" 
      class="iubenda-nostyle no-brand iubenda-noiframe iubenda-embed link"
      title="Privacybeleid">
      Privacybeleid
    </a>
    <a 
      href="https://www.iubenda.com/privacy-policy/12345/cookie-policy" 
      class="iubenda-nostyle no-brand iubenda-noiframe iubenda-embed another-link" 
      title="Cookiebeleid">
      Cookiebeleid
    </a>
  </div>

Components

PageEmbed

Used to embed the cookie policy and privacy policy page in your site.

Import component.

import PageEmbed from 'iubenda-module/lib/components/PageEmbed.vue'

Use in template.

  <PageEmbed type="cookie" loadingText="Loading cookie policy" errorText="Something went wrong">

Props

type: Can either be 'cookie' or 'privacy'. Defaults to 'privacy'.
loadingText: The text shown when the content is being fetched. Defaults to 'Loading content...'.
errorText: The text shown when the fetch has failed. Defaults to 'Error fetching content'.

Integrations

nuxt/i18n

!! Work in progress...

Currently only the PageEmbed component inherits the locale from the i18n module. You only have to set the correct configuration as below.

Configuration

// nuxt.config.js
{
  iubenda: {
    // ...other options
    i18n: {
      en: {
        cookiePolicyId: 123456
      },
      nl: {
        cookiePolicyId: 123456
      }
    }
  }
}