Search code examples
vue.jsnuxt.js

How to change or hide __nuxt and __NUXT__ keyword in page source


Is there any way to change or hide the name of the __nuxt and __NUXT keywords that are automatically generated in the page source when the page is rendered by Nuxt.js?

Page Source


Solution

  • You can custom both by using the globals property

    nuxt.config.js

    globals: {
      id: '__pizza', // replacing __nuxt
      context: '__FAJITAS__', // replacing __NUXT__
    },
    

    Meanwhile, I'm not sure how you can expect your Vue app to work if you do not provide any CSS selector as for the id mount point. On the other side, context is used for hydration as far as I understand, so this is pretty important too.

    It also looks like full static (yarn generate) is not using the context? Not sure about this but either way, you should probably not try to remove those since they are the foundation of the framework.

    PS: my starting point was this github issue: https://github.com/nuxt/nuxt.js/issues/1792