Introduction

    Nuxt is a framework designed to give you a strong architecture following official Vue guidelines. Incrementally adoptable, it can be used to create from static landing pages to complex enterprise ready web applications.

    Versatile by nature, it supports different targets (server, serverless or static) and server side rendering is switchable.

    Extendable with a strong module ecosystem, it makes it easy to connect your REST or GraphQL endpoints, favorites CMS, CSS frameworks and more. PWA and AMP support is only a module away from your Nuxt project.

    NuxtJS is the backbone of your Vue.js project, giving structure to build your project with confidence while being flexible.

    Features

    • Write Vue Files ()
    • Automatic Code Splitting
    • Server-Side Rendering
    • Static File Serving
    • 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

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

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

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

    Schema

    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 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 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.

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

    For example, the following file structure:

    Will generate:

    1. -| dist/
    3. ------| index.html
    4. ----| 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 , see our source code or from Vue School.

    We don't want to manually generate the application every time we update the docs repository, it triggers a hook to Netlify which:

    • Clones the
    • Installs the dependencies via npm install
    • Runs npm run generate
    • Serves the directory We now have an automated 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. Every time 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 any more!

    See How to deploy on Netlify? for more details on how to deploy to Netlify.