nuxt-x-affiliate
Announcement Bar
Dismissible strip above the header for a promo, deal, or notice, with localStorage persistence.
Announcement Bar
A dismissible strip above the header. Dismissal persists in localStorage under
storageKey.
Give each distinct announcement its own key. Reusing one key means a visitor who dismissed last month's promo never sees this month's.
Components
<XAFAnnouncementBar />
<XAFAnnouncementBar
badge="New"
message="Spring buying guides are live."
icon="i-lucide-sparkles"
link="/best"
link-text="See the guides"
storage-key="spring-2026-guides"
/>
<XAFSiteHeader />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
message | string | '' | Main text |
badge | string | '' | Bold label before the message |
icon | string | '' | Iconify name |
link | string | '' | Trailing call-to-action destination |
linkText | string | 'Learn more' | Trailing link label |
variant | 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'primary' | Colour |
dismissible | boolean | true | Show the close button |
storageKey | string | 'xaf-announcement-dismissed' | localStorage key holding the dismissed flag |
Events
| Event | Payload | Description |
|---|---|---|
dismiss | — | Fired when the visitor closes the bar |
Tips
- The bar starts hidden and reveals after the storage check on mount.
localStorageis not readable during SSR, so rendering it visible first would flash a bar the visitor already dismissed on every page load.
AI Context
component: XAFAnnouncementBar
package: "@xenterprises/nuxt-x-affiliate"
use-when: Dismissible promo or notice strip above the header