Vengo de Vue 2 y estaba acostumbrado a tener mis páginas html estándar de wordpress y usar algunos componentes de Vue dentro de ellas. Simplemente pasé el contenedor a la propiedad principal de la aplicación, y luego pude usar componentes en el contenedor, donde quería, sin tener que borrar o reemplazar todo el contenido del contenedor predeterminado. Básicamente, pasar un elemento dom a la propiedad el convertía ese elemento en una aplicación Vue, con todo su contenido (incluso sin ningún componente Vue).
Con Vue 3 y createApp, parece que no hay forma de hacerlo, ya que tan pronto como monto la aplicación en un contenedor (por ejemplo, #app), todo el contenido del contenedor se borra o se reemplaza con la plantilla del componente (si se pasa un componente ). Incluso lo siguiente, que no usa ningún componente, borrará todo el contenido original de la #aplicación:
import { createApp } from 'vue' createApp({ }).mount('#app');¿Como evitar? ¿Cómo usar algunos componentes de repuesto en una página html gratuita? ¿Y qué tal SFC usado de la misma manera?
Técnicamente, Vue siempre reemplaza el contenido del elemento (Vue 2 reemplazaba el elemento en sí, Vue 3 reemplaza su contenido interno - guía de migración )
SI la aplicación/componente que se está montando no tiene una opción de template o una función de render , entonces (y solo entonces) Vue toma el contenido original del elemento DOM (antes de que se monte) e intenta compilarlo en la función de procesamiento (es por eso que necesita Compilador + compilación en tiempo de ejecución cuando se usan plantillas en DOM)
También significa que si su página consiste principalmente en HTML estático (de WordPress) y solo "pequeñas chispas" de Vue, esta solución es muy ineficaz y la razón por la que existe petit-vue (recomiendo leer Comparación con Vue estándar
De todos modos. No puedo reproducir tu problema...
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>Entonces, ¿qué puede estar mal?