Solution: Building a Renderless Alert Component
Here's the solution for how to build a renderless alert component.
We'll cover the following
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 tofalse
. - Add
open
andclose
methods. Theopen
method should set theisVisible
state totrue
and initialize a timeout if thetimeout
prop was passed. The timeout callback should close the alert. Theclose
method should clear the timeout and set theisVisibile
state totrue
. - Render a named
content
slot using thev-if
directive. It should be rendered only if theisVisible
state is set totrue
. - Render a default slot that receives the
isVisible
state andopen
andclose
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.