JSFiddle - React, Tailwind, and code Playground

by rigor789

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <!-- the v-template is inserted -->
  <parent-with-slot>
    <v-template>
      <h2>Just a template...</h2>
    </v-template>
  </parent-with-slot>
  
  <!-- the v-template is never created -->
  <parent-without-slot>
    <v-template>
      <h2>Just a template...</h2>
    </v-template>
  </parent-without-slot>
  
  <!-- the v-template is inserted -->
  <div class="native-element">
    <v-template>
      <h2>Just a template...</h2>
    </v-template>
  </div>
</div>

JavaScript

Vue.component('parent-without-slot', {
	template: '<span class="parent-without-slot"></span>'
})
Vue.component('parent-with-slot', {
	template: '<span class="parent-with-slot"><slot/></span>'
})

// how can I force this component to be created
// regardless of the parent having a slot
Vue.component('v-template', {
	template: '<div class="v-template"></div>',
})


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