In Laioutr, currency is defined per market. Each market (e.g. Switzerland, Germany) has a single ISO 4217 currency (e.g. CHF, EUR). When a customer is in a market, they see that market's currency.
To offer multiple currencies, configure multiple markets in Cockpit → Markets and let customers switch between them via a market/currency switcher.
Laioutr does not support multiple currencies within a single market.
const currency = useCurrency() // ComputedRef<string>, e.g. "CHF"
This is a shorthand for useMarket().value.currency. Use it when building Money objects, calling pricing APIs, or showing currency labels. See composables for the full list.
The UI Kit provides a global $money formatter:
<template>
<!-- Renders e.g. "CHF 149.00" or "149,00 €" depending on locale -->
<span>{{ $money(product.price) }}</span>
</template>
$money accepts a Money object ({ amount: number, currency: string }) and optional Intl.NumberFormatOptions. The amount is in the smallest currency unit (e.g. cents), so 10012 with currency USD renders as $100.12. The locale for number formatting comes from the active language, so the same CHF amount renders differently in a German vs French locale.
Laioutr uses @screeny05/ts-money for money arithmetic. The Money interface from @laioutr-core/core-types matches ts-money's CommonMoney:
import { Money } from '@laioutr-core/core-types'
const price: Money = { amount: 14900, currency: 'CHF' } // CHF 149.00
Connector apps (Shopify, Shopware, Adobe Commerce) convert platform-specific price formats to this type using Money.fromDecimal():
import { Money } from '@screeny05/ts-money'
// In a component resolver: convert a decimal price to Money
const price = Money.fromDecimal(149.0, 'CHF')
// => { amount: 14900, currency: 'CHF' }
Use Money.fromDecimal() when your data source provides prices as decimal numbers. Use the Money interface directly when amounts are already in minor units.
$measurement, $timespan, and $duration formatters, all locale-aware. See Multi-language support.A currency switcher is a market switcher. Switching currency means navigating to the same page in a different market:
const switchMarketUrl = useSwitchMarketUrl()
// Switch to Germany market (EUR). Full page load because host may differ.
navigateTo(switchMarketUrl('mkt_germany'), { external: true })
See language switcher for more on useSwitchMarketUrl().
Consent Management
Laioutr’s consent management abstraction gives you a single, provider-agnostic API for cookie and consent state. Use it to gate tracking and marketing scripts, and plug in your own consent provider or the ready-to-use Cookiebot app.
Media and Media Library
Laioutr’s media library abstraction lets business users choose assets from connected backends visually in Cockpit. Implement your own media adapter for your asset system so editors can browse and select (and optionally upload) media in Studio.