How to dynamically compile a component added to a template in VueJS?

Question

I am building a blog with VueJS 2. Most of my articles are stored as Markdown files, but I want to me able to cover some more advanced topics, using features that Markdown doesn

Answer 1

You can compile a template with Vue.compile. Just be aware it's not available in all builds. That's covered in the documentation.

Getting the data associated with it is a little more work.

console.clear()

const articles = [
  {
    title: "Testing",
    articleTemplate: ""
  },
  {
    title: "Testing 2",
    articleTemplate: ""
  },
]

Vue.component("article-title",{
  template: `Article Title`
})

Vue.component("special-article", {
  props:["articleTitle"],
  template: `
    

      
{{articleTitle}}
      
Some article text
    
  `
})

new Vue({
  el: "#app",
  data:{
    articles
  },
  computed:{
    compiledArticles() {
      return this.articles.map(a => {
        // compile the template
        let template = Vue.compile(a.articleTemplate)
        // build a component definition object using the compile template.
        // What the data function returns is up to you depending on where 
        // the data comes from.
        return Object.assign({}, template, {data(){return a}})
      })
    }
  }
})