In Vue 3, what happens to the existing HTML inside the mount container when app.mount() runs?

## The container is a host, not part of the app `app.mount(container)` takes an element, or a selector for one, and renders the root component **inside** it. The element itself, with its id, classes and attributes, remains in the page. The Vue guide states it plainly: the container element itself is not considered part of the app. ## Step by step 1. Vue resolves the container element. 2. It checks the root component. If the root has **neither** a `template` option **nor** a render function, Vue copies the container's `innerHTML` into the root component's `template`. This is the **in-DOM root template** pattern. 3. It clears the container's existing content. 4. It compiles the template if needed and renders the root component into the now-empty container. 5. It removes the `v-cloak` attribute from the container, if present, and sets a `data-v-app` attribute on it. So in both cases the original markup disappears; the difference is whether it was used as the template first. | Root component | What the old container content becomes | |---|---| | SFC or render function | discarded, replaced by the rendered output | | options object with `template` | discarded, replaced by the rendered output | | options object with neither | read as the template, then replaced by its rendered result | | created with `createSSRApp` | kept and hydrated rather than replaced | ## In-DOM root templates This pattern lets Vue enhance HTML that a server already produced, without a build step: ```html <div id="app" v-cloak> <button @click="count++">{{ count }}</button> </div> ``` The root component then only needs state, for example a `setup()` returning `count`. Compiling that HTML happens in the browser, so the page must load Vue's build that includes the runtime template compiler; the runtime-only build used with SFCs cannot do it. The `v-cloak` attribute plus a CSS rule such as `[v-cloak] { display: none }` hides the raw mustaches until mount removes the attribute. ## Avoiding a flash of raw template syntax With an in-DOM root template, the browser displays the container's HTML as soon as it parses it, before the Vue bundle has loaded. For that moment users see raw `{{ count }}` text and buttons that do nothing. The standard fix has two parts: 1. add `v-cloak` to the container in the server template; 2. add a global CSS rule, `[v-cloak] { display: none; }`. Mount removes the attribute from the container after rendering, so the rule stops matching and the rendered content appears. The trade-off is a blank area until JavaScript runs, so reserve its space with CSS to avoid layout shift, and consider whether real server-rendered placeholder content would serve users better, which means a precompiled component and a different mounting strategy. ## The security consequence Because the container's HTML becomes a **template**, every `{{ }}` and directive inside it is evaluated as a JavaScript expression. If the server writes user-supplied text into that container, a user can inject template expressions that run in other users' browsers. Vue's source marks this path as unsafe for exactly that reason. Defences: - keep user-generated content out of any element that serves as an in-DOM template; - or render such content from data, through interpolation or `v-text`, which escapes it, instead of letting the server paste it into the template; - or skip the pattern entirely and ship precompiled components. ## Vue 2 versus Vue 3 In Vue 2, mounting a component that had a template **replaced the mount element** with the rendered root. In Vue 3 the rendered app is placed inside the element, replacing its `innerHTML`. Code or CSS that targeted `#app` expecting it to vanish, or expecting the root's own element to carry the id, needs adjusting when migrating. ## Common mistakes - Expecting server-rendered placeholder content inside the container to remain after a client-only mount. - Forgetting `v-cloak` styling and showing raw template syntax briefly on slow pages. - Using an in-DOM root template with the runtime-only build and getting an empty mount. - Printing unescaped user content into a container that doubles as a template.