Build a Forum with Inertia and Laravel
This episode is for members only

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
27. Toggling the create discussion form

Episodes

0%
Your progress
  • Total: 6h 54m
  • Played: 0m
  • Remaining: 6h 54m
Join or sign in to track your progress
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%

Transcript

00:00
We're now going to focus on toggling this form,
00:02
and we're going to use the same technique to toggle our reply form as well. But let's think about how we need this to work. We're going to have a button just up here, which we'll build in a second. But we need to keep some sort of reference to whether this is open,
00:19
which is going to be true or closed, which is going to be false. The only problem is we need to be able to close this form from other locations as well, including after we have posted a discussion. We need to be able to close it with the X icon that we're going to add here
00:35
a little bit later. We need to be able to close it when the discussion is posted, and we could potentially close this from any other location as well. So how are we going to do this?
00:45
Well, a really good way to do this is to create a composable within JavaScript. So what we're going to do is under the JS directory, we're going to create a composables directory. And in here, we're going to create out basically just a JavaScript file
00:59
which keeps state, which we can extract and use anywhere we want. Now, with a composable, we usually name these with a use prefix. So we're just going to call this use create discussion dot JS. So this is a JavaScript file.
01:17
Let's just look at the way this works in the most basic way possible by going ahead and exporting out a function here. And inside of this, we're going to keep state outside of this function.
01:29
But this function is going to expose them values for us. So, for example, let's go ahead and import ref from view, which is how we keep reference to a particular variable. And we're going to go ahead and create this out here called visible.
01:45
And by default, that's going to be false. Inside of here, we're going to go ahead and expose that value. What this means is whenever we modify this value from inside of here, perhaps with some sort of function, this state is now global
01:59
within our application. So when we go to another page, this isn't going to be reset back to false when we say switch pages over to here. And that's exactly what we need.
02:09
This also means that we can import this use create discussion composable anywhere and toggle the visibility from any part of our application. So let's have a look at how this works, and then we'll add in the ability to toggle this.
02:23
So if we head over to the forum index, which is where we do need to toggle this from the sidebar, let's go and pull in the composable first of all. So import use create discussion.
02:38
And that comes from composables use create discussion. Now, to use this, what we do is. Destructure this, pulling in the values that we want to pull out, so that's visible, and then we evoke this use create discussion,
02:56
and that's going to pull out that visible value. So over in the sidebar, let's just dump out what we have here. And sure enough, we get false. Now, wherever we import and use our composable
03:08
from anywhere in our application, we can control this visible property, and that will be reflected everywhere. If you've ever worked with Vue before and you've used something like VueX for state management, this is not the same, but it's very similar
03:22
in the fact that we can keep state now. OK, so let's create the ability to toggle this. We'll create a very simple button just to test this out, and then we'll pull this all together so it works.
03:32
So over in the use create discussion composable, we want two functions in here which toggle this, either showing it or hiding it. Or, of course, you can just create one to generally toggle it.
03:45
So let's go ahead and create show create discussion form. And all that's going to do is set the visible value. We use value here because we're working with a ref in Vue to true. And then we can just go ahead and create another one to hide this
04:05
like so, setting that to false. Now, we need to expose these two functions out of here. So let's do that now. Hide create discussion form and show create discussion form.
04:16
And now what we can do is grab these out of here. So hide create discussion form and show create discussion form. Now, we don't actually need the ability to hide this yet. So let's just put in show and let's go over to the sidebar
04:30
and go and create a button in here which is going to show this. So V on click. And we'll say show create discussion form and we'll just say show. We've got the visible value here.
04:40
So what we should now see when we click this is it changes to true. So we now have very basic state management through a composable. So we'll get rid of the visible value here and we will create our button here. That's actually going to be the primary button component.
04:56
So let's pull this in from here. So that's going to be primary button. And we'll come back down to our side section and we'll swap this over to a primary.
05:07
Button and inside of here, we're just going to say show. So we have our button in there now. OK, so let's go and just modify this very quickly. We'll set the width to full here.
05:20
Let's set flex and justify center so the items are centered and then we'll set a specific height of this to 10. So we should now have a much better looking button like this. And what we'll also do is as part of this,
05:36
sidebar over in our forum layout, let's just make sure over on here, we're setting a space Y of three. And there we go. Great. So we have a little bit of a gap now.
05:51
OK, so now that we've got that in there, let's just change the text over. First of all. So let's change this to start a discussion. And really importantly, we only need to change the text.
06:05
Really importantly, we only want this to show if the user is authenticated. So we'll bring in page props, auth and user. Check that has a value. And that looks good.
06:15
So what we're going to do is now hide this form based on that visible value from that composable. So we need this to be pulled over to our create discussion form. And let's just go to our script section here, pull this in,
06:30
and then we'll go ahead and extract this out. So that's down here. And let's import. Use create discussion from here.
06:41
Now what we can do. Let's grab this visible value. And only show this form if it's visible. So by default, we know over on use create discussion is set to false.
06:54
We don't see it when we click this. It opens up. Let's just recap on this, just in case this doesn't make sense because we've defined this visible ref outside of this function.
07:05
We can call this function to grab the value, but this will always be set across any of our not page refreshes, but the page data changing. So this is now basically state in our application. When we invoke this use create discussion composable,
07:21
we get all of the functions and anything that's exposed from this, which allows us to go ahead and destructure this like this. We can pull anything out of here and use it. We've done that on the create discussion form and the index.
07:36
So the index is responsible for showing the create discussion form. So we've pulled that in. We don't even need visible in here so we can just pull out show create discussion form when we click on this or trigger this from anywhere.
07:50
In this case, from the sidebar just here, when we click on this, that's going to go ahead and set this value to true and then because this is outside of here and a part of our state, we're listening for this anywhere else in our application.
08:05
So that's just going ahead and showing that form. Let's go ahead and create a little button here to hide this as well. So we want to expose hide create discussion form over on our form itself. So hide create discussion form.
08:20
And what we can do is head over to the title section just here or the header section, and we can go ahead and create our div in here. And let's say flex. Item center and justify between.
08:37
And then down here, we can create a button which will close this off now. For now, let's just use a times icon or an entity. And we're going to say the on click. Hide create discussion form.
08:52
So that should show us a little icon down here. We'll change that over later. But when we click that, it gets rid of it. So now we can just toggle this state from anywhere in this application.

Episode summary

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.

Episode discussion

No comments, yet. Be the first!