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

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:
• Choose your favorite UI framework:
Element UI
Ant Design Vue
• Choose your favorite testing framework:
• Choose your favorite UI framework:
None (feel free to add one later)
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.