Nuxt Cookie Control

To add Nuxt Cookie Control to your Nuxt project, use the following command:

npx nuxi@latest module add cookie-control

The <CookieControl> component provides several slots to customize the appearance of the bar, the modal, and individual cookie items.

Available slots:

• #bar: Customize the cookie bar content.
• #modal: Customize the configuration modal content.
• #cookie: Customize how individual cookies are rendered. Receives a { cookie } object.

Additionally, <CookieIframe> provides:

• #iframe: Content to show when iframes are blocked.
• #controlButton: Custom control button content.

<!-- Customizing the Cookie list -->
<CookieControl>
  <template #cookie="{ cookie }">
    <h3 v-text="cookie.name" />
    <span v-html="cookie.description" />

    <div v-if="cookie.targetCookieIds">
      <b>Cookie ids: </b>
      <span v-text="cookie?.targetCookieIds?.join(', ')" />
    </div>
  </template>
</CookieControl>

Cookies defined in the cookies configuration object require specific properties. Note that isPreselected: true is allowed for UI purposes but does not enable the cookie (to remain GDPR compliant). Properties like description and name can be translatable objects.

{
  description: {
    en: 'This cookie stores preferences.'
  },
  id: 'p',
  isPreselected: false,
  name: {
    en: 'Preferences'
  },
  links: {
    'https://example.com/privacy': 'Privacy Policy',
    'https://example.com/terms': 'Terms of Service',
  },
  src: 'https://example.com/preferences/js?id=<API-KEY>',
  targetCookieIds: ['xmpl_a', 'xmpl_b'],
}

The removeCookie function allows you to programmatically delete a cookie from the client by setting its value to undefined using Nuxt's useCookie composable.

removeCookie('my-cookie-name')

When configuring the module, each cookie must follow the Cookie interface. This allows you to describe the cookie's purpose and how it should be presented to the user.

• id: A unique identifier for the cookie.
• name: The display name (can be a string or a translatable object).
• description: A description of what the cookie does (can be a string or a translatable object).
• isPreselected: If true, the cookie is enabled by default in the settings.
• targetCookieIds: An array of other cookie IDs that this cookie depends on.
• links: A record of links related to the cookie (e.g., privacy policy).

export interface Cookie {
  description?: Translatable
  id: string
  isPreselected?: boolean
  name: Translatable
  links?: Record<string, string | null>
  src?: string
  targetCookieIds?: string[]
}

The resolveTranslatable function is used to extract a string from a Translatable object based on a provided locale. If the input is already a string, it is returned as-is. If it is an object, the function looks up the key corresponding to the locale.

Note that if a locale is provided but the corresponding key is missing in the Translatable object, it will throw an error. If the input is an object and no locale is provided, it will also throw an error.

Available locales default to LOCALE_DEFAULT if not specified.

// If translatable is a string, it returns the string
resolveTranslatable('Hello') // returns 'Hello'

// If translatable is an object, it returns the value for the locale
const translations = { en: 'Hello', fr: 'Bonjour' }
resolveTranslatable(translations, 'fr') // returns 'Bonjour'

The module injects a $cookies object into the Nuxt application and Vue components. This object provides reactive access to the current consent state.

Available properties in $cookies (type State):

• cookiesEnabled: A Ref containing the list of currently enabled Cookie objects.
• cookiesEnabledIds: A Ref containing an array of IDs for the enabled cookies.
• isConsentGiven: A Ref<boolean> indicating if the user has provided consent.
• isModalActive: A Ref<boolean> indicating if the settings modal is currently open.
• locale: A Ref<Locale> representing the current language.
• moduleOptions: The configuration options used by the module.

declare module '#app' {
  interface NuxtApp {
    $cookies: State
  }
}

declare module 'vue' {
  interface ComponentCustomProperties {
    $cookies: State
  }
}

The useResolveTranslatable function is a factory that returns a specialized translation function bound to a specific locale. This is useful for creating a reusable resolver that automatically uses the current application locale without needing to pass it manually every time.

It uses LOCALE_DEFAULT as the fallback locale if none is provided to the factory.

// Create a resolver for a specific locale
const resolve = useResolveTranslatable('en')

// Use the resolver on translatable data
const text = resolve({ en: 'Hello', es: 'Hola' }) // returns 'Hello'