nuxt-x-affiliate
Currency Switcher
Currency picker dropdown or compact pill with cookie persistence and a global currency-changed event for price re-formatting.
Currency Switcher
The XAFCurrencySwitcher component lets visitors pick the display currency for prices. It comes in two layouts — a full <select> dropdown and a compact pill — persists the choice in a cookie, and emits a xaf:currency:changed window event so any other price-displaying component on the page can react.
Components
<XAFCurrencySwitcher />
<XAFCurrencySwitcher v-model="currency" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | required | Two-way bound currency code (e.g. 'USD') |
currencies | CurrencyOption[] | USD, EUR, GBP, CAD, AUD, JPY | Available currencies |
compact | boolean | false | Render a compact pill (icon + code) instead of the full dropdown |
persist | boolean | true | Auto-persist selection in a cookie |
cookieName | string | 'xaf_currency' | Cookie name for persistence |
cookieDays | number | 365 | Cookie lifetime in days |
broadcastChange | boolean | true | Emit a xaf:currency:changed window event on change |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | Emitted when the user picks a currency. Use with v-model. |
Currency option shape
interface CurrencyOption {
code: string // ISO 4217 (e.g. "USD", "EUR", "JPY")
label?: string // Display label (e.g. "US Dollar")
symbol?: string // Symbol prefix (e.g. "$", "€", "¥")
locale?: string // Locale hint for formatting (e.g. "en-US")
}
Usage
Basic dropdown
<script setup lang="ts">
const currency = ref('USD')
</script>
<XAFCurrencySwitcher v-model="currency" />
Compact pill in a header
<XAFCurrencySwitcher v-model="currency" compact />
The compact version cycles through currencies on click — useful in a sticky header where space is at a premium.
Custom currency list
<XAFCurrencySwitcher
v-model="currency"
:currencies="[
{ code: 'USD', label: 'US Dollar', symbol: '$', locale: 'en-US' },
{ code: 'EUR', label: 'Euro', symbol: '€', locale: 'fr-FR' },
{ code: 'INR', label: 'Indian Rupee', symbol: '₹', locale: 'en-IN' },
]"
/>
Listening to currency changes globally
The switcher dispatches a xaf:currency:changed CustomEvent on window. Any component can listen and re-format prices:
// In a price-display composable:
onMounted(() => {
window.addEventListener('xaf:currency:changed', (e) => {
const code = (e as CustomEvent<{ code: string }>).detail.code
// re-format all price elements, or refetch with new currency
})
})
Set broadcastChange: false to suppress the event (useful in tests).
Tips
- Pair with
Intl.NumberFormatfor locale-aware price rendering:new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(49.99) - The cookie is
SameSite=Laxand persists for a year by default — visitors won't see the picker reappear across sessions. - The app-config default (
xAffiliateContent.currency) is used to detect when the user has chosen a non-default currency; a small dot indicator appears on the compact pill in that case.
AI Context
component: XAFCurrencySwitcher
package: "@xenterprises/nuxt-x-affiliate"
use-when: Multi-currency site where visitors can pick the display currency for prices