cart-item-compact
Cart Item Compact
Cart lines with a quantity field and a remove button.
States: Default
Parts
| Part | File | Does |
|---|---|---|
| CartItemCompact | CartItemCompact.vue | Lists the cart's items with a quantity control and a remove button. |
Styling
| Part | Recipe |
|---|---|
| CartItemCompact | cart-item-compact |
| CartItemCompact | cart-item-compact-image |
| CartItemCompact | line-title |
| CartItemCompact | meta |
| CartItemCompact | quiet-action |
Install
Writes 3 files into components/templates/cart-item-compact/. For agents, npx @frontic/ui docs cart-item-compact prints this reference as markdown; the MCP server serves the same.
- npm packages
- @lucide/vue
Built from
API reference
CartItemCompact CartItemCompact.vue
Lists the cart's items with a quantity control and a remove button.
| Prop | Type | Default | |
|---|---|---|---|
| maxQuantity | number | 10 | |
| removeLabel | ((name: string) => string) | `Remove ${name}` | |
| quantityLabel | string | 'Quantity' | |
| locale | string | — | |
| class | ClassValue | — | |
| items | CartLine[] | [] | |
| Event | Payload | |
|---|---|---|
| update:items | value: CartLine[] | |
| Recipe cart-item-compact | Sets | |
|---|---|---|
| base: cart-item-compact | 3 properties | |
| Recipe cart-item-compact-image | Sets | |
|---|---|---|
| base: cart-item-compact-image | 4 properties · 3 inherited | |
| Recipe line-title | Sets | |
|---|---|---|
| base: line-title | 2 properties | |
| Recipe meta | Sets | |
|---|---|---|
| base: meta | 3 properties | |
| Recipe quiet-action | Sets | |
|---|---|---|
| base: quiet-action | 1 property | |
Example