Displaying and Rendering Vue Components in v-html

Question

So I store HTML of my Posts in my Database (as an example content below) On my Post Page where you can view the data I have a simple

<span v-html="content"></span>

I wanted to ask how I can make Vue Components work in HTML when fetched from the DB as an Example, or as v-html in general.

And if v-html is not the approach there as I readed often on different sources, what would be the best use case here?

 <div v-swiper:mySwiper=""> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="v8.jpg"></div> <div class="swiper-slide"><img src="v7.jpg"></div> <div class="swiper-slide"><img src=v6.jpg"></div> </div> <div class="swiper-pagination"></div> </div>

Answer 1

I wouldn't drop the towel so early. Have a look at https://github.com/alexjoverm/v-runtime-template

This is probably useful for your use case, with all the usual concerns about safety of these approaches against malicious injections.

However, in the long term, I would look for a different solution, like embedding some special tags in your WYSIWYG editor and replacing those tags with real components when rendering the content (probably using dynamic components https://v2.vuejs.org/v2/guide/components-dynamic-async.html ).