nuxt-x-marketing
PrivacyCookieBanner
Full-width bottom cookie consent banner with Accept, Reject, and Customize actions, persisted to localStorage.
PrivacyCookieBanner
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.
Components
<XMarkPrivacyCookieBanner />
<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 cookie 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. The user's selection is stored as the string 'accepted' or 'rejected'. |
Emits
| Event | Description |
|---|---|
accept | User clicked Accept All. |
reject | User clicked Reject All. |
customize | User clicked Customize. Pair with XMarkPrivacyGDPR for granular control. |
AI Context
category: Privacy
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkPrivacyCookieBanner
use-when: >
Implementing a prominent cookie consent banner fixed to the bottom of the
viewport. Supports Accept, Reject, and Customize actions. Pair with
XMarkPrivacyGDPR when granular category control is needed.
typical-page-section: Place in app.vue or a layout file so it appears on every page.