The Vuejs Amsterdam online conference was held at the end of February in 2021. It brought together Vue.js enthusiasts and community members from around the world. Many interesting topics were presented and covered. The focus, of course, was on Vue.js 3. In addition, the creators of Nuxt.js had the opportunity to showcase it from the current standpoint in development, to their intentions for it down the track. They even demonstrated a pre-alpha version of Nuxt.js 3, that’s based on Vue.js 3.
This article will start by briefly covering general Nuxt.js concepts, creating a new Nuxt.js app using the create-nuxt-app CLI, and finally, going through the different files and folders that Nuxt.js auto-generates for us.
Let’s start!
Nuxt.js Concepts
Nuxt.js is a web development framework that builds on top of the Vue.js framework. It allows you to use your Vue.js skills to build a more confident, structured, SEO friendly website purely in Vue.js.
Remember when you had to mess with the Vue.js SSR module and the Vue Meta module to build a SEO friendly website? On top of that, you had to install and use Vuex and Vue Router too!
Well, Nuxt.js takes care of that! No more chaotic setup and scaffolding to start a new Vue.js app. With the help of the create-nuxt-app CLI, you can scaffold a Nuxt.js app in no time.
What’s remarkable about Nuxt.js is its capacity to enforce convention over configuration. This means, you write less configuration files by sticking to a specific directory structure that makes Nuxt.js happy and saves you a ton of time!
Apps supported by Nuxt.js
Nuxt.js supports building a variety of web apps, including the following:
Server-Side Rendering (SSR) SSR apps are also known as Universal Apps. The app gets rendered on the server-side before it is sent to the client-side, and is displayed in the browser. This is the best option when working on an SEO friendly website written in Vue.js.
You can read the full documentation for the SSR apps here: SSR Apps
Single Page Apps (SPA) This is what you’ve been doing so far with Vue.js. The app is compiled into a few JS and CSS files. When the user requests the app, the files are downloaded to the client-side, and the Vue.js engine takes over rendering and displaying the app.
Static Site Generation (SSG) Nuxt.js can pre-render your app at build time. This means the entire app will be converted to simple static HTML files that can be hosted and served over a Content Delivery Network (CDN). The SSG option makes an app a legal JAMStack app.
You can read the full documentation for the Static Site Generation here: Static Site Generation.
File System Routing
Nuxt.js automatically generates all the Vue.js Routes in your app based on the folder structure inside the pages folder.
For example, consider having this folder structure:
pages/
--| user/
-----| index.vue
--| index.vue
Nuxt.js automatically generates the following route configuration:
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
]
}
You can read about File System Routing here: File System Routing.
Data Fetching
Inside a Nuxt.js app, you can still use the old techniques you kmow when developing Vue.js apps. However, we have a new player here! Server-side rendering. Nuxt.js provides a new set of data-hooks that you can implement so that Nuxt.js can prefetch data when generating the app at the server-side.
Here are two data-hooks offered by Nuxt.js:
fetch() hook This hook was introduced with Nuxt.js 2.12+ release. It can be used inside Vue.js components stored in the pages folder and components folder.
asyncData() hook This hook has been around for a while now, and can be used only inside the Vue.js components stored in the pages folder.
You can read more about Data Fetching hooks here: Data Fetching.
Meta Tags and SEO
Nuxt.js makes it so intuitive to add SEO support to your SSR app. You can add Metadata to your app at two different levels:
- Globally using the nuxt.config.js file
- Locally inside a Nuxt.js Page
You can read about Meta Tags and SEO hooks here: Meta Tags and SEO.
Create our first Nuxt.js app
Let’s use the create-nuxt-app CLI, and create our first Nuxt.js app!
Before you start, you want to make sure you have all the perquisites required before you can install and run the CLI.
For this article, I am going to use npx. However, you can also use npm, or feel free to use yarn.
Step 0
Start by running the following command:
npx create-nuxt-app my-first-nuxt
This command uses the create-nuxt-app tool, and specifies the name of the project- in this case my-first-nuxt-app.
The CLI will ask you a few questions that are important to scaffold the new Nuxt.js app based on your own preferences and decisions. Here’s what to expect.
Step 1
First, let’s confirm the project name as shown in the Figure 1. Give the app a name and hit Enter.
Figure 1: Specify project name
Step 2
You’ve got to choose whether you want to develop your app with TypeScript or JavaScript. I will select JavaScript as shown in Figure 2.
Figure 2: Programming language
Step 3
Next, you need to choose between Npm or Yarn. I will select Npm as shown in Figure 3.
Figure 3: Package manager
Step 4
In this step, you’ve got to select the UI framework you are going to use in the app. I will select Tailwind CSS as shown in Figure 4. Even if you skip this step, you can add any UI framework you want later.
Figure 4: UI framework
Step 5
Nuxt.js offers a set of modules that you can use right away in your apps. For this app, I will pick the Axios module. Figure 5 shows the selection.
Figure 5: Nuxt.js modules
Step 6
The CLI makes it super intuitive to integrate linters in your app. I will pick up both ESLint and Prettier. Figure 6 shows the selection.
Figure 6: Linting tools
Step 7
Now it’s time to select a testing framework. For the sake of this article, I will select None. Feel free to add any. Figure 7 shows the selection.
Figure 7: Testing framework
Step 8
By default, Nuxt.js supports two rendering modes. SSR/SSG and SPA. I will pick SSR/SSG to take advantage of the Server-side rendering. Figure 8 shows the selection.
Figure 8: Rendering mode
Step 9
The deployment target depends on our selection in Step 8. In this case, we have two options to select from. Server (using a Node.js server hosting) or Static (CDN/JAMStack hosting). I will select the Server deployment target as shown in Figure 9.
Figure 9: Deployment target
Step 10
For the development tools, I will keep it simple and select the jsconfig.json option as shown in Figure 10.
Figure 10: Development tools
Step 11
I won’t be using any continuous integration for this app. I will simply select None as shown in Figure 11.
Figure 11: Continuous integration
Step 12
Finally, the CLI asks whether you want to use any version control system. A version control system is always recommended when doing any kind of development. I will select Git as shown in Figure 12.
Figure 12: Version control system
These twelve questions are enough for the CLI to start scaffolding and generating your app based on your preferences. It takes a few seconds to have everything ready for you.
If all goes well, you should see the following as in Figure 13.
Figure 13: create-nuxt-app new app instructions
The CLI gives you instructions on how to run and build the app.
Step 13
Let’s run the app by following the steps highlighted in Figure 13. Run the following commands:
cd my-first-nuxt
npm run dev
The CLI compiles both the client and server parts of the app and starts the Node.js server on port 3000 as shown in Figure 14.
Figure 14: App is running
Step 14
Open a browser instance and navigate to the URL http://localhost:3000/ and you should see the default Nuxt.js app rendering. Figure 15 shows the app running in a browser.
Figure 15: App rendering in a browser
That’s all you need to get started on your first Nuxt.js app. Enjoy!
Nuxt.js Directory Structure
Let’s quickly go through the different folders the CLI generated for us. I will start by opening the new app inside Visual Studio Code. Figure 16 shows the app open inside the editor.
Figure 16: App folders and files
Let’s go through each folder, and explain their roles briefly.
.nuxt
The .nuxt folder is (re-)generated by the CLI every time you run or build the app. It has all the automatically generated files that Nuxt.js uses to run your app.
You can read more about the .nuxt folder here: .nuxt.
assets
The assets folder contains all of your uncompiled files such as Sass files, images, or font files. Nuxt.js makes use of Webpack to load all the files inside this folder.
You can read more about the assets folder here: assets.
components
This folder holds all of your Vue.js components. Nuxt.js components are not different from any other Vue.js component.
Read more about the components folder here: components.
layouts
This folder contains all of your layout components. These are Vue.js components with placeholders for content. At run time, the component and the layout it uses get merged together into a single component. Layouts in Nuxt.js allows you to define fixed UI sections in your app instead of having to repeat things over and over.
You can read more about the layouts folder here: layouts.
pages
This folder also holds Vue.js components. It is unique because Nuxt.js converts this folder structure (components with sub-folders) into actual Vue.js Routes.
You can read about the pages folder here: pages.
plugins
This folder contains global JavaScript functions that you want to run before Nuxt.js instantiates the root Vue.js app. These functions are called Plugins. They can take multiple forms. For instance, you create a Nuxt.js Plugin to load a Vue.js Plugin to your app. You can also install, and make use of a third-party Nuxt.js Plugin.
You can read more about the plugins folder here: plugins.
static
The name of this folder says it all! This folder is directly mapped to the server root. You can place any file in this folder that you do not want Webpack to process. For example, you can place a favicon file, any CSS files, and many other such files.
You can read more about the static folder here: static.
store
The store folder holds all the Vuex store files. Nuxt.js comes with the Vuex module installed, but keeps it disabled. In order to enable the Vue store in your Nuxt.js app, create an index.js file inside this folder, and Nuxt.js will automatically enable it for you.
You can read more about store folder here: store.
nuxt.config.js
As I mentioned, Nuxt.js prefers convention over configuration. However, at some times you may need to tweak the configuration a little. Nuxt.js provides the nuxt.config.js file to allow for custom configuration settings on the app level.
Read more about nuxt.config file here: nuxt.config.
That’s just a quick overview of what folders are generated by the Nuxt.js CLI. There are more you can read up on. You can find all the information you need on Nuxt.js Documentation website.
Conclusion
In this article, you were introduced to Nuxt.js and took a few baby steps towards creating your first Nuxt.js app. In the coming articles, we will immerse ourselves in the Nuxt.js world, and explore this fresh and promising web development framework together.
You can follow me on Twitter to see more of my work.
