cart-minimal

Cart Minimal

A mini cart in a popover with the first few items, the subtotal and checkout.

States: Default

Parts

PartFileDoes
CartMinimalCartMinimal.vueOpens a popover with the cart's first items, subtotal and checkout.

Styling

PartRecipe
CartMinimalcart-minimal-title
CartMinimalhint
CartMinimalmeta

Install

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

npm packages
@lucide/vue

Built from

API reference

CartMinimal CartMinimal.vue

Opens a popover with the cart's first items, subtotal and checkout.

PropTypeDefault
itemsCartLine[][]
currencystring'EUR'
maxVisibleItemsnumber3
title((count: number) => string)`Cart (${count})`
openLabelstring'Open cart'
countLabel((count: number) => string)count > 9 ? '9+' : String(count)
moreLabel((count: number) => string)`+ ${count} more ${count === 1 ? 'item' : 'items'}`
subtotalLabelstring'Subtotal'
taxNotestring'Shipping and taxes calculated at checkout.'
checkoutLabelstring'Checkout'
viewCartLabelstring'View Cart'
emptyTitlestring'Your cart is empty'
emptyTextstring'Add some items to get started.'
quantityLabel((quantity: number) => string)—
localestring—
classClassValue—
openbooleanfalse
EventPayload
update:openvalue: boolean
checkoutitems: CartLine[]
view-cart—
Recipe cart-minimal-titleSets
base: cart-minimal-title 2 properties · 2 inherited
Recipe hintSets
base: hint 2 properties
Recipe metaSets
base: meta 3 properties
Example