Merge branch 'dev' into refacto-app

README.md

@@ -254,4 +254,4 @@ Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`.
 https://github.com/nuxt/nuxt.js/projects/1
 
 ## Contributing
-Please see our [contributing.md](./contributing.md)
+Please see our [CONTRIBUTING.md](./CONTRIBUTING.md)

bin/nuxt-generate

@@ -17,10 +17,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 +37,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,7 +64,13 @@ 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']
+}
+
+generator.generate(generateOptions)
   .then(() => {
     debug('Generate done')
     process.exit(0)

examples/typescript/modules/typescript.js

@@ -1,16 +1,26 @@
-module.exports = function (options) {
+module.exports = function(options) {
   // Extend build
-  this.extendBuild((config) => {
+  this.extendBuild(config => {
+    const tsLoader = {
+      loader: "ts-loader",
+      options: {
+        appendTsSuffixTo: [/\.vue$/]
+      }
+    };
     // Add TypeScript loader
-    config.module.rules.push({
-      test: /\.ts$/,
-      loader: 'ts-loader'
-    })
+    config.module.rules.push(
+      Object.assign(
+        {
+          test: /((client|server)\.js)|(\.tsx?)$/
+        },
+        tsLoader
+      )
+    );
     // Add TypeScript loader for vue files
     for (let rule of config.module.rules) {
-      if (rule.loader === 'vue-loader') {
-        rule.query.loaders.ts = 'ts-loader?{"appendTsSuffixTo":["\\\\.vue$"]}'
+      if (rule.loader === "vue-loader") {
+        rule.options.loaders.ts = tsLoader;
       }
     }
-  })
-}
+  });
+};

examples/typescript/nuxt.config.js

@@ -22,5 +22,5 @@ module.exports = {
   build: {
     vendor: ['axios', 'gsap', 'vuex-class', 'nuxt-class-component']
   },
-  modules: ['~modules/typescript']
+  modules: ['~/modules/typescript']
 }

examples/typescript/package.json

@@ -4,12 +4,15 @@
   "dependencies": {
     "axios": "^0.16.1",
     "gsap": "^1.19.1",
-    "nuxt": "^1.0.0-alpha2",
-    "nuxt-class-component": "^1.0.1",
+    "nuxt": "latest",
+    "nuxt-class-component": "^1.0.3",
     "tachyons": "^4.7.0",
-    "vue-class-component": "^5.0.1",
-    "vue-property-decorator": "^5.0.1",
-    "vuex-class": "^0.2.0"
+    "vue": "~2.5.1",
+    "vue-server-renderer": "~2.5.1",
+    "vue-template-compiler": "~2.5.1",
+    "vue-class-component": "^6.0.0",
+    "vue-property-decorator": "^6.0.0",
+    "vuex-class": "^0.3.0"
   },
   "scripts": {
     "dev": "nuxt",
@@ -18,7 +21,7 @@
     "generate": "nuxt generate"
   },
   "devDependencies": {
-    "ts-loader": "^2.0.3",
+    "ts-loader": "^3.0.0",
     "typescript": "^2.2.2"
   }
 }

examples/typescript/pages/index.vue

@@ -16,7 +16,7 @@
 <script lang="ts">
 import Vue from "vue";
 import Component from "nuxt-class-component"
-import Card from "~components/Card"
+import Card from "~/components/Card"
 import { State, Getter } from "vuex-class"
 
 @Component({
@@ -29,4 +29,4 @@ export default class extends Vue {
   @State people
   @Getter selectedPerson
 }
-</script>
+</script>

examples/typescript/store/index.ts

@@ -1,33 +1,33 @@
-import axios from "~plugins/axios";
-
-export const state = () => ({
-  selected: 1,
-  people: []
-});
-
-export const mutations = {
-  select(state, id) {
-    state.selected = id;
-  },
-  setPeople(state, people) {
-    state.people = people;
-  }
-};
-
-export const getters = {
-  selectedPerson: state => {
-    const p = state.people.find(person => person.id === state.selected);
-    return p ? p : { first_name: "Please,", last_name: "select someone" };
-  }
-};
-
-export const actions = {
-  async nuxtServerInit({ commit }) {
-    const response = await axios.get("/random-data.json");
-    const people = response.data.slice(0, 10);
-    commit("setPeople", people);
-  },
-  select({ commit }, id) {
-    commit("select", id);
-  }
-};
+import axios from "~/plugins/axios";
+
+export const state = () => ({
+  selected: 1,
+  people: []
+});
+
+export const mutations = {
+  select(state, id) {
+    state.selected = id;
+  },
+  setPeople(state, people) {
+    state.people = people;
+  }
+};
+
+export const getters = {
+  selectedPerson: state => {
+    const p = state.people.find(person => person.id === state.selected);
+    return p ? p : { first_name: "Please,", last_name: "select someone" };
+  }
+};
+
+export const actions = {
+  async nuxtServerInit({ commit }) {
+    const response = await axios.get("/random-data.json");
+    const people = response.data.slice(0, 10);
+    commit("setPeople", people);
+  },
+  select({ commit }, id) {
+    commit("select", id);
+  }
+};

examples/typescript/tsconfig.json

@@ -1,29 +1,29 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "es2015"
-    ],
-    "module": "es2015",
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "declaration": true,
-    "noImplicitAny": false,
-    "noImplicitThis": false,
-    "strictNullChecks": true,
-    "removeComments": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": ".",
-    "paths": {
-      "~": ["./"],
-      "~assets/*": ["./assets/*"],
-      "~components/*": ["./components/*"],
-      "~middleware/*": ["./middleware/*"],
-      "~pages/*": ["./pages/*"],
-      "~plugins/*": ["./plugins/*"],
-      "~static/*": ["./static/*"]
-    }
-  }
-}
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "module": "es2015",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "noImplicitAny": false,
+    "noImplicitThis": false,
+    "strictNullChecks": true,
+    "removeComments": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "allowJs": true,
+    "paths": {
+      "~/": ["./"],
+      "~/assets/*": ["./assets/*"],
+      "~/components/*": ["./components/*"],
+      "~/middleware/*": ["./middleware/*"],
+      "~/pages/*": ["./pages/*"],
+      "~/plugins/*": ["./plugins/*"],
+      "~/static/*": ["./static/*"]
+    }
+  }
+}

examples/vue-apollo/package.json

@@ -2,7 +2,7 @@
   "name": "nuxt-vue-apollo",
   "dependencies": {
     "@nuxtjs/apollo": "^2.1.1",
-    "nuxt": "^1.0.0-rc9"
+    "nuxt": "latest"
   },
   "scripts": {
     "dev": "nuxt",

examples/vue-class-component/components/Base.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <input v-model="msg">
+    <p>msg: {{msg}}</p>
+    <p>env: {{env}}</p>
+    <p>computed msg: {{computedMsg}}</p>
+    <button @click="greet">Greet</button>
+    <p><nuxt-link to="/about">About page</nuxt-link></p>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import Component from 'nuxt-class-component'
+
+@Component({
+  props: {
+    env: String
+  }
+})
+export default class Base extends Vue {
+  // initial data
+  msg = 123
+
+  // lifecycle hook
+  mounted () {
+    this.greet()
+  }
+
+  // computed
+  get computedMsg () {
+    return 'computed ' + this.msg
+  }
+
+  // method
+  greet () {
+    console.log('base greeting: ' + this.msg)
+  }
+}
+</script>

examples/vue-class-component/components/Child.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <input v-model="msg">
+    <p>msg: {{msg}}</p>
+    <p>env: {{env}}</p>
+    <p>computed msg: {{computedMsg}}</p>
+    <button @click="greet">Greet</button>
+    <p><nuxt-link to="/about">About page</nuxt-link></p>
+  </div>
+</template>
+
+<script>
+import Component from 'nuxt-class-component'
+import Base from '@/components/Base'
+
+@Component
+export default class Child extends Base {
+  // override parent method
+  greet () {
+    console.log('child greeting: ' + this.msg)
+  }
+}
+</script>

examples/vue-class-component/nuxt.config.js

@@ -2,9 +2,6 @@ module.exports = {
   build: {
     babel: {
       plugins: ['transform-decorators-legacy', 'transform-class-properties']
-    },
-    extend (config) {
-      config.resolve.alias['nuxt-class-component'] = '~plugins/nuxt-class-component'
     }
   }
 }

examples/vue-class-component/package.json

@@ -4,7 +4,7 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "nuxt": "latest",
-    "vue-class-component": "^5.0.1"
+    "nuxt-class-component": "^1.0.4"
   },
   "scripts": {
     "dev": "nuxt",

examples/vue-class-component/pages/about.vue

@@ -1,3 +1,6 @@
 <template>
-  <h1>About</h1>
+  <div>
+    <h1>About</h1>
+    <p><nuxt-link to="/">Home page</nuxt-link></p>
+  </div>
 </template>

examples/vue-class-component/pages/index.vue

@@ -1,41 +1,18 @@
 <template>
-  <div>
-    <input v-model="msg">
-    <p>msg: {{msg}}</p>
-    <p>env: {{env}}</p>
-    <p>computed msg: {{computedMsg}}</p>
-    <button @click="greet">Greet</button>
-    <p><nuxt-link to="/about">About page</nuxt-link></p>
-  </div>
+  <Child :env="env" ></Child>
 </template>
 
 <script>
 import Vue from 'vue'
 import Component from 'nuxt-class-component'
+import Child from '@/components/Child'
 
-@Component()
-
+@Component({
+  components: { Child }
+})
 export default class App extends Vue {
-  // initial data
-  msg = 123
-
   asyncData ({ req }) {
     return { env: req ? 'server' : 'client' }
   }
-
-  // lifecycle hook
-  mounted () {
-    this.greet()
-  }
-
-  // computed
-  get computedMsg () {
-    return 'computed ' + this.msg
-  }
-
-  // method
-  greet () {
-    console.log('greeting: ' + this.msg)
-  }
 }
 </script>

examples/vue-class-component/plugins/nuxt-class-component.js

@@ -1,14 +0,0 @@
-import Component from 'vue-class-component'
-
-Component.registerHooks([
-  'beforeRouteEnter',
-  'beforeRouteLeave',
-  'asyncData',
-  'fetch',
-  'middleware',
-  'layout',
-  'transition',
-  'scrollToTop'
-])
-
-export default Component

lib/builder/builder.js

@@ -5,7 +5,7 @@ import hash from 'hash-sum'
 import pify from 'pify'
 import webpack from 'webpack'
 import serialize from 'serialize-javascript'
-import { join, resolve, basename, dirname } from 'path'
+import { join, resolve, basename, extname, dirname } from 'path'
 import Tapable from 'tappable'
 import MFS from 'memory-fs'
 import webpackDevMiddleware from 'webpack-dev-middleware'
@@ -62,8 +62,11 @@ export default class Builder extends Tapable {
   get plugins () {
     return this.options.plugins.map((p, i) => {
       if (typeof p === 'string') p = { src: p }
-      p.src = this.nuxt.resolvePath(p.src)
-      return { src: p.src, ssr: (p.ssr !== false), name: `plugin${i}` }
+      return {
+        src: this.nuxt.resolvePath(p.src),
+        ssr: (p.ssr !== false),
+        name: basename(p.src, extname(p.src)).replace(/[^a-zA-Z?\d\s:]/g, '')
+      }
     })
   }
 

lib/builder/generator.js

@@ -73,11 +73,14 @@ export default class Generator extends Tapable {
       }))
     }
 
-    // Copy /index.html to /200.html for surge SPA
-    // https://surge.sh/help/adding-a-200-page-for-client-side-routing
-    const _200Path = join(this.distPath, '200.html')
-    if (!existsSync(_200Path)) {
-      await copy(join(this.distPath, 'index.html'), _200Path)
+    const indexPath = join(this.distPath, 'index.html')
+    if (existsSync(indexPath)) {
+      // Copy /index.html to /200.html for surge SPA
+      // https://surge.sh/help/adding-a-200-page-for-client-side-routing
+      const _200Path = join(this.distPath, '200.html')
+      if (!existsSync(_200Path)) {
+        await copy(indexPath, _200Path)
+      }
     }
 
     const duration = Math.round((Date.now() - s) / 100) / 10