When Vue <slot/> in a component is not an option, but you rather get all the data from Ajax request and render HTML inside a Vue Component. Which you might use v-html directive but you found out that raw HTML that contains Vue Components will not render as you expect. While you inspect html you see just the tag name and that’s it, as if nothing has compiled.
To solve this;
Vue.compile to the rescue!
Example below is the Twitter Bootstrap static modal.
Before we make the VueModal.vue component, we make extra component HtmlCompiler.vue
Vue Component HtmlCompiler
Option 1: HtmlCompiler as global component
This will definitely work, but I don’t think it’s a good idea because every function call will create a DIV-element in the Virtual Dom, just because you’re using these functions innerHTML and outerHTML.
Improved the code
Option 2: HtmlCompiler as a component to import later
The Static Modal as Vue Component
Code below will show you HtmlCompiler as the imported version and not as a global Vue Component.
I recommend to use HtmlCompiler as global component, I mean all required components that might render in this Modal. This method is fine, if you care about Treeshaking
Vue Component VueModal
(Work in Progress)