This course has been updated! We now recommend you take the Introduction to Vue 3 course.

Check out a free preview of the full Introduction to Vue.js course:
The "Introducing Nuxt.js" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

Sarah introduces Nuxt.js, which is a framework for creating Universal Vue.js Applications.

Get Unlimited Access Now

Transcript from the "Introducing Nuxt.js" Lesson

>> Sara Drasner: So okay, Nuxt and routing, why am I excited about Nuxt, why do I use so many trophy emojis when I talk about Nuxt? It has automatic code splitting, so there's a lot of stuff that you don't have to configure with Nuxt. It offers server-side rendering, which I think someone in the chat a little while ago was asking about SEO.

[00:00:20] If you're concerned with SEO, yeah, Google actually did get better at dynamically rendered content. But if you do server-side rendering, basically everything is going to be on the page. And that actually does help with SEO in some certain circumstances. So server-side rendering is also really fast, it's super fast.

[00:00:39] So if you run Lighthouse reports. I don't know if you guys have seen this Chrome extension. It runs performance metrics using a thing called Lighthouse. It's gonna check if your thing is a PWA, which is a specific kind of thing, but it also has just general performance metrics.

[00:00:55] View, view CLI and view in it PWA, there's even a template to create a PWA, doesn't even have as good of scores as Nuxt out of the gate. I ran test the other day and Nuxt was way higher, partially because of the server-side rendering. I think they even have a Hacker News PWA thing like a repo where they did a sample thing.

[00:01:18] And that got 100, 100, 100, 99 scores across the board. So really, really good performance metrics. It has a powerful routing system, and you can use asynchronous data. Great Lighthouse scores out of the gate. We can do static file serving if we want. We can use it for ES6 and ES7 transpolation.

[00:01:39] We're not having to give up things like Webpack or anything. We're gonna use Webpack right in Nuxt. Nuxt already comes with that. Nuxt also comes with things like Vuex, and we have hot reloading in development. Here's one part that is not exactly, I mean, it is accurate. So it's hot reloading in development, but because we're doing server-side rendering, it takes a little longer to load when you're working with it.

[00:02:06] So sometimes for work flow, I've been making components in Vue CLI and bringing them back over to Nuxt if it takes too long. That is a total personal preference thing, and I am sure that as it gets old, it's a newer thing, so as it gets older that hot reloading will happen faster and faster.

[00:02:24] But just to let you know that, that's one caveat that I would mention about Nuxt and working with it. We can use pre-processors like SASS, LESS, Stylus, etc. And the coolest part is that we can actually write Vue files to create our pages and our routing. And I'll show you what I mean by that.