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 a skilled programmer specializing in Vue.js/Nuxt.js for front-end development and PHP Laravel for back-end solutions. I have a strong focus on API design and development, complemented by experience in web server setup and maintenance. My versatile expertise ensures seamless creation and maintenance of web applications, covering everything from intuitive user interfaces to robust server-side functionality. Passionate about coding and driven by a lifelong learning mindset, I invite you to explore more at danyal.dk.