Vue Component with Mitt Event Bus Integration

This challenge focuses on integrating Mitt, a lightweight event emitter library, into a Vue.js application. Mitt provides a simple and efficient way to manage application-wide events without relying on a complex state management solution like Vuex for simple communication between components. This is particularly useful for events that don't require complex state transformations.

Problem Description

You are tasked with creating a Vue component that utilizes Mitt to emit and listen for a custom event called user-logged-in. The component should:

1. Emit the user-logged-in event: When a button labeled "Login" is clicked, the component should emit the user-logged-in event with a payload containing a user object (e.g., { id: 123, name: 'John Doe' }).
2. Listen for the user-logged-in event: The component should also listen for the user-logged-in event. Upon receiving this event, it should display a welcome message using the user's name from the payload.
3. Initialize Mitt: The event bus should be initialized once at the application's root and accessible throughout the component.
4. Cleanup: When the component is destroyed, it should unsubscribe from the user-logged-in event to prevent memory leaks.

Key Requirements:

• Use TypeScript for type safety.
• Utilize Mitt for event emission and listening.
• The component should be self-contained and demonstrate the core functionality of Mitt integration.
• The welcome message should only appear after the user-logged-in event is received.

Expected Behavior:

• Initially, no welcome message is displayed.
• Clicking the "Login" button emits the user-logged-in event.
• Upon receiving the event, a welcome message displaying the user's name appears.
• The component correctly unsubscribes from the event bus when destroyed.

Edge Cases to Consider:

• What happens if the event payload doesn't contain a name property? (Handle gracefully, perhaps by displaying a generic welcome message).
• Ensure the event listener is properly cleaned up to avoid memory leaks when the component is destroyed.

Examples

Example 1:

Input: User clicks "Login" button.
Output: A welcome message appears displaying "Welcome, John Doe!".
Explanation: The component emits the 'user-logged-in' event with the payload { id: 123, name: 'John Doe' }. The listener receives the event and displays the welcome message.

Example 2:

Input: User clicks "Login" button, payload is {id: 456}.
Output: A welcome message appears displaying "Welcome, Unknown User!".
Explanation: The component emits the 'user-logged-in' event with the payload { id: 456 }. The listener receives the event, detects the missing 'name' property, and displays a default welcome message.

Constraints

• The solution must be written in TypeScript.
• The component should be a single, self-contained Vue component.
• The event bus initialization should be done in a way that makes it accessible to the component.
• The component should not rely on external state management libraries (e.g., Vuex) beyond the basic Vue reactivity system.
• The solution should be reasonably performant; avoid unnecessary re-renders.

Notes

• Consider using onBeforeUnmount lifecycle hook to unsubscribe from the event bus.
• Mitt provides a simple on and off API for event handling.
• Think about how to handle the case where the event payload might be missing the expected data.
• You can use a simple provide/inject pattern to make the event bus accessible to the component, or a global variable. Choose the approach that best suits your understanding and coding style. The key is to ensure the event bus is initialized only once.