A minimalist framework for server-rendered Vue.js applications

Inspired by Next.js

Built on top of Vue.js 2

Server-side RenderingWith Node.js

ES6 TranspilationWith Babel

Code SplittingWith Webpack

Focus on writing*.vue files

Example

npm install --save nuxt

package.json{ “dependencies": { “nuxt”: "latest" }, “scripts”: { “dev”: “nuxt" }}

pages/index.vue<template> <h1>Hello {{ name }}</h1></template>

<script>export default { data () { return { name: ‘world’ } }}</script>

npm run dev

http://localhost:3000

<h1>Hello world</h1>

pages/ is the main API

pages/index.vue —> / pages/about.vue —> /about

Async Data

pages/index.vue<template> <ul> <li v-for=“post in posts”> {{ post.title }} </li> </ul></template>

<script>import axios from 'axios'

export default { data () { return axios.get(‘https://my-api') .then((res) => { return { posts: res.data } }) }}</script>

Server Data

pages/index.vue<template> <h1>Hi from {{ name }}</h1></template>

<script>export default { data ({ req }) { return { name: (req ? ‘server' : ‘client' } } }}</script>

data(context)

- isServer - isClient - isDev - req - res - params - query

- env - route - base - store - error({ statusCode, message }) - redirect([status], path, [query])

pages/auth.vue<template> <h1>Authenticated</h1></template>

<script>export default { data ({ store, redirect }) { if (store.user.authUser) return redirect(‘/login’) return {} }}</script>

Customisablenuxt.config.js

Custom RoutesEx: pages/users/_id.vue -> /users/:id

Vue pluginsEx: vuelidate, vue-i18n, etc.

nuxt.config.jsmodule.exports = { plugins: [ ‘plugins/vuelidate.js’ ], build: { vendor: [‘vuelidate’] }}

plugins/vuelidate.js

import Vue from 'vue'import Validation from 'vuelidate'

Vue.use(Validation)

Head elementstitle, meta tags, etc.

nuxt.config.jsmodule.exports = { head: { title: ‘Default title’, meta: [ { charset: ‘utf-8’ } ] }}

pages/index.vue<template> <h1>Hello world</h1></template>

<script>export default { head: { title: ‘Index page' }}</script>

Vuex StoreWith store/index.js

router/index.jsimport Vuex from 'vuex'

const store = new Vuex.Store({ state: { counter: 0 }, mutations: { increment (state) { state.counter++ } }})

export default store

pages/index.vue

<template> <button @click=“$store.commit(‘increment’)"> {{ $store.state.counter }} </button></template>

Layoutslayouts/app.vue

layouts/app.vue<template> <nuxt-container> <p>My nav bar here!</p> <nuxt></nuxt> </nuxt-container></template>

<style src=“~assets/main.css”></style>

Etc.- Routes Transitions - Static files - Error page - Testing - Environment variables - postcss plugins - babel configuration - webpack config

Use it Programmatically

server.js

const Nuxt = require(‘nuxt')const nuxt = new Nuxt(options)

nuxt.build().then(() => { // nuxt.renderRoute(‘/‘)})

Express Middlewareapp.use(nuxt.render)

server.jsconst Nuxt = require(‘nuxt’)const app = require(‘express’)()

new Nuxt(options).then((nuxt) => { app.use(nuxt.render) app.listen(3000)})

Server Deployment

package.json{ “dependencies": { “nuxt”: "latest" }, “scripts”: { “dev”: “nuxt”, “build”: “nuxt build”, “start”: “nuxt start" }}

Serverless Deploymentnuxt generate

pages/index.vue —> /index.html

pages/about.vue —> /about/index.html

nuxtjs.org

Chopin brothers

Made with nuxt.js