feat(vue-app): universal fetch (#5028)

* pkg(nuxt-start): add node-fetch, unfetch

* pkg(vue-app): add node-fetch, unfetch

* add yarn.lock

* feat(config): _app.fetch options

* feat(builder): add fetch to templateVars

* feat(vue-app): polyfill global with fetch

* feat(fixtures/basic): /api/test

* add fetch example to fixtures

* remove unfetch from nuxt-start

* update template snapshot

* revert extra new line in server.js

* single line if

distributions/nuxt-start/package.json

@@ -54,6 +54,7 @@
   "dependencies": {
     "@nuxt/cli": "2.4.3",
     "@nuxt/core": "2.4.3",
+    "node-fetch": "^2.3.0",
     "vue": "^2.6.6",
     "vue-meta": "^1.5.8",
     "vue-no-ssr": "^1.1.1",

packages/builder/src/context/template.js

@@ -21,6 +21,7 @@ export default class TemplateContext {
       isTest: options.test,
       debug: options.debug,
       vue: { config: options.vue.config },
+      fetch: options.fetch,
       mode: options.mode,
       router: options.router,
       env: options.env,

packages/builder/test/context/__snapshots__/template.test.js.snap

@@ -19,6 +19,7 @@ TemplateContext {
     ],
     "env": "test_env",
     "extensions": "test|ext",
+    "fetch": undefined,
     "globalName": "test_global",
     "globals": Array [
       "globals",

packages/config/src/config/_app.js

@@ -13,6 +13,11 @@ export default () => ({
     script: []
   },
 
+  fetch: {
+    server: true,
+    client: true
+  },
+
   plugins: [],
 
   css: [],

packages/config/test/__snapshots__/options.test.js.snap

@@ -156,6 +156,10 @@ Object {
     "mjs",
     "ts",
   ],
+  "fetch": Object {
+    "client": true,
+    "server": true,
+  },
   "generate": Object {
     "concurrency": 500,
     "dir": "/var/nuxt/test/dist",

packages/config/test/config/__snapshots__/index.test.js.snap

@@ -142,6 +142,10 @@ Object {
   "editor": undefined,
   "env": Object {},
   "extensions": Array [],
+  "fetch": Object {
+    "client": true,
+    "server": true,
+  },
   "generate": Object {
     "concurrency": 500,
     "dir": "dist",
@@ -466,6 +470,10 @@ Object {
   "editor": undefined,
   "env": Object {},
   "extensions": Array [],
+  "fetch": Object {
+    "client": true,
+    "server": true,
+  },
   "generate": Object {
     "concurrency": 500,
     "dir": "dist",

packages/vue-app/package.json

@@ -12,6 +12,8 @@
   "main": "dist/vue-app.js",
   "typings": "types/index.d.ts",
   "dependencies": {
+    "node-fetch": "^2.3.0",
+    "unfetch": "^4.0.1",
     "vue": "^2.6.6",
     "vue-meta": "^1.5.8",
     "vue-no-ssr": "^1.1.1",

packages/vue-app/template/client.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+<% if (fetch.client) { %>import fetch from 'unfetch'<% } %>
 import middleware from './middleware.js'
 import {
   applyAsyncData,
@@ -22,6 +23,8 @@ import NuxtLink from './components/nuxt-link.<%= router.prefetchLinks ? "client"
 Vue.component(NuxtLink.name, NuxtLink)
 Vue.component('NLink', NuxtLink)
 
+<% if (fetch.client) { %>if (!global.fetch) { global.fetch = fetch }<% } %>
+
 // Global shared references
 let _lastPaths = []
 let app

packages/vue-app/template/server.js

@@ -1,5 +1,6 @@
 import { stringify } from 'querystring'
 import Vue from 'vue'
+<% if (fetch.server) { %>import fetch from 'node-fetch'<% } %>
 import middleware from './middleware.js'
 import { applyAsyncData, getMatchedComponents, middlewareSeries, promisify, urlJoin, sanitizeComponent } from './utils.js'
 import { createApp, NuxtError } from './index.js'
@@ -9,6 +10,8 @@ import NuxtLink from './components/nuxt-link.server.js' // should be included af
 Vue.component(NuxtLink.name, NuxtLink)
 Vue.component('NLink', NuxtLink)
 
+<% if (fetch.server) { %>if (!global.fetch) { global.fetch = fetch }<% } %>
+
 const debug = require('debug')('nuxt:render')
 debug.color = 4 // force blue color
 

test/fixtures/basic/nuxt.config.js

@@ -69,6 +69,12 @@ export default {
     '~/plugins/dir-plugin',
     '~/plugins/inject'
   ],
+  serverMiddleware: [
+    {
+      path: '/api/test',
+      handler: (_, res) => res.end('Works!')
+    }
+  ],
   build: {
     scopeHoisting: true,
     publicPath: '',

test/fixtures/basic/pages/fetch.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    {{ data }}
+    <button @click="update">
+      Fetch
+    </button>
+    <button @click="reload">
+      Reload
+    </button>
+  </div>
+</template>
+
+<script>
+const name = process.server ? 'server' : 'client'
+const baseURL = 'http://localhost:3000/api'
+const getData = () => fetch(`${baseURL}/test`)
+  .then(r => r.text())
+  .then(r => r + ` (From ${name})`)
+
+export default {
+  async asyncData() {
+    const data = await getData()
+    return { data }
+  },
+  methods: {
+    async update() {
+      this.data = await getData()
+    },
+    reload() {
+      window.location.reload()
+    }
+  }
+}
+</script>

yarn.lock

@@ -11023,6 +11023,11 @@ umask@^1.1.0:
   resolved "https://registry.npmjs.org/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d"
   integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0=
 
+unfetch@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/unfetch/-/unfetch-4.0.1.tgz#8750c4c7497ade75d40387d7dbc4ba024416b8f6"
+  integrity sha512-HzDM9NgldcRvHVDb/O9vKoUszVij30Yw5ePjOZJig8nF/YisG7QN/9CBXZ8dsHLouXMeLZ82r+Jod9M2wFkEbQ==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"