Currently, I am in the process of creating my own wrapper for Vuetify components to eliminate the need to repeatedly define the same props in each component. For example, I aim to develop a custom TextField with defaultProps while still being able to accept all props typically used with VTextField.
The approach I took in defining the script setup section was as follows:
<script lang="ts" setup>
import type { ExtractPropTypes } from 'vue';
import { computed } from 'vue';
import { VTextField } from 'vuetify/components';
type VTextProps = InstanceType<typeof VTextField>['$props'];
// type VTextProps = ExtractPropTypes<typeof VTextField>;
const props = defineProps<VTextProps>();
const emit = defineEmits(['update:modelValue']);
const value = computed({
get() {
return props.modelValue;
},
set(value) {
emit('update:modelValue', value);
},
});
</script>I experimented with two different ways to extract the props of VTextField:
type VTextProps = InstanceType<typeof VTextField>['$props'];
type VTextProps = ExtractPropTypes<typeof VTextField>;Unfortunately, I encountered an issue where neither method seemed to work. While my IDE showed functioning behavior and autocomplete features, I received the following error from vite:
[vite] Internal server error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility typeIt appears that the defineProps function of Vue may have trouble parsing this utility type correctly. Do you have any recommendations for a workaround so that I don't have to create my own types? It seems that Vuetify does not expose its types...
I would greatly appreciate any suggestions or assistance!