Simple Slots: Silly Component

by Alex Kyriakidis

HTML

<div id="app" class="container">
  <silly-component>
    Hello silly component 
  </silly-component>
</div>


<script type="text/x-template" id="silly-component-template">
  <div class="silly-component">
    <slot></slot>
		<p>I am a silly component</p>
  </div>
</script>

CSS

.silly-component {
  text-decoration: underline;
  font-size: 25px;
  color: fuchsia;
}

Vue

Vue.component('silly-component', {
	template: '#silly-component-template'
})

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