Options API

[00:00:00]
>> I know that some people coming into nursery, especially with the Vue 3 release, don't always have a view background. So we're gonna do is we're gonna start a little bit from the top as far as explaining kind of how things were things, the state of the ecosystem.

[00:00:12]
And so to start, where we're gonna do is we're gonna start with options API because it's what most people are familiar with when they think of Vue, and then we'll kind of basically progress from there. So to start, what I'm going to do is I'm gonna build a very simple to-do list viewer with the Options API.

[00:00:26]
And the reason I'm gonna emphasize viewer is don't worry we're not gonna sit here and build out to do MVC all over again. This is a very high level exercise that we're going to do. So instead of my app.Vue component, I'm gonna go ahead and add a script block.

[00:00:37]
And then all we do for our options API is we typically export a default object, right? But what I'm gonna tell you here is in the nuts component or when you're building the necessary app, I actually highly recommend that you by default go ahead and import define Nuxts component from the library.

[00:00:57]
And the reason for this is because when you wrap your object around with define Nuxt component, it basically provides you better auto-completion. It provides you better typing. And then going forward, it's just not this generic object that's floating around like your code like IntelliSense and that kind of stuff will be much better at predicting things.

[00:01:16]
So just that little bit is very helpful, so that's one thing I would recommend if you're using options API. Next, let's go ahead and actually build this out, right? So for the data, I'm gonna use the arrow syntax function here. And so for those who might not have seen this before, this is the equivalent of writing this.

[00:01:37]
But as you see, it's one line shorter because of the arrow function, and so it kind of condenses it. So for that reason, I tend to prefer the arrow function in this regard. And then, I'll just basically say TodoList, it'll be an empty array. And so next what we're gonna do is we're gonna actually find a way to fetch the actual data, right?

[00:01:55]
And so if you haven't used this before, there's a great tool called JSON Placeholder. And it's basically a free rest API that just, it's kind of it's fake in the regards that like, you can't really update the database, and so it'll mock a bunch of responses. But at the bare minimum it gives you the ability to fetch a bunch of data just as you would a real network request and then actually play around with that data.

[00:02:16]
So what we're gonna do is we're going to grab this URL right here. So this is the Todos API. And then so for this method, I'm going to call it fetch TodoLlist. And then it'll be basically, we will use the browser fetch keyword to fetch from this URL.

[00:02:35]
And then once we get that, we'll get a response from our API. And then, we'll make sure we JSONnify that response and then after that we'll take that JSON, and we will assign it to a to-do list, so actually let me use rocket here. This.todoLists =JSON. Okay, so to just cover kind of what we just did here, we wrote a function such to do lists.

[00:03:02]
We're using the native browser API for fetch in order to perform an Ajax request. And then, the key thing here that might be a little bit different if you're new to options API is that this keyword is used a lot in options API because it can refer. It basically knows what you're referring to, and is really good at guessing.

[00:03:16]
So in this case, it knows that this is referring to the data property TodoLists, because in other frameworks, you might have to be like this.data.TodoLists. With the options API, one of the reason I think people took to it so well, I thought that this was very intelligent and predicting it.

[00:03:31]
So to show that this actually works all we're gonna do is, I'm going to add a pre block here, and then I'm gonna basically render out TodoLists. And so this is a neat little trick with the pre because, actually I'll show you the difference, I think when before and after will make a big difference.

[00:03:45]
So let me also add a button here, and this button is going to actually set to the TodoList. So we're actually going to call the method that we wrote up here. So we'll call it fetch data, and we'll just save it. Okay, let's see how this works. So when I click it, you'll see my gosh, look at this.

[00:04:00]
This is just it's a lot to read. So what most of us do? Most of us will probably then try to console log it. So we got some sort of indenting formatting. But if you switch it from the p tag to the pre tag, which basically stands for pre-formatted, and that's a native HTML thing, not a new thing.

[00:04:18]
You'll see way prettier. I can parse this. I don't know. I don't need to console log, this works. I can look at this and go, I got a rough idea of what I got here, and this is good. We have a user, you have a user ID, we have an ID, you have a title we have whether it's completed or not.

[00:04:31]
All right, easy enough. What we can do is let's just go ahead and loop through that, right? So we'll just let's do a ul, li v4 for every to-do in TodoLists. And you might notice that a lot of times when I have arrays, I don't do the thing where most people would do this.

