Vue components and slots

by Pankaj Kargirwar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://npmcdn.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <test-list :items="items">
    <span v-for="item in items" class="slot-item">{{item.name}}</span>
  </test-list>
</div>


<script id='test-list' type='x-template'>
  <ul class="list-group">
    <test-item v-for="item in items" :id="item.id" :name="item.name">
    	<slot></slot>
    </test-item>
  </ul>
</script>

<script id='test-item' type='x-template'>
  <li class="list-group-item">
    <slot>default text {{name}}</slot>
  </li>
</script>

CSS

.slot-item {
  font-weight: bold
}

JavaScript

Vue.component('test-list', {
  template: '#test-list',
  props: {
  	items: []
  },
});

Vue.component('test-item', {
  template: '#test-item',
  props: {
  	id: 0,
    name: "X"
  }
});


var app = new Vue({
  el: "#app",
  data: {
  	items: [
    	{id: 1, name: "item 1"},
    	{id: 2, name: "item 2"},
    	{id: 3, name: "item 3"},
    	{id: 4, name: "item 4"},
    	{id: 5, name: "item 5"},
    ]
  }
});