Version

3.2.30

Reproduction link

stackblitz.com

Steps to reproduce

In Vue 2 when we wrap things in #app we don't get 2 container elements. In Vue 3 though, we do.

Check Vue 2 project: https://codesandbox.io/s/reverent-tdd-4hs4j?file=/src/App.vue Check Vue 3 project: https://stackblitz.com/edit/vitejs-vite-jnq5k4?file=src/App.vue

Vue 2 screenshot:

Vue 3 screenshot:

Notice the 2 container elements with id app in Vue 3 version

What is expected?

Vue 2 and Vue 3 should both render one container element

What is actually happening?

In Vue 3 2 nested container elements are rendered

I know that in Vue 3 we can have multiple root elements, but I think the container elements functionality should be the same in Vue 3.

No, this is a breaking change in Vue 3 and that is intentional.

@LinusBorg any reason why it is a breaking change and a link where is documented as such?

The reason is "Fragments", pretty much. As we can't guarantee a single root node, replacing the element at mount with several others, whose number also could change over time, could have unintended side-effects in cases where the document in which the app is mounted is controlled by other code, or break styling etc.

The RFC can be found here https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md#mounting-behavior-difference-from-2x

Docs: https://vuejs.org/api/application.html#app-mount

@LinusBorg so if App.vue has a single root element we will end up having 2 container elements and there is no way to have just one?

Thanks for the links you referenced, but I can't really understand how can I have only one root element and that being from App.vue

You can try mounting to body, if that helps. But likely not a good idea as it will replace the content

I can accept that you can't understand it but that's what it is.

Thank you @LinusBorg