I e from Vue 2 and I was used to have my wordpress standard html pages and use some Vue ponents inside them. Just passed the container to the main app el property, and then I could use ponents 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 ponents).

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 ponent's template (if a ponent is passed). Even the following, which doesn't use any ponent, 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 ponents on a free html page? And how about SFC used the same way?

I e from Vue 2 and I was used to have my wordpress standard html pages and use some Vue ponents inside them. Just passed the container to the main app el property, and then I could use ponents 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 ponents).

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 ponent's template (if a ponent is passed). Even the following, which doesn't use any ponent, 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 ponents on a free html page? And how about SFC used the same way?

• javascript
• vue.js
• vuejs3
• vite

Share Improve this question Follow edited Sep 8, 2021 at 13:14 Luca Reghellin asked Sep 7, 2021 at 13:13 Luca ReghellinLuca Reghellin 8,1351515 gold badges8484 silver badges132132 bronze badges 2

• You need to be more specific than that, Vue 3 still supports in DOM templates – Michal Levý Commented Sep 7, 2021 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 Commented Sep 7, 2021 at 14:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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/ponent 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 pile 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 remend reading Comparison with standard Vue

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

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

<script src="https://unpkg./[email protected]/dist/vue.global.js"></script>
<div id='app'>
  <div>
    <h2>Hello from HTML!</h2>
  </div>
</div>

So what can be wrong?

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