Made withNuxtClip

Nuxt 3 Crash Course #1 - What is Nuxt?

N

Net Ninja

Creator on the Nuxt channel

Watch on YouTube ↗

250K viewsOct 31, 20228:18 runtime

Learn what Nuxt 3 is and why it's a powerful framework for building modern web applications with Vue.js. This introduction explains the core concept of server-side rendering (SSR) and how it addresses the SEO and performance drawbacks of traditional client-side rendered Single…

Chapters

#nuxt#clip#frameworks

What is Nuxt?

Nuxt is a powerful open-source framework built on top of Vue.js. It enhances Vue by providing conventions and features that simplify the development of modern web applications, particularly those requiring server-side rendering.

Rendering Strategies Explained

Client-Side Rendering (CSR)

A typical Vue Single Page Application (SPA) uses CSR:

A user requests a page from the server.
The server responds with a nearly empty HTML file and a large JavaScript bundle.
The browser executes the JavaScript, which then renders the page content.

Important
Drawbacks of CSR:

Poor SEO: Search engine crawlers see an empty page, as content is rendered by JavaScript.

Slower Initial Load: The user sees a blank page until the JavaScript bundle is downloaded and executed.

Server-Side Rendering (SSR) with Nuxt

Nuxt utilizes SSR to overcome the limitations of CSR:

A user requests a page.
The Nuxt server renders the full HTML for that page before sending it to the user.
The browser receives a fully-rendered, static page for a fast initial display.
A process called hydration then runs in the background, attaching Vue's interactivity to the static content.

This combined approach is called Universal Rendering, offering the best of both worlds: great SEO and fast initial loads from SSR, plus the fluid navigation of an SPA for subsequent interactions.

Key Nuxt 3 Features

Beyond rendering, Nuxt provides significant developer experience improvements:

File-Based Routing: Nuxt automatically generates your application's routes based on the file and folder structure within the pages/ directory. No manual router configuration is needed.
Auto-Imports: Nuxt automatically imports components, composables (like ref and computed), and many built-in utilities, reducing boilerplate code.
Other Features: Nuxt also includes built-in solutions for layouts, error handling, creating server APIs, and Static Site Generation (SSG).

Note
Nuxt 3 Improvements: The latest version is lighter, faster, fully supports the Vue 3 Composition API, and introduces powerful new Nuxt 3 composables.

Course Project & Prerequisites

Project: Nuxt Dojo

This course will guide you through building a simple e-commerce site that lists products from an API, with individual product detail pages. You will learn data fetching, routing, and styling with Tailwind CSS.

Prerequisites

Tip
Before you begin, ensure you have:

Node.js installed (LTS version is recommended).

The Volar extension for VS Code.

A basic understanding of Vue 3.

Introduction to Nuxt 3

Hey there gang and welcome to the very first tutorial in this Nuxt 3 crash course. Okay then, so first things first, what is Nuxt? Well, Nuxt is a framework built on top of another framework, Vue.js, and it helps us to build modern web applications with Vue.js.

Now, you might be thinking, well, why do I need to use Nuxt? Why can't I just stick with Vue.js instead on its own? Well, the way we build Nuxt apps with Vue is slightly different and some might say easier, and it comes with several advantages out of the box that Vue doesn't come with.

Understanding Client-Side Rendering (CSR)

The first one of those that I want to talk about is server-side rendering, or SSR for short. So typically, when we use Vue on its own to make an application, we make what's known as a single page application, or an SPA for short. And the way that they work is like this: when we visit an address in the browser, we send a request to the server for the website we want to see, right? The server then sends back a single HTML page that is pretty much completely empty, and it also sends back a JavaScript bundle to the browser as well. And this JavaScript kick-starts the Vue application and renders the content on the page. So this rendering takes place in the browser, and it's called client-side rendering.

Thereafter, any links to other routes within the Vue application that we click don't trigger a new request of the server. And instead, Vue just swaps out the content on the page to show whatever new route component is needed. So that's the general process of a normal Vue single page application, and there are a couple of drawbacks to this approach. First of all, it's detrimental when it comes to search engine optimization, because search engine crawlers request pages from the server and crawl them. And because the pages the server sends out are completely empty, it means that the crawlers have very little content to actually crawl. Secondly, the user experience can be hampered because all the initial page rendering takes place in the browser, and it can be quite slow sometimes.

The Power of Server-Side Rendering (SSR) with Nuxt

