DEV Community

Cover image for How to use Scoped Slot inside Vue's Render Function (Vuetify)
Stefano Giraldi
Stefano Giraldi

Posted on

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

Top comments (7)

Collapse
 
radiorz profile image
radiorz • Edited

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...

Collapse
 
sgtino profile image
Stefano Giraldi

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

codepen.io/etino/pen/JjXjWKb

Collapse
 
radiorz profile image
radiorz • Edited

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

Thread Thread
 
sgtino profile image
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

Thread Thread
 
radiorz profile image
radiorz

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

Collapse
 
radiorz profile image
radiorz • Edited

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.

Collapse
 
tkachenkoyevhen profile image
Yevhen Tkachenko

It was helpful information. thanks.