Imprimir el objeto "Proxy" de javascript que envuelve mi aplicación Vue3 virtual muestra perfectamente un valor específico que me gustaría extraer.
console.log(proxyVueApp) ...produce hermoso HTML en el fondo de proxyVueApp.$.vnode.el.outerHTML .
Acceder al accesorio directamente con console.log(proxyVueApp.$.vnode.el) me da un comentario HTML porque es un DOM virtual: <!----> . console.log(proxyVueApp.$.vnode.el.outerHTML) no está undefined .
¿Hay alguna manera de capturar este HTML de una forma u otra?
Ahora para los detalles. Así es como creo mi instancia de Vue, importo un componente dinámico y lo monto todo:
const proxyVueApp = createApp({ render() { const relPath = 'some/path'; const compReference = defineAsyncComponent(() => import(relPath /* @vite-ignore */) ); return h(compReference); }, }); const el = document.createElement('div'); const mountedApp = proxyVueApp.mount(el); ¿No hay forma de extraer el HTML que estoy viendo con mis propios ojos desde mi aplicación montada o mountedApp el ? Siento que estoy lidiando con un caso del gato de Schrödinger aquí. El elemento está muerto y vivo.
Puede usar la forma en que funciona SSR para lograr su objetivo
import { createSSRApp } from 'vue' import { renderToString } from 'vue/server-renderer' const app = createSSRApp({ data: () => ({ count: 1 }), template: `<button @click="count++">{{ count }}</button>` }) renderToString(app).then((html) => { // this is what you want console.log(html) })Aquí está mi solución completa basada en la respuesta de Duannx. Se ha sacado un contexto de ciclo de vida de Storybook:
import { createApp, defineAsyncComponent, h } from 'vue'; import { renderToString } from '@vue/server-renderer'; let html = ''; const tempApp = createApp({ render() { const relPath = 'path/to/component.vue'; const compReference = defineAsyncComponent(() => import(relPath)); return h(compReference); } }); renderToString(tempApp).then((h) => { html = h; });