I'm currently working on a dynamic markdown component setup that looks like this
<div v-highlight :is="markdownComponent"></div>
Here's the computed section:
computed: {
markdownComponent() {
return {
template: this.html,
data() {
return {}
},
methods: { }
}
}
}
The content of this.html is generated dynamically using markdown-it. I've implemented a code_block/fence rule to enhance the appearance of the pre > code block. A sample of the this.html content is as follows:
<div>
<div class="code-header">
<span class="code-language">
Python
</span>
<a class="code-copy" @click="copyText('xxxx')">
<i class="fa fa-copy"></i>
Copy
</a>
</div>
<pre>highlighted data</pre>
</div>
Although it functions properly, Vue raises a warning message:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Notes2> at src/note.vue
<App> at src/App.vue
<Root>
If I add an empty render function, the warning disappears but the page becomes blank:
computed: {
markdownComponent() {
return {
render(h) {
return h('div', {}, [])
},
template: this.html,
data() {
return {}
},
methods: { }
}
}
}
}
Any ideas on how to include a "default" render function? I want to ensure proper rendering without Vue displaying that warning.
EDIT
I have already consulted Vue template or render function not defined yet I am using neither?, but it did not offer a solution to this specific issue