feat(vue-app): new fetch syntax (nuxt#6880)

Author: atinux

examples/new-fetch/README.md

@@ -0,0 +1,5 @@
+# New fetch() with Nuxt.js
+
+Nuxt.js `v2.12` introduces a new hook called `fetch` in any of your Vue components.
+
+See [live demo](https://nuxt-new-fetch.surge.sh) and [documentation](https://nuxtjs.org/api/pages-fetch).

examples/new-fetch/components/Author.vue

@@ -0,0 +1,30 @@
+<template>
+  <p v-if="$fetchState.error">
+    Could not fetch Author
+  </p>
+  <p v-else>
+    Written by {{ $fetchState.pending ? '...' : user.name }} <button @click="$fetch">
+      Refresh
+    </button>
+  </p>
+</template>
+
+<script>
+export default {
+  props: {
+    userId: {
+      type: Number,
+      required: true
+    }
+  },
+  async fetch () {
+    this.user = await this.$http.$get(`https://jsonplaceholder.typicode.com/users/${this.userId}`)
+  },
+  data () {
+    return {
+      user: {}
+    }
+  },
+  fetchOnServer: false
+}
+</script>

examples/new-fetch/layouts/default.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <!-- <p>Fetching: {{ $nuxt.isFetching }} ({{ $nuxt.nbFetching }})</p> -->
+    <nuxt />
+  </div>
+</template>
+
+<script>
+export default {
+  head: {
+    link: [
+      { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/gh/kognise/[email protected]/dist/light.min.css' }
+    ]
+  }
+}
+</script>
+
+<style>
+body {
+  padding: 20px 30px;
+}
+.page-enter-active, .page-leave-active {
+  transition: opacity .3s;
+}
+.page-enter, .page-leave-to {
+  opacity: 0;
+}
+</style>

examples/new-fetch/nuxt.config.js

@@ -0,0 +1,18 @@
+const fetch = require('node-fetch')
+
+export default {
+  plugins: [
+    '@/plugins/vue-placeholders.js'
+  ],
+  modules: [
+    '@nuxt/http'
+  ],
+  generate: {
+    async routes () {
+      const posts = await fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json()).then(d => d.slice(0, 20))
+      const routes = posts.map(post => `/posts/${post.id}`)
+
+      return ['/'].concat(routes)
+    }
+  }
+}

examples/new-fetch/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "example-hello-world",
+  "dependencies": {
+    "@nuxt/http": "^0.3.8",
+    "nuxt-start": "latest",
+    "vue-content-placeholders": "^0.2.1"
+  },
+  "devDependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate",
+    "post-update": "yarn upgrade --latest"
+  }
+}

examples/new-fetch/pages/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <h1>Blog posts</h1>
+    <template v-if="$fetchState.pending">
+      <content-placeholders>
+        <content-placeholders-text :lines="20" />
+      </content-placeholders>
+    </template>
+    <template v-else-if="$fetchState.error">
+      <p>
+        Error while fetching posts: {{ error }}
+      </p>
+    </template>
+    <template v-else>
+      <ul>
+        <li v-for="post of posts" :key="post.id">
+          <n-link :to="`/posts/${post.id}`">
+            {{ post.title }}
+          </n-link>
+        </li>
+        <li>
+          <n-link to="/posts/404">
+            404 post
+          </n-link>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  async fetch () {
+    this.posts = await this.$http.$get('https://jsonplaceholder.typicode.com/posts')
+      .then(posts => posts.slice(0, 20))
+  },
+  data () {
+    return {
+      posts: null
+    }
+  }
+}
+</script>

examples/new-fetch/pages/posts/_id.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <button @click="$fetch">
+      Refresh
+    </button>
+    <template v-if="$fetchState.pending">
+      <content-placeholders>
+        <content-placeholders-heading />
+        <content-placeholders-text :lines="10" />
+      </content-placeholders>
+    </template>
+    <template v-else-if="$fetchState.error">
+      <h1>
+        Post #{{ $route.params.id }} not found
+      </h1>
+    </template>
+    <template v-else>
+      <h1>{{ post.title }}</h1>
+      <author :user-id="post.userId" />
+      <pre>{{ post.body }}</pre>
+      <p>
+        <n-link :to="{ name: 'posts-id', params: { id: (post.id + 1) } }">
+          Next article
+        </n-link>
+      </p>
+    </template>
+    <p>
+      <n-link to="/">
+        Home
+      </n-link>
+    </p>
+  </div>
+</template>
+
+<script>
+import Author from '~/components/Author.vue'
+
+export default {
+  components: {
+    Author
+  },
+  async fetch () {
+    this.post = await this.$http.$get(`https://jsonplaceholder.typicode.com/posts/${this.$route.params.id}`)
+  },
+  data () {
+    return {
+      post: {}
+    }
+  },
+  head () {
+    return { title: this.post.title }
+  }
+}
+</script>

examples/new-fetch/plugins/vue-placeholders.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueContentPlaceholders from 'vue-content-placeholders'
+
+Vue.use(VueContentPlaceholders)

packages/vue-app/src/index.js

