Search code examples
javascriptvue.jsvue-componentnuxt.js

How to cleanup Nuxt js extra div containers?

this is my example page:

enter image description here

This is the Nuxt layout:

<template>
  <div>
    <Nuxt />
  </div>
</template>

And this is what's produced by the Nuxt compiler:

enter image description here

As you can see, there are several, useless, extra containers. Is there any way to get rid of them in Nuxt?

Solution

  • This has been mentioned in nuxt's github issues #3811 and #1792

    You cannot remove <div id="__nuxt"> as it is the root node for mounting Vue instance. The Same goes for the <div id="__layout">, it is not removable.

    You can still modify the application name with the variable globalName configuration option (see pull #4012).