Dynamic Route Props in Vue with TypeScript

This challenge focuses on creating a Vue component that dynamically receives route parameters as props. It's a common requirement in single-page applications (SPAs) to display content based on the URL, and this exercise will solidify your understanding of Vue Router and TypeScript integration. You'll build a component that fetches and displays data based on an ID passed in the route.

Problem Description

You need to create a UserProfile.vue component that displays user profile information. The component should receive a user ID as a route parameter (e.g., /users/:id). The component should fetch user data from a mock API (provided below) based on the received id and display the user's name and email. If the user is not found, display an appropriate error message.

Key Requirements:

• The component must be named UserProfile.vue.
• The component must accept a prop named id of type string.
• The component must use the fetchUser function (provided below) to retrieve user data based on the id prop.
• The component must display the user's name and email if found.
• The component must display an error message if the user is not found.
• The component must use TypeScript for type safety.

Expected Behavior:

When a user navigates to a URL like /users/123, the UserProfile.vue component should render. It should fetch user data for ID 123 from the mock API. If a user with ID 123 exists, the component should display their name and email. If no user with ID 123 exists, the component should display an error message.

Edge Cases to Consider:

• What happens if the id prop is empty or invalid? (Consider displaying a default error message).
• What happens if the API request fails? (Consider displaying a generic error message).
• What happens if the user ID is not a number? (The API expects a number, but the route parameter is a string. Handle the conversion safely).

Examples

Example 1:

Input: Route parameter id = "123"
Output: Displays user with id 123: Name: John Doe, Email: john.doe@example.com
Explanation: The component fetches user data for id 123 from the mock API and displays the retrieved information.

Example 2:

Input: Route parameter id = "999" (user not found)
Output: Displays error message: "User not found."
Explanation: The component fetches user data for id 999, but the API returns an empty result. The component displays the "User not found" message.

Example 3:

Input: Route parameter id = "" (empty id)
Output: Displays error message: "Invalid user ID."
Explanation: The component receives an empty id.  The component displays the "Invalid user ID" message.

Constraints

• The mock API is provided below and should not be modified.
• The component must be written in Vue 3 with TypeScript.
• The component should handle potential errors gracefully.
• The component should be reasonably performant (avoid unnecessary re-renders).

Notes

• You'll need to set up a basic Vue project with Vue Router to run this challenge.
• Consider using async/await for cleaner asynchronous code.
• Think about how to handle loading states while the API request is in progress.
• The fetchUser function is provided to simplify the API interaction. Focus on the component logic.

// Mock API function
async function fetchUser(id: string): Promise<any> {
  const users = [
    { id: "123", name: "John Doe", email: "john.doe@example.com" },
    { id: "456", name: "Jane Smith", email: "jane.smith@example.com" },
  ];
  const userId = parseInt(id, 10); // Convert id to number
  if (isNaN(userId)) {
    return null; // Invalid ID
  }
  const user = users.find((u) => parseInt(u.id, 10) === userId);
  return user ? user : null;
}