Implementing CSS Modules in Vue.js with TypeScript

This challenge focuses on mastering CSS Modules within a Vue.js project using TypeScript. CSS Modules provide a way to scope CSS locally to components, preventing style collisions and making your styling more maintainable and predictable. You will implement a simple Vue component that utilizes CSS Modules to style its elements.

Problem Description

Your task is to create a Vue.js component, written in TypeScript, that leverages CSS Modules for its styling. This will involve creating a separate CSS Module file for the component and importing its generated class names into the component's script. The component should display a simple message and have distinct styling applied through CSS Modules.

Key Requirements:

1. Vue Component Creation: Create a single-file Vue component (.vue file) using the <script setup> syntax.
2. TypeScript Integration: The component's script section must be written in TypeScript.
3. CSS Module Implementation:
   • Create a separate CSS file (e.g., MyComponent.module.css) for the component's styles.
   • Define at least two distinct CSS classes within this .module.css file.
   • Import the CSS Module into your Vue component's script.
   • Apply these imported class names to HTML elements within the component's template.
4. Component Functionality: The component should render a simple message (e.g., "Hello, CSS Modules!").
5. Styling Verification: The rendered message should clearly demonstrate that the CSS Module styles are being applied correctly.

Expected Behavior:

The component should render the message "Hello, CSS Modules!" with styles applied from MyComponent.module.css. For instance, one class might change the text color, and another might add a border or padding.

Edge Cases to Consider:

• Class Name Collisions: While CSS Modules are designed to prevent this, ensure your class names are reasonably unique within their module scope.
• Build Tool Configuration: Assume your Vue project is already configured to support CSS Modules (e.g., via Vite or Vue CLI). You do not need to configure the build tool itself.

Examples

Example 1:

MyComponent.vue (TypeScript Script Setup)

<script setup lang="ts">
import styles from './MyComponent.module.css';
</script>

<template>
  <div :class="styles.container">
    <h1 :class="styles.title">Hello, CSS Modules!</h1>
    <p>This is a paragraph styled with CSS Modules.</p>
  </div>
</template>

MyComponent.module.css

.container {
  padding: 20px;
  border: 2px solid #42b983;
  background-color: #f0f0f0;
  border-radius: 8px;
}

.title {
  color: #35495e;
  font-size: 2em;
  margin-bottom: 15px;
}

Expected Visual Output:

A div element with a light gray background, green border, and rounded corners. Inside, an h1 element with dark blue text and a larger font size, followed by a paragraph.

Explanation:

The styles object imported from MyComponent.module.css will contain properties corresponding to the class names (e.g., styles.container, styles.title). These properties will resolve to unique, generated class names. By using :class="styles.className", we apply these scoped styles to the HTML elements.

Constraints

• The solution must be implemented as a single Vue Single File Component (.vue).
• The script section must use <script setup lang="ts">.
• At least two distinct CSS classes must be defined and used from the CSS Module.
• The component should be renderable and visually demonstrate the applied styles.
• No inline styles should be used for the demonstration of CSS Modules.

Notes

• When importing CSS Modules, the imported object will map your original class names to unique, generated class names.
• The :class binding in Vue is flexible and can accept objects or arrays, making it suitable for applying CSS Module classes.
• Focus on the Vue component and its CSS Module integration. Assume your development environment is set up to handle .module.css files correctly with Vue.