Getting started with Nuxt 3
Tags: nuxt, vue, javascript, webdev
Published: 2023-01-31 21:17:30

---
title: Getting started with Nuxt 3
published: true
description: A getting started guide to Nuxt, the intutitive Vue framework, it's concepts, and sample code.
tags: nuxt, vue, javascript, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nruq74lpzbmpefyyckxe.jpg
canonical_url: https://vuenoob.com/tutorial/getting-started-with-nuxt-3/
# Use a ratio of 100:42 for best results.
---

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

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 its makers term it - "The intuitive Vue framework".

## What is the difference between Vue.js and Nuxt?

Since Nuxt is a Vue framework, it means that we get several 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 several 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 plug-in together some 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. A basic understanding of Vue.js will also be helpful since we’ll expansively be dealing with the Vue.js syntax.

## Creating a new Nuxt project

> Before creating a Nuxt project, you need to have the [latest LTS version](https://nodejs.org/en/download/) of Node.js installed on your system. The [Visual Studio Code editor](https://marketplace.visualstudio.com/items?itemName=Vue.volar) coupled with the [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) extension is a good setup for working on Nuxt.js projects.

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

```shell
npx nuxi init getting-started-with-nuxt
```

Next, switch to the project's directory and run the `npm install` command on your terminal to install the project's dependencies.

```shell
# Switch into the project's directory
cd getting-started-with-nuxt

# install dependencies
npm install
```

### Anatomy of a Nuxt application

After having created the new Nuxt app, when observing the project's file and directory layout, you should see the following:

```shell
getting-started-with-nuxt
  ├── README.md
  ├── app.vue
  ├── node_modules
  ├── nuxt.config.ts
  ├── package.json
  ├── pnpm-lock.yaml
  └── tsconfig.json
```

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

- `app.vue`: This is the main component of a Nuxt.js application created when you initiate a new project with `npx nuxi init`. This component is sufficient for an app that does not need routing.
- `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.
- `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](https://docs.npmjs.com/creating-a-package-json-file) for more information about this file.
- `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.

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k844r6cbs24h8nu5rnx5.png)

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

## Nuxt pages and components

To add new pages to our Nuxt.js app we need to first create a `/pages` directory, then place all page files inside it. The `/pages` directory is optional in Nuxt 3. When it is present, Nuxt enables the support for its file-based routing, the opposite is true otherwise, unless we set `pages: true` inside the configuration file - `nuxt.config.js` or when a `app/router.options.ts` file is present.

Let's add the `/pages` directory to the Nuxt app we just created, transfer the `app.vue` file inside this directory and rename it to `index.vue`.

Visiting [localhost:3000](http://localhost:3000) after making the suggested change, we end up at the same point as we did in illustration 1-1.

Let's try visiting a new route - [localhost:3000/new-page](http://localhost:3000/new-page).
In doing so, we end up at the page illustrated below.

![Figure 2-1: Nuxt 3 404 page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vhemtebey789hxvl28m.png)

When we try to visit non-existent pages, Nuxt handles that by automatically directing us to a default 404 status page.
We can customize the error page by adding an `error.vue` component on the root of our project directory. We'll learn more about error handling on Nuxt in a later post.

Try renaming the `index.vue` component currently present inside the `pages` directory. When we try to visit [localhost:3000](http://localhost:3000), we end up at the error page displayed above once again. This is because each page that is created using a directory needs to have an `index.vue` component inside it that acts as the default view of that page, in our case, we are dealing with the website's homepage which is the root index.vue component found under the `/pages` top level directory.

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

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

```vue
<template>
  <div>
    <h1>This is the about page</h1>
  </div>
</template>
```

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

![Figure 2-2: The newly created about page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9bvzl116kjyk9427myqt.png)

Let’s see how we can use components in our Nuxt project.

In Nuxt, components are placed within the `/components` directory. We can then use them inside other components or pages.

Let's add a new component.
Inside the `/components` directory, add a new file, naming it - `HighlightedText.vue`. Add the following code inside the newly created component.

```html
<template>
    <h2 style="font-weight: 800">
        "{{ text }}"
    </h2>
</template>
<script>
export default {
    props: {
        text: {
            type: String,
            default: "Some Message"
        }
    }
}
</script>
```

Next, import this component inside our about page currently at `/pages/about.vue`. We'll end up with the following after updating our about page.

```html
<template>
  <div>
    <h1>This is the about page</h1>

    <HighlightedText></HighlightedText>
  </div>
</template>

<script>
import HighlightedText from '../components/HighlightedText.vue';
export default {
  components: {HighlightedText}
}
</script>
```

On visiting the about page route again, we'll see the "some Message" text rendered as expected.

![Figure 2-3: Component rendered inside a page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rv4w0qo2rxfxu0ytophj.png)

Try deleting the component-importing code from the `about.vue` file, remaining with the following code.

```html
<template>
  <div>
    <h1>This is the about page</h1>

    <HighlightedText></HighlightedText>
  </div>
</template>
```

When you visit [localhost:3000/about](http://localhost:3000/about) again, nothing would have changed, you'll still see the "Some Message" text present, meaning that our component is still rendered despite removing the component importation code.

So, what happened?

The explanation for this behaviour is simple. Nuxt scans the `/component`  directory by default and makes all found components globally available for consumption within other components and pages, abstaining us from the need to import them every time we need to use them. This helps us write less code.

This completes the introductory part of Nuxt 3. The source code for the project we created in this post is available on [this GitHub repository](https://github.com/vuenoob/tutorials).

## Summary

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

This post has been a mere introduction to Nuxt 3, we'll see more of what we can do with pages and components in future posts. We’ll also be covering more Nuxt concepts intuitively by working on real-world projects.

To learn more about Nuxt 3 - visit the [official docs](https://nuxt.com/docs/).