# Mounted application does not replace the element
breaking
# Overview
In Vue 2.x, when mounting an application that has a template
, the rendered content replaces the element we mount to. In Vue 3.x, the rendered application is appended as a child of such an element, replacing element's innerHTML
.
# 2.x Syntax
In Vue 2.x, we pass an HTML element selector to new Vue()
or $mount
:
new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue!'
}
},
template: `
<div id="rendered">{{ message }}</div>
`
})
// or
const app = new Vue({
data() {
return {
message: 'Hello Vue!'
}
},
template: `
<div id="rendered">{{ message }}</div>
`
})
app.$mount('#app')
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
When we mount this application to the page that has a div
with the passed selector (in our case, it's id="app"
):
<body>
<div id="app">
Some app content
</div>
</body>
2
3
4
5
in the rendered result, the mentioned div
will be replaced with the rendered application content:
<body>
<div id="rendered">Hello Vue!</div>
</body>
2
3
# 3.x Syntax
In Vue 3.x, when we mount an application, its rendered content will replace the innerHTML
of the element we pass to mount
:
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
},
template: `
<div id="rendered">{{ message }}</div>
`
})
app.mount('#app')
2
3
4
5
6
7
8
9
10
11
12
When this app is mounted to the page that has a div
with id="app"
, this will result in:
<body>
<div id="app" data-v-app="">
<div id="rendered">Hello Vue!</div>
</div>
</body>
2
3
4
5
# Migration Strategy
Migration build flag: GLOBAL_MOUNT_CONTAINER