Cart
CartDrawer
Slide-over cart drawer with items, quantities, subtotal, and checkout actions.
CartDrawer
A slide-over sidebar that displays cart items with thumbnails, names, prices, quantity selectors, and remove buttons. Includes subtotal, empty state, and checkout/view-cart actions.
Preview
Usage
<CCartDrawer :cart="cart" @update:quantity="updateQty" @remove="removeItem">
<template #trigger>
<UButton icon="i-heroicons-shopping-bag" />
</template>
</CCartDrawer>
Custom Product URLs
<CCartDrawer
:cart="cart"
:resolve-product-url="(item) => `/shop/${item.productSlug}`"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cart | Cart | null | required | Cart data |
items | CartItem[] | — | Override cart items |
itemCount | number | — | Override item count |
loading | boolean | false | Loading state |
title | string | 'Shopping Cart' | Drawer header |
checkoutLabel | string | 'Checkout' | Checkout button label |
checkoutTo | string | '/checkout' | Checkout route |
viewCartLabel | string | 'View Cart' | View cart button label |
viewCartTo | string | '/cart' | View cart route |
resolveProductUrl | (item: CartItem) => string | — | Custom product URL resolver |
Events
| Event | Payload | Description |
|---|---|---|
update:quantity | { itemId: string, quantity: number } | Item quantity changed |
remove | string | Item removed (item ID) |
Slots
| Slot | Scoped Props | Description |
|---|---|---|
trigger | — | Drawer open trigger button |
body | — | Custom cart body content |
footer | — | Custom footer with totals/actions |
Example: Custom Trigger with Badge
<CCartDrawer :cart="cart">
<template #trigger>
<UButton icon="i-heroicons-shopping-bag" variant="ghost">
<UBadge v-if="cart?.itemCount" floating color="primary">{{ cart.itemCount }}</UBadge>
</UButton>
</template>
</CCartDrawer>