JSFiddle - React, Tailwind, and code Playground

Dynamic Vue components

by Lardpower

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <component v-if="views.portfolio !== null" :is="views.portfolio"></component>
</div>

JavaScript

var HomeComponent = Vue.component('home-component',{
  template: '<component :is="currentView"></component>',
  mounted: function(){
  	this.currentView = Work;
  }
});

var Work = {
  data: function(){
  	return {
    	title: "work"
    };
  },
  mounted: function(){
  	var self = this;
    this.template = '<h2>Impossible is possible!</h2>';
  	setTimeout(function(){
  		self.title = 'Its time to change';
    }, 2000);
  }
}

var Home = {

}

class HomeClass
{

	constructor(){
  	this.data = {
      template: '<p>Welcome {{title}}!</p>',
      data: function(){
        return {
          title: "work"
        };
      }
    }
  };
  
	getData(){
		return this.data;
  };
  
  setTemplate(newTemplate){
  	this.template = newTemplate;
  };
}

var homeInstance = new HomeClass();

var vm = new Vue({
  el: '#app',
  data: {
    views: {
    	portfolio: null
    }
  },
  created: function(){
  	let self = this;
    setTimeout(function(){
      self.views.portfolio = new HomeClass().getData();
      console.log('changed', self.views);
    }, 2000);
  }
});