Merge branch 'nested-dynamic-routes'

is00hcw · Dec 19, 2016 · 004e21b · 004e21b
2 parents ec581ce + 9780bd7
commit 004e21b
Show file tree

Hide file tree

Showing 46 changed files with 725 additions and 144 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.travis.yml b/.travis.yml
@@ -4,6 +4,8 @@ node_js:
   - "6.9"
   - "5.12"
   - "4.7"
+before_install:
+  - if [[ `npm -v` != 3* ]]; then npm i -g npm@3; fi
 install:
   - npm install
   - npm run build

diff --git a/bin/nuxt-dev b/bin/nuxt-dev
@@ -5,6 +5,7 @@ process.env.DEBUG = 'nuxt:*'
 
 var _ = require('lodash')
 var debug = require('debug')('nuxt:build')
+debug.color = 2 // force green color
 var fs = require('fs')
 var Nuxt = require('../')
 var chokidar = require('chokidar')
@@ -37,7 +38,7 @@ nuxt.build()
 function listenOnConfigChanges (nuxt, server) {
   // Listen on nuxt.config.js changes
   var build = _.debounce(() => {
-    debug('[nuxt.config.js] changed, rebuilding the app...')
+    debug('[nuxt.config.js] changed')
     delete require.cache[nuxtConfigFile]
     var options = {}
     if (fs.existsSync(nuxtConfigFile)) {
@@ -50,6 +51,8 @@ function listenOnConfigChanges (nuxt, server) {
     options.rootDir = rootDir
     nuxt.close()
     .then(() => {
+      nuxt.renderer = null
+      debug('Rebuilding the app...')
       return new Nuxt(options).build()
     })
     .then((nuxt) => {

diff --git a/examples/async-data/pages/index.vue b/examples/async-data/pages/index.vue
@@ -2,7 +2,7 @@
 <template>
   <div>
     <p>{{ userAgent }}</p>
-    <p><router-link to="/post">See a post (http request / Ajax)</router-link></p>
+    <p><nuxt-link to="/post">See a post (http request / Ajax)</nuxt-link></p>
   </div>
 </template>
 

diff --git a/examples/async-data/pages/post.vue b/examples/async-data/pages/post.vue
@@ -2,7 +2,7 @@
 <template>
   <div>
     <p>{{ post.title }}!</p>
-    <p><router-link to="/">Back home</router-link></p>
+    <p><nuxt-link to="/">Back home</nuxt-link></p>
   </div>
 </template>
 

diff --git a/examples/auth-routes/README.md b/examples/auth-routes/README.md
@@ -183,7 +183,7 @@ Let's add a `/secret` route where only the connected user can see its content:
 <template>
   <div>
     <h1>Super secret page</h1>
-    <router-link to="/">Back to the home page</router-link>
+    <nuxt-link to="/">Back to the home page</nuxt-link>
   </div>
 </template>
 

diff --git a/examples/auth-routes/pages/index.vue b/examples/auth-routes/pages/index.vue
@@ -14,7 +14,7 @@
       <p><i>You can also refresh this page, you'll still be connected!</i></p>
       <button @click="logout">Logout</button>
     </div>
-    <p><router-link to="/secret">Super secret page</router-link></p>
+    <p><nuxt-link to="/secret">Super secret page</nuxt-link></p>
   </div>
 </template>
 

diff --git a/examples/auth-routes/pages/secret.vue b/examples/auth-routes/pages/secret.vue
@@ -2,7 +2,7 @@
   <div>
     <h1>Super secret page</h1>
     <p>If you try to access this URL not connected, you will be redirected to the home page (server-side or client-side)</p>
-    <router-link to="/">Back to the home page</router-link>
+    <nuxt-link to="/">Back to the home page</nuxt-link>
   </div>
 </template>
 

diff --git a/examples/custom-loading/pages/about.vue b/examples/custom-loading/pages/about.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <p>About Page</p>
-    <router-link to="/">Go to /</router-link>
+    <nuxt-link to="/">Go to /</nuxt-link>
   </div>
 </template>
 

diff --git a/examples/custom-loading/pages/index.vue b/examples/custom-loading/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <p>Hello {{ name }}!</p>
-    <router-link to="/about">Go to /about</router-link>
+    <nuxt-link to="/about">Go to /about</nuxt-link>
   </div>
 </template>
 

diff --git a/examples/custom-routes/README.md b/examples/custom-routes/README.md
@@ -2,38 +2,177 @@
 
 > Nuxt.js is based on vue-router and allows you to defined custom routes :rocket:
 
-## Usage
+## Concept
+
+Nuxt.js detect and generate automatically the vue-router config according to your file tree of .vue files inside the `pages` directory.
+
+## Basic routes
+
+This file tree:
+
+```bash
+/pages
+|-> /team
+    |-> index.vue
+    |-> about.vue
+|-> index.vue
+```
+
+will automatically generate:
+
+```js
+router: {
+  routes: [
+    {
+      name: 'index',
+      path: '/',
+      component: 'pages/index'
+    },
+    {
+      name: 'team',
+      path: '/team',
+      component: 'pages/team/index'
+    },
+    {
+      name: 'team-about',
+      path: '/team/about',
+      component: 'pages/team/about'
+    }
+  ]
+}
+```
+
+## Dynamic routes
+
+To define a dynamic route with a param, you need to define a .vue file prefixed by an underscore.
+
+This file tree:
+
+```bash
+/pages
+|-> /projects
+    |-> index.vue
+    |-> _slug.vue
+```
+
+will automatically generate:
 
-Add your custom routes inside `nuxt.config.js`:
 ```js
-module.exports = {
-  router: {
-    routes: [
-      { name: 'user', path: '/users/:id', component: 'pages/user' }
-    ]
+router: {
+  routes: [
+    {
+      name: 'projects',
+      path: '/projects',
+      component: 'pages/projects/index'
+    },
+    {
+      name: 'projects-slug',
+      path: '/projects/:slug',
+      component: 'pages/projects/_slug'
+    }
+  ]
+}
+```
+
+### Additional feature : validate (optional)
+
+Nuxt.js allows you to define a validator function inside your dynamic route component (In this example: `pages/projects/_slug.vue`).
+
+If validate function fails, Nuxt.js will automatically load the 404 error page.
+
+```js
+<script>
+export default {
+  validate ({ params }) {
+    return /^[A-z]+$/.test(params.slug)
   }
 }
+</script>
 ```
 
-| key  | Optional? | definition |
-|------|------------|-----------|
-| `path` | **Required** | Route path, it can have dynamic mapping, look at [vue-router documentation](https://router.vuejs.org/en/essentials/dynamic-matching.html) about it. |
-| `component` | **Required** | Path to the `.vue` component, if relative, it has to be from the app folder. |
-| `name` | Optional | Route name, useful for linking to it with `<router-link>`, see [vue-router documentation](https://router.vuejs.org/en/essentials/named-routes.html) about it. |
-| `meta` | Optional | Let you add custom fields to get back inside your component (available in the context via `route.meta`  inside `data` and `fetch` methods). See [vue-router documentation](https://router.vuejs.org/en/advanced/meta.html) about it. |
-| `children` | Optional | *Not supported* |
+## Nested Routes (children)
 
-## Hidden pages
+To define a nested route, you need to define a .vue file with the same name as the directory which contain your children views.
+> Don't forget to put `<nuxt-child></nuxt-child>` inside your parent .vue file.
 
->If you want don't want nuxt.js to generate a route for a specific page, you just have to **rename it with _ at the beginning**.
+This file tree:
 
-Let's say I have a component `pages/user.vue` and I don't want nuxt.js to create the `/user`. I can rename it to `pages/_user.vue` and voilà!
+```bash
+/pages
+|-> /users
+    |-> _id.vue
+|-> users.vue
+```
+
+will automatically generate:
 
-You can then change the component path in the `nuxt.config.js`:
 ```js
-// ...
-  { name: 'user', path: '/users/:id', component: 'pages/_user' }
-// ...
+router: {
+  routes: [
+    {
+      path: '/users',
+      component: 'pages/users',
+      children: [
+        {
+          path: ':id',
+          component: 'pages/users/_id',
+          name: 'users-id'
+        }
+      ]
+    }
+  ]
+}
+```
+
+## Dynamic Nested Routes
+
+This file tree:
+
+```bash
+/pages
+|-> /posts
+    |-> /_slug
+        |-> _name.vue
+        |-> comments.vue
+    |-> _slug.vue
+    |-> index.vue
+|-> posts.vue
+```
+
+will automatically generate:
+
+```js
+router: {
+  routes: [
+    {
+      path: '/posts',
+      component: 'pages/posts',
+      children: [
+        {
+          path: "",
+          component: 'pages/posts/index',
+          name: 'posts'
+        },
+        {
+          path: ':slug',
+          component: 'pages/posts/_slug',
+          children: [
+            {
+              path: 'comments',
+              component: 'pages/posts/_slug/comments',
+              name: 'posts-slug-comments'
+            },
+            {
+              path: ':name',
+              component: 'pages/posts/_slug/_name',
+              name: 'posts-slug-name'
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
 ```
 
 ## Demo

diff --git a/examples/custom-routes/nuxt.config.js b/examples/custom-routes/nuxt.config.js
@@ -1,9 +1,4 @@
 module.exports = {
-  router: {
-    routes: [
-      { name: 'user', path: '/users/:id(\\d+)', component: 'pages/_user' }
-    ]
-  },
   build: {
     vendor: ['axios']
   }

diff --git a/examples/custom-routes/pages/index.vue b/examples/custom-routes/pages/index.vue
@@ -3,7 +3,7 @@
     <h2>Users</h2>
     <ul class="users">
       <li v-for="user in users">
-        <router-link :to="{ name: 'user', params: { id: user.id } }">{{ user.name }}</router-link>
+        <nuxt-link :to="'/users/'+user.id">{{ user.name }}</nuxt-link>
       </li>
     </ul>
   </div>

diff --git a/examples/custom-routes/pages/_user.vue → examples/custom-routes/pages/users/_id.vue b/examples/custom-routes/pages/_user.vue → examples/custom-routes/pages/users/_id.vue
@@ -3,16 +3,19 @@
     <h3>{{ name }}</h3>
     <h4>@{{ username }}</h4>
     <p>Email : {{ email }}</p>
-    <p><router-link to="/">List of users</router-link></p>
+    <p><nuxt-link to="/">List of users</nuxt-link></p>
   </div>
 </template>
 
 <script>
 import axios from 'axios'
 
 export default {
+  validate ({ params }) {
+    return !isNaN(+params.id)
+  },
   data ({ params, error }) {
-    return axios.get(`https://jsonplaceholder.typicode.com/users/${params.id}`)
+    return axios.get(`https://jsonplaceholder.typicode.com/users/${+params.id}`)
     .then((res) => res.data)
     .catch(() => {
       error({ message: 'User not found', statusCode: 404 })

diff --git a/examples/extend-app/pages/about.vue b/examples/extend-app/pages/about.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>Hi from {{ name }}</p>
-    <router-link to="/">Home page</router-link>
+    <nuxt-link to="/">Home page</nuxt-link>
   </div>
 </template>
 

diff --git a/examples/extend-app/pages/index.vue b/examples/extend-app/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
     <h1>Welcome!</h1>
-    <router-link to="/about">About page</router-link>
+    <nuxt-link to="/about">About page</nuxt-link>
   </div>
 </template>
diff --git a/examples/global-css/pages/about.vue b/examples/global-css/pages/about.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <h1 class="title">Another Page</h1>
-    <p><router-link to="/" class="button is-medium is-info hvr-wobble-vertical">Another button</router-link></p>
-    <p><router-link to="/">Back home</router-link></p>
+    <p><nuxt-link to="/" class="button is-medium is-info hvr-wobble-vertical">Another button</nuxt-link></p>
+    <p><nuxt-link to="/">Back home</nuxt-link></p>
   </div>
 </template>
diff --git a/examples/global-css/pages/index.vue b/examples/global-css/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <h1 class="title">Custom CSS!</h1>
-    <p><router-link to="/about" class="button is-medium is-primary hvr-float-shadow">I am a button</router-link></p>
-    <p><router-link to="/about">About page</router-link></p>
+    <p><nuxt-link to="/about" class="button is-medium is-primary hvr-float-shadow">I am a button</nuxt-link></p>
+    <p><nuxt-link to="/about">About page</nuxt-link></p>
   </div>
 </template>
diff --git a/examples/head-elements/pages/about.vue b/examples/head-elements/pages/about.vue
@@ -3,7 +3,7 @@
     <h1>About page</h1>
     <p>Click below to see the custom meta tags added with our custom component <code>twitter-head-card</code></p>
     <twitter-head-card></twitter-head-card>
-    <p><router-link to="/">Home page</router-link></p>
+    <p><nuxt-link to="/">Home page</nuxt-link></p>
   </div>
 </template>