Implementing CSS Modules in a Vue Component with TypeScript

This challenge focuses on integrating CSS Modules into a Vue component written in TypeScript. CSS Modules allow you to write CSS locally scoped to a component, preventing naming collisions and improving maintainability. You'll be creating a simple component and styling it using CSS Modules, demonstrating how to import and apply the styles.

Problem Description

You are tasked with creating a Vue component called ProfileCard that displays a user's profile information (name, avatar, and bio). The styling for this component should be handled using CSS Modules. The goal is to ensure that the CSS classes defined in your CSS Module are scoped to the ProfileCard component, preventing them from affecting other parts of your application. You must use TypeScript for type safety and clarity.

Key Requirements:

• Create a Vue component named ProfileCard.vue.
• Create a CSS Module file named ProfileCard.module.css (or .module.scss if you prefer SCSS).
• Import the CSS Module into your ProfileCard.vue component.
• Apply the CSS classes from the module to the appropriate elements within the component's template.
• The component should accept a name, avatarUrl, and bio as props.
• The component should render the profile information within a visually appealing card.

Expected Behavior:

The ProfileCard component should render a card displaying the provided user information. The styles defined in ProfileCard.module.css should be applied only to the elements within the ProfileCard component. Inspect the rendered HTML in your browser's developer tools to confirm that the CSS classes are correctly scoped.

Edge Cases to Consider:

• What happens if the props are empty strings or null? The component should still render gracefully, potentially displaying default text or hiding elements.
• Consider how to handle potential errors during CSS module loading (though this is less likely in a typical setup).

Examples

Example 1:

Input:
name: "John Doe"
avatarUrl: "https://example.com/john.jpg"
bio: "Software Engineer"

Output:
A card displaying "John Doe" as the name, the image from "https://example.com/john.jpg" as the avatar, and "Software Engineer" as the bio. The card should be styled according to the CSS Module.

Explanation: The component receives the profile data and renders it within the card, applying the styles defined in `ProfileCard.module.css`.

Example 2:

Input:
name: ""
avatarUrl: null
bio: " "

Output:
A card displaying a default name (e.g., "No Name"), a placeholder avatar (e.g., a default image), and potentially hiding the bio section or displaying a message like "No Bio Available." The card should still be styled according to the CSS Module.

Explanation: The component handles empty or null props gracefully, providing a reasonable user experience.

Constraints

• The component must be written in TypeScript.
• You must use CSS Modules.
• The component must accept name, avatarUrl, and bio as props.
• The styling should be contained within the ProfileCard.module.css file.
• The solution should be functional and visually appealing.
• Assume a standard Vue.js setup with TypeScript and a build tool like Vite or Webpack.

Notes

• You can use any CSS preprocessor you prefer (e.g., Sass/SCSS) as long as you configure your build tool to handle it correctly. The .module.css extension is a common convention for CSS Modules.
• Consider using a default avatar image if avatarUrl is not provided.
• Think about how to handle the case where the name or bio is an empty string.
• Focus on demonstrating the correct usage of CSS Modules within a Vue component. The specific styling details are less important than the proper integration.
• You don't need to implement any complex logic beyond rendering the profile information. The focus is on CSS Modules.