Composition API Exercise

[00:00:00]
>> So your exercise for the next ten minutes is to go ahead and do what I did inside of photoGallery. And we're gonna move the todoViewer into composition API. And so again, you'll always have the app photo gallery as a reference, and with that I'll see you all in ten minutes.

[00:00:21]
So I apologize kind of with the mix up with the branches. If you had issues pulling, I had to force push a little bit into the exercise because I forgot that my changes were technically a reversion on the history. And so another thing you might run into as well is that if you're having issues, if the terminal is yelling at you to be like, I can't find Nuxt or I don't know where something is, make sure you're in the app directory.

[00:00:43]
Cuz I know this is kind of atypical from a normal project where everything's just on the route. And so just make sure you switch directory, that should help to resolve any issue you have. I do have a great question here though, an error that's being shown, which is that template route requires exactly one element.

[00:00:59]
One of the things to check is make sure you have volar on and not veeder. If you have both on at the same time, sometimes you'll get the wrong error message. Because, basically, this is a good question regardless, is that prior to Vue 3 and for a lot of frameworks, you had to wrap everything in divs and you got div sup, right?

[00:01:18]
Divs wrapped everywhere because of that single div limitation. For those who followed Vue 3's development, you'll know that one of the features that come with Vue 3 is that you don't need that anymore, you can have multi-route components. It comes with its own set of caveats of making sure you define everything correctly.

[00:01:33]
The reason it's still relevant in Nuxt though, even though as you can see here, it's technically not yelling at me right now. Eventually if we keep doing this as we progress further in the workshop, you will get that error. Because there comes a point where, particularly when Nuxt is rendering a page, it has no idea how to handle something that has more than one route.

[00:01:51]
Because if it's swapping a page in and out, it would just be a nightmare to try to figure out which part of the route is supposed to be hydrated where, and how do you code bundle split that thing? So just know that as a rule, Vue 3 allows you to do multi-route.

[00:02:08]
So just know that this is not a Vue 3 limitation. But rather basically, especially once you start doing navigation with Nuxt, that's one of those things where to help a page transition and stuff, those will have a single route element. But just know that it's not a Vue 3 limitation.

[00:02:21]
Great, all right, glad I answered your question. Although fun fact, we had someone here in the room who ran into the dot value bomb. So [LAUGH] it's just one of the things, it does happen. You just kinda forget, you're just like, yeah, I'll just do it todo List.filter, is great.

[00:02:36]
[LAUGH] So again, that's why some people, they just like using reactive, right? And just for the sake of demonstrating what I mean by that, I know what happened, it's totally fine. We'll fix it in this one. But okay, so let me very quickly convert this over to comp API, cuz I was like, why does it look like options again?

[00:02:58]
But it's fine, it would've been good practice for anyone who, [LAUGH] you can always get more practice with this stuff. So what I'm gonna do here is quickly switch over the composition API, and I'm gonna do it just as full speed, so I'm not basically gonna explain myself.

[00:03:14]
But basically, again, I'll just try to somewhat mention things, there's my ref. And then here, I'm deleting that, deleting that, there's that. I'm gonna make these things const. I'm using multi-cursor select by the way, so I'm just basically doing Cmd + Click. And then this is a callback function, but I need to wrap this with computed.

[00:03:32]
And then I just need to close that off, multi-cursor click for the win, then function. So actually just a fun little opinion piece, I don't think there's a right or wrong with this, again, at all. But I used to actually just declare functions like this, cuz I liked the error syntax, but I realized over time, you just get this long list of consts and lets.

[00:03:51]
And there's something actually kind of nice about it visually just telling you, function. And then, sure, you don't get the error syntax, but I think especially with composition API, the longer your list of things is, it's nice to have that visual separation. So again, that's my personal thing that T think I'm starting to adapt a little bit when I'm writing this.

[00:04:09]
But otherwise, again, please feel free to do as you wish. In this speed run, what you saw me do is that we imported ref and computed, and then from view as we did before. And this time, just like we did before, we're gonna actually make sure that we declare every variable with the appropriate helper method.

[00:04:24]
This is the key thing. And to be honest, it is something that's actually really nice about the synta. Because what you're telling people, right, because what we've seen in some frameworks lately is that they start to change how the compiler works, so, for example, const todoList2 like this.

[00:04:40]
If you just do let, they'll override the compiler so that the array automatically becomes reactive. And I don't think there's anything wrong with that, in fact, it's very clean and it starts to make it feel very natural, right, for people who are used to assigning things that way.

[00:04:53]
But for the sake of, I know that a lot of people talking about JavaScript in terms of using the native JavaScript and learning how it works. This is actually much closer, and I think it follows that convention of, this is not just ES6 JavaScript you can run in the browser and just expect it to work.

[00:05:07]
This is something that you're using Vue to help you out with. And that's one of the things I do like about the helper methods in composition API, is that, it's very explicit when you're having Vue come to help out. Versus having compiler macros that wouldn't necessarily translate to another environment if you don't have that.

[00:05:21]
So just a stylistic thing, but I think one of things that I do like about these helper methods.