nuxt-x-marketing

PrivacyGDPR

Modal for granular cookie category preferences with toggles for required and optional categories.

PrivacyGDPR

A modal providing granular cookie category controls. Required categories are shown with a locked toggle. Users can accept all, reject all, or save a custom selection. The selected preferences are persisted to localStorage under storageKey, and cookie-consent is set to 'customized' whenever the user saves. Links to Privacy Policy and Cookie Policy pages are shown at the bottom.

Components

`<XMarkPrivacyGDPR />`

<XMarkPrivacyGDPR
  v-model="gdprOpen"
  title="Privacy Preferences"
  description="Choose which cookies you allow us to use."
  :categories="[
    {
      id: 'necessary',
      name: 'Necessary',
      description: 'Required for the site to function.',
      required: true,
    },
    {
      id: 'analytics',
      name: 'Analytics',
      description: 'Help us understand how visitors use the site.',
      required: false,
    },
    {
      id: 'marketing',
      name: 'Marketing',
      description: 'Used for targeted advertising.',
      required: false,
    },
  ]"
  privacy-link="/privacy"
  cookie-link="/cookies"
  storage-key="gdpr-prefs-v1"
  :button="{ label: 'Cookie Settings', icon: 'i-lucide-cookie' }"
  @save="onConsentSaved"
/>

The component renders a default trigger button using the button config. Place it without a trigger slot for self-managed visibility, or wrap it in <ClientOnly> and toggle via v-model.

Props

Prop	Type	Default	Description
`modelValue`	`boolean`	`false`	Controls modal visibility (`v-model`).
`title`	`string`	`'Privacy Preferences'`	Modal heading.
`description`	`string`	Default description	Introductory text.
`categories`	`array`	4 default categories	Cookie categories `[{ id, name, description, required }]`.
`privacyLink`	`string`	`'/privacy'`	Privacy Policy page URL.
`cookieLink`	`string`	`'/cookies'`	Cookie Policy page URL.
`storageKey`	`string`	`'gdpr-preferences'`	localStorage key for storing the saved preference map.
`button`	`object`	`{}`	Trigger button config `{ label?, color?, variant?, size?, icon? }`. Falls back to a "Cookie Settings" neutral outline button.

Emits

Event	Payload	Description
`update:modelValue`	`boolean`	v-model sync.
`save`	`selections: { [categoryId: string]: boolean }`	Selected category IDs map when user saves preferences.
`accept`	—	User clicked Accept All.
`reject`	—	User clicked Reject All.

AI Context

category: Privacy
package: "@xenterprises/nuxt-x-marketing"
components:
  - XMarkPrivacyGDPR
use-when: >
  Providing granular cookie category opt-in/opt-out when GDPR compliance
  requires it. Typically triggered by the "Customize" action in
  XMarkPrivacyCookieBanner or a "Cookie Settings" link in the footer.
typical-page-section: Modal overlay — triggered from cookie banner or footer link.

Edit this pageorReport an issue

PrivacyCookieToast

Lightweight cookie notice delivered via Nuxt UI toast with Accept and Decline actions, persisted to localStorage.

CardPromo

9/16 aspect-ratio card with full-bleed background image, gradient overlay, title, optional badge, and CTA button — great for campaign or category tiles.