Add nested routes example

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)

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 }
+    ]
+  }
+}

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"
+  }
+}

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>

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>

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>