Update async-data example

examples/async-data/README.md

@@ -6,10 +6,11 @@
 
 `data` is called every time before loading the component (*only if attached to a route*). It can be called from the server-side or before navigating to the corresponding route.
 
-The `data` method receives the context as the first argument, you can use it to fetch some data and return the component data. To make the data method asynchronous, Nuxt.js offers you 2 ways, choose the one you're the most familiar with:
+The `data` method receives the context as the first argument, you can use it to fetch some data and return the component data. To make the data method asynchronous, Nuxt.js offers you different ways, choose the one you're the most familiar with:
 
 1. returning a `Promise`, Nuxt.js will wait for the promise to be resolved before rendering the Component
-2. Define a second argument which is a callback method to be called like this: `callback(err, data)`
+2. Using the async/await ES7 feature
+3. Define a second argument which is a callback method to be called like this: `callback(err, data)`
 
 Example with returning a `Promise`:
 ```js
@@ -23,6 +24,16 @@ export default {
 }
 ```
 
+Example with using `async/await`:
+```js
+export default {
+  async data ({ params }) {
+    let { data } = axios.get(`https://my-api/posts/${params.id}`)
+    return { title: data.title }
+  }
+}
+```
+
 Example with using the `callback` argument:
 ```js
 export default {

examples/async-data/pages/index.vue

@@ -1,8 +1,9 @@
 
 <template>
-  <div>
+  <div class="container">
+    <h1>User Agent</h1>
     <p>{{ userAgent }}</p>
-    <p><nuxt-link to="/post">See a post (http request / Ajax)</nuxt-link></p>
+    <p><nuxt-link to="/posts">Blog</nuxt-link></p>
   </div>
 </template>
 
@@ -20,10 +21,16 @@ export default {
 </script>
 
 <style scoped>
+.container {
+  width: 70%;
+  margin: auto;
+  text-align: center;
+  padding-top: 100px;
+}
 p {
   font-size: 20px;
-  text-align: center;
-  padding: 100px;
-  padding-bottom: 0;
+}
+a {
+  color: #41B883;
 }
 </style>

examples/async-data/pages/post.vue

@@ -1,35 +0,0 @@
-
-<template>
-  <div>
-    <p>{{ post.title }}!</p>
-    <p><nuxt-link to="/">Back home</nuxt-link></p>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default {
-  data ({ req }) {
-    // We can return a Promise instead of calling the callback
-    return axios.get('https://jsonplaceholder.typicode.com/posts/1')
-    .then((res) => {
-      return { post: res.data }
-    })
-  },
-  head () {
-    return {
-      title: this.post.title
-    }
-  }
-}
-</script>
-
-<style scoped>
-p {
-  font-size: 20px;
-  text-align: center;
-  padding: 100px;
-  padding-bottom: 0;
-}
-</style>

examples/async-data/pages/posts/_id.vue

@@ -0,0 +1,52 @@
+
+<template>
+  <div class="container">
+    <h1>{{ post.title }}</h1>
+    <pre>{{ post.body }}</pre>
+    <p><nuxt-link to="/posts">Back to the list</nuxt-link></p>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  async data ({ params }) {
+    // We can use async/await ES6 feature
+    let { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
+    return { post: data }
+  },
+  head () {
+    return {
+      title: this.post.title
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  width: 70%;
+  margin: auto;
+  text-align: center;
+  padding-top: 100px;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+ul li {
+  border: 1px #ddd solid;
+  padding: 20px;
+  text-align: left;
+}
+ul li a {
+  color: gray;
+}
+p {
+  font-size: 20px;
+}
+a {
+  color: #41B883;
+}
+</style>

examples/async-data/pages/posts/index.vue

@@ -0,0 +1,53 @@
+
+<template>
+  <div class="container">
+    <h1>Blog</h1>
+    <ul>
+      <li v-for="post in posts">
+        <nuxt-link :to="{ name: 'posts-id', params: { id: post.id } }">{{ post.title }}</nuxt-link>
+      </li>
+    </ul>
+    <p><nuxt-link to="/">Back to home page</nuxt-link></p>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data ({ req, params }) {
+    // We can return a Promise instead of calling the callback
+    return axios.get('https://jsonplaceholder.typicode.com/posts')
+    .then((res) => {
+      return { posts: res.data.slice(0, 5) }
+    })
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  width: 70%;
+  margin: auto;
+  text-align: center;
+  padding-top: 100px;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+ul li {
+  border: 1px #ddd solid;
+  padding: 20px;
+  text-align: left;
+}
+ul li a {
+  color: gray;
+}
+p {
+  font-size: 20px;
+}
+a {
+  color: #41B883;
+}
+</style>