Nuxt.js: Using NUXT.js just for static html generation with script (vendor.js, manifest.js, app,js, pages/index.js, layouts/default.js)

Created on 12 Feb 2018 · 7Comments · Source: nuxt/nuxt.js

Hi, guys! Can you anyone help me?

Does nuxt have any option to exclude _nuxt scripts in generate mode?

I need to generate only static html version of Vue app.
Without _nuxt folder and included links and script.
I dont need to use javascript on client and those scripts in_nuxt` former makes my project to heavy.

Basically, I want to use NUXT just for static html generation, NOT Pre-rendering with spa on client.

<link href="/_nuxt/manifest.10d0ff23a2bf4f09b86d.js" rel="preload" as="script"><link href="/_nuxt/vendor.2c4933a76531d246be17.js" rel="preload" as="script"><link href="/_nuxt/app.b868b05b142119955871.js" rel="preload" as="script"><link href="/_nuxt/layouts/default.860485f7694926d31a51.js" rel="preload" as="script"><link href="/_nuxt/pages/index.f4640f8dc2b172dfb993.js" rel="preload" as="script"><link>

<script type="text/javascript">window.__NUXT__={layout:"default",data:[{}],error:null,serverRendered:!0}</script><script defer="" src="/_nuxt/manifest.10d0ff23a2bf4f09b86d.js"></script><script defer="" src="/_nuxt/layouts/default.860485f7694926d31a51.js"></script><script defer="" src="/_nuxt/pages/index.f4640f8dc2b172dfb993.js"></script><script defer="" src="/_nuxt/vendor.2c4933a76531d246be17.js"></script><script defer="" src="/_nuxt/app.b868b05b142119955871.js"></script>

Thanks!

_{This question is available on Nuxt.js community (#c2450)}

Source

igorify

👍5 ❤1 😄1

Most helpful comment

I have something like this in the nuxt.config file, inside the module.exports object:

hooks: {
    // This hook is called before rendering the html to the browser
    'render:route': (url, result) => {
      this.$ = cheerio.load(html)
      this.$('#__nuxt').removeAttr('data-server-rendered').removeAttr('id')
      this.$(`body script[src="/_nuxt/app.js"]`).remove()
      this.$(`head link[href="/_nuxt/app.js"]`).remove()
      result.html = this.$.html()
    }
}

You just need to install cheerio https://github.com/cheeriojs/cheerio, and add any other rule to remove other scripts

ederchrono on 18 Feb 2018

👍4 🎉1

All 7 comments

Update!
I have found to set render: { resourceHints: false } at nuxt.config.js

This allow to not include this links.

But the problem this including nuxt system script are still open

igorify on 13 Feb 2018

👍1

I have something like this in the nuxt.config file, inside the module.exports object:

hooks: {
    // This hook is called before rendering the html to the browser
    'render:route': (url, result) => {
      this.$ = cheerio.load(html)
      this.$('#__nuxt').removeAttr('data-server-rendered').removeAttr('id')
      this.$(`body script[src="/_nuxt/app.js"]`).remove()
      this.$(`head link[href="/_nuxt/app.js"]`).remove()
      result.html = this.$.html()
    }
}

You just need to install cheerio https://github.com/cheeriojs/cheerio, and add any other rule to remove other scripts

ederchrono on 18 Feb 2018

👍4 🎉1

Building off of igorify and ederchrono's solutions, I ended up with this to strip the scripts when generating static pages. In my nuxt.config.js, I have:

render: { resourceHints: false },
hooks: {
  'generate:page': page => {
    const doc = cheerio.load(page.html);
    doc(`body script`).remove();
    page.html = doc.html();
  },
},

garredow on 10 Jun 2018

👍1

@garredow thanks for your workaround. Since I only want to use NUXT as an HTML rendering engine it would be nice to have some options to get rid of all SPA features.

SpikeShape on 29 Jun 2018

I ended up using the prerender-spa-plugin which opens the page in a headless chromium and saves the resulting HTML to .html files. It also allows for multiple routes and so on This might be what you are looking for. I could provide example config in case anyone is interested.

Nuxt is built around the idea of delivering the initial page as HTML while rendering all the following changes on the client side. Since you don't want that you might want to let go of nuxt until they allow for a pre-render option or something like that.

SpikeShape on 3 Jul 2018

👍1

This question has been resolved by @ederchrono, see answer.