[Vuejs]-How to create a component that wraps a specific slot in VueJS (like `v-list-item-title` from Vuetify)?

by

1👍

This might be a misconception, when you put a <v-list-item-title> in the default slot, it does not end up where the #title slot would go, but stays in the default slot. You can add several titles through the default slot, even along with using the title slot.

Have a look at the code for VListItem. In non-tsx, it would look something like this:

<div class="v-list-item__content" data-no-activator="">

  <v-list-item v-if="$slots.title || props.title">
    <slot name="title" :title="props.title">
      {{props.title}}
    </slot>
  </v-list-item>

  <slot v-bind="slotProps"/>

</div>

So there is a VListItem that is only rendered when #title slot or props.title is provided, where props.title is the default content, which will be overridden by the slot.

👤Moritz Ringler

Leave a comment