The User Address Component displays a list of customer addresses. It is typically used on the My Account → Addresses page, checkout address selectors, or anywhere a user needs to view, edit, or manage saved addresses.

Activate the component by adding:

data-v-component-user-address

The component automatically loads the addresses of the logged‑in user unless a specific user_id is provided.

Component Options

Options are added as HTML attributes using the data-v-* syntax.

Option Attribute Description Default
start data-v-start Starting offset for pagination 0
limit data-v-limit Number of addresses to display 4
user_id data-v-user_id Filter addresses by user ID (useful for admin or multi‑user views) Logged‑in user

These options allow you to paginate, filter, or override which user’s addresses are displayed.

Component Properties

Each address is wrapped in:

data-v-user_address

Inside this element, the following fields are available.

Address Identity

Property Attribute Description
user_address_id data-v-user_address-user_address_id Unique ID of the address
user_id data-v-user_address-user_id ID of the user who owns the address
default_address data-v-user_address-default_address 1 if this is the default address

Name & Company

Property Attribute
first_name data-v-user_address-first_name
last_name data-v-user_address-last_name
company data-v-user_address-company

Address Fields

Property Attribute
address_1 data-v-user_address-address_1
address_2 data-v-user_address-address_2
city data-v-user_address-city
post_code data-v-user_address-post_code
country_id data-v-user_address-country_id
region_id data-v-user_address-region_id

These fields can be combined to display a formatted address block.

Custom Fields

Property Attribute Description
fields data-v-user_address-fields Additional custom fields (if defined in the CMS)

Actions & URLs

Property Attribute Description
url data-v-user_address-url URL to edit the address
delete-url data-v-user_address-delete_url URL to delete the address

These URLs are typically used for buttons or links in the address list.

HTML Example

<div data-v-component-user-address>            
<table>
  <tbody>
	<tr data-v-user_address>
	  <td class="text-start">

		<span data-v-user_address-first_name>John</span>
		<span data-v-user_address-last_name>Doe</span>
		<br>
		<span data-v-user_address-company>Toyota</span>
		<br>
		<span data-v-user_address-address_1>Broadway Avenue</span>
		<span data-v-user_address-address_2>Central Park</span>
		<span data-v-user_address-city>New york</span>
		<span data-v-user_address-post_code>1223</span>

	  </td>
	  <td class="text-end align-middle">
		<a href="/user/address/edit/1" title="Edit" class="btn btn-outline-primary btn-sm border-0" data-v-user_address-url>
		  <i class="la la-pen"></i>
		</a>
		<a href="/user/address/delete/1" title="Delete" class="btn btn-outline-danger btn-sm border-0" data-v-user_address-delete-url>
		  <i class="la la-trash"></i>
		</a>
	  </td>
	</tr>                              
	</tbody>
</table>
</div>

This example displays each saved address with edit and delete actions, making it suitable for a user account dashboard.