Made withNuxtClip

2 Nuxt JS beginner tutorial - Getting Started with NuxtJs | How to setup Nuxt Project

S

Sarthaksavvy

Creator on the Nuxt channel

Watch on YouTube ↗

34K viewsApr 30, 201910:03 runtime

Learn how to set up and get started with a new Nuxt.js project in this beginner-friendly tutorial. This guide walks you through initializing a project with npm, installing the Nuxt package, and configuring your `package.json` to run the development server. Discover how Nuxt's…

Chapters

#nuxt#clip#frameworks

Project Setup

Create a project directory (e.g., nuxt-app).
Initialize a package.json file by running npm init -y in your terminal.
Install Nuxt as a project dependency using the command: npm install nuxt --save.

Running the Development Server

To run Nuxt, you need to add a command to the scripts section of your package.json file.
```
"scripts": {
  "dev": "nuxt"
}
```
Start the development server by running npm run dev.
By default, the application will be available at http://localhost:3000.

Directory Structure and Conventions

pages directory: This is a special directory in Nuxt. Creating it enables Nuxt's file-based routing system. Any .vue file placed here becomes a page route.
.nuxt directory: This is an auto-generated directory that Nuxt creates when you run the dev or build command. It contains the compiled templates, generated router, and other build artifacts.

Important
You should not manually edit the contents of the .nuxt directory, as it will be overwritten every time the application is compiled.

File-Based Routing

Nuxt automatically generates your application's routes based on the file structure within the pages directory.
pages/index.vue corresponds to the root route (/).
pages/about.vue corresponds to the /about route.
The generated configuration can be inspected in the .nuxt/router.js file.

Page Navigation

To navigate between pages without a full page reload, you can use the <nuxt-link> component.
It is a wrapper around Vue Router's <router-link> component, with added benefits for server-side rendering.

<!-- In pages/index.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <nuxt-link to="/about">Go to About Page</nuxt-link>
  </div>
</template>

Tip
Always prefer using <nuxt-link> over <router-link> in a Nuxt project to ensure optimal performance and features like smart pre-fetching.

Development Workflow

Nuxt provides a hot module reloading (HMR) feature out of the box.
When you save a file, Nuxt automatically recompiles the necessary parts of your application and updates the content in your browser without requiring a manual refresh.

Project Initialization and Nuxt Installation

So, now let's get started with Nuxt.js. To do so, I'm going to create a simple folder called nuxt-app. And then, I will open this folder with my VS Code. So, I will open this with VS Code, and that's very easy.

But here, what I'm going to do, I will open the integrated terminal of VS Code, and I will simply say npm init, and I will say -y so that I don't have to answer on various questions. So, what this has done, yeah, you can see we have a package.json file. And inside that package.json, it's a simple package.json, but now I'm going to install Nuxt in our application. So, I will say npm install nuxt --save. So, if I hit enter, it's now going to install Nuxt on our nuxt-app directory.

And now, our Nuxt is installed, so we can see it says this kind of diagram, or whatever you call, is there. And thanks for installing Nuxt.js, and yes, we have Nuxt here.

Running the Development Server

So, yes, in our node_modules folder, we have lots of things related to Nuxt. So, this means we can simply start our server for Nuxt.js. We just need to say npm run dev. But if I do this, we have an error that there is no script called dev.

So, what I'm going to do, again, on the package.json file, on this scripts part, I will create a new script called dev, and this is going to point to nuxt. So, it's very easy. So, now, if I clear it, and I will say npm run dev. So, now you can see our server is started at localhost:3000, and with a universal app.

Exploring the Default Page and Its Source

I think you know what is universal app from the previous introduction episode, but we don't have to care about what kind of application it's creating, it's just a Nuxt application. So, you can see it says the client and server both are created, and we will talk about these things later. So, first focus on the localhost:3000.

So, let's click here to open localhost:3000, and yeah, we can see the Vue.js framework, and Vue.js framework means the Nuxt. And yeah, it says if you want to get started with Nuxt, you can click here. This will lead you to the installation guide of Nuxt.js, and exactly what we have done is written here. Okay. So, get back here.

