How to require a slot in Vue.js?

Question

I previous had a string that could contain HTML (from server, not user) that I was accepting as a prop. Simplified, it was something like this.

<foobar alert-content="<strong>bazboo</strong>">
</foobar>

And I defined the prop to make it required like so

alertContent: {
  type: String, 
  required: true,
},

I decided a slot made more sense here, so I started passing it was a slot.

<foobar>
    <strong>bazboo</strong>
</foobar>

With a slot in the template as you'd expect. And it works. But I can no longer require it.

How can I require a slot in Vue.js?

Answer 1

I'm not aware of any built in way to require a slot in the same way a prop can be required, but you can provide the same functionality fairly easily by examining the default slot when the component is created.

Here is an example.

 console.clear() Vue.component("TestComponent",{ template: ` <div> <slot /> </div> `, created(){ if (!this.$slots.default) console.error("TestComponent requires content be provided in the slot.") } }) new Vue({ el: "#app" }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="app"> <test-component></test-component> </div> 

Alternatively provide default content that makes it obvious the slot needs to be provided.

 console.clear() Vue.component("TestComponent",{ template: ` <div> <slot> <h2>Hey dummy, you need to add content to TestComponent</h2> </slot> </div> `, created(){ if (!this.$slots.default) console.error("TestComponent requires content be provided in the slot.") } }) new Vue({ el: "#app" }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="app"> <test-component></test-component> <hr> <test-component> <h3>This one won't show the default content</h3> </test-component> </div>