Product Catalog Component

Problem/Feature Description

A small e-commerce startup is building a Vue 3 storefront. Their backend team has just finished a REST endpoint at /api/products that returns a JSON payload in the shape { data: Product[] } where each Product has an id: number, name: string, price: number, and category: string. The frontend team needs a page component that fetches and displays these products, and a child card component that renders a single product and lets users "Add to wishlist" by emitting an event upward.

The components need to be production-ready from day one: they'll be maintained by multiple developers who rely on TypeScript for safety, and the product owner has explicitly asked that the UI handles the loading and error cases gracefully — customers should see a spinner while data loads and a human-readable message with a retry option if the request fails. The company also has an accessibility obligation, so interactive elements and error regions must be properly labelled for screen readers.

Output Specification

Produce the following Vue 3 component files. Write TypeScript-idiomatic code throughout.

• ProductListPage.vue — a top-level page component that fetches products from /api/products and renders them. It must visually handle the three states: loading, error (with retry), and a list of products.
• ProductCard.vue — a child component that displays a single product (name, price, category) and has an "Add to wishlist" button that communicates back to the parent.

Place both files in a src/components/ directory.