[00:04:47]
They do Todo and TodoList and that's because in programming we have off-by-one errors a lot and one letter as a plural is an easy off by one error to have. And so for me, I think it's just easier just to be explicit just to say TodoList, and it makes it very clear visually.

[00:05:02]
So we know that the key here is gonna utilize the ID that we saw in the to-do item, but we also know that it's a simple ID because we just saw it's a bunch of numbers. So in this kind of situation, I like to just go ahead and use string interpolation to just basically be like, maybe like todo Id and then just be like todo Id.

[00:05:20]
And that way in the future when we have other things, you're less likely to just get that conflict. And then from there, let's just do let's do a simple input check box. And then whether it is checked will V bind it, which basically means we're going to make the property dynamic, and we're done, bind it to whether the fact that the todo item is completed or not.

[00:05:41]
And then finally, we'll just do that todo that title, just like that. And so now if we go back here, and then let me refresh. To fetch the data, wait, go back, then I save. I know why. Nothing's wrong. It's just that this list is very, very long because they still have the pre block.

[00:06:02]
So rather than make you all watch me scroll, I think we got a sense of what that is. Now I can delete that. Much better. All right, so we can see now, great. We have a list of items, checkboxes, again, we're not implementing todo MVC, this is just a TodoList viewer.

[00:06:16]
That's all we just want to see it. And so okay, the other thing that we might wanna do too, when you're building a site is that well, you might wanna add an image. And so let's go ahead and grab an image, shall we? So one of the resources I like to use for images when sort of building site projects and stuff is Unsplash because they're royalty free, but then they just encourage you to basically just attribute the photographer.

[00:06:37]
So if I just do like to do for example alright let's see I think yeah this one looks good I like this one, so I'm gonna go ahead and download this one. And so you can see here one thing that lets you do is you can give credit to the photographer, so we're gonna do that, I'm gonna copy that.

[00:06:53]
And then so what we're gonna do here, let me open this inside of my desktop, there it is. And then let me open up the project here that I have. So what I'm gonna do here is I'm gonna use the Reveal in Finder shortcut and that way it'll be make it easier to drag and drop this thing.

[00:07:08]
And so inside of our directory, so in this case you want to host an image basically is what you want to do. And so, I know most people in the past would be like, this is an asset, so I'll throw it in an assets' folder. But at least for now, try to think of it.

[00:07:20]
It's really just a static asset for now. We don't need the build tool to run through anything at the moment. So given that, we'll take the simpler route and just have a public directory. So this is the public, basically, it'll be served as is directly to the URL which will show you it shortly.

[00:07:34]
And so for those coming from Nuxt 2, this is the equivalent of the static folder, that's what they used to call it. But I think public really is the standard for across the framework, so I'm glad that they made that switch. So I'm just gonna call this on todo.jpg and just to keep the naming simple, and drop that in, okay?

[00:07:50]
So now that we have it, we see that inside of public, we have our image right here. So let's go and drop this at the time. It's sort of like a hero, shall we? And so because it's in a public directory, really all we have to do is just go / todo.jpg.

[00:08:05]
And in fact, actually, let me just show you how easy this part is. So because here, let me shrink this. Once it's actually served in the public directory, you can actually go directly to the path here, todo.jpg, and you see it'll load your asset just as you would expect.

[00:08:21]
If you did this with an assets' folder, though, then there's like compilation it gets a little bit tricky. Sometimes, it hashes things, you can predict where it is. And so for things that you know that just gonna be fixed, like maybe like collet Fave icons are a great example.

[00:08:34]
Like you're not gonna be dynamically changing that you can upload it once and then people can refer to it. Public is a great way to just get that up and running and because it's as easy as just basically referencing it as a URL, this means that we can very easily then refer to it inside of our component.

[00:08:51]
So just source, what is the source? /todo.jpg, and then we're gonna give credit to the author right here. So let me actually wrap this in a p tag, and then I'll just give an alt have to do photo by Glenn Karstens Peters. All right, so just like that, we'll see here that look.

[00:09:17]
It's huge. I know why It's because I downloaded, I think I downloaded like the giant one like 4,000 pixels. Yeah, I see 4,000 pixels. Yeah, let's make that an easy 600, shall we? We don't need to be that high resolution. So, now when we refresh, much better. All right, so we got this little header image, we got that.

[00:09:37]
Then we have the ability to fetch data we see it on pretty simple component, this is great.