Vue.js Playground

Auto-latest Vue with minimal boilerplate

by Loilo

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"></div>

JavaScript

// This code is an example demonstrating the situation described in this Gist:
// https://gist.github.com/Loilo/73c55ed04917ecf5d682ec70a2a1b8e2

const A = {
  template: `<div><slot name="a">Default A Content</slot><slot>Default C</slot></div>`
}

const B = {
  template: `<div><slot name="b">Default B Content</slot></div>`
}

const C = {
  template: `<div><slot name="c">Default C Content</slot></div>`
}

const D = {
  template: `<div><slot name="d" emoji="🎉">Default D Content</slot></div>`
}

Vue.component('W', {
  props: ['child'],
  template: `<div :is="child">
  <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
  <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>
</div>`
})

new Vue({
	el: '#app',
  template: `<W :child="D"><span slot="d" slot-scope="{ emoji }">Special D Content with scoped data: {{ emoji }}</span></W>`,
  data: {
  	A, B, C, D
  }
})