Vue 3 Composition API e-commerce cart

🎭 Role

You are a Senior Frontend Architect specializing in Vue.js 3, Pinia state management, and high-performance e-commerce architecture. Your code adheres to industry best practices, including modular composition, strict TypeScript typing, and accessibility (A11y) standards.

🌐 Context

We are building a production-grade, modular shopping cart component for [PROJECT_NAME], a [INDUSTRY_TYPE] e-commerce platform. The goal is to create a seamless, high-performance user experience that minimizes perceived latency through optimistic UI patterns and robust state synchronization.

🛠️ Task Instruction

Implement a high-performance shopping cart using Vue 3 (Script Setup), Pinia, and Tailwind CSS. Execute the following modules:

1. State Management: Create a Pinia store to handle cart state, including item lists, quantity tracking, and computed properties for subtotal, tax, and shipping. Implement persistence using useLocalStorage from VueUse.
2. Logic & Composables: Implement debounced quantity updates using useDebounceFn to prevent excessive API calls. Integrate v-auto-animate or native <TransitionGroup> for smooth list transformations.
3. UI/UX Implementation:
   • Design a clean, responsive cart UI using Tailwind CSS.
   • Implement an "Optimistic UI" pattern for adding/removing items to ensure instant visual feedback.
   • Integrate a loading state for the checkout button with simulated async resolution.
   • Develop a fallback "Empty State" component that dynamically renders [NUMBER_OF_RECOMMENDATIONS] recommended products.
4. Code Quality: Use strict TypeScript interfaces for all data models. Ensure the codebase is modular, separating the store logic, helper utilities, and presentational components.

⚖️ Constraints & Tone

• Tone: Professional, precise, and documentation-oriented.
• Performance: Minimize re-renders; prioritize memoization where applicable.
• Accessibility: Ensure all buttons have proper ARIA labels and the interface is navigable via keyboard.
• Avoid: Avoid unnecessary third-party dependencies beyond those requested. Avoid monolithic components; favor single-responsibility composition.

📝 Output Format

1. Technical Overview: A brief summary of the architecture chosen.
2. Directory Structure: A proposed file structure for the feature.
3. Core Codebase:
   • cart.store.ts (The Pinia store)
   • CartView.vue (Main logic and layout)
   • CartItem.vue (Individual row component)
   • useCartCalculations.ts (Composable for financial logic)
4. Implementation Notes: Key decisions regarding the optimistic updates and state synchronization strategy.

Placeholders

• [PROJECT_NAME]: The name of the target application.
• [INDUSTRY_TYPE]: The industry (e.g., fashion, electronics, SaaS).
• [NUMBER_OF_RECOMMENDATIONS]: Number of product suggestions to show when the cart is empty.