Nuxt.js for Complete Beginners
Tags: nuxtjsvue
Published: 2021-04-07 02:43:18

---
title: Nuxt.js for Complete Beginners
published: true
date: 2021-03-22 15:47:38 UTC
tags: NuxtJSvue
canonical_url: https://www.thisdot.co/blog/nuxt-js-for-complete-beginners
---

<iframe src="https://gist.github.com/bhaidar/28d51171868eaf4e76e6a72d19d2f32e"></iframe>

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](https://nuxtjs.slides.com/atinux/nuxt-3-in-action) 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](https://ssr.vuejs.org/) module and the [Vue Meta](https://vue-meta.nuxtjs.org/) module to build a SEO friendly website? On top of that, you had to install and use [Vuex](https://vuex.vuejs.org/) and [Vue Router](https://router.vuejs.org/) 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](https://nuxtjs.org/docs/2.x/get-started/installation#using-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](https://nuxtjs.org/docs/2.x/concepts/server-side-rendering)

**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](https://jamstack.org/generators/nuxt/) app.

You can read the full documentation for the Static Site Generation here: [Static Site Generation](https://nuxtjs.org/docs/2.x/concepts/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](https://nuxtjs.org/docs/2.x/features/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](https://nuxtjs.org/docs/2.x/features/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](https://nuxtjs.org/docs/2.x/features/meta-tags-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](https://nuxtjs.org/docs/2.x/get-started/installation#prerequisites) required before you can install and run the CLI.

For this article, I am going to use [npx](https://www.npmjs.com/package/npx). However, you can also use [npm](https://www.npmjs.com/), or feel free to use [yarn](https://yarnpkg.com/).

##### 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_[![Figure 1: Specify project name](https://images.ctfassets.net/zojzzdop0fzx/3ZCujV6NLmRmyMx63DPA6O/12e56e4145146d131c25a78f7ca4fadc/1.png)](https://images.ctfassets.net/zojzzdop0fzx/3ZCujV6NLmRmyMx63DPA6O/12e56e4145146d131c25a78f7ca4fadc/1.png)

##### Step 2

You’ve got to choose whether you want to develop your app with [TypeScript](https://www.typescriptlang.org/) or JavaScript. I will select _JavaScript_ as shown in **Figure 2**.

_ **Figure 2** : Programming language_[![Figure 2: Programming language](https://images.ctfassets.net/zojzzdop0fzx/2tHKTwaBHZdACZppRKsChw/cc77e050baa9f544b9a541affa577ba9/2.png)](https://images.ctfassets.net/zojzzdop0fzx/2tHKTwaBHZdACZppRKsChw/cc77e050baa9f544b9a541affa577ba9/2.png)

##### Step 3

Next, you need to choose between Npm or Yarn. I will select _Npm_ as shown in **Figure 3**.

_ **Figure 3** : Package manager_[![Figure 3: Package manager](https://images.ctfassets.net/zojzzdop0fzx/1z99WQA1Kppv7RvflvP49C/608592ae12556caadd59b3db4dece11b/3.png)](https://images.ctfassets.net/zojzzdop0fzx/1z99WQA1Kppv7RvflvP49C/608592ae12556caadd59b3db4dece11b/3.png)

##### 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](https://tailwindcss.com/)_ as shown in **Figure 4**. Even if you skip this step, you can add any UI framework you want later.

_ **Figure 4** : UI framework_[![Figure 4: UI framework](https://images.ctfassets.net/zojzzdop0fzx/1RoXS25sa6QaZCoeVOdoxi/c978633733b04f295761619c4f99556d/4.png)](https://images.ctfassets.net/zojzzdop0fzx/1RoXS25sa6QaZCoeVOdoxi/c978633733b04f295761619c4f99556d/4.png)

##### 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](https://axios.nuxtjs.org/)_ module. **Figure 5** shows the selection.

_ **Figure 5** : Nuxt.js modules_[![Figure 5: Nuxt.js modules](https://images.ctfassets.net/zojzzdop0fzx/4zqcUHCkKgLRgRkd7NUUSN/2447d697b85487871feeda9b9456a3ee/5.png)](https://images.ctfassets.net/zojzzdop0fzx/4zqcUHCkKgLRgRkd7NUUSN/2447d697b85487871feeda9b9456a3ee/5.png)

##### Step 6

The CLI makes it super intuitive to integrate linters in your app. I will pick up both _[ESLint](https://eslint.org/)_ and _[Prettier](https://prettier.io/)_. **Figure 6** shows the selection.

_ **Figure 6** : Linting tools_[![Figure 6: Linting tools](https://images.ctfassets.net/zojzzdop0fzx/5gnR3dd8AZRcEWnf29S3gi/e43fcc9abcd11d2d8d6480302bddc2ed/6.png)](https://images.ctfassets.net/zojzzdop0fzx/5gnR3dd8AZRcEWnf29S3gi/e43fcc9abcd11d2d8d6480302bddc2ed/6.png)

##### 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_[![Figure 7: Testing framework](https://images.ctfassets.net/zojzzdop0fzx/3u0eiBgemrXVf57YT3pFyh/8a6907c62b012728eda7f7f97ec74ce6/7.png)](https://images.ctfassets.net/zojzzdop0fzx/3u0eiBgemrXVf57YT3pFyh/8a6907c62b012728eda7f7f97ec74ce6/7.png)

##### 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_[![Figure 8: Rendering mode](https://images.ctfassets.net/zojzzdop0fzx/20BvUuyCCB6PmKjkSwSIJU/ab4690ca7e3019bde046de433a075a94/8.png)](https://images.ctfassets.net/zojzzdop0fzx/20BvUuyCCB6PmKjkSwSIJU/ab4690ca7e3019bde046de433a075a94/8.png)

##### 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_[![Figure 9: Deployment target_](https://images.ctfassets.net/zojzzdop0fzx/5jC3uPEZL6RzMkxfsxMEM0/315cb572b380f762c3902acb94b26c61/9.png)](https://images.ctfassets.net/zojzzdop0fzx/5jC3uPEZL6RzMkxfsxMEM0/315cb572b380f762c3902acb94b26c61/9.png)

##### 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_[![Figure 10: Development tools](https://images.ctfassets.net/zojzzdop0fzx/2MQvPa46qQ745wsqMppbwN/d1383dc83274d8971cdb71da07c4eb15/10.png)](https://images.ctfassets.net/zojzzdop0fzx/2MQvPa46qQ745wsqMppbwN/d1383dc83274d8971cdb71da07c4eb15/10.png)

##### 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_[![Figure 11: Continuous integration](https://images.ctfassets.net/zojzzdop0fzx/4AnKROc9eD9ubPBANmpYrb/08a4efb4396d07b2c8bd89dd1950333b/11.png)](https://images.ctfassets.net/zojzzdop0fzx/4AnKROc9eD9ubPBANmpYrb/08a4efb4396d07b2c8bd89dd1950333b/11.png)

##### 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_[![Figure 12: Version control system](https://images.ctfassets.net/zojzzdop0fzx/4jTffrtXVkL6mY4vd9HHoa/a5eba893ac09a8ed5e515bdce1293a5f/12.png)](https://images.ctfassets.net/zojzzdop0fzx/4jTffrtXVkL6mY4vd9HHoa/a5eba893ac09a8ed5e515bdce1293a5f/12.png)

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_[![Figure 13: create-nuxt-app new app instructions](https://images.ctfassets.net/zojzzdop0fzx/2x95OjKH2v2X9rvK3ruhfX/71d3ae59601e84dc610225bfea81f897/13.png)](https://images.ctfassets.net/zojzzdop0fzx/2x95OjKH2v2X9rvK3ruhfX/71d3ae59601e84dc610225bfea81f897/13.png)

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_[![Figure 14: App is running](https://images.ctfassets.net/zojzzdop0fzx/6sccU3xmhyd7ISETODSBEX/ecd95a7f821dbecaa987c8584c61e7a8/14.png)](https://images.ctfassets.net/zojzzdop0fzx/6sccU3xmhyd7ISETODSBEX/ecd95a7f821dbecaa987c8584c61e7a8/14.png)

##### Step 14

Open a browser instance and navigate to the URL _[http://localhost:3000/](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_[![Figure 15: App rendering in a browser](https://images.ctfassets.net/zojzzdop0fzx/7IlVRkQSVQ2shPLFEXFao5/137cc91caac699f7fe8a82432ae5ab7e/15.png)](https://images.ctfassets.net/zojzzdop0fzx/7IlVRkQSVQ2shPLFEXFao5/137cc91caac699f7fe8a82432ae5ab7e/15.png)

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](https://code.visualstudio.com/). **Figure 16** shows the app open inside the editor.

_ **Figure 16** : App folders and files_[![Figure 16: App folders and files](https://images.ctfassets.net/zojzzdop0fzx/2PnMnO4ZCJAxrGKDWF2LDL/286ec439bfbc87de0df446ab8d183265/16.png)](https://images.ctfassets.net/zojzzdop0fzx/2PnMnO4ZCJAxrGKDWF2LDL/286ec439bfbc87de0df446ab8d183265/16.png)

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](https://nuxtjs.org/docs/2.x/directory-structure/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](https://nuxtjs.org/docs/2.x/directory-structure/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](https://nuxtjs.org/docs/2.x/directory-structure/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](https://nuxtjs.org/docs/2.x/directory-structure/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](https://nuxtjs.org/docs/2.x/directory-structure/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](https://nuxtjs.org/docs/2.x/directory-structure/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](https://nuxtjs.org/docs/2.x/directory-structure/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](https://nuxtjs.org/docs/2.x/directory-structure/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](https://nuxtjs.org/docs/2.x/directory-structure/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](https://nuxtjs.org/docs/2.x/get-started/installation) 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](https://twitter.com/bhaidar) to see more of my work.

_This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit [thisdotlabs.com](https://www.thisdotlabs.com)._

_This Dot Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit [thisdot.co](https://www.thisdot.co)._