What Is Nuxt 3 and Why Use It?
In this course, we're going to be talking about Nuxt 3, which is the latest version of the Nuxt framework that has been released to the Vue community. So, let's start out by answering the basic question, what is Nuxt?
Nuxt is a framework built on top of Vue.js that helps us to overcome some of the inherent problems with single-page applications, otherwise known as SPAs. So, why do we need Nuxt?
The primary issue with an SPA is with search engine optimization, otherwise known as SEO. This is a very big topic in itself, but the gist is that the webpage contains various pieces of information that can be read by the search engine bots when they index the page. The more information that can be indexed, the higher chance the page has of being found by the search engines.
Nuxt addresses this by either A, generating the content on the server side and sending fully rendered HTML to the templates, or B, generating static HTML pages, which is far and away the quickest way to provide content to a browser.
Server-Side Rendering (SSR) vs. Static Site Generation (SSG)
Let's talk about these two approaches real quick.
There are two popular approaches to start a modern web project. First, there is server-side rendering, or SSR for short. When a client makes a request to a server, SSR will render the page in real time on the server. Because the page is rendered in real time, it will always be up to date.
Now, in contrast, static site generation, or SSG for short, renders all of the pages of your website at build time, which is the time before your website gets deployed. Since our pages have already been rendered beforehand, when the client is making a request, it just needs to send back the right page. Different from SSR, there's no rendering taking place on the server in real time. It all got taken care of at build time, so it's faster. In addition, because there are no API or database connections, and there are no logins and user accounts, there are no security concerns.
We will demonstrate how to deploy your site in both ways at the end of the course.
Key Features of Nuxt: Sensible Defaults, Routing, and Layouts
So, what other features does Nuxt provide? One of the primary benefits of Nuxt is that it comes pre-configured with sensible defaults. With a regular Vue app, you would have to do a lot more manual configuration. For instance, Nuxt already includes Vue Router and Vue Meta, among other things.
One primary feature of Nuxt is how routes are generated. In a Vue SPA, the user is responsible for creating the various routes for the app and associated components in a large config file. Nuxt uses the folder structure under the pages directory to automatically configure Vue router for you and generate your URLs. For instance, if you create a pages/about.vue, you can access the content of about.vue at mysite.com/about.
There are a couple of other options that we will discuss later, but the beauty of this approach is that all you have to do is create your directories and components, and Nuxt handles the route configuration for you.
Another common need for larger sites is custom layouts. For instance, you might want to have a layout for your front page, another layout for article pages, another layout for product pages, and another layout for FAQ pages. With Nuxt, you can easily create custom layouts and then apply them to your components as desired.
Course Outline and Prerequisites
So, here's what we will cover in this course. First, we will work on installing Nuxt. Once we've done that, we'll edit our component content. We'll create a custom layout. We'll use the directory structure to define our URLs. We'll pass dynamic values into the component from the URL. And then we will get into consuming data from an external API or data source. As part of that, we'll create a server API endpoint within Nuxt, and then we will use the built-in useFetch function to get the data. And finally, using the Composition API, a very important part of Vue 3, we will get the data from the API endpoint, provided to the template, and display the data for the users to see.
So, to complete this course, we will need to have the following items in place. First, we will need a computer with the latest LTS version of Node.js installed. Second, in order to edit the code, you will need a code editor. There are many options out there, but we will be using Visual Studio Code. And finally, you'll need some basic familiarity with Vue.js.
In the next lesson, we will install Nuxt and discuss some of the available directories. See you there.
Installing a New Nuxt 3 Project
Now that we know what Nuxt is, let's actually start using it. To begin, we need to install it. We will be following the installation instructions in the Nuxt 3 Quick Start Guide at v3.nuxtjs.org.
To start, open the terminal app of your choice, whether it's a built-in terminal or another terminal application. Type npx nuxi init nuxt-3-app. This will install the app in the nuxt-3-app directory under your current directory.
In the terminal, change into the nuxt-3-app directory. Now, you can open VS Code in one of two ways. If you have the code command line tool installed, which is part of VS Code, you can type code space nuxt-3-app. This will open up VS Code in your folder. If not, you can just go to the file menu, choose open, and then open the directory where your project has been installed.
In the VS Code terminal, type npm install. This will install all of the dependencies required by the project in the node_modules folder. Start your dev server by typing npm run dev -- -o. One thing to notice is how quickly the site builds. By default, Nuxt 3 uses Vite, which is a new build tool that replaces Webpack. Webpack was used in previous versions of Nuxt.
Exploring the Project Structure and Directories
The default Nuxt screen is displayed in your default browser. In app.vue, this is the default Nuxt welcome component. Let's comment that out and replace it with our own text to show that this is indeed the main page. Once you save your file, if you look at your browser, you'll see that the default text has now been replaced by 'welcome to my Nuxt 3 app'.
As shown in the docs, there are a number of available directories at the top level of the directory structure. However, most of them are optional and you only need to create them if you need them.
The node_modules folder is always there and contains all of the dependencies required by Nuxt and any other libraries you have downloaded via npm or yarn.
In future lessons, we'll create folders for layouts and pages, which give us built-in features. One of the powerful features of Nuxt is custom layouts. Using the layouts folder, we can create custom layouts for various parts of the site and then assign a component to use the layout with a layout keyword. For instance, you could have a layout for your main page, a layout for a blog post, and a layout for an about page.
The pages directory is where we create our URL structure for our app. Nuxt reads all the .vue files inside this directory and automatically creates the router configuration for us. Using directories and file names, we create the URLs used to navigate the app. This makes it much easier to structure your app than having to create manual configuration using JSON as you would in a normal Vue app. We will be creating our files in the pages directory for the remainder of this course.
In our next lesson, we will start building out our app and we will begin by creating our URL structure using directories and components under the pages directory.
