Setup NUXT.JS Project | Beginner Guide |

Setup NUXT.JS Project | Beginner Guide |

Table of contents

No heading

No headings in the article.

In this article, we will learn about setting up a new project in NuxtJs.

For this article walkthrough, we will use VsCode as a demonstrating tool for installation. There are some prerequisites for installing NUXT

  • NodeJs - It is recommended to have an LTS version of the node.

  • A text editor e.g VsCode, WebStrom etc.

  • Terminal - It is also recommended to use VsCode or WebStorm integrated terminal.

After installing one of the text editors mentioned above create a new folder in which you want to install then open the terminal and type the command:

npm init nuxt-app <project-name>
  • For this tutorial we are using npm (Node Package manager)
  • You will replace your desired project name e.g npm init nuxt-app NuxtTestApp

After submitting the above command you will see multiple options to set up or include libraries from the start just as shown in the below image.

Screenshot 2022-10-31 at 9.26.48 PM.png

As shown in the above image there are multiple options for each option from which you can select I have selected different options in my case you can select different ones for yours.

After selecting all options all packages will be installed in your designated folder. There will be a pre-design folder structure for the Nuxt framework.

Screenshot 2022-10-31 at 9.31.46 PM.png

As in the above image you can see multiple folders:

  • Pages - This folder contains all application pages.
  • Components - This folder contains all components which you can use on multiple pages.
  • Layouts - This folder contain the parent layout page of your application.
  • nuxt.config.js - This file contains all the necessary configurations needed for the nuxt app.
  • package.json - This file contains all list packages installed.

This process will take time so grab a cup of coffee ! After process is completed it will prompt to run following set of commands

  • npm run build - Build Project.
  • npm run dev - Start project in development mode.
  • npm run start - Start project as Production mode.

When navigating to running port you will be able to see application up and running.

For further details if there is any misunderstanding learning installation process follow the following video

If you find this article helpful kindly share and vote this will boost my motivation to provide more and write more.

Happy Coding !