Skip to content

Commit

Permalink
Merge branch 'nested-dynamic-routes'
Browse files Browse the repository at this point in the history
  • Loading branch information
Atinux committed Dec 19, 2016
2 parents ec581ce + 9780bd7 commit 004e21b
Show file tree
Hide file tree
Showing 46 changed files with 725 additions and 144 deletions.
13 changes: 13 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -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
2 changes: 2 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion bin/nuxt-dev
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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)) {
Expand All @@ -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) => {
Expand Down
2 changes: 1 addition & 1 deletion examples/async-data/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion examples/async-data/pages/post.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion examples/auth-routes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion examples/auth-routes/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion examples/auth-routes/pages/secret.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion examples/custom-loading/pages/about.vue
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
2 changes: 1 addition & 1 deletion examples/custom-loading/pages/index.vue
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
181 changes: 160 additions & 21 deletions examples/custom-routes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 0 additions & 5 deletions examples/custom-routes/nuxt.config.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
module.exports = {
router: {
routes: [
{ name: 'user', path: '/users/:id(\\d+)', component: 'pages/_user' }
]
},
build: {
vendor: ['axios']
}
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-routes/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 })
Expand Down
2 changes: 1 addition & 1 deletion examples/extend-app/pages/about.vue
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
2 changes: 1 addition & 1 deletion examples/extend-app/pages/index.vue
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions examples/global-css/pages/about.vue
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions examples/global-css/pages/index.vue
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion examples/head-elements/pages/about.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down

0 comments on commit 004e21b

Please sign in to comment.