How to wrap dynamic HTML from database around Vue.js template

Question

I need to be able to wrap custom HTML around my Vue template content. As you can see below, it's not simply inserting html content using <div v-html="HtmlWrapperTopHalf"> because that will automatically close any unclosed tags. The tags will always be closed in the bottom half of the dynamic HTML. Basically, I'm looking to insert the Vue template code into my dynamic template HTML.

I also can't just assume what's in the dynamic HTML and build that inside the Vue template. This HTML comes from a RichText editor that my customers create on their own. They just insert a placeholder {{MAIN_CONTENT}} in the middle of their dynamic template and that's where the Vue Template functionality should appear.

Page.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>

console.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>

HTML Output:

<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>

Hopefully this diagram of the concept will help:

Answer 1

Given that other components can be a part of this split up html content, using the render syntax to generate a slot within the content seems to be the only alternative.

   render(createElement) {
      return createElement(
         'div', { 'class': 'hello'},
         this.$slots.default
      )
   },

Have your axios component be built out within the render (see docs), and then use this as a slot to fill in within future components.

E.g. <ClientHtmlInject> <Comp1/><Comp2/> </ClientHtmlInjection>