Checkout
AddressForm
Shipping/billing address form with GCC-specific fields.
AddressForm
A structured address form using Nuxt UI form components. Includes standard fields (name, phone, street, city, state, country, postal code) and optional GCC-specific fields (district, national address).
Preview
Shipping Address
Usage
<script setup>
const address = ref({})
const countries = [
{ label: 'Saudi Arabia', value: 'SA' },
{ label: 'United Arab Emirates', value: 'AE' },
]
</script>
<CAddressForm
v-model="address"
:countries="countries"
@submit="handleSave"
/>
Without GCC Fields
<CAddressForm v-model="address" :show-gcc-fields="false" />
Loading State
<CAddressForm v-model="address" loading />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | Partial<Address> | required | Current address values |
countries | { label: string; value: string }[] | [] | Country dropdown options |
showGccFields | boolean | true | Show district & national address fields |
loading | boolean | false | Disable form during submission |
ui | Partial<{...}> | — | Per-instance theme overrides |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | Partial<Address> | Any field changed |
submit | Partial<Address> | Form submitted |
Slots
| Slot | Scoped Props | Description |
|---|---|---|
gcc-fields | — | Custom GCC-specific fields |
actions | — | Custom submit button |
Example: Custom Submit Button
<CAddressForm v-model="address" @submit="save">
<template #actions>
<div class="flex gap-2">
<UButton type="button" variant="outline" @click="cancel">Cancel</UButton>
<UButton type="submit" color="primary">Save Address</UButton>
</div>
</template>
</CAddressForm>