mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
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
This commit is contained in:
parent
d9a0b5f61b
commit
2015140d12
@ -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",
|
||||
|
@ -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,
|
||||
|
@ -19,6 +19,7 @@ TemplateContext {
|
||||
],
|
||||
"env": "test_env",
|
||||
"extensions": "test|ext",
|
||||
"fetch": undefined,
|
||||
"globalName": "test_global",
|
||||
"globals": Array [
|
||||
"globals",
|
||||
|
@ -13,6 +13,11 @@ export default () => ({
|
||||
script: []
|
||||
},
|
||||
|
||||
fetch: {
|
||||
server: true,
|
||||
client: true
|
||||
},
|
||||
|
||||
plugins: [],
|
||||
|
||||
css: [],
|
||||
|
@ -156,6 +156,10 @@ Object {
|
||||
"mjs",
|
||||
"ts",
|
||||
],
|
||||
"fetch": Object {
|
||||
"client": true,
|
||||
"server": true,
|
||||
},
|
||||
"generate": Object {
|
||||
"concurrency": 500,
|
||||
"dir": "/var/nuxt/test/dist",
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
||||
|
6
test/fixtures/basic/nuxt.config.js
vendored
6
test/fixtures/basic/nuxt.config.js
vendored
@ -69,6 +69,12 @@ export default {
|
||||
'~/plugins/dir-plugin',
|
||||
'~/plugins/inject'
|
||||
],
|
||||
serverMiddleware: [
|
||||
{
|
||||
path: '/api/test',
|
||||
handler: (_, res) => res.end('Works!')
|
||||
}
|
||||
],
|
||||
build: {
|
||||
scopeHoisting: true,
|
||||
publicPath: '',
|
||||
|
34
test/fixtures/basic/pages/fetch.vue
vendored
Normal file
34
test/fixtures/basic/pages/fetch.vue
vendored
Normal file
@ -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>
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user