Dynamic Product Showcase in Vue

You're tasked with building a product catalog application where each product has its own unique page. This requires implementing dynamic routing in Vue to display individual product details based on their ID. This is a fundamental pattern for creating rich, interactive web applications that serve content tailored to specific resources.

Problem Description

The goal is to create a Vue application with a product listing page and individual product detail pages. The product detail pages should be dynamically generated based on a unique identifier passed through the URL.

Requirements:

1. Product List Component: Create a Vue component (e.g., ProductList.vue) that displays a list of available products. Each product in the list should be a link to its corresponding detail page.
2. Product Detail Component: Create a Vue component (e.g., ProductDetail.vue) that will display the details of a single product. This component will receive a product ID from the URL.
3. Dynamic Routing Setup: Configure Vue Router to handle dynamic routes. Specifically, routes for individual product pages should accept a product ID parameter.
4. Data Fetching (Simulated): For this challenge, you can simulate fetching product data. You don't need to implement actual API calls. A predefined array of product objects within your application will suffice.
5. Display Product Information: The ProductDetail.vue component should display relevant information about the product, such as its name, description, and price, using the fetched data.
6. Navigation: Users should be able to navigate from the ProductList to any ProductDetail page, and ideally, have a way to go back to the list (e.g., using a "Back" button or the browser's back functionality).

Expected Behavior:

• When a user visits /products, they should see a list of products.
• Clicking on a product in the list should navigate them to a URL like /products/1 (where 1 is the product ID).
• The /products/1 page should display the details of the product with ID 1.
• If a product ID does not exist in your simulated data, the ProductDetail.vue component should display a "Product Not Found" message or a similar indicator.

Edge Cases:

• Invalid Product ID: Handle cases where the URL parameter for the product ID is not a valid number or does not correspond to an existing product.
• Empty Product List: Consider how the ProductList.vue component should behave if there are no products to display.

Examples

Example 1: Navigating to a Product Detail Page

Input:

• A predefined array of products:

  [
    { "id": 1, "name": "Laptop", "description": "Powerful computing", "price": 1200 },
    { "id": 2, "name": "Keyboard", "description": "Mechanical typing", "price": 75 }
  ]
  

• User navigates to the root or /products.
• User clicks on the "Laptop" product.

Output:

• The URL changes to /products/1.
• The ProductDetail.vue component is rendered, displaying:
  • Name: Laptop
  • Description: Powerful computing
  • Price: $1200

Explanation: The routing configuration intercepts the /products/:id pattern, extracts 1 as the id parameter, and passes it to the ProductDetail.vue component, which then uses this ID to find and display the corresponding product data.

Example 2: Product Not Found

Input:

• The same predefined product array as Example 1.
• User directly navigates to /products/99.

Output:

• The ProductDetail.vue component is rendered, displaying a message like "Product with ID 99 not found."

Explanation: The ProductDetail.vue component attempts to find a product with id: 99 in the simulated data. Since it doesn't exist, it displays an appropriate message.

Constraints

• You must use Vue.js 3 with the Composition API.
• Vue Router (v4 for Vue 3) must be used for routing.
• TypeScript must be used for all components and routing configuration.
• The simulated product data should be a simple array of objects accessible within your application's scope (e.g., imported from a local file or defined in a central store/service).
• No external libraries beyond Vue and Vue Router are required for this challenge.

Notes

• Think about how to access route parameters within your Vue components.
• Consider using a "NotFound" component for routes that don't match any defined patterns.
• For fetching data, you can create a simple function that mimics an asynchronous call using setTimeout if you wish, or simply access a synchronous array. The core of the challenge is the dynamic routing.
• Structure your Vue Router configuration to handle the dynamic segment correctly.