How to cleanup Nuxt js extra div containers?

Question

this is my example page:

This is the Nuxt layout:

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

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

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

Answer 1

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).