@@ -13,6 +13,8 @@ export const template = {
     'server.js',
     'utils.js',
     'empty.js',
+    'mixins/fetch.server.js',
+    'mixins/fetch.client.js',
     'components/nuxt-error.vue',
     'components/nuxt-child.js',
     'components/nuxt-link.server.js',

packages/vue-app/template/App.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 <% if (features.asyncData || features.fetch) { %>
 import {
   getMatchedComponentsInstances,
+  getChildrenComponentInstancesUsingFetch,
   promisify,
   globalHandleError
 } from './utils'
@@ -88,9 +89,12 @@ export default {
     <% } %>
     <% if (features.layouts) { %>
     layout: null,
-    layoutName: ''
+    layoutName: '',
     <% } %>
-  }),
+    <% if (features.fetch) { %>
+    nbFetching: 0
+    <% } %>
+    }),
   <% } %>
   beforeCreate () {
     Vue.util.defineReactive(this, 'nuxt', this.$options.nuxt)
@@ -125,7 +129,12 @@ export default {
   computed: {
     isOffline () {
       return !this.isOnline
+    },
+    <% if (features.fetch) { %>
+      isFetching() {
+      return this.nbFetching > 0
     }
+    <% } %>
   },
   <% } %>
   methods: {
@@ -157,9 +166,18 @@ export default {
         const p = []
 
         <% if (features.fetch) { %>
-        if (page.$options.fetch) {
+        // Old fetch
+        if (page.$options.fetch && page.$options.fetch.length) {
           p.push(promisify(page.$options.fetch, this.context))
         }
+        if (page.$fetch) {
+          p.push(page.$fetch())
+        } else {
+          // Get all component instance to call $fetch
+          for (const component of getChildrenComponentInstancesUsingFetch(page.$vnode.componentInstance)) {
+            p.push(component.$fetch())
+          }
+        }
         <% } %>
         <% if (features.asyncData) { %>
         if (page.$options.asyncData) {

packages/vue-app/template/client.js

@@ -17,8 +17,17 @@ import {
   globalHandleError
 } from './utils.js'
 import { createApp<% if (features.layouts) { %>, NuxtError<% } %> } from './index.js'
+<% if (features.fetch) { %>import fetchMixin from './mixins/fetch.client'<% } %>
 import NuxtLink from './components/nuxt-link.<%= features.clientPrefetch ? "client" : "server" %>.js' // should be included after ./index.js
 
+<% if (features.fetch) { %>
+// Fetch mixin
+if (!Vue.__nuxt__fetch__mixin__) {
+  Vue.mixin(fetchMixin)
+  Vue.__nuxt__fetch__mixin__ = true
+}
+<% } %>
+
 // Component: <NuxtLink>
 Vue.component(NuxtLink.name, NuxtLink)
 <% if (features.componentAliases) { %>Vue.component('NLink', NuxtLink)<% } %>
@@ -458,7 +467,10 @@ async function render (to, from, next) {
       <% } %>
 
       <% if (features.fetch) { %>
-      const hasFetch = Boolean(Component.options.fetch)
+      const hasFetch = Boolean(Component.options.fetch) && Component.options.fetch.length
+      if (hasFetch) {
+        console.warn('fetch(context) has been deprecated, please use middleware(context)')
+      }
       <% } else { %>
       const hasFetch = false
       <% } %>
@@ -738,7 +750,7 @@ function addHotReload ($component, depth) {
       <% if (features.fetch) { %>
       // Call fetch()
       Component.options.fetch = Component.options.fetch || noopFetch
-      let pFetch = Component.options.fetch(context)
+      let pFetch = Component.options.fetch.length && Component.options.fetch(context)
       if (!pFetch || (!(pFetch instanceof Promise) && (typeof pFetch.then !== 'function'))) { pFetch = Promise.resolve(pFetch) }
       <%= (loading ? 'pFetch.then(() => this.$loading.increase && this.$loading.increase(30))' : '') %>
       promises.push(pFetch)

packages/vue-app/template/components/nuxt-child.js

@@ -13,7 +13,8 @@ export default {
       default: undefined
     }
   },
-  render (h, { parent, data, props }) {
+  render (_, { parent, data, props }) {
+    const h = parent.$createElement
     <% if (features.transitions) { %>
     data.nuxtChild = true
     const _parent = parent
@@ -42,15 +43,17 @@ export default {
         listeners[key] = transition[key].bind(_parent)
       }
     })
-    // Add triggerScroll event on beforeEnter (fix #1376)
-    const beforeEnter = listeners.beforeEnter
-    listeners.beforeEnter = (el) => {
-      // Ensure to trigger scroll event after calling scrollBehavior
-      window.<%= globals.nuxt %>.$nextTick(() => {
-        window.<%= globals.nuxt %>.$emit('triggerScroll')
-      })
-      if (beforeEnter) {
-        return beforeEnter.call(_parent, el)
+    if (process.client) {
+      // Add triggerScroll event on beforeEnter (fix #1376)
+      const beforeEnter = listeners.beforeEnter
+      listeners.beforeEnter = (el) => {
+        // Ensure to trigger scroll event after calling scrollBehavior
+        window.<%= globals.nuxt %>.$nextTick(() => {
+          window.<%= globals.nuxt %>.$emit('triggerScroll')
+        })
+        if (beforeEnter) {
+          return beforeEnter.call(_parent, el)
+        }
       }
     }