I’m trying to figure out how to create a component that allows for search and replace of keywords with chunks of HTML that, alone, are not valid HTML. Additionally, all the HTML needs to be compiled by Vue at runtime. For example:

const structure = [];
const parts = [];
structure[0] = `
    <table>
        <tr>
            <td :style="textStyle"></td>
            <td>
                `; parts['thing'] = `
            </td>
            <td :style="titleStyle">Optional Part</td>
            <td>
                `; structure[1] = `
            </td>
        </tr>
    </table>
`;

The main component template would essentially be structure[0] + databaseContent + structure[1]. And then if databaseContent had the string ::: thing ::: in it, it would be replaced with parts['thing']. Then the end result would have to be compiled by Vue at runtime.

I’m using the vue3-runtime-template package to solve the runtime compile problem. What I’m finding though, is when parts['thing'] is imported, the HTML gets all mangled as Vue sees it as invalid and attempts to fix it by removing the </td> and adding additional markup.

How can I organize this?