So, this is "please create the pages directory to suppress this default page." But wait, let's see how this page came. When we ran this npm run dev, it compiled everything, and created a new folder, new directory called .nuxt. If you open this directory, we have lots of things. So, first things first, I can see I have this index.js file. Inside this index.js file, I have Vue, I have Vue Meta, then some of the router related things, then some Nuxt related things. Even Nuxt is also loaded, and it is loaded from component/nuxt.js. So, here we have component/nuxt.js, and it is actually loading all these things.

But where is this file? So, to have this file, actually, that is inside node_modules, nuxt, and if I go to vue-app, template, page, index. So, now you can see "please create the pages directory", "get started", "view framework". This is the one. So, how we can override? As this page itself is saying, "create a pages directory to suppress this default page."

Creating the Pages Directory and Home Page

Okay, so let's create a pages directory, so I will say pages, and hit enter. And because there is some change, so let's see. If I refresh, nothing is going to happen. Let's rebuild everything, rerun npm run dev. And then, if I go here, refresh this page, it says "This page could not be found." We have just created the pages directory, and it is giving this error. But again, where this error came from? Go to the .nuxt directory, and here, inside this components, we have NuxtError. This is the Nuxt error, and what we can see, this page is not found. "Back to home page" is there, and this is the error page.

So, how we can remove this error page? We just need to create an index.vue file. So, index.vue, if I create, then I create this scaffolding for template, script, and style. And if you don't know how I have created this, I have created this because I have installed a very beautiful extension of VS Code, which is Vetur, or Vetur, whatever you want to call. This one, actually. If you install this, you can be able to do that. Okay. So, here I will create a div, and inside div, I will say home page. And let's move this inside of an h1 tag. That will be good to see, and save this file, and now, refresh this page. Yes, you can see the home page is there. That's very nice.

Automatic File-Based Routing

So, if I create about.vue, and again, scaffolding, and I will say div, then h1, and I will say about page. And let's go to /about. And yeah, you can see the about page is there. So, that's very nice, and you can see we have not configured any routes for this. Because we have Nuxt.js. Whatever file you define inside this pages directory will become your route. How?

Again, let's go to the .nuxt file, and here, you can see we have a router.js file. Inside router.js, whenever you create any file inside the pages directory, it will track the changes, and then create the route for that. So, you can see that component is actually a file is actually imported here, and then, at the bottom here, somewhere, yeah, you can see here, we have the router, which is defined here. So, in that way, routing is automatically done with Nuxt. Whatever you define will become the route.

Navigating Pages with Nuxt Link

But if you are a little bit familiar with Vue Router, if you want to change the page without going to this URL, then you can create a simple router-link type of thing. And here, I will say home, and I need to say to the base URL. Similarly, on the index page, I will create one more, and I call it about, and /about. As soon as I save, you can see whenever I click whenever I save this file, or any file, it will recompile everything. And that's how Nuxt will know, and actually Nuxt will update your router file.

So, let's go here, and you can see we have this home button, and if you are not able to see, let me make it big. Okay. So, here we have this about page, and home is written here. As soon as I click on home, I am on the home page, and yeah, this is home page. If you want to go to about page, yes, you can go to about page. So, that's very easy, and you have seen that how easy to set up a project with Nuxt.js.

And one more thing, with Nuxt.js, you have a brother of router-link called nuxt-link. It is almost same with router-link, but with the use of nuxt-link, the link will going to work on the server side, also. What's the benefit of using this? We will see later, but just think about that nuxt-link is a big brother of router-link, and this is going to work exactly the same.

Hot Module Reloading and Conclusion

So, we don't have to actually have to refresh manually, because whenever I save this file, yeah, you can see it is compiling, and then instantly, it will update your page, or hot reload, they call it. So, if I open the Chrome DevTools, you can see if I clear it out, as soon as I save this file, go here, and you can see it says rebuilding, and that's how it will reflect on your browser.

So, this is the getting started with Nuxt.js. We will meet in the next episode to have more fun with Nuxt.js. And if you want to learn more about various things, head over to withhumes.com/courses section, and here you will have all my Udemy courses, and some of the premium courses on this website, for this website only. So, we will meet in the next episode. Till then, goodbye.