<div id="app" class="m-2">
<media>
<span slot="title">Random Image</span>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</media>
</div>.media {
background: rgb(240,240,240);
color: rgb(60,60,60);
}
.media img {
border-right: solid 2px #f60;
}Vue.component('media', {
props: ['type'],
computed: {
className: function() {
return `btn-${this.type}`;
},
},
template: `
<div class="media">
<slot name="img">
<img src="http://lorempixel.com/100/100/" />
</slot>
<div class="media-body">
<h5 class="m-2">
<slot name="title"></slot>
</h5>
<div class="ml-2">
<slot></slot>
</div>
</div>
</div>
`
});
var vue = new Vue({
el: "#app"
});