Vue Render As Html

Posted on  by admin

You want to use a Headless CMS, but you don’t want to loose your custom Vue.JS Components.

What can you do? I thought that as well! But it turns out, that v-html can only render plain html. Your custom components are not getting resolved.

Conclusion

So if you get some string like "

Button
” from your API and use
, 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.

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.

What Kengo Hamasaki / hmsk does is pretty smart. He uses the Vue compiler to compile the html string and then pass this compiled output to the render function. This component would already work, but it could only render components that are mounted in the Vue Instance.