Extending vuetify component in vue3 composition API

331 views Asked by At

I am trying to create a custom datatable that is based on vuetify datatable using vue3 composition api, my problem is that i cant make my component accept the same props and slots that the original datatable component has.

what i want is something like this:

inside my component:

<script setup lang="ts">
 defineProps(myCustomProps)
</script>

<template>
 <datatable :items="itemsFromMyProps">
  
</datatable>
</template>

now this is my component and i passed props to it that does my custom functionality, but i still want to find a way to access all the datatable props and slots from my component like this:

<MyCustomComponent :pageSize="pageSize">
<template v-slot:item.field1="{item}">
<span> this is a data table slot that i access from my component</span>
</template>
<MyCustomComponent>
1

There are 1 answers

0
Mehrnaz On

I had this problem too, and I fixed it in a simple way, but I should say I can't find a solution for can extend slots too. I import the component of Vuetify with the correct path. In extendTextField.vue

<script setup>
import { VTextField as customTextField } from "vuetify/lib/components/VTextField"; 
</script>
<template>
<customTextField></customTextField>
</template>

And for another component that I want to use, just import it.

<ExtenTextField label="Name"/>

It's work for other components of Vuetify that I tried.