This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Nuxt.js Application Walkthrough" Lesson
[00:00:00]
>> Sarah Drasner: I'm not going to go through and refactor something. We're gonna look at an existing next project in the interest of time because we're running low on daylight here and we still have a lot to cover. So what we would do though, is you all ready installed that's what you would need so you would say view and next starter, my project and then cd Yarn and npm run dev.
[00:00:24] So if we go back to GitHub here,
>> Sarah Drasner: In the intro-to-vue repo you will have this thing called, we just did set up one, I just live-coded that for you, but it also exists inside the repo so that if you need to reference it, it's still there. And we're gonna look over Setup two.
[00:00:48] So, I'm gonna go back over to my terminal and I'm gonna quit out of this now, and I'll just clear it. CD, back one. Gonna go into setup two and I'm gonna say NPM run dev.
>> Sarah Drasner: And you can see that it's doing a lot more stuff it's build it's actually building all of those things and we get a different local host server.
[00:01:21] Off we go over to here, we've got that same store and everything. But in this case, we've got, this is kind of like the home page and if I click this cart, I see my cart, and I go back to the home page, and back to my cart.
[00:01:35] So we've got some few basic things here, some things that we haven't seen before, we've got some routing, right? We're going from one page to another, this is real routing too, I'm not just replacing components. If you look at the that local host and I go here you'll see \cart.
[00:01:51] It's a different page. You'll also see that I have some links in here that take us back to the homepage or take us to a different location. So let's go and check that out.
>> Sarah Drasner: So in our next build setup, one thing that you'll notice right away, is we don't have an index.html file.
[00:02:13] That's interesting. What we have instead is a nuxt.config.js file. And that is because we're server side rendering we're going to actually allow NUXT to create our index.html file. It's gonna build in a different way. So we still have the normal stuff. We still have title and meta tags and links, but we have to write them slightly differently for this to work.
[00:02:37] There's also like a custom loader that we're gonna talk about more in the animation section. They have like a loader for you. I'm saying learning false because I don't want that loader to show up right now, cuz it's not part of what were doing. The other thing we have and this just comes with the Nuxt build we have this pages directory.
[00:02:57] And in the pages directory I have a thing called index and a thing called cart. So that's interesting. The index.vue file is just a vue file. It's got a template, it's got all of the normal stuff that we saw earlier and we were still importing the child component, we're gonna go into our component structure, we still have that child component that we're importing just like we did before.
[00:03:22] But the difference is we took that file and we put it in our index.vue, and so is gonna know anything in that page's directory needs to be built out as a page. So anything, any Vue file that you put in that directory will be a separate page and you'll be able to route to it, automatically.
[00:03:41] And the coolest part, to me, is that you're still using Vue everything is, once you learn that Vue syntax and how work with those templates and everything, it all just works the same way. You're not doing anything super special or crazy. We also have this component called Main Menu.
[00:03:58] In this Main Menu I have an inline SVG that I've wrapped in a link called nuxt-link. In nuxt-link. That is my header. That's this thing up here. So where am I using that? Let's go find out, in the layouts directory we have a thing called default dot vue, and that default dot vue is a layout that we're going to allow Nuxt to use for us.
[00:04:28] So in here, whatever is in the pages directory, whatever we have inside the pages directory is going to be inserted Into this next tag here. So this is a default layout for every single page. And so I can use this main menu as my header. I could also add a footer.
[00:04:48] And it's basically going to understand, okay, that is going to stay static on every single page. It's always gonna be there on every single page. And I'm not gonna do anything crazy here, I'm going to just render that. Anything in this next, will now be the cart of the index file.
[00:05:03] Does that make sense to people? Does that seem pretty clear?
>> Speaker 2: It feels a bit like JSX.
>> Sarah Drasner: Yeah, yeah, I mean a lot of these ideas are re-circulated and people borrow from other things that have worked really well in the past. Actually React router uses a lot of like components as routing and things like that.
[00:05:24] I think that's pretty great, because if you learn things like later on we're gonna deal with page transitions which are really cool, and because we're working with NUXT We can just write Vue transitions the way we write any other animation, and it's gonna work on these page transitions.
[00:05:43] So that's super awesome. And there's not too much more to it that we have to explore in order to get routing working for our application. One more thing, we looked at that nuxt-link, wait let's go back, I'm in the wrong thing. Let's close this out. We see this nuxt-link, nuxt-link is basically going to be that routing link, it's going from page to page.
[00:06:12] So that's a special bit of markup. So we'd say something like, nuxt-link to and then the directory and cart, you can see that I've said nuxt-link exact to, that's because nuxt will just grab anything in that directory and point to it. We have to say that it's exactly only going to be that index page.
[00:06:32] Because /cart would [LAUGH] fit into that category too, so we wanna make sure that we're not saying just anything in that directory is fine We wanna say exact into that one, and then we can setup links. We can even do the links in the pages, like you saw that in the card itself.
[00:06:51] We had a nuxt- link exact to. So if we go back to this, that just goes back to the home page. And so, you can use it inside the pages as well. It doesn't only have to be in those headers or anything.
>> Sarah Drasner: All right, so in the pages we could replace index.vue, and create this welcome page, and this next link to product, and create a product page, and next link to home.
[00:07:20] And right out of the gate we would have this routing setup from one to another. We did something a little bit more fancy here but like at the very core, at the very smallest bit this is all we need to get routing set up and it's pretty nice.
[00:07:32] So that's that loader that I was talking about. I said loader false, but if you wanted to use a better loader, you can customize the color and stuff and it would Zoom across every time you go from page to page. And it's pretty awesome, cuz we're still just using vue files.
[00:07:49] If we need to use special style sheets, we would do something like this in our head tag as well. So CSS and go to assets normalize, or what have you. Okay. That is what we just did. We can go even fancier and we are going to go even fancier because we could do something with all of these page transitions between all of these nuxt groups and we get all responsive and fun.
[00:08:17] We are going to do more about that in the next section. Here is the repo and this is the actual site. You can keep clicking on this. This is routing the application and making it go from, really what we are doing here we are doing just Vue files where we are using transition components.
[00:08:43] That you're gonna learn all about in the next section. And then you're gonna be able to make page transitions just like this one.