What is Nuxt.js? A step by step guide to install Nuxt.js project in your system

nuxt-js-min
What is Nuxt.Js?
  • Nuxt.js provides all the configuration needed to make your Vue.js application development interesting.
  • It is used to make Desktop applications, Mobile applications, Static generated applications, Progressive web applications, and Universal applications.

 

Why Nuxt.Js?
  • Performant: Gives it’s Best to build Performant applications by utilizing Vue.js and Node.js. To take out every unnecessary bit out of Nuxt app includes a bundle analyzer and lots of opportunities to fine-tune your app.
  • Modular: Nuxt is based on a powerful modular architecture. You can choose from more than 50 modules to make your development faster and easier. You don’t have to make a lot of efforts to get PWA benefits, add Google Analytics to Your page or create Sitemap.

 

Rendering Modes
  • Server Side Rendered (Universal): One of the most popular mode for Nuxt due to its super amazing advantages. Many modern JavaScript frameworks, like Vue, are aimed at building Single Page Applications (SPAs). There are a lot of advantages to having a SPA over a traditional website. For example, you can build very snappy UIs that update fast. But SPAs also come with disadvantages such as long load times, and Google struggles with them because there’s no content initially on the page to crawl for SEO purposes. All of the content is generated with JavaScript after the fact. A universal app is about having a SPA, but instead of having a blank index.html page, you’re preloading the application on a web server and sending rendered HTML as the response to a browser request for every route in order to speed up load times and improve SEO by making it easier for Google to crawl the page.
  • Statically Generated (Pre-Rendering):
    Nuxt.js supports generating a static website based on your Vue application. It is the “best of both worlds” as you don’t need a server but still have SEO benefits because Nuxt will pre-render all pages and include the necessary HTML. Also, you can deploy the resulting page easily to Netlify or GitHub pages.
  • Single Page Application (SPA)

 

Prerequisites to get Nuxt project installed in the system

 

To quickly install Nuxt app

1.  Make sure you have npx installed (npx is shipped by default since NPM 5.2.0)
2. $ npx create-nuxt-app
Or with yarn:
$ yarn create nuxt-app
After writing above command it will ask you few questions as mentioned below:
• Choose between integrated server-side frameworks:
None
Express
Koa
Hapi
Feathers
Micro
Adonis
• Choose your favorite UI framework:
None
Bootstrap
Vuetify
Bulma
Tailwind
Element UI
Ant Design Vue
Buefy
• Choose your favorite testing framework:
None
Jest
AVA
• Choose your favorite UI framework:
None (feel free to add one later)
Bootstrap
Vuetify
Bulma
Tailwind
Element UI
Ant Design Vue

  • Add axios module to make HTTP request easily into your application.
  • Add EsLint to Lint your code on save.
  • Add Prettier to prettify your code on save.

3. After answering all of the above questions your all dependencies will get installed. So, now you need to navigate to the project folder using below command.
$ cd
4. Now you can run the installed project into development mode and the command to do that is as below:
$ npm run dev
Now, You are all set to go with the installed project. There is also one more way to do project installations. For more information, you can refer installation Guide.