Creating Components

[00:00:00]
>> We've done a lot of foundational work, basically, is what we've been doing up to this point. And if you've noticed, what we essentially have been working with is, it feels like a view CLI app to be totally honest, right? You have your app view, that's what's being compiled, basically feels like client side rendering.

[00:00:15]
And that's actually what this is, there's a reason why Nuxt approach it this way because. Not everyone who uses a nice app needs routing and all this other stuff. So one of the nice things about approaching it this way is that, if you wanna build an app like this, client side rendered, and then like say, add a next PWA module, which we'll talk more about later.

[00:00:33]
Then all of a sudden you have a client side rendering app that has PWA capabilities. And you didn't have to do anything else. It won't import view router, it'll keep the bundle small. So those are some of the optimizations that Knucks makes for you. And one of the reasons why they start out like this.

[00:00:46]
Because they wanna make sure you basically often to the things that you really need, and that's what we're gonna be doing as we kinda progress through the rest of this day, is progressively add on more and more features onto our app. So naturally, one of the things we've been kind of flip flopping between is the fact that we haven't really created a components folder yet.

[00:01:03]
And there's a reason for that because, the components are a little bit special in the Knucks arena. So let's go ahead and finally just move out of this app to do at boat photo gallery bit. So, what we're gonna do is we're gonna create a new folder inside of our app, folder called components.

[00:01:20]
All right, and now this time, what I'm gonna go ahead and do, is let's refactor this to be a little bit more like actual component architecture, right? So, what I'm gonna do here is I'm gonna create something. Let's see you do viewer, dot view, so this will be one of my components.

[00:01:36]
And we can basically just, I realize you could have just dragged and copy, but I'll just do a copy and paste, which will be able to easier for me. And then I'll delete this. Great, all right, that looks good. And then, what else do we got? We have the, wanna make sure [SOUND], okay, so we have the to do viewer.

[00:01:58]
It's inside of here. And now, what we wanna do is if we wanted to render this, say we wanted to put the photo gallery in one section and then put the, to do in another column, right? What we could do, is we can wrap this inside something called columns, Oops dot columns, which is a layout class from Al.

[00:02:17]
And we can group this first one in one column and then in the other column we can actually put in our to-do viewer. And so, let me go ahead and import that at the top. So import to do viewer from, and then the route is components, fot start to do viewer.

[00:02:39]
That's it, save. So, with any luck, if I refresh this, there we go. We see now we have our to do list on the right, it fetches. We have our photo gallery here, it fetches what's good side by side, and we have component architecture. So here's the thing, though, when we're taking a look at this component, and we're taking a look at the photo gallery component, there's a bit of similarity.

[00:03:06]
So what I'm gonna do actually right now is, I'm gonna go ahead and refactor this one too. So let's go ahead and grab all of this, And this will be photo gallery.view, just paste that, I think that should be everything. Yep, I think that's everything there. So now app.view, we can simplify, copy this, unless you this sort of place the top one to be an alphabetical, so Photo Gallery, and now we can delete all of this stuff.

[00:03:39]
So then we have that, we can get rid of basically, all this HTML in here. And we can basically put Photo Gallery here. And so, just to make sure if something shows something visually changed, we're just going to flip these real quick so that to do on the left and photo galleries on the right.

[00:03:55]
And now we switch over and refresh. Oh-uh, something's broken. Why is it yelling at me? Well, it's because, no scripts setup. That's why, cuz inside a photo gallery, I did a straight copy paste, and we don't need this in anymore. So that needs to go away. We don't need this container section column, we just need the basic HTML here that we are using.

[00:04:23]
Which means, we can get rid of all this other stuff. Save it. And then now this should be much better. There we go. We see that our photo gallery here, we see that there. Now, a couple of things still a little bit messed up though, is because, now that we're no longer an app to view these styles here are actually still being relegated to the specific component.

[00:04:44]
So, what we wanna go ahead and do to be honest, is let's go ahead and move the BOMA import into app.css which it is here, and then to do viewer does I also have the import it does. So let's get rid of that and refactor that a little bit, and, yes sir, yeah, we need the main.CSS to also go in app.view for now.

[00:05:03]
Okay, now we'll save this, this should start to look better. There we go, this is kind of what we were expecting now. Once again, we have what to do, we have our gallery.