Challenge: Building a Renderless Alert Component

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.