CODEWITHSUNDEEP
javascriptvue.jsvuejs3vite
Luca Reghellin
Luca Reghellin

Reputation: 8101

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

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?

Upvotes: 5

Views: 3258

Answers (1)

Michal Levý
Michal Levý

Reputation: 37753

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/[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 compilation 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 compiler. Failing to do so would also lead to an error and all content erased

Upvotes: 7

Related Questions