How to use Scoped Slot inside Vue's Render Function (Vuetify)

I tried to implement a custom component using Vue's render function. I get some problem to understand how to implement Scoped Slot inside a render function.

In this post, I will share the goal with the example code.

Beginning with the Template

This is the starting point. I had this simple Vue's template that I would convert into a custom component with the render function.

The reason is the classical one when is useful to use render function instead of the template: get more control of the rendering code of the custom component.

<v-tooltip bottom>
  <template v-slot:activator="{ on }">
    <v-icon color="primary" dark v-on="on">mdi-note</v-icon>
  </template>
  <span>Tooltip</span>
</v-tooltip>

Implementation with Vue's render function

This is the implementation with the render function.

const CustomIconTooltip = {
  name: "CustomIconTooltip",
  props: {
    tooltip: String,
  },
  render(createElement) {
      return createElement("v-tooltip", {
          attrs: { bottom: true },
          scopedSlots: {
            // Slot Name
            activator: ({on}) => {
              return createElement(
                "v-icon", { 
                  attrs: { color: "primary", dark: true },
                  on: on,
                },
                "mdi-note"
              );
            },
          },
        },
        this.tooltip
      );
  },
};

How to use CustomIconTooltip Component

<custom-icon-tooltip :tooltip="My Custom Icon Tooltip" />

Code Example

References

• Vuetify v-tooltip component
• Vue Render Function & JSX - The Data Object In-Depth
• Dev.to Post - Accessing the virtual DOM using render functions in Vue JS

Comments

[radiorz]

It is really helpful information. thanks. But there came out a problem:
I cannot use the 'append' slot of v-slider in your way. if Possible,please help me.
stackoverflow.com/questions/666307...

[Stefano Giraldi]

Could you give an example?
You can fork the code attached to this post with your code

codepen.io/etino/pen/JjXjWKb

[radiorz]

Hello, If possible please check my example,I really need it.codepen.io/radiorz/pen/BaQeBOj
Look for your reply.

[Stefano Giraldi]

Hi @radiorz , I made some tests and it seems that the "append" slot is not fired when used inside the render function.

Take a look at this codepen codepen.io/etino/pen/vYgPwmx

I think you could open an issue in the Vuetify community to understand where is the problem

[radiorz]

Coooool. This problem really confuse me , Thank you so much @stefano Giraldi .

[radiorz]

codepen.io/radiorz/pen/BaQeBOj
this is my example, i want to replace the append of v-slider (which is a slot of v-slider) but it didnt work.

[Yevhen Tkachenko]

It was helpful information. thanks.