Skip to content

[Migration]: Vue 3 doesn't replace the element it mounts to #924

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
LinusBorg opened this issue Mar 3, 2021 · 3 comments · Fixed by #936
Closed

[Migration]: Vue 3 doesn't replace the element it mounts to #924

LinusBorg opened this issue Mar 3, 2021 · 3 comments · Fixed by #936
Labels
bug Errors and issues people encounter with the docs / repo

Comments

@LinusBorg
Copy link
Member

I'm Vue 2, the element we mount to is replaced. In Vue 3, because we now have Fragements, we mount the app as a child of the mount element.

We don't really document this clearly, at least I couldn't find anything by skimming migration guide and api docs.

@skirtles-code
Copy link
Contributor

The migration guide sort of mentions it indirectly here:

https://v3.vuejs.org/guide/migration/introduction.html#other-minor-changes

In Vue 2.x, application root container's outerHTML is replaced with root component template (or eventually compiled to a template, if root component has no template/render option). Vue 3.x now uses application container's innerHTML instead - this means the container itself is no longer considered part of the template.

Perhaps that should get a page to itself and be less focused on the template aspect of the change?

It should probably be mentioned more explicitly in the API Reference for mount:

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

The API reference for template also needs updating. It claims the element is 'replaced', which is no longer true. Given a template option can be used on any component, not just the root component, it probably shouldn't focus quite so heavily on that aspect anyway:

https://v3.vuejs.org/api/options-dom.html#template

@skirtles-code skirtles-code added bug Errors and issues people encounter with the docs / repo vue-3-migration-guide labels Mar 3, 2021
@LinusBorg
Copy link
Member Author

This section in the migration guide could also be a good place to mention it:

https://v3.vuejs.org/guide/migration/global-api.html#mounting-app-instance

@LinusBorg
Copy link
Member Author

Another point: in the lifecycle diagram, it states:

Create app.$el and replace el with it

Should probably be

Create app.$el and append it to el

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Errors and issues people encounter with the docs / repo
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants