Fmt
FmtAddress
Renders a postal address in block or inline format with an optional map link.
Fmt
The Fmt category provides stateless display formatters. Each component is a thin wrapper around native Intl APIs, VueUse, or Nuxt utilities — they accept a raw value and render formatted output without any side effects.
Components
<XAFmtAddress />
Renders a postal address as a block (multi-line) or inline (comma-separated) format. Accepts either a structured address object or individual field props. Optionally appends a map link.
<!-- Object mode -->
<XAFmtAddress :address="contact.address" :show-map-link="true" />
<!-- Field mode -->
<XAFmtAddress
street="123 Main St"
city="Springfield"
state="IL"
zip="62701"
:inline="true"
:show-map-link="true"
map-provider="google"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
address | Object | null | Address object (supports street, street2, city, state, zip, country and common aliases) |
street | String | '' | Street line 1 |
street2 | String | '' | Street line 2 / unit |
city | String | '' | City |
state | String | '' | State / region |
zip | String | '' | Postal code |
country | String | '' | Country |
inline | Boolean | false | Single-line comma-separated format |
showCountry | Boolean | false | Include country in output |
showMapLink | Boolean | true | Append a "View on Map" link |
mapLinkText | String | '' | Custom map link label |
mapProvider | 'google' | 'apple' | 'google' | Map provider for the link URL |
AI Context
component: XAFmtAddress
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Fmt
use-when: Displaying postal addresses in block or inline format. Accepts an address object or individual field props. Stateless and purely presentational.