Nuxt.js is a framework for creating universal Vue.js applications.

Nuxt.js main purpose is to render the user interface (“UI”) by disregarding the distribution between the client and the server. Its goal is to create a framework that is flexible enough that you can use it as a base in a main project or as a supplement for your current Node.js project. Nuxt.js predefines all the necessary configuration to make your Vue.js application development rendering server side pleasant.

In addition, we also provide another deployment option called: nuxt generate . It allows you to build a statically generated Vue.js application. We believe this option could be the next important step in developing web applications with microservices. As a framework, Nuxt.js has many features to help you in your development between client and server side such as asynchronous data, middleware, layouts, etc.

How it works

Nuxt.js includes the following elements to create an optimal development experience:

• View 2
• Router view
• Vuex (includes only when the store option is enabled)
• meta-view

A total of only 57kb min + gzip (53kb with Vuex).

Under the hood, we use webpack with view-loader and babel-loader to package (“bundle”), split (“code-split”) and minify your code.

Features

• Writing View Files ( *.vue* )
• Automatic code split
• Server-Side Rendering (or “SSR” for Server-Side Rendering)
• Powerful routing with asynchronous data
• Static file generation
• Transpilation ES6 / ES7
• Packaging and minification of your JS and CSS files
• Management of head HTML header tag elements ( title , meta , etc.)
• Hot reloading during development
• Preprocessor: Sass, Less, Stylus, etc.
• HTTP / 2 PUSH header
• Extensibility with a modular architecture

Diagram

This schema shows what is invoked by Nuxt.js when the server is called or when the user navigates in the application using :

(image from nuxt.js official page)

Server-side rendering (universal SSR)

You can use Nuxt.js as a framework to manage the complete rendering of the user interface of your project. Using the nuxt command, Nuxt will start a hot-plug-in development server and Vue Server Renderer will be configured to automatically render your server-side application.

Single-handed application

If for some reason you prefer not to use server-side rendering or need static hosting for your application, you can simply use the single-page application mode (or “SPA” for “Simple Page Application”) using the command nuxt –spa . Combined with the build feature, you have a powerful single-handed application that does not require Node.js or a special server to run.

Take a look at the list of commands to find out more.

If you already have a server, you can add Nuxt.js as a middleware. There is no restriction when you use Nuxt.js to develop your universal web application. Consult the Nuxt.js User Guide by programming.

Static generation (pre-rendering)

The great innovation of Nuxt.js is its command nuxt generate. When creating your application, it will generate the HTML code of each of your routes to store it in a file.

For example, the following file structure:

-| pages/
----| about.vue
----| index.vue

will generate

-| dist/
----| about/
------| index.html
----| index.html

In this way, you can host your web application on any static hosting!

The best example is this website. It is generated and hosted on the GitHub page hosting system:

• Source Code
• Generated code

We do not want to manually build the application each time we update the documentation , so every change we make invokes an AWS Lambda function that:

1. Clone the repository nuxtjs.org
2. Installs the dependencies via npm install
3. Launch npm nuxt generate
4. Deploy the dist folder on the gh-pages branch

And here we come with a web application generated without static files servers

We can go further by imagining an e-commerce application created with nuxt generate and hosted on a CDN. Whenever a product is out of stock or new in stock we regenerate the application. But if the user browses the application at the same time, he will see the information updated through API calls made on the e-commerce API. No need to have multiple instances of a server cache!