Solution: Building a Renderless Alert Component

Solution

The challenge was to modify the Alert component. Below are the required changes:

For the src/components/Alert.vue file:

• Add the isVisible state with the initial value set to false.
• Add open and close methods. The open method should set the isVisible state to true and initialize a timeout if the timeout prop was passed. The timeout callback should close the alert. The close method should clear the timeout and set the isVisibile state to true.
• Render a named content slot using the v-if directive. It should be rendered only if the isVisible state is set to true.
• Render a default slot that receives the isVisible state and open and close methods as attributes.

Let’s run the widget below to understand how the above solution works.

Note: It may take a while to run. When the server starts, go to the app URL, and see the output.