Build a Livewire Comment System
Playing
02. Setting up

Episodes

0%
Your progress
  • Total: 1h 40m
  • Played: 0m
  • Remaining: 1h 40m
Join or sign in to track your progress

Transcript

00:00
Let's do a little bit of setup. So we're ready to drop our comment component into somewhere on something that we can comment on. So we're going to start things out in a completely fresh Laravel project
00:11
with Livewire already installed with creating out an article page. Let's go ahead and do that now. So let's make out a model here and we'll call that article. With the migration alongside of it, let's go ahead and open up that
00:23
create articles table migration. And we'll just fill in the very basic data about this. So let's just say we've got a title in here and let's also add in a slug and we'll make that unique.
00:37
I think that's just about enough to prove what we need to do here. So let's go ahead and run our migrations. We're then going to immediately create out a Livewire component. So let's go and make an article show component and let's go ahead and
00:51
register this directly as a route. So if we open up our web routes here, let's just grab any of these and we'll say articles slash. And then we'll use article for route model binding.
01:02
Let's make this a get request and we will directly hook it up to that article show in here. So over in the database, let's go ahead and create a fake article in here. We'll just call it an article and let's provide a slug for this as well.
01:19
And we should be good. Let's just take a look here. Okay. So I'm going to head over to the browser.
01:23
Let's go over to articles and an article. And yeah, sure enough, the full page component that we've just created, can't find a layout. So if we head back over to the editor and open up the article show component,
01:34
what we can do here is use the layout attribute, and then we can just point it to the layout that we want. So we just take a look at where that is. It's in layouts and app.
01:44
So we just need to say, say layouts.app and we should be good. And yeah, there we go. So the only issue that we've got here is that the layout that comes with Laravel breeze by default needs you to be signed in to have the menu at the top.
01:59
So we're just going to make a quick modification to this, just so we can see what we're doing. So if we go over to layouts and app.blade.php, and we look for anywhere that the user is being referenced.
02:11
So let's just say auth and, and I think it's in the navigation partial here. Yeah. So the navigation is used with this. Let's go and look for wherever the user is being used and you can see
02:23
we've got this settings dropdown just here. So what I'm going to do is just wrap this in an auth check and use this auth directive. So let's end out there and we'll look again because we should have a responsive settings option and we'll do the same for this as well.
02:39
So we're basically just getting rid of that if the user is not signed in. Okay. If we head back over to the browse now and give that a refresh, there we go. So anything up there that would have tried to show the authenticated
02:49
user is now no longer there. Okay. So we're going to go ahead and grab the dashboard template. So if we go over to the dashboard that we get by default with breeze, let's copy
02:59
all of this over minus the app layout, and we'll put that into our article show live by a template. So let's paste all of this in and get rid of the app layout because we've already defined that as a full page and let's hop back over, give that
03:14
a refresh, and there we go. So what we're going to do from here is just go ahead and change this to the article title, which we don't have just yet. We'll fill that in and then I'm just going to modify this slightly.
03:25
So let's just make this a little bit smaller and we'll also make sure that we're running NPM run dev as well. And let's check this out. And yeah, that looks just about right to me.
03:35
So we can add the article content inside of here, and then we could create another wrapper down here that will be all of our comments. So just a really basic layout to get us going and we could space this out a little bit as well, I guess.
03:49
So let's do a space Y of let's say eight on there and yeah, we'll bump it down. Great. So we've now got a nice layout that we can use. Let's go ahead and fetch this article under article show and
04:02
actually pass it down to the page. So to do this with root model binding, we just define this as a property inside of a live by a component. So we're just going to say article and we expect an article to be passed into here.
04:16
And that's pretty much what we need to do. This is now available inside of our article show template. So if we open this up for the article title, we can now just replace this out with our article title.
04:27
And sure enough, we're not doing this by slug. So last thing we just want to go ahead and make sure we're pulling that in by the slug and there we go. We have our article and our comments section.
04:40
So let's just change this copy over and we'll come over to our article show component here and just change this to the article body. That's what we'd want to replace out and we can start to build out our comments component now.
18 episodes•1 hr 40 mins

Overview

Build a drop-in comment system with Livewire that instantly works for any model.

We’ll cover top-level comments and replies by re-using Livewire components, editing and deleting comments, working with Alpine.js to minimise network requests, building an Alpine.js directive to display when a comment was posted, handling deleted users and loading more comments gradually.

Once you’re done, you can drop a single Livewire comments component wherever you need it — and comments will instantly be enabled.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!