When defining a slot in a Vue.js ponent template using regular old HTML, it's as simple as this:

<div>
    <h1>Hello, I am a template!</h1>
    <slot name="my_slot"></slot>
</div>

And it can be activated like so when using the template in your page:

<my-template>
    <template slot="my_slot">
        <p>Slot content.</p>
    </template>
</my-template>

Which should output something like:

<div>
    <h1>Hello, I am a template!</h1>
    <p>Slot content.</p>
</div>

However, my situation requires that I define my ponent template using the render function which means the template DOM needs to be set up using nested calls to the createElement function. So my original template definition would now look something like this:

h('div', {}, [
    h('h1', {
        domProps:{
            innerHTML: "Hello, I am a template!"
        }
    }, []),
    h('slot', {
        attrs:{
            name: "my_slot"
        }
    }, [])
])

However this doesn't work for me. I'm assuming it's because 'slot' isn't a valid html tag but I can't seem to find any clear answer on this specific subject. How can I correctly define slots in a Vue.js ponent template when using the render function?

When defining a slot in a Vue.js ponent template using regular old HTML, it's as simple as this:

<div>
    <h1>Hello, I am a template!</h1>
    <slot name="my_slot"></slot>
</div>

And it can be activated like so when using the template in your page:

<my-template>
    <template slot="my_slot">
        <p>Slot content.</p>
    </template>
</my-template>

Which should output something like:

<div>
    <h1>Hello, I am a template!</h1>
    <p>Slot content.</p>
</div>

However, my situation requires that I define my ponent template using the render function which means the template DOM needs to be set up using nested calls to the createElement function. So my original template definition would now look something like this:

h('div', {}, [
    h('h1', {
        domProps:{
            innerHTML: "Hello, I am a template!"
        }
    }, []),
    h('slot', {
        attrs:{
            name: "my_slot"
        }
    }, [])
])

However this doesn't work for me. I'm assuming it's because 'slot' isn't a valid html tag but I can't seem to find any clear answer on this specific subject. How can I correctly define slots in a Vue.js ponent template when using the render function?

• javascript
• html
• vue.js
• vue-ponent

• There is an in depth article here on how to use scoped slots with render functions. This is up to date with vue 3 since most of the answers here use vue 2 – dbzx10299 Commented Aug 23, 2023 at 21:52
• NOTE: the above link is broken here is an article how to use scoped slots with render functions and I added some info to this on the vue docs here – dbzx10299 Commented Feb 17, 2024 at 1:01

2 Answers 2

From the documentation

h('div', {}, [
    h('h1', {
        domProps:{
            innerHTML: "Hello, I am a template!"
        }
    }, []),
    this.$slots.my_slot
])

h('div', {}, [
    h('h1', {
        domProps:{
            innerHTML: "Hello, I am a template!"
        }
    }, []),
    h('div', {
        slot: 'my_slot'
    }, [])
])

and it works.