Privacy
Privacy
Three components address cookie consent at different levels of complexity. XMarkPrivacyCookieToast is the lightest-touch option. XMarkPrivacyCookieBanner provides a more prominent banner. XMarkPrivacyGDPR offers category-level granularity for GDPR compliance. All three persist consent decisions to localStorage.
Components
<XMarkPrivacyCookieBanner />
A slide-up banner fixed to the bottom of the viewport. Persists the user's decision in localStorage under storageKey — the banner will not reappear once accepted or rejected. Emits accept, reject, and customize events.
<XMarkPrivacyCookieBanner
title="We use cookies"
message="We use cookies to improve your experience. By continuing, you agree to our"
policy-link="/privacy"
policy-label="Privacy Policy"
:has-customize="true"
:has-reject="true"
storage-key="cookie-consent-v1"
@accept="trackConsent('accepted')"
@reject="trackConsent('rejected')"
@customize="openGdprModal"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | 'We use cookies' | Banner heading |
message | String | Default message | Main message text |
policyLink | String | '/privacy' | Link URL for policy reference |
policyLabel | String | 'Learn more' | Policy link label |
hasCustomize | Boolean | false | Show "Customize" button |
hasReject | Boolean | true | Show "Reject All" button |
storageKey | String | 'cookie-consent' | localStorage key for persistence |
Events
| Event | Description |
|---|---|
accept | User clicked Accept All |
reject | User clicked Reject All |
customize | User clicked Customize |
<XMarkPrivacyCookieToast />
A zero-template component. On mount it checks localStorage for prior consent; if none is found it enqueues a Nuxt UI toast with Accept and Decline buttons. This is the least intrusive consent option — no persistent banner element in the DOM.
<!-- Place once in app.vue or a layout file -->
<XMarkPrivacyCookieToast />
This component accepts no props. Consent is stored under the key 'gdpr-cookies-accepted' in localStorage.
<XMarkPrivacyGDPR />
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. Links to Privacy Policy and Cookie Policy pages are shown at the bottom.
<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"
@save="onConsentSaved"
/>
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 | 3 default categories | Cookie categories [{ id, name, description, required }] |
privacyLink | String | '' | Privacy Policy page URL |
cookieLink | String | '' | Cookie Policy page URL |
Events
| Event | Payload | Description |
|---|---|---|
save | selections: Object | Selected category IDs map when user saves preferences |
AI Context
category: Privacy
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkPrivacyCookieBanner
- XMarkPrivacyCookieToast
- XMarkPrivacyGDPR
use-when: >
Implementing cookie consent on any marketing site. Use CookieToast for
minimal friction, CookieBanner for prominent consent, and GDPR modal when
granular opt-in/opt-out per category is required.
typical-page-section: >
Place in app.vue or a layout file so it appears on every page.
CookieBanner and CookieToast appear at page level; GDPR modal is triggered
by the CookieBanner "Customize" action or a footer "Cookie Settings" link.