In this episode, we're tackling how to handle the toggling (showing and hiding) of our 'create discussion' form in a Vue application. The idea is to manage the form's visibility not just with a button, but from anywhere in the app—like when you post a discussion or click an X button to close the form. We want the state (open or closed) to be reusable and accessible globally.
To achieve this, we create a "composable" called useCreateDiscussion.js
under a new composables
directory. This composable uses Vue's ref
to keep track of whether the form should be visible, and it exposes simple functions to show or hide the form (or toggle its state). By importing this composable wherever we need in the app, we can control the visibility of the form from multiple locations.
We demo how to import and use the composable in the sidebar, initially testing it with a simple "Show" button (later swapping in a styled primary button). We also make sure the button only shows if the user is authenticated. Then we wire up the form so it only appears when the visibility value is true, and add a close button (with a simple icon for now) to allow hiding it.
This approach gives us a lightweight, global state management pattern—somewhat similar to Vuex, but way simpler, specifically for UI toggling. It's a practical example of how to leverage Vue composables for reusable and reactive state across components.