Solution: Building a Renderless Alert Component

Here's the solution for how to build a renderless alert component.

We'll cover the following


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.

Get hands-on with 1200+ tech skills courses.