Nuxt

[00:00:00]
>> All right, let's talk a little bit about Nuxt. I typically use Nuxt for everything these days, I don't really use Vue CLI that often. It's not because I hate Vue CLI, Vue CLI is awesome, but Nuxt is super, super, [LAUGH] awesome. The next team is really wonderful at keeping up to date with everything that's in view, in fact, we share the view core team shares a discord with the next team.

[00:00:25]
So we talk all the time, we also do things like karaoke, [LAUGH] and stuff like that. So, here we've got Nuxt and some routing. Again nExt is to rEact as nUxt is to vUe, I actually had an applicant for a job who did this and I'm borrowing this from him because I thought it was such a good example of what, [LAUGH] that was.

[00:00:51]
So nExt.js is kind of similar, it's a meta framework of rEact. So nExt uses rEact and builds off of it, nUxt uses vUe. And when it was first born, this project was really conceived of as like a comparable thing to Nuxt. At this point though, just like vUe has borrowed from things and then deviated course from there.

[00:01:13]
nExt has kind of deviated, has its own community now, it has its own opinions about things, it has its own features. So let's talk about some of those things. Why would we use Nuxt? You get Automatic Code Splitting, you get Server-Side and I will describe what Code Splitting is in just a second.

[00:01:30]
You get Server-Side Rendering so you can render something a bunch of different ways. You can render it as an SPA, you can render it in a Jamstack way, you can render it for a node server. And it allows you to change all of those things with just one line of code, which is super awesome.

[00:01:47]
It has a really powerful Routing System and it allows for Asynchronous Routing, but you don't have to set any of that up. So in other words when you're working with Vue CLI, you would create a project with Vue CLI add and view router and then you would declare all of your routes.

[00:02:02]
With Nuxt it sets all of that stuff up for you so you don't have to do any of that which is really, really awesome. If you need to get dive behind the abstraction, it offers a thing called middleware so that you can access these pieces of routing and just, okay, when this happens and this route changes do this.

[00:02:26]
[LAUGH] It offers lighthouse scores out of the gate. If you use Vue CLI and even like the PWA of Vue CLI right out of the box it doesn't even score as high as Nuxt does. Because Nuxt does all of this stuff to kind of make sure that it has the smallest build possible.

[00:02:45]
It has Automatic dynamic routes this is actually new you could create dynamic routes, but they weren't automatic, you have to declare in a function what you want the shape of what you'd want. Now, in this next version of Nuxt, [LAUGH] newer version of Nuxt, what we have is the ability to dynamically create all of these routes.

[00:03:08]
And again, in the next course, I will go through how those are made. So let's say you had a manifest file and for every page you wanted to make a product page out of all of that data. If you are creating an underscored page, it will automatically create all of those pages for you, so cool.

[00:03:27]
It offers Transpilation, Hot reloading in Development, pre-processing like SASS, LESS, and Stylus. You can write Vue Files, just as I said, but you can write Vue Files as your pages and they will create pages and I'll show you that. I mentioned code splitting, what is code splitting actually?

[00:03:46]
[LAUGH] Code splitting, tree shaking, so when we're talking about tree shaking, let's say we're loading lodash, and lodash has all of these different methods. It's just like got so much stuff for us to play with. So we're loading lodash and we're only really using _.tail and _.union, we can tree shake.

[00:04:05]
[LAUGH] And what we're left with is just the things that we are using, just the things that we're accessing. Which makes, it means that as we use Nuxt for bigger and bigger projects, we're loading more and more libraries. That's when the performance really pays off because it's saying, I'll just use the smallest thing possible and I'll get rid of anything else.