Vue Dynamic Component

by Eugene Fedorov

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
<div>
  <component-a></component-a>
    <component :is="flyComponent">
      <p>{{ message }}</p>

    </component>

      <button @click="addNewComponent">Load Dynamic Component</button>
  </div>
</div>

JavaScript

var ComponentA = {};
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    flyComponent: null
  },
  components: {
  	'component-a': ComponentA,
  },
  methods: {
  	addNewComponent: function() {
    console.clear();
    var self = this;
    	$.get( "https://fdrv.guru/vue_comp2.php", function( data ) {
				console.log(self.components);
        $("body").append($("<script />", {
          html: data
        }))
				ComponentA = newComp;
      });
    }
  }
})