init

pages/test.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <h2>fk</h2>
+    <!-- <button @click="$fetch">Refresh</button> -->
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        posts: []
+      }
+    },
+
+//     async fetch() {
+//   const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${this.$route.name}`)
+//                      .then((res) => res.json())
+//                      console.log(post)
+
+//   if (post.id === this.$route.params.id) {
+//       this.post = post
+//     } else {
+//       // set status code on server and
+//       if (process.server) {
+//         this.$nuxt.context.res.statusCode = 404
+//       }
+//       // use throw new Error()
+//       throw new Error('Post not found')
+//     }
+// }
+
+    async fetch() {
+      this.posts = await this.$http.$get('https://api.nuxtjs.dev/posts')
+      console.log(posts)
+    },
+    fetchOnServer: false,
+    // multiple components can return the same `fetchKey` and Nuxt will track them both separately
+    fetchKey: 'site-sidebar',
+    // alternatively, for more control, a function can be passed with access to the component instance
+    // It will be called in `created` and must not depend on fetched data
+    fetchKey(getCounter) {
+      // getCounter is a method that can be called to get the next number in a sequence
+      // as part of generating a unique fetchKey.
+      return this.someOtherData + getCounter('sidebar')
+    }
+  }
+</script>
+
+<style lang="scss" scoped></style>