Nuxt Setup

[00:00:00]
>> So in order to create a new project, we'll say yarn create next-app my-project and I also linked up the guides for the installation. We're not gonna go through everything for time purposes, but I will walk you through the setup of what the next project looks like. So if we replace what their boilerplate of index.vue is, and just say here's a template with, a next-link to for a different page to the product page.

[00:00:30]
So replace index.vue, so we've got index.vue, and then a product.vue. All of a sudden we have this, we have an application that has two pages, product and index. And I'll show you this when we go back into, let me go clear this out, we'll go back to the terminal.

[00:00:51]
I'm gonna go up a level, cd intro-to-view, cd setup2. And then if we look at a kind of Nuxt-ish setup of the last pen that we did, so we had that pen and we had that application, but we didn't build out many pieces of this. And I mentioned routing about as something that Nuxt does really well.

[00:01:20]
When we're working with Vue router or when we're working with Vue CLI, as I mentioned, you add in Vue router as a library in dependency, and then you declare every route. And then in Nuxt, you don't have to do that. So I'm gonna show this with a menu bar.

[00:01:37]
And I'm gonna show a couple of other things that is really cool and unique to Nuxt. So right now, I'm in this kind of local hosts 3,000. If I go to the cart page, you can see that, it's actually going to a route named cart, and then I can go back into the homepage, and then we have this component here.

[00:01:56]
Now if you go to Nuxt, and we look at what that looks like, based off of the same thing that we just did, we have an index.vue page that was like our app.vue, right? We've got our index.vue, it's kind of holding that first bit here with the unit and the row, and we've got this component that we're bringing in from a components directory.

[00:02:20]
So this is very much the same, you don't have to get used to a whole new way of working because you're working with Nuxt, you have components in your component directory. So we have a component here but the difference is, I also have a pages directory where I have .vuecomponents.

[00:02:35]
But these .vuecomponents will automatically turn into pages of my app, which is really nice. So that cart.vue that we just saw has this template with like your cart, thank you for shopping with us and all of this, which is really nice. In assets, we put things like global style sheet.

[00:02:56]
So we could add a global style sheet and what we would do is we'd go into this thing called Nuxt config.js, our Nuxt config file is like the brains of the application in a sense. It will tell all of the things that we needed to do, right? I mentioned that we have different rendering modes, whether or not we wanna target static meaning like jam stack builds or if we wanna do more like server side rendered or if we want SPAs.

[00:03:26]
And they do a really good job of kind of commenting and giving you more information here. And you notice in Vue CLI where we had in the public folder, in index.html file where we're adding fonts and things. This is where we're adding fonts inside of our Nuxt config because it's server side rendered.

[00:03:45]
So all of these pages are dynamically going to be created. And so here we've got our links and our head tag and our meta tags, but they're expressed in this kind of JSON format instead. If we wanted a global CSS, we could make like main.css here and then I would plop it into this array in the CSS here.

[00:04:07]
I could add plugins, so if I wanted to use external libraries that I might bring in globally for the entire app, I can do so in plugins. And there's all of these other options that are available to us. So we have static files like a favicon would go in here, any static images that you need go in the static folder, and you can actually access them as though they're at the base of the directory.

[00:04:32]
We have a store, which is a place to put our Vuex file, we'll get to Vuex later today. You don't have to install Vuex, Nuxt will automatically look for a file in the store directory and say, you've got Vuex, I will make sure that Vuex is wired up for you.

[00:04:50]
So it does some of this sniffing to make sure that it wires things up like routing, like it wires up your store and that's quite nice. But I think that one of the nicest capabilities is that ability to make dynamic pages and have all of these pages render directly for you.

[00:05:08]
So one more thing is this layouts directory, this is super cool. So for every single page that we create, it's going to route through a default.vue and it's gonna route through this component called Nuxt. Now, if I wanted something to persist on every single page of my entire build, I could bring in my navigation and say app menu.

[00:05:34]
And bring it in from my components directory. And now it will be on every single page, it will persist on every single page. So that means that you don't have to keep declaring in your pages, go get the nav, go get the footer, or anything that's kind of the same among all of these things.

[00:05:50]
So if we go back here, now, this is actually persisting between those pages. So I didn't have to put it back on every single page. If I wanted to make a footer, I could do that as well. I can make more layouts as well as long as it has that next route.

[00:06:08]
I could go into a page in say, in the data I could say layout, in an object, I didn't spell that right, you should spell it right. And then we could say which layout we wanted. So if I wanted a different layout for my blog say, I wanted to make sure that I always have the sidebar component and I always have this, you can declare that in layouts and have a bunch of different types of blog pages.

[00:06:35]
But they're all kind of a little bit similar because they have the same structure or they have the same aside sidebar or something like that, so that's quite interesting and really unique.