I am currently working on a project where I need to load a text string (https://pastebin.com/Mp9sKy1A) into a webpage and replace instances of --FML-[componentName] with the corresponding component.
For example, --FML-[NoteBlock] should automatically be replaced with the NoteBlock component.
This is my current implementation:
pureContent () {
const c = this.content.replaced
const re = new RegExp(`<p>--FML-\\[(\\w+)\\]</p>`, 'g')
return c.replace(re, ($0, $1) => `<component v-bind:is="${$1.toLowerCase()}"></component>`)
}
The output will then be inserted into the following template:
<template>
<div>
<site-header></site-header>
<div class="wrapper">
<side-bar></side-bar>
<main class="container" v-html="pureContent()" />
</div>
</div>
</template>
The current implementation sort of works, but the component part is not being recognized as an actual component. Instead, it displays as a <component> HTML tag, which is not what we want. Is there a way to fix this?
If you are interested, here is the full SFC file: https://pastebin.com/yb4CJ1Ew
This is the current output I am getting:
<main data-v-86dcc3c4="" class="container">
<h1 id="creating-new-contexts">Creating new contexts</h1>
<h2 id="section-title">Section Title</h2>
<h3 id="section-subtitle-that-contains-additional-information">
Section subtitle that contains additional information
</h3>
<p>
Cillum ipsum ad veniam elit non. Sunt ea ut quis qui dolore id voluptate
magna. Ex non commodo reprehenderit ipsum irure. Ad excepteur nulla ullamco
et deserunt magna et sint reprehenderit sint esse commodo. Tempor duis anim
nisi commodo incididunt ut ex et sunt laborum excepteur ea culpa laborum.
</p>
<component v-bind:is="noteblock"></component>
<p>
Officia esse Lorem ad duis dolore nostrud ex elit aliqua incididunt sint ad
ex. Eiusmod do in ad aute nulla eiusmod tempor Lorem non. Qui sunt voluptate
laborum mollit elit adipisicing minim dolore voluptate veniam incididunt
proident ullamco. Ipsum est cupidatat occaecat pariatur ut aute.
</p>
<component v-bind:is="codeexample"></component>
<component v-bind:is="propstable"></component>
</main>
The <component> tags should actually render Vue components