So in contrast, Nuxt makes use of server-side rendering to combat both of these drawbacks. So in a typical Nuxt application, this is what happens. Again, we make a request from a browser to the server for a web page, but this time Nuxt renders that initial request, that page on the server using Vue.js. And when it sends back an HTML page to the browser, it's already fully rendered and it's full of static content right away. It also sends back a JavaScript bundle which initiates a process called hydration to implement all of the Vue functionality and interactivity into the page content. And then from then on, it behaves much like a typical single page application. Any link clicks to other pages on the site are typically handled in the browser and the component content is switched in and out of the page by Vue.

So working this way, we're using a combination of server-side rendering for the initial request and then client-side rendering for when we're moving around the different pages on the site. And using a combination of both of these is called Universal Rendering, and it offers a couple of benefits that we don't get when we're just using a standalone Vue app to make an SPA. The first one is that this time it's better for search engine optimization. When crawlers request a page from the server, they're actually getting a fully rendered page of content to crawl. Now secondly, the loading times in the browser are going to be much faster, giving us a better user experience. And to top it off, because Nuxt also sends back a JavaScript bundle for the Vue application to hydrate the document, we still get all of those SPA benefits like client-side rendering as the user navigates around the site after the initial page request.

File-Based Routing & Auto-Imports

So hopefully you can see the benefits of using Nuxt to create these Vue applications. But this different approach to rendering isn't the only big difference between using Nuxt and Vue on its own. Another big difference is the way that we create and structure our applications. For example, in standalone Vue apps, we generate routes and pages by installing the Vue Router package and making a routes file to register routes and assign them to page components. In Nuxt though, the router comes fully baked into it, and all we have to do is make a pages folder and create page components in that folder. Nuxt then automatically creates routes for those page components whereby the route path matches the component file name.

Nuxt also comes with a nice auto-import feature as well. So we can use a lot of building features like link components or fetch composables and other Vue functions like ref and computed without having to manually import anything. And that's also true of custom components that we create as well; Vue can auto-import these whenever we use them in other files.

More Nuxt Features & Version 3 Improvements

There's also other features that come with Nuxt, such as the ability to create layout files, handle errors, create a custom API, and enable static site generation, whereby all of your website pages can be pre-rendered at build time. And we'll try and look at most of those features throughout this course. But to put it bluntly, Nuxt is basically like Vue but with bigger muscles and more firepower.

And on top of all of that, the most recent version of Nuxt, version 3, which is what this course is all about, has a few improvements over the last version. And you can see all of these right here. So it's lighter and faster than the previous version. We can use Vue 3's composition API with it and also make use of Nuxt 3's composables and all of these other things here as well, which you can read about on the Nuxt 3 documentation.

Course Project Overview

So in this course, we're going to be exploring all of the building blocks of Nuxt from the ground up to create a simple web application called Nuxt Dojo. And this application is going to list a bunch of products which are all coming from a third-party API. And then when you click on one of those products, it's going to show you a product details page for that product. So by building this site, you're going to learn the foundations of Nuxt 3, how and where to fetch data, how to make multiple pages, how to implement Tailwind CSS, and also how to make server routes as well.

Prerequisites for the Course

Now, before you start the course, there are a few prerequisites you need to be aware of. First of all, you'll need Node.js installed on your computer. This LTS version will work right here, so go ahead and click on that to download it and install it on your computer. When it's installed, you should be able to open up any terminal and then type node -v, then press Enter, and then you'll see whatever version you've installed.

You should also install the Volar extension for VS Code as well, which is this one right here. Make sure you install that. And I'm also going to be assuming you've got a basic grasp of Vue 3 already before you start this course, because Nuxt is built on top of Vue 3 and we'll be making a lot of Vue components over the course of this entire playlist. So make sure you've got that basic grasp of Vue 3 before you start this course. If you've not and you want to learn that first, I've got a course all about Vue 3, and I'll leave the link to that down below the video.

Course Resources & Outro

And finally, my friends, I've created course files for this entire series. They're all up here on GitHub at this repo: nuxt-3-tutorials. So I'll leave this link down below. Every single lesson has its own branch, so you want to select the lesson you want from the branch drop-down. For example, to see lesson seven code, select lesson-07 and then you can see all the code here, but also download a zip folder of this lesson by going to Code and then downloading a zip.

By the way, if you want to watch this entire course now without YouTube adverts, you can do it. It's all up on the net ninja website, netninja.dev. You can buy the course for two dollars to get instant access to all of it, or you can sign up to Net Ninja Pro and get instant access to all of my courses without adverts, as well as premium courses not found on YouTube, including my Udemy ones. That's nine dollars a month, and you can get your first month half price when you use this promo code right here. So I'm going to leave this link down below in the video description for you to sign up. And I really hope you enjoy this series. And please do not forget to share, subscribe, and like the videos. That really helps a lot. And I'm going to see you in the very next lesson.