Vue.js Dynamic Components Simple Dynamic Components Example


Example

Dynamically switch beetween multiple components using <component> element and pass data to v-bind:is attribute:

Javascript:

new Vue({
  el: '#app',
  data: {
    currentPage: 'home'
  },
  components: {
    home: {
      template: "<p>Home</p>"
    },
    about: {
      template: "<p>About</p>"
    },
    contact: {
      template: "<p>Contact</p>"
    }
  }
})

HTML:

<div id="app">
   <component v-bind:is="currentPage">
       <!-- component changes when currentPage changes! -->
       <!-- output: Home -->
   </component>
</div>

Snippet:

Live Demo