Merge remote-tracking branch 'upstream/dev' into dev

.circleci/config.yml

@@ -0,0 +1,45 @@
+version: 2
+jobs:
+  build:
+    working_directory: /usr/src/app
+    docker:
+      - image: banian/node-headless-chrome
+    steps:
+      # Checkout repository
+      - checkout
+
+      # Restore cache
+      - restore_cache:
+          key: yarn-{{ checksum "yarn.lock" }}
+
+      # Install dependencies
+      - run:
+          name: Install Dependencies
+          command: NODE_ENV=dev yarn
+
+      # Keep cache
+      - save_cache:
+          key: yarn-{{ checksum "yarn.lock" }}
+          paths:
+            - "node_modules"
+
+      # Build
+      - run:
+          name: Build
+          command: |
+            yarn build
+
+      # Test
+      - run:
+          name: Tests
+          command: yarn test && yarn coverage
+
+      # Release next
+      - run:
+          name: Publish nuxt-next
+          command: |
+            if [ "${CIRCLE_BRANCH}" == "dev" ]; then
+              echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
+              echo "//registry.yarnpkg.com/:_authToken=$NPM_TOKEN" >> ~/.npmrc
+              npm run release-next
+            fi

.eslintignore

@@ -0,0 +1,4 @@
+app
+node_modules
+dist
+.nuxt

.eslintrc.js

@@ -22,7 +22,14 @@ module.exports = {
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
     // do not allow console.logs etc...
-    'no-console': 2
+    'no-console': 2,
+    'space-before-function-paren': [
+			2,
+			{
+				anonymous: 'always',
+				named: 'never'
+			}
+		],
   },
   globals: {}
 }

.gitignore

@@ -1,18 +1,21 @@
-# dependencies
+# Dependencies
 node_modules
 examples/**/*/yarn.lock
+jspm_packages
+package-lock.json
 
-# logs
+# Logs
 *.log
+npm-debug.log*
 
-# other
+# Other
 .nuxt
 .cache
 
 # Dist folder
 dist
 
-# dist example generation
+# Dist example generation
 examples/**/dist
 
 # Coverage support
@@ -25,5 +28,23 @@ coverage
 *.iml
 .idea
 
-# Macos
-.DS_Store
+# OSX
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.yarnpkg.com

.travis.yml

@@ -2,6 +2,10 @@ language: node_js
 node_js:
   - "8"
   - "6"
+cache:
+  yarn: true
+  directories:
+    - node_modules
 install:
   - yarn install
   - yarn run build

CODE_OF_CONDUCT.md

@@ -0,0 +1,46 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at team@nuxtjs.org. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

CONTRIBUTING.md

@@ -0,0 +1,10 @@
+# Contributing to Nuxt.js
+
+1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+2. Install the dependencies: `npm install`.
+3. Run `npm link` to link the local repo to NPM.
+4. Run `npm run build` to build or `npm run watch` to build and watch for code changes.
+5. Then npm link this repo inside any example app with `npm link nuxt`.
+6. Then you can run your example app with the local version of Nuxt.js (You may need to re-run the example app as you change server side code in the Nuxt.js repository).
+
+Make sure to add tests into `test/` directory and try them with `npm test` before making a pull request.

README.md

@@ -2,7 +2,7 @@
 <p align="center">
   <a href="https://travis-ci.org/nuxt/nuxt.js"><img src="https://img.shields.io/travis/nuxt/nuxt.js/master.svg" alt="Build Status"></a>
   <a href="https://ci.appveyor.com/project/Atinux/nuxt-js"><img src="https://ci.appveyor.com/api/projects/status/gwab06obc6srx9g4?svg=true" alt="Windows Build Status"></a>
-  <a href="https://codecov.io/gh/nuxt/nuxt.js"><img src="https://img.shields.io/codecov/c/github/nuxt/nuxt.js/master.svg" alt="Coverage Status"></a>
+  <a href="https://codecov.io/gh/nuxt/nuxt.js"><img src="https://img.shields.io/codecov/c/github/nuxt/nuxt.js/dev.svg" alt="Coverage Status"></a>
   <a href="https://www.npmjs.com/package/nuxt"><img src="https://img.shields.io/npm/dm/nuxt.svg" alt="Downloads"></a>
   <a href="https://www.npmjs.com/package/nuxt"><img src="https://img.shields.io/npm/v/nuxt.svg" alt="Version"></a>
   <a href="https://www.npmjs.com/package/nuxt"><img src="https://img.shields.io/npm/l/nuxt.svg" alt="License"></a>
