feat(vue-app): universal fetch

[pi0]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

Add universal fetch support to Nuxt.js 💥 (Original idea credits: @Atinux)

Users can control over disabling externals using the new fetch option. Defaults:

{
  fetch: {
    server: true,
    client: true
  }
}

Polyfill Overhead

Tested on basic fixture

Bundle Analyzer

Gzip: 78.65 KiB ~> 79.42 KiB (0.77 KiB)
Normal: 216.73 KiB ~> 219.17 KiB (+2.44 KiB)

app Chunk Size

• Server: 31.3 KiB ~> 31.4 KiB
• Client: 41.7 KiB ~> 44.1 KiB

Install Size Additions

For nuxt-start we have to add node-fetch because of externalization.

• unfetch:
• node-fetch:

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[codecov-io]

Codecov Report

Merging #5028 into dev will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #5028   +/-   ##
=======================================
  Coverage   94.93%   94.93%           
=======================================
  Files          72       72           
  Lines        2408     2408           
  Branches      609      609           
=======================================
  Hits         2286     2286           
  Misses        102      102           
  Partials       20       20

Impacted Files	Coverage Δ
packages/builder/src/context/template.js	100% <ø> (ø)	⬆️
packages/config/src/config/_app.js	100% <ø> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 636e7e1...76f5e98. Read the comment docs.

[clarkdo]

A good way for excluding package from bundles

[husayt]

I guess, bye-bye axios

[pi0]

@husayt no actually. Axios still rocks but we have even better plans 😊

[husayt]

@pi0 I am intrigued now. At least give a clue, please

[husayt]

It is now asking for node-fetch to be installed

ERROR Please install missing dependencies:
npm i node-fetch@^2.3.0

[pi0]

@husayt It is in public beta now: https://github.com/nuxt/http :)

[pi0]

Regarding the error, if other dependency installs 1.x version of node-fetch Nuxt.js detects it and requires manually installing to the root of the project to prevent inconsistencies.

[kingda]

how can i find the example to use it ?

[pi0]

@kingda, it is simply fetch() function usable in asyncData and components

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API