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" />

Blog

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

Stefano Giraldi

Beginning with the Template

Implementation with Vue's render function

Code Example

References

Join Our Newsletter. No Spam, Only the good stuff.

Related