Vue.js - Dynamic Components

by Med

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<div id="app">
  <component v-bind:is="currentView">
    <!-- component changes when currentView changes! -->
  </component>
</div>

JavaScript

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