@@ -251,4 +251,7 @@ Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`.
 
 ## Roadmap
 
-https://github.com/nuxt/nuxt.js/projects/1
+https://trello.com/b/lgy93IOl/nuxtjs-10
+
+## Contributing
+Please see our [CONTRIBUTING.md](./CONTRIBUTING.md)

appveyor.yml

@@ -4,6 +4,10 @@ environment:
     - nodejs_version: "6"
     - nodejs_version: "8"
 
+cache:
+  - "%LOCALAPPDATA%\\Yarn"
+  - node_modules
+
 # Install scripts. (runs after repo cloning)
 install:
   # Get the latest stable version of Node.js or io.js

benchmarks/README.md

@@ -0,0 +1,29 @@
+# Nuxt.js server-side benchmarks
+
+> Taken from [Next.js benchmarks](https://github.com/zeit/next.js/tree/master/bench), if you like React, we recommend you to try [Next.js](https://github.com/zeit/next.js).
+
+## Installation
+
+Follow the steps in [CONTRIBUTING.md](../CONTRIBUTING.md).
+
+Both benchmarks use `ab`. So make sure you have it installed.
+
+## Usage
+
+Before running the test:
+
+```
+npm run start
+```
+
+Then run one of these tests:
+
+- Stateless application which renders `<h1>My component!</h1>`. Runs 3000 http requests.
+```
+npm run bench:stateless
+```
+
+- Stateless application which renders `<li>This is row {i}</li>` 10.000 times. Runs 500 http requests.
+```
+npm run bench:stateless-big
+```

benchmarks/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "nuxt-benchmarks",
+  "scripts": {
+    "build": "nuxt build",
+    "start": "npm run build && nuxt start",
+    "bench:stateless": "ab -c1 -n3000 http://127.0.0.1:3000/stateless",
+    "bench:stateless-big": "ab -c1 -n500 http://127.0.0.1:3000/stateless-big"
+  }
+}

benchmarks/pages/stateless-big.vue

@@ -0,0 +1,5 @@
+<template>
+	<ul>
+		<li v-for="n in 10000" :key="n">This is row {{ n + 1 }}</li>
+	</ul>
+</template>

benchmarks/pages/stateless.vue

@@ -0,0 +1,3 @@
+<template>
+	<h1>My component!</h1>
+</template>

bin/nuxt-build

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+/* eslint-disable no-console */
 
 // Show logs
 process.env.DEBUG = process.env.DEBUG || 'nuxt:*'
@@ -75,16 +76,47 @@ if (options.mode !== 'spa') {
   builder.build()
     .then(() => debug('Building done'))
     .catch((err) => {
-      console.error(err) // eslint-disable-line no-console
+      console.error(err)
       process.exit(1)
     })
 } else {
+  const s = Date.now()
+
+  nuxt.hook('generate:distRemoved', function () {
+    debug('Destination folder cleaned')
+  })
+
+  nuxt.hook('generate:distCopied', function () {
+    debug('Static & build files copied')
+  })
+
+  nuxt.hook('generate:page', function (page) {
+    debug('Generate file: ' + page.path)
+  })
+
+  nuxt.hook('generate:done', function (generator, errors) {
+    const duration = Math.round((Date.now() - s) / 100) / 10
+
+    debug(`HTML Files generated in ${duration}s`)
+
+    if (errors.length) {
+      const report = errors.map(({ type, route, error }) => {
+        /* istanbul ignore if */
+        if (type === 'unhandled') {
+          return `Route: '${route}'\n${error.stack}`
+        } else {
+          return `Route: '${route}' thrown an error: \n` + JSON.stringify(error)
+        }
+      })
+      console.error('==== Error report ==== \n' + report.join('\n\n')) // eslint-disable-line no-console
+    }
+  })
+
   // Disable minify to get exact results of nuxt start
   nuxt.options.generate.minify = false
   // Generate on spa mode
   new Generator(nuxt, builder).generate({ build: true }).then(() => {
     if (!nuxt.options.dev) {
-      // eslint-disable-next-line no-console
       console.log(`✓ You can now directly upload ${nuxt.options.generate.dir}/ or start server using "nuxt start"`)
     }
   })

bin/nuxt-dev

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+/* eslint-disable no-console */
 
 // Show logs
 process.env.DEBUG = process.env.DEBUG || 'nuxt:*'
@@ -10,7 +11,9 @@ const fs = require('fs')
 const parseArgs = require('minimist')
 const { Nuxt, Builder } = require('../')
 const chokidar = require('chokidar')
-const resolve = require('path').resolve
+const path = require('path')
+const resolve = path.resolve
+const pkg = require(path.join('..', 'package.json'))
 
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
@@ -19,15 +22,21 @@ const argv = parseArgs(process.argv.slice(2), {
     p: 'port',
     c: 'config-file',
     s: 'spa',
-    u: 'universal'
+    u: 'universal',
+    v: 'version'
   },
-  boolean: ['h', 's', 'u'],
+  boolean: ['h', 's', 'u', 'v'],
   string: ['H', 'c'],
   default: {
     c: 'nuxt.config.js'
   }
 })
 
+if (argv.version) {
+  console.log(pkg.version)
+  process.exit(0)
+}
+
 if (argv.hostname === '') {
   console.error(`> Provided hostname argument has no value`)
   process.exit(1)
@@ -60,42 +69,70 @@ _.defaultsDeep(nuxtConfig, { watchers: { chokidar: { ignoreInitial: true } } })
 
 // Start dev
 let dev = startDev()
+let needToRestart = false
 
 // Start watching for nuxt.config.js changes
 chokidar
   .watch(nuxtConfigFile, nuxtConfig.watchers.chokidar)
-  .on('all', _.debounce(() => {
+  .on('all', () => {
     debug('[nuxt.config.js] changed')
-    debug('Rebuilding the app...')
-    dev = dev.then(startDev)
-  }), 2500)
+    needToRestart = true
 
-function startDev (oldNuxt) {
+    dev = dev.then((instance) => {
+      if (needToRestart === false) return instance
+      needToRestart = false
+
+      debug('Rebuilding the app...')
+      return startDev(instance)
+    })
+  })
+
+function startDev(oldInstance) {
   // Get latest environment variables
   const port = argv.port || process.env.PORT || process.env.npm_package_config_nuxt_port
   const host = argv.hostname || process.env.HOST || process.env.npm_package_config_nuxt_host
 
+  // Error handler
+  const onError = (err, instance) => {
+    debug('Error while reloading [nuxt.config.js]', err)
+    return Promise.resolve(instance) // Wait for next reload
+  }
+
   // Load options
   let options = {}
   try {
     options = loadNuxtConfig()
   } catch (err) {
-    console.error(err)
-    return // Wait for next reload
+    return onError(err, oldInstance)
   }
 
   // Create nuxt and builder instance
-  const nuxt = new Nuxt(options)
-  const builder = new Builder(nuxt)
+  let nuxt
+  let builder
+  let instance
+  try {
+    nuxt = new Nuxt(options)
+    builder = new Builder(nuxt)
+    instance = { nuxt: nuxt, builder: builder }
+  } catch (err) {
+    return onError(err, instance || oldInstance)
+  }
 
   return Promise.resolve()
-    .then(() => builder.build()) // 1- Start build
-    .then(() => oldNuxt ? oldNuxt.close() : Promise.resolve()) // 2- Close old nuxt after successful build
-    .then(() => nuxt.listen(port, host)) // 3- Start listening
-    .then(() => nuxt) // 4- Pass new nuxt to watch chain
+    .then(() => oldInstance && oldInstance.builder ? oldInstance.builder.unwatch() : Promise.resolve())
+    // Start build
+    .then(() => builder.build())
+    // Close old nuxt after successful build
+    .then(() => oldInstance && oldInstance.nuxt ? oldInstance.nuxt.close() : Promise.resolve())
+    // Start listening
+    .then(() => nuxt.listen(port, host))
+    // Pass new nuxt to watch chain
+    .then(() => instance)
+    // Handle errors
+    .catch((err) => onError(err, instance))
 }
 
-function loadNuxtConfig () {
+function loadNuxtConfig() {
   let options = {}
 
   if (fs.existsSync(nuxtConfigFile)) {

bin/nuxt-generate

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+/* eslint-disable no-console */
 
 // Show logs
 process.env.DEBUG = process.env.DEBUG || 'nuxt:*'
@@ -17,10 +18,11 @@ const argv = parseArgs(process.argv.slice(2), {
     s: 'spa',
     u: 'universal'
   },
-  boolean: ['h', 's', 'u'],
+  boolean: ['h', 's', 'u', 'build'],
   string: ['c'],
   default: {
-    c: 'nuxt.config.js'
+    c: 'nuxt.config.js',
+    build: true
   }
 })
 
@@ -36,6 +38,7 @@ if (argv.help) {
       --universal        Launch in Universal mode (default)
       --config-file, -c  Path to Nuxt.js config file (default: nuxt.config.js)
       --help, -h         Displays this message
+      --no-build         Just run generate for faster builds when just dynamic routes changed. Nuxt build is needed before this command.
   `)
   process.exit(0)
 }
@@ -62,12 +65,50 @@ debug('Generating...')
 const nuxt = new Nuxt(options)
 const builder = new Builder(nuxt)
 const generator = new Generator(nuxt, builder)
-generator.generate()
+
+const generateOptions = {
+  init: true,
+  build: argv['build']
+}
+
+const s = Date.now()
+
+nuxt.hook('generate:distRemoved', function () {
+  debug('Destination folder cleaned')
+})
+
+nuxt.hook('generate:distCopied', function () {
+  debug('Static & build files copied')
+})
+
+nuxt.hook('generate:page', function (page) {
+  debug('Generate file: ' + page.path)
+})
+
+nuxt.hook('generate:done', function (generator, errors) {
+  const duration = Math.round((Date.now() - s) / 100) / 10
+
+  debug(`HTML Files generated in ${duration}s`)
+
+  if (errors.length) {
+    const report = errors.map(({ type, route, error }) => {
+      /* istanbul ignore if */
+      if (type === 'unhandled') {
+        return `Route: '${route}'\n${error.stack}`
+      } else {
+        return `Route: '${route}' thrown an error: \n` + JSON.stringify(error)
+      }
+    })
+    console.error('==== Error report ==== \n' + report.join('\n\n')) // eslint-disable-line no-console
+  }
+})
+
+generator.generate(generateOptions)
   .then(() => {
     debug('Generate done')
     process.exit(0)
   })
   .catch((err) => {
-    console.error(err) // eslint-disable-line no-console
+    console.error(err)
     process.exit(1)
   })

