cart-full

Cart Full

The cart page: editable lines with quantity controls, an order summary and a checkout button.

States: Default

Parts

PartFileDoes
CartFullCartFull.vueShows the full cart page with editable items, an order summary and a checkout button.

Styling

PartRecipe
CartFullcart-full
CartFullpage-title
CartFullhint
CartFullmeta
CartFulltotal

Install

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

npm packages
@lucide/vue

Built from

API reference

CartFull CartFull.vue

Shows the full cart page with editable items, an order summary and a checkout button. Renders a <div>.

PropTypeDefault
currencystring'EUR'
freeShippingThresholdnumber10000
shippingCostnumber599
title((count: number) => string)`Shopping Cart (${count})`
summaryTitlestring'Order Summary'
subtotalLabelstring'Subtotal'
shippingLabelstring'Shipping'
freeShippingLabelstring'Free'
savingsLabelstring'You save'
totalLabelstring'Total'
taxNotestring'Incl. VAT'
checkoutLabelstring'Checkout'
continueLabelstring'Continue Shopping'
emptyTitlestring'Your cart is empty'
emptyTextstring'Add some items to get started.'
maxQuantitynumber—
removeLabel((name: string) => string)—
decreaseLabelstring—
increaseLabelstring—
eachLabel((price: string) => string)—
localestring—
classClassValue—
itemsCartLine[][]
EventPayload
checkoutitems: CartLine[]
update:itemsvalue: CartLine[]
continue-shopping—
Recipe cart-fullSets
base: cart-full 3 properties
Recipe page-titleSets
base: page-title 1 property
Recipe hintSets
base: hint 2 properties
Recipe metaSets
base: meta 3 properties
Recipe totalSets
base: total 2 properties
Example