создаю телегу товаров

components/cart/CartItem.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="cart-item">
+    <NuxtLink :to="`/product/${productsData?.parent_id}`">
+      <img
+        class="cart-item__image"
+        :src="productsData?.images[0]?.src"
+        alt="cart?.image"
+      >
+    </NuxtLink>
+
+    <pre>
+
+    {{ variations }}
+    </pre>
+    <div>
+      {{ productsData?.name }}
+
+      <div class="d-flex align-items-center">
+        {{ productsData?.price }}
+        <Icon name="ph:currency-rub" />
+      </div>
+
+      <div class="cart-item__attributes">
+        {{ t(`colors.${color}`) }}
+        {{ t(`materials.${material}`) }}
+        {{ `размер ${size}` }}
+      </div>
+
+      <div>
+        <UButton
+          icon="i-lucide-trash"
+          @click="deleteItem(cartItem)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  cartItem: {
+    type: String,
+    required: true,
+  },
+})
+
+const { t } = useI18n()
+const { cartRemoveItem } = useCart()
+const { productsData, color, material, size } = useProduct(props?.cartItem?.variation_id)
+
+const deleteItem = (item) => {
+  cartRemoveItem({ variation_id: item?.variation_id })
+}
+</script>
+
+<style lang="scss">
+.cart-item {
+  max-width: 600px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+
+  &__image {
+    width: 120px;
+    cursor: pointer;
+  }
+
+  &__attributes {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+</style>