Getting started with Nuxt 3

Created on November 13, 2022.


In this post we are going to learn about Nuxt, one of if not “the” most popular Vue.js framework.

To be specific, we are going to learn about Nuxt 3 - its latest release codenamed “Mount Hope”.

As stated above, Nuxt is an open-source Vue.js framework for making websites, or to put it as it’s makers term it - “The intuitive Vue framework”.

Note

The source code to the example in this post is available on GitHub. Click here to visit the repository.

What is the difference between Vue.js and Nuxt?

Since Nuxt is a Vue framework, it means that we get a number of opinionated functionalities out of the box that we would otherwise not get inside a vanilla Vue.js app.

These preconfigured functionalities range from but are not limited to routing, app-level context, SSR(server side rendering) & SSG(static site generation), inbuilt S.E.O (search engine optimization), data fetching, and a number of app-level configurations. We can build vanilla Vue.js apps with such features, but that would involve setting everything up by ourselves either by using our own code or plugin together a number of node modules.

So, in the name of not reinventing the wheel, let’s learn about Nuxt and see what it offers.

N.B., before installing Nuxt just with Vue.js, you need to have node.js and npm installed in your system. Basic understanding of Vue.js will also be helpful since we’ll expansively be dealing with the Vue.js syntax.

Important

To install node.js and get started with Node.js refer to this guide. The node package manager(npm) comes with the with Node.js installation. To get introduced to Vue.js head over to the beginners posts.

Creating a new Nuxt project

To create a new Nuxt app named - getting-started-with-nuxt, run the following script on your terminal.

npx create-nuxt-app getting-started-with-nuxt

After running this command you will receive a series of questions that you will need to provide answers to. For quick guidance fill in the following:

? Project name: getting-started-with-nuxt
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Template engine: HTML
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? What is your GitHub username? <your-github-name>
? Version control system: Git

We will not be covering the configuration choices made here on this post as we’ll do that in subsequent tutorials.

In the above choices, besides the obvious, select none of the Nuxt.js modules:, select ESLint and Prettier on Linting tools:, Universal (SSR / SSG) on Deployment target, and Static (Static/Jamstack hosting) on Rendering mode:.

Anatomy of a Nuxt application

After having created the new Nuxt app, change the terminal’s active directory to that of the newly created project by running the command - cd getting-started-with-nuxt. The project file and directory layout will be as follows:

getting-started-with-nuxt
├── components
│ ├── NuxtLogo.vue
│ └── Tutorial.vue
├── jsconfig.json
├── node_modules
├── nuxt.config.js
├── package.json
├── package-lock.json
├── pages
│ └── index.vue
├── README.md
├── static
│ └── favicon.ico
└── store
└── README.md

Let’s try to understand the files and directories that we see above.

  • components: This is the directory where we place the Vue SFC(Single File Components) that we create for our Nuxt projects.
  • nuxt.config.js: This is the file that stores a Nuxt project’s configuration.
  • package.json: Just as we will see in other JavaScript projects we’ll be working on, the package.json file is the ID card of a project, carrying project details such as it’s name, description, scripts, dependencies and so on. Visit the npm docs for more information this file.
  • pages: This is the folder in which we store our Nuxt project’s page, which also happen to be Vue.js components. The components within this directory are subject to Nuxt’s file routing, thus any .vue file placed here will be available as a route within the project with a bit of nuance that we’ll learn in a moment.
  • static: This directory houses a Nuxt project’s static assets. Static assets are files within a project that are the least expected to change, these can be images, vector graphics, icons, font files, e.t.c. Static assets placed in this directory will be available throughout the Nuxt website via the root url.
  • store: This directory contains the Vuex Store files and is disabled by default. We can enable the store by adding an index.js file inside this directory.
  • node_modules: This is the file where the project’s dependencies are placed. We neither modify this directory’s contents nor stage its contents for versioning.
  • package-lock.json: This file persists the versions of the dependencies our project uses for consistency whenever our project happens to be run. We normally don’t modify this file as it is managed by the package manager. When using pnpm as your package manager, you will see a pnpm-lock.yaml instead.

For this post we will not be covering the jsconfig.json file.

To see what our project would look like when served, run npm run dev on your terminal.

Figure 1-1: Nuxt 3 app start page
Figure 1-1: Nuxt 3 app start page

Figure 1-1 is the presentation of what we should see if every step was correctly followed.

Nuxt pages and components

Observing the /pages directory, we can see a Vue.js component - index.vue inside. This is the file that is being served as the home page to our Nuxt website in Figure 1-1 above. Try deleting this component to see what happens.

Figure 2-1: Nuxt 3 404 page
Figure 2-1: Nuxt 3 404 page

Removing the index.vue component results to what we see on Figure 2-1, Nuxt’s default 404 staus page.

Create a new index.vue Vue.js component filling it with the following code.

Create a new home page
<template>
  <div>
    <h1></h1>
  </div>
</template>
<script>
export default {
  name: 'IndexPage',
  data(){
    return {
      siteName: "Getting started with Nuxt 3"
    }
  }
}
</script>

Now, you should our new homepage containing the title “Getting started with Nuxt 3”.

Let’s add one more page to our Nuxt project.

Create a new about.vue component within the /pages directory adding the following template code inside.

Create an about page
<template>
  <div>
    <h1>This is the about page</h1>
  </div>
</template>

On your browser, visit the link - localhost:3000/about. You should see the resulting page with the /about route as a page containing the title “This is the about page”.

Let’s see how we can use components in our Nuxt project. As we’ve learnt in the explanation of the directories within Nuxt, we know that components go inside the /components directory. Currently, this directory contains two components - NuxtLogo.vue and Tutorial.vue, delete them both as we have no use for them.

So, let’s add a new component of our own inside this directory named FIrstNuxtComponent.vue. Add the following code inside this component.

Create a new component!
<template>
  <div>
    This is our first Nuxt project component
  </div>
</template>

Let’s modify our about.vue page component, adding <FirstNuxtComponent/> to the existing template markup.

Add created component to about.vue's template
<template>
  <div>
    <h1>This is the about page</h1>
    <FirstNuxtComponent/>
  </div>
</template>

On saving the new changes made to the about.vue component, we should see the following.

Figure 2-2: Newly created about page
Figure 2-2: Newly created about page

Our FirstNuxtComponent.vue component has been rendered inside the about.vue component without us having to import it as viewed on Figure 2-2, so, what happened here?

Well, Nuxt scans the /component directory by default and makes all found components globally available for consumption within other components, abstaining us from the need to import them every time we need to use them.

This component auto-import behavior can be changed by altering the nuxt.config.js configuration file - setting the components value to false.

Update the Nuxt configuration
export default {
  components: false
}

Try changing this value inside the Nuxt project configuraion file - nuxt.config.js and see the details of the component we previously added to the about page disappear.

This completes our introductory example. The source code to the project we created in this post is available on this GitHub repository.

Summary

We have so far learnt how to create a new Nuxt project, what a Nuxt project’s various files and directories represent, seen how we can create new pages, create and use components inside Nuxt pages.

We have also seen how a Nuxt project’s configuration can be modified - the case with changing the component auto-import behavior in the Nuxt project we were working on.

This post has been a mere introduction to Nuxt, and most of what we can do with pages will be covered in future posts. We’ll be covering all the remaining Nuxt concepts intuitively by working on real world projects.

To learn more about Nuxt - visit the official docs.

Subscribe to the VueNoob Newsletter

[[[ noty.message ]]]

By using this site, you agree that you have read and understand its Privacy Policy.