How to replace a tag in html string to Vue 3 Component in Nuxt.js 3 project?

Question

I'm using Nuxt.js v3.7.4 (SSR Mode), I have a response from api is a html string of a WYSIWYG editor like this

<div>
<custom-poll id="9" />
</div>

and I have a component Poll.vue that I want to use for replacing <custom-poll id="9" /> to <Poll id="9" />, I researched and I tried to use <Component :is="{template:...}" /> but it become flickering (it show up in 1 - 2 seconds then disappear from the DOM)

here is the demo of my issue: https://stackblitz.com/edit/github-bygkhd?file=nuxt.config.ts,app.vue,pages%2Findex.vue,components%2FPoll.vue

I want to replace the <custom-poll id="9" /> to <Poll id="9" /> Poll.vue component

Answer 1

Let's see the warn in console:

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

Then add this config to nuxt.config.ts

  vue: {
    runtimeCompiler: true,
  },

Here is docs.