CODEWITHSUNDEEP
vue.js
Scott
Scott

Reputation: 715

Why does the root element in my App.vue template have to match the one in index.html?

I have created a project using the vue cli (version 3.0.0-rc.10) and configured it to use typescript.

In the index.html file it creates, there is a <div id="app"></div> which if I understand correctly the main.ts file will look for via the mount function in the below code

new Vue({
  render: h => h(App)
}).$mount('#app')

However, when I look in the App.vue files it also has a root element of div with an id of app.

Why must the App.vue’s template have a div exactly the same as that found in index.html?

Upvotes: 4

Views: 1395

Answers (1)

Ohgodwhy
Ohgodwhy

Reputation: 50787

It doesn't have to have id="app" in the App.vue file, change the ID to whatever you want.

$mount('#app') replaces the existing <div id="app"> from the index.html not from the App.vue. It's just boilerplate code.

Upvotes: 4

Related Questions