How to render an HTML String with custom Vue Components

Render Custom Components from a HTML-String

What is actually the Problem? Why not use v-html?

I thought that as well! But it turns out, that v-html can only render plain html. Your custom components are not getting resolved. So if you get some string like "<div><FancyButton>Button</FancyButton></div>” from your API and use <div v-html="myString"/> , FancyButton will not be rendered. Actually it will be rendered as FancyButton, but your browser will not understand it and handle it like a plain old div element.

no fancy button, just some boring text 😪

Any other Ideas? Yes!

I found this great article from Kengo Hamasaki / hmsk. He does something pretty similar but with a markdown source. So I can just skip some steps (converting markdown to html) and write a render function that fullfills my needs.

Extending the base implementation

This component would already work, but it could only render components that are mounted in the Vue Instance. You could now import all the Components you need, and register them under components .

The FancyButton — https://codepen.io/ZachSaucier/pen/WyJqdL

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store