bin/nuxt-start

@@ -1,9 +1,10 @@
 #!/usr/bin/env node
+/* eslint-disable no-console */
 
 const fs = require('fs')
 const parseArgs = require('minimist')
 const { Nuxt } = require('../')
-const { join, resolve } = require('path')
+const { resolve } = require('path')
 
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
@@ -71,7 +72,7 @@ const nuxt = new Nuxt(options)
 // Check if project is built for production
 const distDir = resolve(nuxt.options.rootDir, nuxt.options.buildDir || '.nuxt', 'dist')
 if (!fs.existsSync(distDir)) {
-  console.error('> No build files found, please run `nuxt build` before launching `nuxt start`') // eslint-disable-line no-console
+  console.error('> No build files found, please run `nuxt build` before launching `nuxt start`')
   process.exit(1)
 }
 
@@ -79,7 +80,6 @@ if (!fs.existsSync(distDir)) {
 if (nuxt.options.render.ssr === true) {
   const ssrBundlePath = resolve(distDir, 'server-bundle.json')
   if (!fs.existsSync(ssrBundlePath)) {
-    // eslint-disable-next-line no-console
     console.error('> No SSR build! Please start with `nuxt start --spa` or build using `nuxt build --universal`')
     process.exit(1)
   }

build/release-next.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+const { readFileSync, writeFileSync } = require('fs-extra')
+const { resolve } = require('path')
+const { spawnSync } = require('child_process')
+
+// paths
+const packagePath = resolve(__dirname, '..', 'package.json')
+
+// Read original contents of package.json
+const originalPackage = readFileSync(packagePath, 'utf-8')
+
+// Write to backup file
+// writeFileSync(packagePath + '.backup', originalPackage)
+
+// Parse package.json
+const p = JSON.parse(originalPackage)
+
+// Change package name
+// p.name = 'nuxt-next'
+
+// Get latest git commit id
+const gitCommit = String(spawnSync('git', 'rev-parse --short HEAD'.split(' ')).stdout).trim()
+
+// Version with latest git commit id
+p.version = p.version.split('-')[0] + '-gh-' + gitCommit
+
+// Write package.json
+writeFileSync(packagePath, JSON.stringify(p, null, 2) + '\r\n')
+
+// Log
+console.log(p.name + '@' + p.version) // eslint-disable-line no-console

build/rollup.config.js

@@ -40,32 +40,35 @@ const aliases = {
 const builds = {
   nuxt: {
     entry: resolve(libDir, 'index.js'),
-    dest: resolve(distDir, 'nuxt.js')
+    file: resolve(distDir, 'nuxt.js')
   },
   core: {
     entry: resolve(libDir, 'core/index.js'),
-    dest: resolve(distDir, 'core.js'),
+    file: resolve(distDir, 'core.js')
   }
 }
 
 // -----------------------------
 // Default config
 // -----------------------------
-function genConfig (opts) {
+function genConfig(opts) {
   const config = {
-    entry: opts.entry,
-    dest: opts.dest,
-    external: ['fs', 'path', 'http', 'module', 'vue-server-renderer/server-plugin', 'vue-server-renderer/client-plugin'].concat(dependencies, opts.external),
-    format: opts.format || 'cjs',
+    input: opts.entry,
+    output: {
+      file: opts.file,
+      format: 'cjs',
+      sourcemap: true
+    },
+    external: ['fs', 'path', 'http', 'module', 'vue-server-renderer/server-plugin', 'vue-server-renderer/client-plugin']
+      .concat(dependencies, opts.external),
     banner: opts.banner || banner,
-    moduleName: opts.moduleName || 'Nuxt',
-    sourceMap: true,
+    name: opts.modulename || 'Nuxt',
     plugins: [
       rollupAlias(Object.assign({
         resolve: ['.js', '.json', '.jsx', '.ts']
       }, aliases, opts.alias)),
 
-      rollupNodeResolve({ main: true, jsnext: true }),
+      rollupNodeResolve({ preferBuiltins: true }),
 
       rollupCommonJS(),
 
@@ -74,10 +77,16 @@ function genConfig (opts) {
         plugins: [
           ['transform-runtime', { 'helpers': false, 'polyfill': false }],
           'transform-async-to-generator',
-          'array-includes'
+          'array-includes',
+          'external-helpers'
         ],
         presets: [
-          'babel-preset-es2015-rollup'
+          ['env', {
+            targets: {
+              node: '6.11.0'
+            },
+            modules: false
+          }]
         ],
         'env': {
           'test': {
@@ -86,9 +95,7 @@ function genConfig (opts) {
         }
       }, opts.babel)),
 
-      rollupReplace({
-        __VERSION__: version
-      })
+      rollupReplace({ __VERSION__: version })
     ].concat(opts.plugins || [])
   }
 

build/start.js

@@ -3,7 +3,7 @@
 const now = Date.now()
 
 const { readFileSync, readJSONSync, writeFileSync, copySync, removeSync } = require('fs-extra')
-const { resolve, relative } = require('path')
+const { resolve } = require('path')
 
 // Dirs
 const rootDir = resolve(__dirname, '..')
@@ -15,7 +15,8 @@ const packageJSON = readJSONSync(resolve(rootDir, 'package.json'))
 // Required and Excluded packages for start
 let requires = [
   'source-map-support',
-  'pretty-error'
+  'pretty-error',
+  'minimist'
 ]
 
 const excludes = [
@@ -41,6 +42,7 @@ requires = requires.filter(r => excludes.indexOf(r) === -1)
 let dependencies = {}
 requires.forEach(r => {
   if (!packageJSON.dependencies[r]) {
+    // eslint-disable-next-line no-console
     console.warn('Cannot resolve dependency version for ' + r)
     return
   }
@@ -103,5 +105,5 @@ writeFileSync(startIndexjs, String(readFileSync(startIndexjs)).replace('./dist/n
 const binStart = resolve(startDir, 'bin/nuxt-start')
 writeFileSync(binStart, String(readFileSync(binStart)).replace(/nuxt start/g, 'nuxt-start'))
 
-const ms = Date.now() - now
-console.log(`Generated ${packageJSON.name}@${packageJSON.version} in ${ms}ms`)
+// eslint-disable-next-line no-console
+console.log(`Generated ${packageJSON.name}@${packageJSON.version} in ${Date.now() - now}ms`)

examples/async-component-injection/pages/_slug.vue

@@ -12,7 +12,7 @@ const getPost = (slug) => ({
 })
 
 export default {
-  beforeCreate () {
+  beforeCreate() {
     this.component = () => getPost(this.$route.params.slug)
   }
 }

examples/async-data/nuxt.config.js

@@ -12,7 +12,7 @@ module.exports = {
   },
   generate: {
     routes: [
-      '/posts/1',
+      '/posts/1'
     ]
   }
 }

examples/async-data/pages/posts/_id.vue

@@ -11,12 +11,12 @@
 import axios from 'axios'
 
 export default {
-  async asyncData ({ params }) {
+  async asyncData({ params }) {
     // We can use async/await ES6 feature
     let { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
     return { post: data }
   },
-  head () {
+  head() {
     return {
       title: this.post.title
     }

examples/async-data/pages/posts/index.vue

@@ -3,7 +3,7 @@
   <div class="container">
     <h1>Blog</h1>
     <ul>
-      <li v-for="post in posts">
+      <li v-for="(post, index) in posts" :key="index">
         <nuxt-link :to="{ name: 'posts-id', params: { id: post.id } }">{{ post.title }}</nuxt-link>
       </li>
     </ul>
@@ -15,7 +15,7 @@
 import axios from 'axios'
 
 export default {
-  asyncData ({ req, params }) {
+  asyncData({ req, params }) {
     // We can return a Promise instead of calling the callback
     return axios.get('https://jsonplaceholder.typicode.com/posts')
       .then((res) => {

examples/auth-routes/pages/index.vue

@@ -20,7 +20,7 @@
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       formError: null,
       formUsername: '',
@@ -28,7 +28,7 @@ export default {
     }
   },
   methods: {
-    async login () {
+    async login() {
       try {
         await this.$store.dispatch('login', {
           username: this.formUsername,
@@ -37,11 +37,11 @@ export default {
         this.formUsername = ''
         this.formPassword = ''
         this.formError = null
-      } catch(e) {
+      } catch (e) {
         this.formError = e.message
       }
     },
-    async logout () {
+    async logout() {
       try {
         await this.$store.dispatch('logout')
       } catch (e) {

examples/auth-routes/store/index.js

@@ -12,12 +12,12 @@ export const mutations = {
 
 export const actions = {
   // nuxtServerInit is called by Nuxt.js before server-rendering every page
-  nuxtServerInit ({ commit }, { req }) {
+  nuxtServerInit({ commit }, { req }) {
     if (req.session && req.session.authUser) {
       commit('SET_USER', req.session.authUser)
     }
   },
-  async login ({ commit }, { username, password }) {
+  async login({ commit }, { username, password }) {
     try {
       const { data } = await axios.post('/api/login', { username, password })
       commit('SET_USER', data)
@@ -29,7 +29,7 @@ export const actions = {
     }
   },
 
-  async logout ({ commit }) {
+  async logout({ commit }) {
     await axios.post('/api/logout')
     commit('SET_USER', null)
   }

examples/axios/README.md

@@ -0,0 +1,32 @@
+# Axios Proxy Example
+
+## Install
+
+```bash
+$ yarn add @nuxtjs/axios @nuxtjs/proxy
+```
+
+## Nuxt.config.js
+
+```json
+{
+  modules: [
+    '@nuxtjs/axios',
+    '@nuxtjs/proxy'
+  ],
+  proxy: [
+    ['/api/dog', { target: 'https://dog.ceo/', pathRewrite: { '^/api/dog': '/api/breeds/image/random' } }]
+  ]
+}
+```
+
+### Use Axios
+
+```js
+async asyncData({ app }) {
+  const ip = await app.$axios.$get('http://icanhazip.com')
+  return { ip }
+}
+```
+
+More detail, please refer [axios-module](https://github.com/nuxt-community/axios-module).

examples/axios/nuxt.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  modules: [
+    '@nuxtjs/axios',
+    '@nuxtjs/proxy'
+  ],
+  proxy: [
+    ['/api/dog', { target: 'https://dog.ceo/', pathRewrite: { '^/api/dog': '/api/breeds/image/random' } }]
+  ]
+}

examples/axios/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "nuxt-proxy",
+  "version": "1.0.0",
+  "dependencies": {
+    "@nuxtjs/axios": "^4.4.0",
+    "@nuxtjs/proxy": "^1.1.2",
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  }
+}

examples/axios/pages/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>Dog</h1>
+    <img :src="dog" />
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  async asyncData({ app }) {
+    const { data: { message: dog } } = await app.$axios.get('/dog')
+    return { dog }
+  }
+}
+</script>

examples/cached-components/pages/index.vue

@@ -9,11 +9,11 @@
 <script>
 export default {
   name: 'date',
-  serverCacheKey () {
+  serverCacheKey() {
     // Will change every 10 secondes
     return Math.floor(Date.now() / 10000)
   },
-  data () {
+  data() {
     return { date: Date.now() }
   }
 }

examples/custom-build/nuxt.config.js

@@ -7,9 +7,9 @@ module.exports = {
       app: 'app.[chunkhash].js' // default: nuxt.bundle.[chunkhash].js
     },
     vendor: ['lodash'],
-    extend (config, { dev }) {
-      if (dev) {
-        config.devtool = (dev ? 'eval-source-map' : false)
+    extend(config, { isDev }) {
+      if (isDev) {
+        config.devtool = 'eval-source-map'
       }
       const urlLoader = config.module.rules.find((loader) => loader.loader === 'url-loader')
       // Increase limit to 100KO

examples/custom-layouts/pages/about.vue

@@ -8,7 +8,7 @@
 <script>
 export default {
   layout: 'dark',
-  asyncData ({ req }) {
+  asyncData({ req }) {
     return {
       name: req ? 'server' : 'client'
     }

examples/custom-loading/components/loading.vue

@@ -10,10 +10,10 @@ export default {
     loading: false
   }),
   methods: {
-    start () {
+    start() {
       this.loading = true
     },
-    finish () {
+    finish() {
       this.loading = false
     }
   }

examples/custom-loading/pages/about.vue

@@ -7,7 +7,7 @@
 
 <script>
 export default {
-  asyncData () {
+  asyncData() {
     return new Promise((resolve) => {
       setTimeout(function () {
         resolve({})

examples/custom-loading/pages/index.vue

@@ -7,7 +7,7 @@
 
 <script>
 export default {
-  asyncData () {
+  asyncData() {
     return new Promise((resolve) => {
       setTimeout(function () {
         resolve({ name: 'world' })

examples/custom-routes/pages/index.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <h2>Users</h2>
     <ul class="users">
-      <li v-for="user in users">
+      <li v-for="user in users" :key="user.id">
         <nuxt-link :to="'/users/'+user.id">{{ user.name }}</nuxt-link>
       </li>
     </ul>
@@ -13,7 +13,7 @@
 import axios from 'axios'
 
 export default {
-  async asyncData () {
+  async asyncData() {
     const { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
     return { users: data }
   }

examples/custom-routes/pages/users/_id.vue

@@ -11,10 +11,10 @@
 import axios from 'axios'
 
 export default {
-  validate ({ params }) {
+  validate({ params }) {
     return !isNaN(+params.id)
   },
-  async asyncData ({ params, error }) {
+  async asyncData({ params, error }) {
     try {
       const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${+params.id}`)
       return data

examples/custom-server/package.json

@@ -2,7 +2,7 @@
   "name": "nuxt-custom-server",
   "dependencies": {
     "express": "^4.15.3",
-    "nuxt": "^1.0.0-rc3"
+    "nuxt": "latest"
   },
   "scripts": {
     "dev": "node server.js",

examples/custom-server/server.js

@@ -21,4 +21,3 @@ app.use(nuxt.render)
 
 // Start express server
 app.listen(port, host)
-console.log('Server listening on ' + host + ':' + port)

examples/dynamic-components/README.md

@@ -1,5 +1,5 @@
 # Dynamic Components with Nuxt.js
 
-Demo: https://nuxt-chat.now.sh
+Demo: https://dynamic-components.nuxtjs.org/
 
 Video: https://www.youtube.com/watch?v=HzDea5-PFaw

examples/dynamic-components/components/chart.js

@@ -0,0 +1,12 @@
+let VueChart = import('vue-chartjs' /* webpackChunkName: "vue-chartjs" */)
+
+export default async () => {
+  VueChart = await VueChart
+
+  return VueChart.Bar.extend({
+    props: ['data'],
+    mounted() {
+      this.renderChart(this.data)
+    }
+  })
+}

examples/dynamic-components/components/image.vue

@@ -1,6 +1,8 @@
 <template>
+  <div>
     <img v-if="loaded" :src="data" alt="image" />
     <svg v-else width="60px" height="60px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><defs><filter id="uil-ring-shadow" x="-100%" y="-100%" width="300%" height="300%"><feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feOffset><feGaussianBlur result="blurOut" in="offOut" stdDeviation="0"></feGaussianBlur><feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend></filter></defs><path d="M10,50c0,0,0,0.5,0.1,1.4c0,0.5,0.1,1,0.2,1.7c0,0.3,0.1,0.7,0.1,1.1c0.1,0.4,0.1,0.8,0.2,1.2c0.2,0.8,0.3,1.8,0.5,2.8 c0.3,1,0.6,2.1,0.9,3.2c0.3,1.1,0.9,2.3,1.4,3.5c0.5,1.2,1.2,2.4,1.8,3.7c0.3,0.6,0.8,1.2,1.2,1.9c0.4,0.6,0.8,1.3,1.3,1.9 c1,1.2,1.9,2.6,3.1,3.7c2.2,2.5,5,4.7,7.9,6.7c3,2,6.5,3.4,10.1,4.6c3.6,1.1,7.5,1.5,11.2,1.6c4-0.1,7.7-0.6,11.3-1.6 c3.6-1.2,7-2.6,10-4.6c3-2,5.8-4.2,7.9-6.7c1.2-1.2,2.1-2.5,3.1-3.7c0.5-0.6,0.9-1.3,1.3-1.9c0.4-0.6,0.8-1.3,1.2-1.9 c0.6-1.3,1.3-2.5,1.8-3.7c0.5-1.2,1-2.4,1.4-3.5c0.3-1.1,0.6-2.2,0.9-3.2c0.2-1,0.4-1.9,0.5-2.8c0.1-0.4,0.1-0.8,0.2-1.2 c0-0.4,0.1-0.7,0.1-1.1c0.1-0.7,0.1-1.2,0.2-1.7C90,50.5,90,50,90,50s0,0.5,0,1.4c0,0.5,0,1,0,1.7c0,0.3,0,0.7,0,1.1 c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.9-0.2,1.8-0.4,2.8c-0.2,1-0.5,2.1-0.7,3.3c-0.3,1.2-0.8,2.4-1.2,3.7c-0.2,0.7-0.5,1.3-0.8,1.9 c-0.3,0.7-0.6,1.3-0.9,2c-0.3,0.7-0.7,1.3-1.1,2c-0.4,0.7-0.7,1.4-1.2,2c-1,1.3-1.9,2.7-3.1,4c-2.2,2.7-5,5-8.1,7.1 c-0.8,0.5-1.6,1-2.4,1.5c-0.8,0.5-1.7,0.9-2.6,1.3L66,87.7l-1.4,0.5c-0.9,0.3-1.8,0.7-2.8,1c-3.8,1.1-7.9,1.7-11.8,1.8L47,90.8 c-1,0-2-0.2-3-0.3l-1.5-0.2l-0.7-0.1L41.1,90c-1-0.3-1.9-0.5-2.9-0.7c-0.9-0.3-1.9-0.7-2.8-1L34,87.7l-1.3-0.6 c-0.9-0.4-1.8-0.8-2.6-1.3c-0.8-0.5-1.6-1-2.4-1.5c-3.1-2.1-5.9-4.5-8.1-7.1c-1.2-1.2-2.1-2.7-3.1-4c-0.5-0.6-0.8-1.4-1.2-2 c-0.4-0.7-0.8-1.3-1.1-2c-0.3-0.7-0.6-1.3-0.9-2c-0.3-0.7-0.6-1.3-0.8-1.9c-0.4-1.3-0.9-2.5-1.2-3.7c-0.3-1.2-0.5-2.3-0.7-3.3 c-0.2-1-0.3-2-0.4-2.8c-0.1-0.4-0.1-0.8-0.1-1.2c0-0.4,0-0.7,0-1.1c0-0.7,0-1.2,0-1.7C10,50.5,10,50,10,50z" fill="#59ebff" filter="url(#uil-ring-shadow)"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" dur="1s"></animateTransform></path></svg>
+  </div>
 </template>
 
 <script>
@@ -11,12 +13,12 @@ export default {
   data: () => ({
     loaded: false
   }),
-  beforeMount () {
+  beforeMount() {
     // Preload image
     const img = new Image()
     img.onload = () => {
       this.loaded = true
-    };
+    }
     img.src = this.data
   }
 }

examples/dynamic-components/js/messages.js

@@ -1,16 +1,27 @@
-const messages = [
+export const messages = [
   { component: 'vText', data: 'Welcome to the <b>Dynamic Component</b> demo!' },
-  { component: 'vText', data: 'Look at this nice picture:' },
   { component: 'vImage', data: 'https://placeimg.com/350/200/animals' },
-  { component: 'vText', data: 'If you prefer, look at this code component:' },
   { component: 'vCode', data: 'var a = 1;\nvar b = 2;\nb = a;' },
-  { component: 'vText', data: 'End of demo 🎉' },
+  {
+    component: 'vChart',
+    data: {
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      datasets: [
+        {
+          label: 'Activity',
+          backgroundColor: '#41b883',
+          data: [40, 20, 12, 39, 10, 40, 39, 50, 40, 20, 12, 11]
+        }
+      ]
+    }
+  },
+  { component: 'vText', data: 'End of demo 🎉' }
 ]
 
-function streamMessages (fn, i = 0) {
+async function streamMessages(fn, i = 0) {
   if (i >= messages.length) return
-  fn(messages[i])
-  setTimeout(() => streamMessages(fn, i + 1), 2000)
+  await fn(messages[i])
+  setTimeout(() => streamMessages(fn, i + 1), 1500)
 }
 
 export default streamMessages

examples/dynamic-components/package.json

@@ -1,11 +1,14 @@
 {
   "name": "dynamic-components-nuxt",
   "dependencies": {
-    "nuxt": "1.0.0-rc3"
+    "chart.js": "^2.7.0",
+    "nuxt": "latest",
+    "vue-chartjs": "^2.8.7"
   },
   "scripts": {
     "dev": "nuxt",
     "build": "nuxt build",
-    "start": "nuxt"
+    "start": "nuxt start",
+    "generate": "nuxt generate"
   }
 }

examples/dynamic-components/pages/index.vue

@@ -13,19 +13,20 @@
 import streamMessages from '@/js/messages.js'
 // Dynamic components
 const components = {
-  vText: () => import('@/components/text.vue').then(m => m.default),
-  vImage: () => import('@/components/image.vue').then(m => m.default),
-  vCode: () => import('@/components/code.vue').then(m => m.default)
+  vText: () => import('@/components/text.vue' /* webpackChunkName: "components/text" */),
+  vImage: () => import('@/components/image.vue' /* webpackChunkName: "components/image" */),
+  vCode: () => import('@/components/code.vue' /* webpackChunkName: "components/code" */),
+  vChart: () => import('@/components/chart.js' /* webpackChunkName: "components/chart" */).then((m) => m.default())
 }
 
 export default {
   data: () => ({
     messages: []
   }),
-  mounted () {
-    // Listen to new messages
+  mounted() {
+    // Listen for incoming messages
     streamMessages(async (message) => {
-      // Make sure to wait for async chunk to be loaded before adding the message
+      // Wait for the component to load before displaying it
       await components[message.component]()
       // Add the message to the list
       this.messages.push(message)
@@ -44,7 +45,7 @@ ul {
   list-style: none;
   margin: 0;
   padding: 0;
-  with: 100%;
+  width: 100%;
   max-width: 300px;
   margin: auto;
 }

examples/dynamic-components/pages/ssr.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <h1>Nuxt Chat</h1>
+    <transition-group name="list" tag="ul">
+      <li v-for="(message, index) in messages" :key="index">
+        <component :is="message.component" :data="message.data"></component>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import { messages } from '@/js/messages.js'
+
+// Dynamic components
+const components = {
+  vText: () => import('@/components/text.vue' /* webpackChunkName: "components/text" */),
+  vImage: () => import('@/components/image.vue' /* webpackChunkName: "components/image" */),
+  vCode: () => import('@/components/code.vue' /* webpackChunkName: "components/code" */),
+  vChart: () => import('@/components/chart.js' /* webpackChunkName: "components/chart" */).then((m) => m.default())
+}
+
+export default {
+  data: () => ({
+    messages
+  }),
+  components
+}
+</script>
+
+<style scoped>
+h1 {
+  text-align: center;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  with: 100%;
+  max-width: 300px;
+  margin: auto;
+}
+
+ul li {
+  display: block;
+  width: 100%;
+  border-radius: 20px;
+  margin-bottom: 5px;
+  font-family: Helvetica, Arial, sans-serif;
+  background: white;
+  border: 1px #ddd solid;
+  overflow: hidden;
+  opacity: 1;
+}
+.list-enter-active, .list-leave-active {
+  transition: all 0.4s;
+}
+.list-enter, .list-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+</style>

examples/dynamic-layouts/pages/about.vue

@@ -8,7 +8,7 @@
 <script>
 export default {
   layout: ({ isMobile }) => isMobile ? 'mobile' : 'default',
-  asyncData ({ req }) {
+  asyncData({ req }) {
     return {
       name: req ? 'server' : 'client'
     }

examples/dynamic-layouts/pages/index.vue

@@ -7,6 +7,6 @@
 
 <script>
 export default {
-  layout: ({ isMobile }) => isMobile ? 'mobile' : 'default',
+  layout: ({ isMobile }) => isMobile ? 'mobile' : 'default'
 }
 </script>

examples/global-css/css/main.css

@@ -1,3 +1,11 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../assets/roboto.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
+}
+
 body {
   background: #eee;
   text-align: center;
@@ -7,6 +15,7 @@ body {
   position: absolute;
   top: 0;
   left: 0;
+  font-family: 'Roboto';
 }
 .content {
   margin-top: 100px;

examples/global-css/nuxt.config.js

@@ -9,5 +9,12 @@ module.exports = {
   css: [
     'bulma/css/bulma.css',
     '~/css/main.css'
-  ]
+  ],
+  render: {
+    bundleRenderer: {
+      shouldPreload: (file, type) => {
+        return ['script', 'style', 'font'].includes(type)
+      }
+    }
+  }
 }

examples/global-css/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-global-css",
   "dependencies": {
-    "bulma": "^0.4.3",
+    "bulma": "^0.5.1",
     "nuxt": "latest"
   },
   "scripts": {

examples/head-elements/README.md

@@ -1,3 +0,0 @@
-# Updating headers with Nuxt.js
-
-https://nuxtjs.org/examples/seo-html-head

examples/hello-world-jsx/pages/about.vue

@@ -1,11 +1,11 @@
 <script>
 export default {
-  asyncData ({ req }) {
+  asyncData({ req }) {
     return {
       name: req ? 'server' : 'client'
     }
   },
-  render (h) {
+  render(h) {
     return <div>
       <p>Hi from {this.name}</p>
       <nuxt-link to="/">Home page</nuxt-link>

examples/hello-world-jsx/pages/index.js

@@ -1,5 +1,5 @@
 export default {
-  render (h) {
+  render(h) {
     return <div>
       <h1>Welcome !</h1>
       <nuxt-link to="/about">About page</nuxt-link>

examples/hello-world/pages/about.vue

@@ -7,9 +7,9 @@
 
 <script>
 export default {
-  asyncData ({ isStatic, isServer }) {
+  asyncData() {
     return {
-      name: isStatic ? 'static' : (isServer ? 'server' : 'client')
+      name: process.static ? 'static' : (process.server ? 'server' : 'client')
     }
   }
 }

examples/i18n/layouts/default.vue

@@ -26,7 +26,7 @@
 <script>
 export default {
   methods: {
-    path (url) {
+    path(url) {
       return (this.$i18n.locale === 'en' ? url : '/' + this.$i18n.locale + url)
     }
   }

examples/i18n/nuxt.config.js

@@ -6,7 +6,7 @@ module.exports = {
   router: {
     middleware: 'i18n'
   },
-  plugins: ['~/plugins/i18n.js',],
+  plugins: ['~/plugins/i18n.js'],
   generate: {
     routes: ['/', '/about', '/fr', '/fr/about']
   }

examples/i18n/package.json

@@ -2,7 +2,7 @@
   "name": "nuxt-i18n",
   "dependencies": {
     "nuxt": "latest",
-    "vue-i18n": "^7.0.5"
+    "vue-i18n": "^7.3.2"
   },
   "scripts": {
     "dev": "nuxt",

examples/i18n/pages/_lang/about.vue

@@ -9,7 +9,7 @@
 
 <script>
 export default {
-  head () {
+  head() {
     return { title: this.$t('about.title') }
   }
 }

examples/i18n/pages/_lang/index.vue

@@ -9,7 +9,7 @@
 
 <script>
 export default {
-  head () {
+  head() {
     return { title: this.$t('home.title') }
   }
 }

examples/i18n/store/index.js

@@ -4,7 +4,7 @@ export const state = () => ({
 })
 
 export const mutations = {
-  SET_LANG (state, locale) {
+  SET_LANG(state, locale) {
     if (state.locales.indexOf(locale) !== -1) {
       state.locale = locale
     }

examples/layout-transitions/README.md

@@ -0,0 +1,3 @@
+# Layout transitions with Nuxt.js
+
+https://nuxtjs.org/examples/layout-transitions

examples/layout-transitions/assets/main.css

@@ -0,0 +1,52 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
+.container {
+  text-align: center;
+  padding-top: 200px;
+  font-size: 20px;
+  transition: all .5s cubic-bezier(.55,0,.1,1);
+}
+
+.page-enter-active, .page-leave-active {
+  transition: opacity .5s
+}
+.page-enter, .page-leave-active {
+  opacity: 0
+}
+
+.layout-enter-active, .layout-leave-active {
+  transition: opacity 0.5s
+}
+.layout-enter, .layout-leave-active {
+  opacity: 0
+}
+
+.bounce-enter-active {
+  animation: bounce-in .5s;
+}
+.bounce-leave-active {
+  animation: bounce-out .5s;
+}
+@keyframes bounce-in {
+  0% { transform: scale(0) }
+  50% { transform: scale(1.5) }
+  100% { transform: scale(1) }
+}
+@keyframes bounce-out {
+  0% { transform: scale(1) }
+  50% { transform: scale(1.5) }
+  100% { transform: scale(0) }
+}
+
+.slide-left-enter,
+.slide-right-leave-active {
+  opacity: 0;
+  transform: translate(30px, 0);
+}
+.slide-left-leave-active,
+.slide-right-enter {
+  opacity: 0;
+  transform: translate(-30px, 0);
+}

examples/layout-transitions/layouts/secondary.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>Secondary Layout</h1>
+    <nuxt/>
+  </div>
+</template>

examples/layout-transitions/nuxt.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  build: {
+    vendor: ['axios']
+  },
+  css: ['~/assets/main.css'],
+  layoutTransition: {
+    name: 'layout',
+    mode: 'out-in'
+  }
+}

examples/layout-transitions/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "nuxt-layout-transitions",
+  "dependencies": {
+    "axios": "^0.15.3",
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  }
+}

examples/layout-transitions/pages/about.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="container">
+    <h1>About page</h1>
+    <nuxt-link to="/">Home page</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'secondary',
+  transition: 'bounce'
+}
+</script>

examples/layout-transitions/pages/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="container">
+    <h1>Home page</h1>
+    <p><nuxt-link to="/about">About page</nuxt-link></p>
+    <p><nuxt-link to="/users">Lists of users</nuxt-link></p>
+    <p><nuxt-link to="/users-2">Lists of users #2 (with `watch`)</nuxt-link></p>
+  </div>
+</template>

examples/layout-transitions/pages/users-2.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="container">
+    <nuxt-link v-if="page > 1" :to="'?page=' + (page - 1)">&lt; Prev</nuxt-link>
+    <a v-else class="disabled">&lt; Prev</a>
+    <span>{{ page }}/{{ totalPages }}</span>
+    <nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link>
+    <a v-else class="disabled">Next &gt;</a>
+    <transition mode="out-in" :name="transitionName">
+      <ul :key="page">
+        <li v-for="user in users" :key="user.id">
+          <img :src="user.avatar" class="avatar" />
+          <span>{{ user.first_name }} {{ user.last_name }}</span>
+        </li>
+      </ul>
+    </transition>
+    <p><nuxt-link to="/">Back home</nuxt-link></p>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  watch: {
+    '$route.query.page': async function (page) {
+      this.$nuxt.$loading.start()
+      const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
+      this.users = data.data
+      this.transitionName = this.getTransitionName(page)
+      this.page = +(page || 1)
+      this.totalPages = data.total_pages
+      this.$nuxt.$loading.finish()
+    }
+  },
+  async asyncData({ query }) {
+    const page = +(query.page || 1)
+    const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
+    return {
+      page,
+      totalPages: data.total_pages,
+      users: data.data
+    }
+  },
+  data() {
+    return {
+      transitionName: this.getTransitionName(this.page)
+    }
+  },
+  methods: {
+    getTransitionName(newPage) {
+      return newPage < this.page ? 'slide-right' : 'slide-left'
+    }
+  }
+}
+</script>
+
+<style scoped>
+a {
+  display: inline-block;
+  margin: 0 1em;
+  color: #34495e;
+  text-decoration: none;
+}
+a.disabled {
+  color: #ccc;
+}
+ul {
+  margin: auto;
+  padding: 0;
+  width: 100%;
+  max-width: 400px;
+  padding-top: 40px;
+  transition: all .5s cubic-bezier(.55,0,.1,1);
+}
+li {
+  list-style-type: none;
+  width: 400px;
+  border: 1px #ddd solid;
+  overflow: hidden;
+}
+li img {
+  float: left;
+  width: 100px;
+  height: 100px;
+}
+li span {
+  display: inline-block;
+  padding-top: 40px;
+  text-transform: uppercase;
+}
+</style>

examples/layout-transitions/pages/users.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="container">
+    <nuxt-link v-if="page > 1" :to="'?page=' + (page - 1)">&lt; Prev</nuxt-link>
+    <a v-else class="disabled">&lt; Prev</a>
+    <span>{{ page }}/{{ totalPages }}</span>
+    <nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link>
+    <a v-else class="disabled">Next &gt;</a>
+    <ul>
+      <li v-for="user in users" :key="user.id">
+        <img :src="user.avatar" class="avatar" />
+        <span>{{ user.first_name }} {{ user.last_name }}</span>
+      </li>
+    </ul>
+    <p><nuxt-link to="/">Back home</nuxt-link></p>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  // Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
+  watchQuery: ['page'],
+  // Key for <nuxt-child> (transitions)
+  key: (to) => to.fullPath,
+  // Called to know which transition to apply
+  transition(to, from) {
+    if (!from) return 'slide-left'
+    return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
+  },
+  async asyncData({ query }) {
+    const page = +(query.page || 1)
+    const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
+    return {
+      page,
+      totalPages: data.total_pages,
+      users: data.data
+    }
+  }
+}
+</script>
+
+<style scoped>
+a {
+  display: inline-block;
+  margin: 0 1em;
+  color: #34495e;
+  text-decoration: none;
+}
+a.disabled {
+  color: #ccc;
+}
+ul {
+  margin: auto;
+  padding: 0;
+  width: 100%;
+  max-width: 400px;
+  padding-top: 40px;
+}
+li {
+  list-style-type: none;
+  width: 400px;
+  border: 1px #ddd solid;
+  overflow: hidden;
+}
+li img {
+  float: left;
+  width: 100px;
+  height: 100px;
+}
+li span {
+  display: inline-block;
+  padding-top: 40px;
+  text-transform: uppercase;
+}
+</style>

examples/markdownit/README.md

@@ -0,0 +1,5 @@
+# Markdown Example
+
+> Convert Markdown file to HTML using markdown-it.
+
+**See [Markdownit Module](https://github.com/nuxt-community/modules/tree/master/packages/markdownit) for easy integration with [Nuxt.js](https://nuxtjs.org).**

examples/markdownit/nuxt.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  modules: [
+    '@nuxtjs/markdownit'
+  ],
+  plugins: [
+    '~/plugins/md-it'
+  ]
+}

examples/markdownit/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "nuxt-markdownit",
+  "version": "1.0.0",
+  "dependencies": {
+    "@nuxtjs/markdownit": "^1.1.2",
+    "nuxt": "latest",
+    "pug": "^2.0.0-rc.4"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  },
+  "devDependencies": {
+    "jstransformer-markdown-it": "^2.0.0"
+  }
+}

examples/markdownit/pages/about.vue

@@ -0,0 +1,6 @@
+<template lang="md">
+  # About Page!
+  Current route is: {{ $route.name }}
+
+  <nuxt-link to="/">Back home</nuxt-link>
+</template>

examples/markdownit/pages/index.vue

@@ -0,0 +1,21 @@
+<template lang="md">
+  # Hello World!
+
+  Current route is: {{ $route.path }}
+
+  Data model is: {{ model }}
+
+  <nuxt-link to="/about">Goto About</nuxt-link>
+
+  <nuxt-link to="/pug">Goto Pug</nuxt-link>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: 'I am index'
+    }
+  }
+}
+</script>

examples/markdownit/pages/pug.vue

@@ -0,0 +1,20 @@
+<template lang="pug">
+  div
+    h1 Pug Page
+    :markdown-it()
+      ## Current route is: {{ $route.name }}
+    div(v-html="$md.render(model)")
+
+    br
+    nuxt-link(to='/') Back Home
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: '## Title h2\n### title h3\n\nLong text Long text Long text Long text Long text Long text Long text Long text Long text \n\n* gimme a list item\n* and one more yeehaw'
+    }
+  }
+}
+</script>

examples/markdownit/plugins/md-it.js

@@ -0,0 +1,5 @@
+import MarkdownIt from 'markdown-it'
+
+export default ({ app }, inject) => {
+  inject('md', new MarkdownIt())
+}

examples/meta-info/README.md

@@ -0,0 +1,13 @@
+# Manage your app's meta information
+
+Nuxt.js uses [vue-meta](https://github.com/declandewet/vue-meta) to manage page meta info (such as: meta, title, link, style, script) of your application.
+
+## Example
+
+SEO: https://nuxtjs.org/examples/seo-html-head
+
+## Documentation
+
+Nuxt.js: https://nuxtjs.org/guide/views#html-head
+
+vue-meta: https://github.com/declandewet/vue-meta#table-of-contents

examples/meta-info/pages/index.vue

@@ -11,6 +11,12 @@ export default {
     title: 'Home page 🚀',
     meta: [
       { hid: 'description', name: 'description', content: 'Home page description' }
+    ],
+    script: [
+      { src: '/head.js' },
+      // Supported since 1.0
+      { src: '/body.js', body: true },
+      { src: '/defer.js', defer: '' }
     ]
   }
 }

examples/meta-info/static/about.js

@@ -0,0 +1 @@
+console.log('about.js loaded!') // eslint-disable-line no-console

examples/meta-info/static/body.js

@@ -0,0 +1 @@
+console.log('body.js loaded!') // eslint-disable-line no-console

examples/meta-info/static/defer.js

@@ -0,0 +1 @@
+console.log('defer.js loaded!') // eslint-disable-line no-console

examples/meta-info/static/head.js

@@ -0,0 +1 @@
+console.log('head.js loaded!') // eslint-disable-line no-console

examples/middleware/components/Visits.vue

@@ -1,18 +1,18 @@
 <template>
   <ul>
-    <li v-for="visit in visits"><i>{{ visit.date | hours }}</i> - {{ visit.path }}</li>
+    <li v-for="(visit, index) in visits" :key="index"><i>{{ visit.date | hours }}</i> - {{ visit.path }}</li>
   </ul>
 </template>
 
 <script>
 export default {
   computed: {
-    visits () {
+    visits() {
       return this.$store.state.visits.slice().reverse()
     }
   },
   filters: {
-    hours (date) {
+    hours(date) {
       return date.split('T')[1].split('.')[0]
     }
   }

examples/middleware/middleware/user-agent.js

@@ -1,3 +1,3 @@
 export default function (context) {
-  context.userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent
+  context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
 }

examples/middleware/pages/_slug.vue

@@ -4,14 +4,16 @@
     <pre>{{ userAgent }}</pre>
     <ul>
       <li><nuxt-link to="/">Home</nuxt-link></li>
-      <li v-for="slug in slugs"><nuxt-link :to="{ name: 'slug', params: { slug } }">{{ slug }}</nuxt-link></li>
+      <li v-for="(slug, index) in slugs" :key="index">
+        <nuxt-link :to="{ name: 'slug', params: { slug } }">{{ slug }}</nuxt-link>
+      </li>
     </ul>
   </div>
 </template>
 
 <script>
 export default {
-  asyncData ({ store, route, userAgent }) {
+  asyncData({ store, route, userAgent }) {
     return {
       userAgent,
       slugs: [

examples/middleware/store/index.js

@@ -3,7 +3,7 @@ export const state = () => ({
 })
 
 export const mutations = {
-  ADD_VISIT (state, path) {
+  ADD_VISIT(state, path) {
     state.visits.push({
       path,
       date: new Date().toJSON()

examples/nested-routes/pages/index.vue

@@ -3,7 +3,7 @@
     <div class="left">
       <h2><nuxt-link to="/">Players</nuxt-link></h2>
       <ul class="players">
-        <li v-for="user in users">
+        <li v-for="user in users" :key="user.id">
           <nuxt-link :to="'/'+user.id">{{ user.name }}</nuxt-link>
         </li>
       </ul>
@@ -16,7 +16,7 @@
 
 <script>
 export default {
-  asyncData ({ env }) {
+  asyncData({ env }) {
     return { users: env.users }
   }
 }

examples/nested-routes/pages/index/_id.vue

@@ -7,17 +7,17 @@
 
 <script>
 export default {
-  validate ({ params }) {
+  validate({ params }) {
     return !isNaN(+params.id)
   },
-  asyncData ({ params, env, error }) {
+  asyncData({ params, env, error }) {
     const user = env.users.find((user) => String(user.id) === params.id)
     if (!user) {
       return error({ message: 'User not found', statusCode: 404 })
     }
     return user
   },
-  head () {
+  head() {
     return {
       title: this.name
     }

examples/plugins-vendor/pages/about.vue

@@ -9,7 +9,7 @@
 import axios from 'axios'
 
 export default {
-  asyncData () {
+  asyncData() {
     const nb = Math.max(1, Math.round(Math.random() * 10))
     return axios.get(`https://jsonplaceholder.typicode.com/photos/${nb}`).then(res => res.data)
   }

examples/plugins-vendor/pages/index.vue

@@ -12,7 +12,7 @@ if (process.browser) {
 }
 
 export default {
-  mounted () {
+  mounted() {
     miniToastr.init()
   },
   notifications: {

examples/routes-transitions/pages/users.vue

@@ -6,7 +6,7 @@
     <nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link>
     <a v-else class="disabled">Next &gt;</a>
     <ul>
-      <li v-for="user in users">
+      <li v-for="user in users" :key="user.id">
         <img :src="user.avatar" class="avatar" />
         <span>{{ user.first_name }} {{ user.last_name }}</span>
       </li>
@@ -19,11 +19,11 @@
 import axios from 'axios'
 
 export default {
-  transition (to, from) {
+  transition(to, from) {
     if (!from) return 'slide-left'
     return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
   },
-  async asyncData ({ query }) {
+  async asyncData({ query }) {
     const page = +query.page || 1
     const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
     return {

examples/spa/nuxt.config.js

@@ -23,23 +23,19 @@ module.exports = {
   */
   css: ['~/assets/main.css'],
   /*
-  ** Cutomize loading indicator
+  ** Customize loading indicator
   */
   loadingIndicator: {
     /*
-    ** See https://github.com/nuxt/nuxt.js/tree/dev/lib/app/views/loading for available loading indicators
+    ** See https://nuxtjs.org/api/configuration-loading-indicator for available loading indicators
     ** You can add a custom indicator by giving a path
-    ** Default: 'circle'
     */
-    name: 'folding-cube',
+    // name: 'folding-cube',
     /*
     ** You can give custom options given to the template
     ** See https://github.com/nuxt/nuxt.js/blob/dev/lib/app/views/loading/folding-cube.html
-    ** Default:
-    ** - color: '#3B8070'
-    ** - background: 'white'
     */
-    color: '#222',
-    background: 'white'
+    // color: '#DBE1EC'
+    // background: 'white'
   }
 }