<div id="app"> is in App.vue and index.html

[GreggOD]

Version

3.8.0

Reproduction link

https://codesandbox.io/s/vue-template-p5kdn?fontsize=14

Steps to reproduce

Install @vue/cli;
Create a project;
In main.js change mount to:

new Vue({
  el: "#app", // because this id exists twice
  components: { App },
  template: "<App/>"
});

watch app serve fail because #app exists in App.vue and index.html.

What is expected?

App to mount

What is actually happening?

App is failing to mount due to duplicate id

---

While helping someone implement ant-design package with vue cli I noticed in App.vue its root element is a div with the id of "app".
Then in public/index.html there is also a div with id "app".

The id should be removed from App.vue

[Akryum]

When Vue mount the app, the entire outer HTML of the target element is replaced with the rendered templates & components. Which means in the end there is only one <div id="app">. But this doesn't even matter because mounting isn't done yet when Vue looks for the el target. So whatever you put in the template isn't rendered to the DOM at this stage.

watch app serve fail because #app exists in App.vue and index.html.

So this is impossible.