@peax/consent-banner-vue

@peax/consent-banner-vue

Accessible Vue 3.5+ consent banner presentation, with compact and stacked layouts, localized preferences, and a floating preferences button.

npm install @peax/consent-banner-vue @peax/consent-banner-theme vue

Import the shared stylesheet once in your application's CSS entry:

@import '@peax/consent-banner-theme/styles.css';

Quick start

This wrapper uses the three default categories. Supply saved choices as initialPreferences (null for a new visitor) and connect onCommit to your application's storage and service controls.

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Banner } from '@peax/consent-banner-vue'
import type { BannerMsg } from '@peax/consent-banner-vue'

type Preferences = Record<string, boolean>
const props = defineProps<{
  initialPreferences: Preferences | null
  onCommit: (preferences: Preferences) => void
}>()
const open = ref(props.initialPreferences === null)
const preferences = ref(props.initialPreferences ?? {})
const content = computed(() => Object.fromEntries(
  Object.entries(preferences.value).map(([id, checked]) => [id, { checked }]),
))
function commit(next: Preferences) {
  props.onCommit(next) // Your application saves and enforces this decision.
  preferences.value = next
  open.value = false
}
function onMsg(msg: BannerMsg) {
  switch (msg.type) {
    case 'on_accept_all':
      commit({ essential: true, analytics: true, marketing: true })
      break
    case 'on_reject_all':
      commit({ essential: true, analytics: false, marketing: false })
      break
    case 'on_apply_preferences':
      commit(msg.preferences)
      break
    case 'on_open_preferences':
      if (msg.source === 'floating-button') open.value = true
      break
    case 'on_close_preferences':
      if (msg.source === 'floating-button') open.value = false
      break
  }
}
</script>

<template>
  <Banner :is-open="open" :preferences-content="content" cookie-policy-url="/cookies" @msg="onMsg" />
</template>

Restore saved choices before initializing the wrapper and keep server/client props identical. Adapt the Accept/Reject maps when changing categories. Keep optional services blocked until granted and enforce later revocation through onCommit.

API

Exports: Banner, BannerProps, BannerMsg, PreferencesSection, and PreferencesSectionId. Use native Vue class and style bindings and the typed msg event. The option names, defaults, and six message payloads otherwise match React. Vue templates accept kebab-case props; class replaces className, and @msg receives the callback payload. No v-model contract is added. Keep the component mounted and change isOpen to control visibility.

No consent is persisted or enforced by this package. Draft change messages are not applied consent. Applications implement decisions, supply updated preference values, and acknowledge closure through isOpen.

The ESM entry supports Node SSR without a CSS loader. For Nuxt, import Banner directly and list @peax/consent-banner-theme/styles.css in the application's css configuration; no Nuxt module or client-only wrapper is required. Server and client must receive the same initial props.

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['@peax/consent-banner-theme/styles.css'],
})

position="center" supports only slide-from="bottom". Left/right entrances require the matching position. An explicit floating-button-position requires :show-floating-button="true"; both constraints are checked by vue-tsc in templates as well as by BannerProps in TypeScript.

See Vue integration, preferences, and verification.

Optional translations

The banner works without the locales package and uses shared English defaults. To enable selected languages:

<script setup lang="ts">
import { Banner } from '@peax/consent-banner-vue'
import { de } from '@peax/consent-banner-locales/de'
import { fr } from '@peax/consent-banner-locales/fr'
const locales = { de, fr }
</script>
<template>
  <Banner :is-open="true" locale="de-AT" :locales="locales" />
</template>

Install locales explicitly if using its dictionaries. Its default export supplies all 25 languages. Custom/partial dictionaries work through the same prop; content props override dictionary copy, and missing fields use shared English. See localization and migration.