nuxt.js

Using NUXT.js just for static html generation

Nuxt.js is a powerful server side framework, that came with two different modes ‘spa’ & ‘ssr’

spa: No server-side rendering (only client-side navigation)

universal: Isomorphic application (server-side rendering + client-side navigation)

If you are running universal mode for “Server Side Rendering”, and would like to remove all _nuxt junk from specific page this is what you can do.

nuxt.config.js

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()
    }
}

To do so you also need to add webpack plugin for jquery with reference $ as following

build: {
    extractCSS: true,
    vendor: ['jquery'],
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery'
      })
    ]
}

This implementation will be only supported for nuxt version 2.14.3 or blow.

Author: Danyal
I'm working as programmer since 2002. Born, grew up, studied and worked in Pakistan now Im located in Denmark since 2006.