---
name: cart-item-minimal
title: Cart Item Minimal
url: https://ui.frontic.com/components/templates/cart-item-minimal.md
tier: templates
install: npx @frontic/ui add cart-item-minimal
files:
  - components/templates/cart-item-minimal/CartItemMinimal.vue
  - components/templates/cart-item-minimal/index.ts
  - components/templates/cart-item-minimal/types.ts
registryDependencies:
  - cart
  - image
  - price
---

# Cart Item Minimal

Read-only cart lines with a small image, the variant, quantity and price, such as in an order review.

## Install

```sh
npx @frontic/ui add cart-item-minimal
```

Built from: [Cart](https://ui.frontic.com/lib/cart.md), [Image](https://ui.frontic.com/components/ui/image.md), [Price](https://ui.frontic.com/components/ui/price.md)

Used by: [Cart Minimal](https://ui.frontic.com/components/templates/cart-minimal.md)

## Examples

```vue
<script setup lang="ts">
import { CartItemMinimal, type CartLine } from '@/components/templates/cart-item-minimal'

const items: CartLine[] = [
  {
    id: 'frost-escape-parka',
    name: 'Frost Escape Parka',
    variant: 'Sun yellow · M',
    price: { amount: 14900, currency: 'EUR' },
    quantity: 1,
    image: 'https://static.frontic.com/cdn-cgi/image/width=640,format=auto/ui/products/frost-escape-parka.jpg',
  },
  {
    id: 'snowflake-ski-goggles',
    name: 'Snowflake Ski Goggles',
    variant: 'Mint · One size',
    price: { amount: 12700, currency: 'EUR', ref: 15900 },
    quantity: 2,
    image: 'https://static.frontic.com/cdn-cgi/image/width=640,format=auto/ui/products/snowflake-ski-goggles.jpg',
  },
  {
    id: 'trailmaster-22',
    name: 'TrailMaster 22',
    variant: 'Brown · 20L',
    price: { amount: 14100, currency: 'EUR' },
    quantity: 1,
    image: 'https://static.frontic.com/cdn-cgi/image/width=640,format=auto/ui/products/trailmaster-22.jpg',
  },
]
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <CartItemMinimal :items="items" />
  </div>
</template>
```

## API reference

### CartItemMinimal

Lists the cart's items with image, variant, quantity and price, without editing. Renders a `<ul>`.

Styling: `cart-item-minimal-image`, which extends [`thumbnail`](https://ui.frontic.com/DESIGN.md#thumbnail); [`line-title`](https://ui.frontic.com/DESIGN.md#line-title); [`meta`](https://ui.frontic.com/DESIGN.md#meta). Change them there and every part that extends them follows.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `CartLine[]` | `[]` | The cart's lines to list. |
| `quantityLabel` | `((quantity: number) => string)`: `(quantity: number): string` | ``Qty ${quantity}`` | Builds the quantity text next to the variant, e.g. `Qty 2`. |
| `locale` | `string` |  | BCP 47 locale the prices are formatted in; the ConfigProvider's when left out. |
| `class` | `ClassValue` |  | Classes added to the part's own element, after its recipe classes. |

## Exports

```ts
import { type CartLine } from '@/components/templates/cart-item-minimal'
```

- `CartLine`: from [Cart](https://ui.frontic.com/lib/cart.md)

## Styling

| Part | Recipe |
| --- | --- |
| `default` | [`cart-item-minimal`](https://ui.frontic.com/DESIGN.md#cart-item-minimal) |
| `image` | [`cart-item-minimal-image`](https://ui.frontic.com/DESIGN.md#cart-item-minimal-image) |
| `line-title` | [`line-title`](https://ui.frontic.com/DESIGN.md#line-title) |
| `meta` | [`meta`](https://ui.frontic.com/DESIGN.md#meta) |

## Source

`components/templates/cart-item-minimal/CartItemMinimal.vue`

```vue
<script lang="ts">
/** Lists the cart's items with image, variant, quantity and price, without editing. */
export default {}
</script>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import type { CartLine } from './types'
import { lineTotal } from '@library/lib/cart'
import { Image } from '@library/components/ui/image'
import { Price } from '@library/components/ui/price'

const props = withDefaults(
  defineProps<{
    /** The cart's lines to list. */
    items?: CartLine[]
    /** Builds the quantity text next to the variant, e.g. `Qty 2`. */
    quantityLabel?: (quantity: number) => string
    /** BCP 47 locale the prices are formatted in; the ConfigProvider's when left out. */
    locale?: string
    class?: HTMLAttributes['class']
  }>(),
  {
    items: () => [],
    quantityLabel: (quantity: number) => `Qty ${quantity}`,
  },
)
</script>

<template>
  <ul role="list" :class="['fui-cart-item-minimal', props.class]">
    <li v-for="line in items" :key="line.id" class="flex items-center gap-3">
      <div data-slot="cart-item-minimal-image" class="fui-cart-item-minimal-image shrink-0 overflow-hidden">
        <Image :src="line.image ?? '/placeholder.svg'" :alt="line.name" class="size-full object-cover" />
      </div>
      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
        <h3 data-slot="line-title" class="fui-line-title truncate">{{ line.name }}</h3>
        <span data-slot="meta" class="fui-meta truncate">
          <template v-if="line.variant">{{ line.variant }} · </template>{{ quantityLabel(line.quantity) }}
        </span>
      </div>
      <Price size="sm" :price="lineTotal(line)" :locale="locale" :show-discount="false" align="end" class="shrink-0" />
    </li>
  </ul>
</template>
```

`components/templates/cart-item-minimal/types.ts`

```ts
export type { CartLine } from '@library/lib/cart'
```