Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
116 lines (74 sloc) 5.46 KB
title description
Introduction
The 25th of October 2016, the team behind zeit.co, announced Next.js, a framework for server-rendered React applications. Few hours after the announcement, the idea of creating server-rendered Vue.js applications the same way as Next.js was obvious: Nuxt.js was born.

The 25th of October 2016, the team behind zeit.co, announced Next.js, a framework for server-rendered React applications. A few hours after the announcement, the idea of creating server-rendered Vue.js applications the same way as Next.js was obvious: Nuxt.js was born.

What is Nuxt.js?

Nuxt.js is a framework for creating Universal Vue.js Applications.

Its main scope is UI rendering while abstracting away the client/server distribution.

Our goal is to create a framework flexible enough that you can use it as a main project base or in addition to your current project based on Node.js.

Nuxt.js presets all the configuration needed to make your development of a Vue.js Application Server Rendered more enjoyable.

In addition, we also provide another deployment option called: nuxt generate. It will build a Static Generated Vue.js Application. We believe that option could be the next big step in the development of Web Applications with microservices.

As a framework, Nuxt.js comes with a lot of features to help you in your development between the client side and the server side such as Asynchronous Data, Middleware, Layouts, etc.

How it Works

Vue with webpack and Babel

Nuxt.js includes the following to create a rich web application development:

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

Under the hood we use webpack with vue-loader and babel-loader to bundle, code-split and minify your code.

Features

  • Write Vue Files (*.vue)
  • Automatic Code Splitting
  • Server-Side Rendering
  • Powerful Routing System with Asynchronous Data
  • Static File Serving
  • ES6/ES7 Transpilation
  • Bundling and minifying of your JS & CSS
  • Managing <head> element (<title>, <meta>, etc.)
  • Hot module replacement in Development
  • Pre-processor: Sass, Less, Stylus, etc.
  • HTTP/2 push headers ready
  • Extending with Modular architecture

Schema

This schema shows what is called by Nuxt.js when the server is called or when the user navigate through the app via <nuxt-link>:

nuxt-schema

Server Rendered (Universal SSR)

You can use Nuxt.js as a framework to handle all the UI rendering of your project.

When launching nuxt, it will start a development server with hot-reloading and Vue Server Renderer configured to automatically server-render your application.

Single Page Applications (SPA)

If, for any reason, you prefer not to use server side rendering or need static hosting for your applications, you can simply use SPA mode using nuxt --spa. In combination with the generate feature, it gives you a powerful SPA deployment mechanism without the need to use a Node.js runtime or any special server handling.

Take a look at the commands to learn more about usage.

If you already have a server, you can plug Nuxt.js by using it as a middleware. There is no restriction at all when using Nuxt.js for developing your Universal Web Applications. See the Using Nuxt.js Programmatically guide.

Static Generated (Pre Rendering)

The big innovation of Nuxt.js comes with the nuxt generate command.

When building your application, it will generate the HTML for every one of your routes and store it in a file.

For example, the following file structure:

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

Will generate:

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

With this, you can host your generated web application on any static hosting!

The best example is this website. It is generated and hosted on GitHub Pages:

We don't want to manually generate the application every time we update the docs repository, so each push made calls to an AWS Lambda function which:

  1. Clones the nuxtjs.org repository
  2. Installs the dependencies via npm install
  3. Runs nuxt generate
  4. Pushes the dist folder to the gh-pages branch

We now have a Serverless Static Generated Web Application :)

We can go further by thinking of an e-commerce web application made with nuxt generate and hosted on a CDN. Everytime a product is out of stock or back in stock, we regenerate the web app. But if the user navigates through the web app in the meantime, it will be up to date thanks to the API calls made to the e-commerce API. No need to have multiple instances of a server + a cache anymore!

See [How to deploy on GitHub Pages?](/faq/github-pages) for more details on how to deploy to GitHub Pages.