Nuxt.js

Nuxt.js is a framework for creating Vue.js applications, you can choose between Universal, Static Generated or Single Page application.

Features

• Automatic transpilation and bundling (with webpack and babel)
• Hot code reloading
• Server-side rendering OR Single Page App OR Static Generated, you choose ?
• Static file serving. ./static/ is mapped to /
• Configurable with a nuxt.config.js file
• Custom layouts with the layouts/ directory
• Middleware
• Code splitting for every pages/

Getting started

npm install nuxt

Add a script to your package.json like this:

{
  "scripts": {
    "start": "nuxt"
  }
}

After that, the file-system is the main API. Every .vue file becomes a route that gets automatically processed and rendered.

Populate ./pages/index.vue inside your project:

<template>
  <h1>Hello {{ name }}!</h1>
</template>

<script>
export default {
    data: () => {
        return { name: 'world' }
    }
}
</script>

And then run:

npm start

Using nuxt.js programmatically

const { Nuxt, Builder } = require('nuxt')

// Import and set nuxt.js options
let config = require('./nuxt.config.js')
config.dev = (process.env.NODE_ENV !== 'production')

let nuxt = new Nuxt(config)

// Start build process (only in development)
if (config.dev) {
  new Builder(nuxt).build()
}

// You can use nuxt.render(req, res) or nuxt.renderRoute(route, context)

Render a specific route

nuxt.renderRoute('/about', context)
.then(function ({ html, error }) {
  // You can check error to know if your app displayed the error page for this route
  // Useful to set the correct status code if an error appended:
  if (error) {
    return res.status(error.statusCode || 500).send(html)
  }
  res.send(html)
})
.catch(function (error) {
  // And error appended while rendering the route
})