From 68426b4df4a5104f9482c0fc097db4ba63ef104f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@chopin.io>
Date: Thu, 26 Jan 2017 15:22:10 +0100
Subject: [PATCH] Add nested routes example

---
 examples/nested-routes/README.md             |  3 +
 examples/nested-routes/nuxt.config.js        | 18 ++++++
 examples/nested-routes/package.json          | 12 ++++
 examples/nested-routes/pages/index.vue       | 61 ++++++++++++++++++++
 examples/nested-routes/pages/index/_id.vue   | 29 ++++++++++
 examples/nested-routes/pages/index/index.vue | 11 ++++
 6 files changed, 134 insertions(+)
 create mode 100644 examples/nested-routes/README.md
 create mode 100644 examples/nested-routes/nuxt.config.js
 create mode 100644 examples/nested-routes/package.json
 create mode 100644 examples/nested-routes/pages/index.vue
 create mode 100644 examples/nested-routes/pages/index/_id.vue
 create mode 100644 examples/nested-routes/pages/index/index.vue

diff --git a/examples/nested-routes/README.md b/examples/nested-routes/README.md
new file mode 100644
index 0000000000..1c9f2bf47d
--- /dev/null
+++ b/examples/nested-routes/README.md
@@ -0,0 +1,3 @@
+# Nested Routes with Nuxt.js
+
+[https://nuxtjs.org/examples/nested-routes](https://nuxtjs.org/examples/nested-routes)
diff --git a/examples/nested-routes/nuxt.config.js b/examples/nested-routes/nuxt.config.js
new file mode 100644
index 0000000000..7923f1f12d
--- /dev/null
+++ b/examples/nested-routes/nuxt.config.js
@@ -0,0 +1,18 @@
+module.exports = {
+  head: {
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+    ]
+  },
+  env: {
+    users: [
+      { id: 1, name: 'Kobe Bryant', number: 24 },
+      { id: 2, name: 'Michael Jordan', number: 23 },
+      { id: 3, name: 'Stephen Curry', number: 30 },
+      { id: 4, name: 'Lebron James', number: 23 },
+      { id: 5, name: 'Kevin Durant', number: 35 },
+      { id: 6, name: 'Kyrie Irving', number: 2 }
+    ]
+  }
+}
diff --git a/examples/nested-routes/package.json b/examples/nested-routes/package.json
new file mode 100644
index 0000000000..0708c73c68
--- /dev/null
+++ b/examples/nested-routes/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "nuxt-custom-routes",
+  "description": "",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  }
+}
diff --git a/examples/nested-routes/pages/index.vue b/examples/nested-routes/pages/index.vue
new file mode 100644
index 0000000000..b702ede84c
--- /dev/null
+++ b/examples/nested-routes/pages/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="container">
+    <div class="left">
+      <h2><nuxt-link to="/">Players</nuxt-link></h2>
+      <ul class="players">
+        <li v-for="user in users">
+          <nuxt-link :to="'/'+user.id">{{ user.name }}</nuxt-link>
+        </li>
+      </ul>
+    </div>
+    <div class="right">
+      <nuxt-child/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data ({ env }) {
+    return { users: env.users }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  box-sizing: border-box;
+}
+.left {
+  width: 50%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.right {
+  width: 50%;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.players {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+.players li a {
+  display: block;
+  border: 1px #ddd solid;
+  padding: 10px;
+  text-align: left;
+  color: #222;
+  text-decoration: none;
+}
+.players li a:hover {
+  color: orange;
+}
+</style>
diff --git a/examples/nested-routes/pages/index/_id.vue b/examples/nested-routes/pages/index/_id.vue
new file mode 100644
index 0000000000..6f14231039
--- /dev/null
+++ b/examples/nested-routes/pages/index/_id.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="player">
+    <h1>#{{ number }}</h1>
+    <h2>{{ name }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  validate ({ params }) {
+    return !isNaN(+params.id)
+  },
+  data ({ 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
+  }
+}
+</script>
+
+<style scoped>
+.player {
+  text-align: center;
+  margin-top: 100px;
+  font-family: sans-serif;
+}
+</style>
diff --git a/examples/nested-routes/pages/index/index.vue b/examples/nested-routes/pages/index/index.vue
new file mode 100644
index 0000000000..50467719e5
--- /dev/null
+++ b/examples/nested-routes/pages/index/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <h2>Please select an user.</h2>
+</template>
+
+<style scoped>
+h2 {
+  text-align: center;
+  margin-top: 100px;
+  font-family: sans-serif;
+}
+</style>