Hello, and welcome to the course Nuxt Three Fundamentals. If you're ready to take the power and productivity of Vue and then crank it up to a whole new level, then you've come to the right place. Now, before we get started, let me set a few expectations. I do expect that if you're watching this video, you are already familiar with the basics of Vue.
Maybe you've also had experience with Nuxt version two, and if so, then that's great. In this course, you'll get insight into how Nuxt's APIs have changed, what new features have been added, and overall, how you can move forward with the latest version. If you aren't familiar with Nuxt too, though, don't worry about it. We'll be taking a fresh look at Nuxt version three from the ground level.
So let's get started. First, let's answer the question, what is Nuxt? Well, Nuxt is what's known as a meta framework for Vue. That is, much of its functionality is built on top of Vue.
But just like Vue adds features on top of JavaScript and the DOM, Nuxt adds another layer of features on top of Vue. So what are these added features? To me, they can really be broken down into two main categories. The first is a variety of rendering modes for your app.
And the second is a whole host of developer experience improvements. Let's dive a little further into both of those things to get a better understanding. First, what do I mean by rendering modes? js application built without Nuxt is what's known as a single page application, or SPA for short.
SPAs are rendered completely on the client side by JavaScript. With this model, the server will send an almost empty HTML file to the browser. And in this HTML file, there'll be a link to a JavaScript file. Once that JavaScript file is fetched and then parsed by the browser, then the page will be rendered.
This approach is supported by nonce and is great for some use cases. Usually admin dashboards for internal tools at different companies or dashboards within subscription type web apps, otherwise known as SaaS apps. Basically, SPAs are good for any app that doesn't require content to be crawled and indexed by search engines and or where there is no need for cards on social platforms. So what if I want to develop, say, a blog with you, and I am concerned with SEO and social sharing?
Well, that's where server-side rendering, sometimes abbreviated SSR, enters the picture. Unlike with an SPA, the HTML sent back from the server includes all the HTML markup for the page. If you've ever worked with a framework like Laravel with PHP or Ruby on Rails for Ruby or any other server-side language and framework, then you're already familiar with server-side rendering. Server-side rendering is great for SEO, sharing pages on social media, and even provides a bit of a performance boost as users' browsers don't have to run any JavaScript before the page is visible.
What makes Nuxt so awesome is that it brings the same server side rendering, but for your Vue components. Well, that's not entirely true. You can do SSR for Vue components without Nuxt, but honestly, you'd just be taking the long way out. So Nuxt is able to deliver your components rendered as HTML directly from the server.
However, after that, Nuxt is able to take it even one step further with an approach called universal rendering. Here's how it works. Once the page has been server rendered and downloaded as plain HTML, Nuxt completes a step called hydration. Hydration is where the JavaScript is downloaded in the background, and then existing HTML is transformed into an interactive client-side application.
It's basically a mashup of both SSR and SPA. It's a great solution to get the fancy page transitions and highly interactive pages like with SPAs, but still maintain the SEO and social sharing benefits of an SSR app. Finally, though not complete at the time of this recording, Nuxt Three is also promising to provide hybrid rendering. That means you'll be able to choose your preferred rendering mode on a route-by-route basis.
An example of a use case for this would be a blogging application where the published posts are universally rendered, but then the admin dashboard for managing the post is all rendered client side. As you can see, there are a lot of different options for rendering in Nuxt. And we've actually only covered some of them. There are other approaches called static site generation and even one called incremental static site generation.
But we won't dive into those just yet. Suffice it to say, when you're building with Nuxt, there are a lot of different options. The other benefits provided by Nuxt can be categorized as developer conveniences, and there are so many of them. One of my favorite conveniences is the auto imported components and composables.
This makes for cleaner component files and less typing. Another convenience includes file-based routing that automatically creates routes based on file names. Plus, the out-of-the-box TypeScript support is absolutely amazing. Not only is it great for those developing with TypeScript, but even those who prefer JavaScript can still have their IDEs autocompletion benefit from the types bundled in the framework and even types generated on the fly for autocompletion of API routes, custom composables, and more.
Lastly, the strong conventions provided by Nuxt make jumping from project to project or onboarding new developers to a project a process that requires a minimal amount of brainpower and refocusing. Furthermore, these conventions allow the community to provide a wide range of existing modules that easily allow plug-and-play functionality for your Nuxt projects. Throughout this course, you'll get firsthand experience with all of these different developer conveniences, and I'm sure you'll come to love them as much as I do. So what are we waiting for?
Let's start getting hands-on with Nuxt version three.