Vue.js is a JavaScript framework for building user interfaces and single page applications. But it is missing advanced features required for complex applications. This is were Nuxt.js comes in.

What is Nuxt.js?

Nuxt is a progressive framework based on Vue.js. It is also based on Vue's libraries (vue, vue-router, and vuex) and some development tools (webpack and Babel).

Nuxt allows developers to create three types of applications:

• Static Generated Pages
• Single Page Applications
• Server Side Rendered Applications

A static generated application is a web application that can be delivered directly to the browser. The contents of the pages are already included in the HTML file. Most believe that this only includes flat files or pages. However, it also refers to sites that utilize technologies in the browser instead of on the server to deliver dynamic content. So basically, a static generated application is any web application that the server does not alter.

The single page application (SPA) is a web application that includes content that is dynamically populated with new data from the server. The dynamic rewriting of the page is usually in response to the user's actions. Even though it may seem that it is a new page, the page never reloads nor does it go to another page. It just gives that perception.

Server side rendered applications (SSRs) is a web application that that renders fully on the server before sending it to the browser. Once the client receives the page, JavaScript takes over and allows the SPA framework to function.

What Vue problems does Nuxt address?

Due to Vue's limitations to create complex applications, Alexandre and Sebastien Chopin created Nuxt.js. (Not to be confused with Next.js, which is a React framework.) They took Vue and created a framework for it.

Some of the issues Nuxt solves are:

• Ability to create universal apps
• Routing configuration
• Standardized folder structure
• Easy compilation

Building universal applications can be difficult since it must execute both on the client and the server. Nuxt.js make it possible to share code between the client and the server with component properties like isServer and isClient. They even include a special component property no-ssr, which statically renders an application, so no server is necessary.

Building a universal application allows the server to pre-render the Vue pages on the server. This then makes the application SEO-friendly, so search engines can discover the web pages of the application by after adding SEO-related tags. Also since the server pre-renders the HTML, this makes the browser load faster, which gives the user a better experience.

Even though Vue applications are built with the assets and components directories, Nuxt sets up additional folders to be able to standardize the organization of the code. The main additional folders are the pages, layouts, and store directories.

With Nuxt, the Vue components that are placed in the pages folder have their routes automatically generated. There is no need to configure Vue Router; Nuxt takes care of it. In small projects this may not seem like a huge benefit, but it is with larger applications.

Nuxt.js comes prepackaged with Webpack and Babel. It sets up the the build process of the application. The JavaScript compilation will then work on all browsers.

Create a Nuxt App

The app is easily created with npx. It is included in npm since version 5.2.0. It facilitates the usage of other locally installed tools without having to use npm directly. It is ideal to run code generators like Nuxt's scaffolding tool create-nuxt-app.

$ npx create-nuxt-app hello-nuxt-app

The tool gives the developer several options that help configuring the application.

Conclusion . . .

With all the added features, Nuxt makes the development of Vue.js applications easier. It also provides the flexibility to develop the application like the developer wants. To get started, it is as easy as typing npx create-nuxt-app.