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't cover. I am considering making these special posts VueJS ponents that would be used in a template as <article-name>, or <special-article article-title="{{articleTitle}}">. Pretty simple.

I have the ponent loaded already, so all I need to do is pile the template string into a real template. I might be thinking too much with my AngularJS background rather than with Vue.

I can't find any solid direction for dynamically adding a ponent to a template in VueJS.

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't cover. I am considering making these special posts VueJS ponents that would be used in a template as <article-name>, or <special-article article-title="{{articleTitle}}">. Pretty simple.

I have the ponent loaded already, so all I need to do is pile the template string into a real template. I might be thinking too much with my AngularJS background rather than with Vue.

I can't find any solid direction for dynamically adding a ponent to a template in VueJS.

• javascript
• vue.js
• vuejs2
• vue-ponent

• do you need this? vuejs/v2/guide/ponents.html#Dynamic-Components – Kresimir Pendic Commented Dec 11, 2017 at 18:54
• 1 @KresimirPendic yup! Those solutions were more plicated than what I needed, though. Check the other answers for the simpler solution. – elliottregan Commented Dec 11, 2017 at 19:07

2 Answers 2

You can pile a template with Vue.pile. 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: "<article-title></article-title>"
  },
  {
    title: "Testing 2",
    articleTemplate: "<special-article :article-title='title'></special-article>"
  },
]

Vue.ponent("article-title",{
  template: `<span>Article Title</span>`
})

Vue.ponent("special-article", {
  props:["articleTitle"],
  template: `
    <div>
      <h1>{{articleTitle}}</h1>
      <p>Some article text</p>
    </div>
  `
})

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

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.9/vue.min.js"></script>
<div id="app">
  <ponent v-for="article in piledArticles" :is="article"></ponent>
</div>

VueJS has a built-in ponent for this scenario:

<ponent is="article-ponent-name"></ponent>