Creating a Nuxt App

[00:00:00]
>> We're gonna build this food App Store. So if we gotta Nuxt Food App.netlify.app, we've got this food app and we can see these kind of like a few restaurants all that and Dim Sum. A Real pizza work, Toca bout Eating Tacos. And if we go to one of these, we can see that product details.

[00:00:21]
We're creating or dynamically creating a page from API data. And so I can pick a bunch of different options and some other Add Ons and I can add to my price here and I'm gonna add that to my cart. And then I'm gonna go to my cart. And you can see in the cart page I have my Quesadila and what type of Quesadila it is my Add Ons my amount and my total price.

[00:00:45]
So we're gonna work with an app and create all of these different pages and bring information in from an API to do so. So in order to install this, what we're gonna do is we're gonna say yarn create nuxt-app and we're gonna name the project. So here Inside my folder here I'm gonna say yarn create nuxt-app, and then I'm gonna give it a name of Nuxt Food App.

[00:01:17]
And as it's installing, it's going to install a bunch of dependencies. And then it's also gonna ask me a few questions just like the VCLI did. So I've got my project name is fine JavaScript or TypeScript yarn, and I can add a UI framework and I can add axios and I can add linting tools and testing tools, we're not gonna go through all of these.

[00:01:36]
Today we're gonna use the universal I'm gonna do static so that I can show you that static rendering mode. And then I'm just kind of going through all of the defaults here. We can see that there's so many different options available to you and it's going to automatically install these when it first loads up, you're gonna see a kind of standard thing for the directory setup.

[00:02:01]
You might notice that one difference between VCLI and Nuxt was it didn't ask ask us about the storage and ask us about view x. And part of the reason why it didn't ask us about view x, is it because it comes default with next and I'll show you these directories as soon as this is set up.

[00:02:17]
Okay, cool. We can say, cd nuxt food app and I can say, yarn dev, and I'm gonna open up a new tab two and open up the code. So here's what we're working with here. Here is our default Nuxt app. As I mentioned, we have a store directory right away.

[00:02:39]
There's nothing in this In this store directory, but they make sure that they have read me's and every single directory that tell you all about these things. So, like it says here, creating a file in this directory automatically activates the option in the framework. So you don't have to install view x or anything like that.

[00:02:57]
All you have to do is create an index in your store or whatever you wanna make in your store and it won't that you want that and need that and it has these kind of nice things like that. This .nuxt folder is a folder that nuxt uses to understand itself.

[00:03:17]
This is you can see like what hasn't been getting ignored, this is getting ignored. It's not going to be pushed up, but it will be something that nuxt uses to work note locally just like those node modules. If we look at our assets directory, that's where we're gonna have our global assets, right?

[00:03:36]
Just like the UCLA. So today we're gonna move our mean.STS, I showed you how to bring all of your files from your? Your main.CSS into your app for the last one if you just have a few styles, but in this case we have more styles. So I'm gonna create a global assets so I'm gonna show you both ways of working with it.

[00:04:01]
We have our components. And just like the view CLI, it gives us a default component. In this case, it's log.view. So we've got the like, template area, the style area here, and that's gonna give us our logo. If you wanna see what that looks like. We can go see, this is the logo that's rendered there.

[00:04:21]
That's that component. If we go back to our, VS code, we have a thing called the layouts and we have a default layout. I mentioned this in the last course that everything in Nuxt is gonna be routed through this Nuxt component. But this layouts default is really nice because what it allows us to do is it allows us to not have to bring in, an navigation or a footer on every page.

[00:04:53]
We can put it in this layouts default, and then it will persist on every page. And that's really nice because we can also create different types of layouts as we work middle ware is, you're gonna see in a second, we're gonna make pages by simply putting a view file in a pages directory.

[00:05:13]
But let's say, if you're making something with UCLA, you would add something like view router and you would explicitly talk about each one of the routes. Which you don't have to do here. But if you wanted to capture some sort of hooks between those routes, you no longer have access to that, view router file anymore.

[00:05:31]
So in middle ware, you have access to those routes, and that's where you can apply some logic. So middle ware is a great place to do things like auth. Middle ware is a great place to do things like tell the store about the route changing or something like that.

[00:05:45]
That would be done in middleware. And I mentioned this about the pages directory, we have an index page. And we have this kind of defaults container. You see this logo being brought in, just like we did with the view CLI and we are able to have this kind of defaults, but what's really nice about it Is that we have, a base index file and all of a sudden we have a page.

[00:06:12]
If I created another page, I would have a brand new page. And you also might notice that in every single directory they have README files just in case you get lost or confused. For the plugins directory, we're gonna use this to call things on the server on the client that we need to happen for the whole application.

[00:06:30]
So if you're used to working with vcli This is a little like mounting it in the main.js folder. So like bringing in the composition API globally would happen in this plugins folder. Static is what you might think it might be. It's kind of like the public folder from vcli.

[00:06:48]
Static is any kind of static files, and we went over store. And here is kinda the brains of the operation is our next config. I mentioned that we have this target static, that's the thing that's gonna tell it to be a jam stack app. It's going to minify concatenate and build all of the pages, including dynamic routes before we even push it up.

[00:07:12]
So that's really, really cool. Here also in that Nuxt config, we have a thing called the head. In the head, you see all the things that would normally go in the head of public, like in the public directory index dot HTML, you would have the meta title, you'd have the title, the meta tags.

[00:07:34]
Links to fonts, things like that. But here, instead of it being these those tags, we see that it's rendered in a way that's a little bit similar to JSON format. And the reason why that is, is because it builds all of those things. So you're basically telling it to build that rather than having it built already for you, then we have things like the CSS, we have to register things like the CSS, global CSS, plugins, build modules, and so forth.

[00:08:04]
So we mentioned this Nuxt.config. This is a really important file. This is the file that lets us know what everything is and does, we can, say that we want spa or universal rendering. We can do target static or server. We can say in the head we want metadata links fonts.

[00:08:23]
In the CSS, we can say we want some global CSS, which we'll do in a minute. We have plugins which we'll use today for adding scripts to our to, globally to our application. And if you want more information, that's where the configuration is. So I prepared this. We're doing a lot for this application.

[00:08:44]
So I prepared this to do list for our next app. And if you want it to go into the code pen, it actually is using a view single file component and to get really dorky what I did was I'm actually storing things in local storage. So I'm gonna use this and I'm gonna go through and check things as we go over them.

[00:09:07]
But you can follow along and use this as your own to do and it will retain the state have what you want. So like if I brought this over into another pen into another window, you can see it will persist that state just for you in local storage.

[00:09:21]
So that's kind of like a nerdy little to do list that we're doing. We're gonna set up our Nuxt config first. And then we're gonna go into some of the, files and create pages together.