recent-orders

Recent Orders

Order history card: a table of orders with date, items, status and total, a per-order menu to view, track, get the invoice or start a return, and pagination.

States: Default

Parts

PartFileDoes
RecentOrdersRecentOrders.vueLists recent orders with status and total, and actions such as track or return.

Styling

PartRecipe
RecentOrdersline-title
RecentOrdershint

Install

Writes 3 files into components/sections/recent-orders/. For agents, npx @frontic/ui docs recent-orders prints this reference as markdown; the MCP server serves the same.

npm packages
@lucide/vue
reka-ui

Built from

API reference

RecentOrders RecentOrders.vue

Lists recent orders with status and total, and actions such as track or return.

PropTypeDefault
orders*RecentOrder[]—
totalnumber—
pageSizenumber5
titlestring'Recent orders'
descriptionstring'Everything you ordered in the last three months.'
downloadLabelstring'Download all invoices'
orderLabelstring'Order'
dateLabelstring'Date'
itemsLabelstring'Items'
statusLabelstring'Status'
totalLabelstring'Total'
actionsLabelstring'Actions'
viewLabelstring'View order'
trackLabelstring'Track parcel'
invoiceLabelstring'Invoice (PDF)'
returnLabelstring'Start a return'
statusLabelsRecord<OrderStatus, string>{ processing: 'Processing', shipped: 'Shipped', delivered: 'Delivered', returned: 'Returned', }
moreLabel((count: number) => string)`+${count} more`
rangeLabel((from: number, to: number, total: number) => string)`Showing ${from}–${to} of ${total} ${total === 1 ? 'order' : 'orders'}`
orderActionsLabel((order: RecentOrder) => string)`Actions for order ${order.number}`
surface'raised' | 'bare''raised'
localestring—
classClassValue—
pagenumber1
EventPayload
update:pagevalue: number
downloadAll—
vieworder: RecentOrder
trackorder: RecentOrder
invoiceorder: RecentOrder
returnorder: RecentOrder
Data attributeValues
data-surface'raised' | 'bare'
Recipe line-titleSets
base: line-title 2 properties
Recipe hintSets
base: hint 2 properties
Example