start async data in sub-components

examples/async-data/components/Post.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="post">
+    <h1>{{ title }}</h1>
+    <pre>{{ content }}</pre>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'post',
+  props: ['postId'],
+  created () {
+    // if (this.$nuxt.hasComponentData(this)) {
+    //   let data = this.$nuxt.getComponentData(this)
+    //   this.title = data.title
+    //   this.content = data.content
+    //   return
+    // }
+    let promise = axios.get(`https://jsonplaceholder.typicode.com/posts/${this.postId}`)
+    promise.then((res) => {
+      console.log(res.data)
+      this.title = res.data.title
+      this.content = res.data.body
+    })
+    this.$nuxt.addComponentData(this, promise)
+  },
+  data () {
+    return {
+      title: '',
+      content: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.post {
+  width: 50%;
+  border: 1px #ddd solid;
+  margin: auto;
+  padding: 30px;
+}
+</style>

examples/async-data/pages/post.vue

@@ -2,12 +2,15 @@
 <template>
   <div>
     <p>{{ post.title }}!</p>
+    <post post-id="1" />
+    <post post-id="2" />
     <p><nuxt-link to="/">Back home</nuxt-link></p>
   </div>
 </template>
 
 <script>
 const axios = require('axios')
+import Post from '~components/post'
 
 export default {
   data ({ req }) {
@@ -21,6 +24,9 @@ export default {
     return {
       title: this.post.title
     }
+  },
+  components: {
+    Post
   }
 }
 </script>