Challenge: Building a Renderless Alert Component
Practice what weve learned about the renderless component.
We'll cover the following
Problem statement
There are different patterns that can be used to create reusable components. Renderless components patterns describe components that don’t render any markup themselves and instead provide specific functionality to the content passed via slots. Your task is to create a renderless Alert
component.
Challenge
You need to create a reusable, renderless Alert
component. This component should render two slots, a default and content. The content slot should receive the markup that’s displayed when the alert is visible. The default slot should receive any other markup, for instance, buttons that are supposed to open and hide it.
The Alert
component should provide methods to show and hide content via the default slot. The Alert
component will need a state to store current visibility. You can call it isVisible
. It’ll also need open
and close
methods. All these values should be passed to the default slot. What’s more, the Alert
component should accept a timeout
prop that’s used to specify how long the Alert
should remain open in seconds. When the Alert
is opened, a timeout should start, and when it completes, the close
method should be initialized. If the timeout
prop isn’t set, then the Alert
shouldn’t be closed automatically after a specified period of time. Consider using the setTimeout
and clearTimeout
methods to handle the automated closing functionality.
This exercise should be solved with Vue 3’s Options API. You should only modify the src/components/Alert.vue
file.
Get hands-on with 1200+ tech skills courses.