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 skilled programmer with expertise in Vue.js/Nux.js for front-end development and PHP Laravel for back-end development. I excel in building APIs and services, and also have experience in web server setup & maintenance. My versatile skill set allows you to develop and maintain web applications effectively, from the user interface to the server-side functionality. I love coding with never ending learning attitude, thanks for visiting danya.dk