fix(vue-app): empty $fetch function for SSR with static target (#8053)

packages/vue-app/template/mixins/fetch.server.js

@@ -41,6 +41,8 @@ export default {
       this._fetchOnServer = this.$options.fetchOnServer !== false
     }
 
+    // Added for remove vue undefined warning while ssr
+    this.$fetch = () => {} // issue #8043
     Vue.util.defineReactive(this, '$fetchState', {
       pending: true,
       error: null,

test/e2e/fetch.browser.test.js

@@ -76,6 +76,12 @@ describe('basic browser', () => {
     expect(await page.$text('pre')).toContain('kevinmarrec')
   })
 
+  test('ssr: /fetch-root', async () => {
+    const page = await browser.page(url('/fetch-root'))
+    expect(await page.$text('button')).toContain('has fetch')
+    page.close()
+  })
+
   test('ssr: /fetch-client', async () => {
     const page = await browser.page(url('/fetch-client'))
     expect(await page.$text('p')).toContain('Fetching...')

test/fixtures/fetch/layouts/default.vue

@@ -31,6 +31,11 @@
           Fetch button
         </n-link>
       </li>
+      <li>
+        <n-link to="/fetch-root">
+          Fetch in root click handler
+        </n-link>
+      </li>
       <li>
         <n-link to="/fetch-component">
           Fetch in component

test/fixtures/fetch/pages/fetch-root.vue

@@ -0,0 +1,21 @@
+<template>
+  <button @click="$fetch">
+    fetch {{ foo }}
+  </button>
+</template>
+
+<script>
+export default {
+  async fetch () {
+    await new Promise(resolve => setTimeout(resolve, 100))
+
+    this.foo = this.$fetch ? 'has fetch' : 'hasn\'t fetch'
+  },
+
+  data () {
+    return {
+      foo: null
+    }
+  }
+}
+</script>