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.
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:
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 ):
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.
Use the Axios module – Add the Axios module to make API requests easily into your application.
Use prettier – Add Prettier to prettify your code on save.
Author name – Enter your name.
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.
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!