When I load this markup I’ll have to replace placeholders %% component_1 %% with a particular components and recompile parent component’s template in order for those components to be rendered correctly. For now I have above content loaded correctly and even replace placeholders with an appropriate components, like this:
Oh, wow, that’s a strange way of doing things. You will have a very hard time to get that working. Not saying it’s possible, but it’s counter to some fundamental principles of how Vue works.
I assume that you mean, you inserted those elements into the DOM. However, Once a component is running, the template is handled internally by the virtualDOM - Vue is not parsing the DOM anymore. So when you add vue-related markup into the DOM, Vue has no way of seeing and parsing this.
For the moment, I’m not sure I have away of making this work, or find a suitable workaroud. I’ll think about it some.
After compilation compiledContent variable is an object of type VNode, I think there’s some way to convert it to normal Html element that can be inserted on the page, that’s what I’m stuck with right now.
I’m aware of that functionality. However, that’s not that easy depending on what you want to do exactly. for instance, the generated render function expects the also generated staticRenderFns to be present on the component instance (if any were geenrated during the compilation process), but your normal template might have such functions of its own.
Also, render should be bound to your current component instance etc. - it’s not an easy to use API.
a more promising approach would probably be to create a dynamic component on the fly:
const template = this.content ? this.content : '<div>nothing here yet</div>'
template, // use content as template for this component
props: this.$options.props // re-use current props definitions
then we create a dynamic component that uses the object from this computed prop as the component definition, and we pass all props we curently have to that component (so that the template string we received from the server can access the same props as you current component can), but if your child components from the content string don’t use any props, that’s not even necessary.
That’s an interesting approach, But I will know only at runtime which computed properties my vue component will contain, is there some way to add computed properties let’s say in mounted () lifecycle hook?
By the way, can I modify vue component’s template before vue will compile it, ( maybe in some lifecycle hook before mounted () )?