Necesito poder envolver HTML personalizado alrededor del contenido de mi plantilla de Vue. Como puede ver a continuación, no se trata simplemente de insertar contenido html usando <div v-html="HtmlWrapperTopHalf"> porque eso cerrará automáticamente cualquier etiqueta no cerrada. Las etiquetas siempre estarán cerradas en la mitad inferior del HTML dinámico. Básicamente, estoy buscando insertar el código de plantilla de Vue en mi HTML de plantilla dinámica.

Tampoco puedo asumir lo que hay en el HTML dinámico y construirlo dentro de la plantilla de Vue. Este HTML proviene de un editor de texto enriquecido que mis clientes crean por su cuenta. Simplemente insertan un marcador de posición {{MAIN_CONTENT}} en el medio de su plantilla dinámica y ahí es donde debería aparecer la funcionalidad de la plantilla Vue.

Página.vue

 <template> <div> //Top half of dynamic XHTML wrapper goes here <p>Inner Content Here</p> <ComponentA /> <ComponentB /> <!-- etc. ---> <p>More Inner Content</p> //Bottom half of dynamic XHTML wrapper goes here </div> </template> <script> axios.get("getHtmlContent").then((result) =>{ console.log("top", result.data.HtmlWrapperTopHalf) console.log("bottom", result.data.HtmlWrapperBottomHalf) }); </script>

consola.log

 top: <div class="my-dynamic-class" id="my-unique-id"><h1>DYNAMIC TITLE</h1> bottom: <div id="my-dynamic-footer">custom footer text</div></div>

Salida HTML:

 <div> <div class="my-dynamic-class" id="my-unique-id"><h1>DYNAMIC TITLE</h1> <p>Inner Content Here<p> <div>Hello from ComponentA!!</div> <div>Hello from ComponentB!!</div> <!-- etc. ---> <p>More Inner Content<p> <div id="my-dynamic-footer">custom footer text</div></div> </div>

Esperemos que este diagrama del concepto ayude: