Vue3: how to avoid Vitejs to erase/replace all DOM content when mounting the app?

Question

I come from Vue 2 and I was used to have my wordpress standard html pages and use some Vue components inside them. Just passed the container to the main app el property, and then I could use components on the container, where I wanted to, without having all the default container's content be erased or replaced. Basically, passing a dom element to the el property, maked that element a Vue app, with all its contents (even without any Vue components).

With Vue 3 and createApp, it seems there's no way of doing it, since as soon as I mount the app to a container (say #app), then all the container's contents are erased or replaced with component's template (if a component is passed). Even the following, which doesn't use any component, is going to clear all the #app original contents:

import { createApp } from 'vue'

createApp({

}).mount('#app');

How to avoid? How to just use some spare components on a free html page? And how about SFC used the same way?

You need to be more specific than that, Vue 3 still supports [in DOM templates](https://v3.vuejs.org/guide/component-basics.html#dom-template-parsing-caveats) — Michal Levý, Sep 07 '21 at 13:41
Thank you, I edited my question. Basically, what is changed is that with Vue2's `el` property, you could pass an existing piece of html page and get it as a Vue app. This is not the case anymore. It seems there's no way to retain existing markup. — Luca Reghellin, Sep 07 '21 at 14:05

score 5 · Accepted Answer · edited Sep 06 '22 at 19:12

Technically Vue always replaces the content of the element (Vue 2 was replacing the element itself, Vue 3 replaces it's inner content - migration guide)

IF the app/component being mounted has no template option or render function, then (and only then) Vue takes the original content of the DOM element (before it mounts) and tries to compile it into render function (that is why you need Compiler + runtime build when using in-DOM templates)

It also means that if your page consists mostly of static HTML (from WordPress) and only "small sprinkles" of Vue, this solution is very ineffective and reason why petit-vue exists (I recommend reading Comparison with standard Vue

Anyway. I'm not able to reproduce your problem...

const app = Vue.createApp({
}).mount("#app")

<script src="https://unpkg.com/vue@3.2.9/dist/vue.global.js"></script>
<div id='app'>
  <div>
    <h2>Hello from HTML!</h2>
  </div>
</div>

So what can be wrong?

Check browser Dev tools console for any error message - if the compilation step (of the template retrieved from DOM) fails, Vue would indeed render nothing and it would feel like "Vue erases everything after mount"
Beware of DOM Template Parsing Caveats. Browsers tend to "fix" invalid HTML before Vue reads it from the DOM - can cause strange errors
Be sure to use a Vue distribution which includes template compiler. Failing to do so would also lead to an error and all content erased

@LucaReghellin Check [this](https://stackoverflow.com/a/67354652/381282) — Michal Levý, Sep 08 '21 at 09:20

Vue3: how to avoid Vitejs to erase/replace all DOM content when mounting the app?

1 Answers1