Vue Component with setup() and Props

This challenge focuses on creating a reusable Vue component using the Composition API's setup() function and utilizing props to customize its behavior and appearance. Understanding how to effectively use setup() and props is fundamental to building maintainable and scalable Vue applications.

Problem Description

You are tasked with creating a Vue component called GreetingCard that displays a personalized greeting message. The component should accept two props: name (string) and message (string). If name is not provided, it should default to "World". If message is not provided, it should default to "Hello". The component should render a div element containing the formatted greeting message.

Key Requirements:

• Use the Composition API's setup() function to define the component's logic.
• Accept name and message props.
• Provide default values for name and message if they are not provided.
• Render a div element with the formatted greeting message.
• Ensure the component is reusable and customizable through props.

Expected Behavior:

When the component is rendered with specific name and message props, it should display the personalized greeting. When props are omitted, it should use the default values.

Edge Cases to Consider:

• Empty string values for name or message.
• null or undefined values for name or message. (Handle gracefully, defaulting to the appropriate values).
• Props of incorrect types (though TypeScript will help prevent this, consider how the component should behave if it receives unexpected input).

Examples

Example 1:

Input: <GreetingCard name="Alice" message="Welcome!" />
Output: <div>Welcome, Alice!</div>
Explanation: The component receives a name and message, and renders the personalized greeting.

Example 2:

Input: <GreetingCard name="Bob" />
Output: <div>Hello, Bob</div>
Explanation: The component receives only a name, so it uses the default message "Hello".

Example 3:

Input: <GreetingCard />
Output: <div>Hello, World</div>
Explanation: The component receives no props, so it uses both default values.

Constraints

• The component must be written in TypeScript.
• The component must use the Composition API (setup() function).
• The component must accept name and message props.
• The component must render a single div element containing the greeting message.
• The greeting message should be formatted as "[message], [name]!".
• The component should be easily testable.

Notes

• Consider using template refs if you need to interact with the rendered div element. However, for this problem, direct interaction isn't required.
• TypeScript will help enforce type safety, but think about how your component handles unexpected input.
• Focus on creating a clean, readable, and reusable component. The goal is to demonstrate understanding of setup() and props in Vue.
• Remember to define the prop types correctly using TypeScript.