How to set up Nuxt application

Nuxt is an incredible open-source JavaScript framework. It can also be called Vue JS on steroids because the features it provides are out of the box. It makes sure your application is well optimized, whether you want it to be rendered as SPA ( Single Page Application ), SSR ( Server Side Rendered ) or Statically Generated.

But before we can leverage the amazing benefits Nuxt has to offer, we need to know how to set up Nuxt js application. And today we are going to learn that.

Install Node.js

First thing first we need to download and install Node.js, which is used for running scripts on the server to render content before it is delivered to a web browser.

After the installation open a command prompt (or PowerShell) and enter the following:

node –v

The system should display the Node.js version installed on your system, which means it has been installed successfully.

Install create-nuxt-app globally

Now we can proceed to set up the Nuxt application, just enter the following in the command prompt (or PowerShell) you have opened.

npm install -g create-nuxt-app 

This will install the Create Nuxt App globally on your computer.

Create the project

Now go to the directory through the command prompt (or PowerShell) in which you want to set up the Nuxt project.

You can also simply right-click on the root of the project folder and select Git Bash Here, which is added in the context menu if you have installed git. Git also allows us to store our code on GitHub ( Know more about git and GitHub ).

Once you are in the desired folder, enter the following command ( remember to change the project-name to the name you want to give to your application ):

create-nuxt-app project-name 

After hitting the enter button Nuxt will ask you a few things to complete the setup. You can always change these settings later ( Figure – 1 ).

Project name – Give your project a name.

Project description – Describe what your project is about.

Use a custom server framework – Choose between integrated server-side frameworks to support the development of web applications including web services, web resources, and web APIs i.e. – None (Nuxt default server), Express, Koa, AdonisJS, HapiJS, Feathers, MicroJS. ( If you are not sure, keep None )

Use a custom UI Framework – Choose your favourite UI framework to use their inbuilt UI Components i.e. – None (feel free to add one later), Bootstrap, Vuetify, Bulma, Tailwind, Element UI.

Choose rendering mode – Universal to describe JavaScript code that can execute both on the client and the server side. SPA to describe JavaScript code that can execute on the client side.

Use the Axios module – Add the Axios module to make API requests easily into your application.

Use EsLint – Add EsLint to identify and report on patterns in JavaScript and maintain your code quality with ease.

Use prettier – Add Prettier to prettify your code on save.

Author name – Enter your name.

Choose package manager – Choose between your package manager to handle dependencies [yarn](https://yarnpkg.com/en/) or npm.

Once you finish all of these it will install the packages in a few minutes, then you need to change the directory and launch the application by entering the following commands below:

# change directory 
cd project-name
 
# launch app
npm run dev

The application is now running on http://localhost:3000 and that is all to the setup Nuxt application.

Nuxt.js will listen for file changes inside the pages directory, so there is no need to restart the application when adding new pages.

To discover more about the directory structure of the project: Directory Structure Documentation.

Conclusion

Nuxt is a very powerful tool but very easy to use. You can freely deploy the statically generated Nuxt application file in Netlify ( learn more ) or a universal Server Side Rendered app in Heroku ( learn more ).

Let me know how was your experience with Nuxt.js. And if you enjoyed this blog post, share it with a friend!