Vue runtime template

by Ico Dimchev

HTML

<div id="app">
  <fnl template="<div><test>I'm in test slot</test></div>"></fnl>
</div>

CSS

body {
  
  color: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

Vue

Vue.component('test', {
	template: '<div class="test" v-on:click="log"><slot></slot></div>',
  methods:{
  log: function(){
  console.log('Hello from test!');
  }
  }
});

Vue.component('fnl', {
	functional: true,
	props:{
  	template:{
    	type:String,
      default: '<p>FNL Component</p>'
    }
  },
  render: function(h, context){
  	return h({ template: context.props.template });
  }
});

new Vue({
  el: "#app",
})