Estou tentando criar uma página que carregue uma string de texto https: //pastebin.com/Mp9sKy1) em uma página e substitua qualquer instância de--FML-[componentName] com o componente apropriado.

Então, por exemplo--FML-[NoteBlock] seria substituído automaticamente peloNoteBlock component.

Isso é o que tenho até agora:

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>`)
    }

A saída será colocada no seguinte modelo:

<template>
  <div>
    <site-header></site-header>
    <div class="wrapper">
      <side-bar></side-bar>
      <main class="container" v-html="pureContent()" />
    </div>
  </div>
</template>

Realmente funciona. No entanto, ocomponent parte @ não está sendo usada como um componente real, mas sim como uma<component> Tag HTML, que obviamente não é o resultado desejado. Existe uma maneira de fazê-lo funcionar como desejado?

Aqui está o arquivo SFC completo, se alguém estiver interessado:https: //pastebin.com/yb4CJ1E

Esta é a saída que estou recebendo atualmente:

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

O<component>s tags @ devem ser componentes reais do Vue