Skip to content
Nuxt.js module that makes `nuxt generate` command to store html and payload separately.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example add url-helper, update example Jan 25, 2019
lib fix path-without-slash bug May 15, 2019
.gitignore initial Sep 28, 2018
LICENSE Initial commit Sep 28, 2018
README.md Update README.md Apr 11, 2019
package.json version++ May 14, 2019

README.md

Nuxt payload extractor

Nuxt.js module that makes nuxt generate command to store html and payload separately. See it in action on my site: DreaMinder.pro

Benefits

✓ If you use external API to fill your project with data, even after your site has been prerendered, you need to keep your API running to make client-side navigation possible. With this module your API data stores along with prerendered HTML, so the issue is solved

✓ Increases page download speed for crawlers

✓ Makes HTML source code look cleaner

✓ Decreases load on API server

✓ Makes prerendered and client rendered pages consistent in case API data changed after you deployed prerendered pages

✓ Decreases initial page download time x1.5-2 (which is actually doesn't affect perfomance)

Setup

  • Add nuxt-payload-extractor dependency
  • Define nuxt module:
{
  modules: [
   'nuxt-payload-extractor'
  ]
}
  • Add asyncData custom logic with $payloadURL helper
async asyncData({ $axios, $payloadURL, route }){
  //if generated and works as client navigation, fetch previously saved static JSON payload 
  if(process.static && process.client)
    return await $axios.$get($payloadURL(route))

  //your request logic
  let post = await $axios.$get(`/post.json`)
  return {
    post
  }
}
  • Run npm run generate

Options

You can blacklist specific paths, so they will be generated in native way. But you have to disable payload request inside of asyncData yourself. Check out example dir for details.

Caveats

There may be issues with vuex data requests and nested routes.

How it works

  • Extracts <script>window.__NUXT__= ... </script> replacing it with <script src="payload.js">
  • Makes two files along with index.html of prerendered page: payload.js for initial page load and payload.json for client-side navigation
You can’t perform that action at this time.