Wrap a component of Vuetify
Hi, I'd like to wrap a component from vuetify
<template>
<v-text-field
v-bind="fromProps"
type="text"
@update:model-value="updateValue"
>
<template #append-inner="props">
<TooltipError
:error-message="errorMessage"
/>
<slot
name="append-icon"
v-bind="props"
>
<v-icon
v-if="!isNil(appendIcon)"
>
{{ appendIcon }}
</v-icon>
</slot>
</template>
</v-text-field>
</template>
<script setup lang="ts">
import { ref, toRefs } from "#imports";
import { VTextField } from 'vuetify/components';
type props = Omit<InstanceType<typeof VTextField>["$props"], "type">;
type emits = InstanceType<typeof VTextField>["$emit"];
const emit = defineEmits<emits & { (e: "update:modelValue", value: string | null): void }>(); const fromProps = withDefaults( defineProps<props & {errorMessage?: string | undefined, timeout?: number | undefined}>(), { timeout: 0 } ); const { timeout } = toRefs(fromProps); const timeoutToken = ref<NodeJS.Timeout>(); function updateValue(val: string | null) { val = val === "" ? null : val; if (timeout.value !== 0) { clearTimeout(timeoutToken.value); timeoutToken.value = setTimeout(() => emit("update:modelValue", val), timeout.value); } else { emit("update:modelValue", val); } } </script> I tried doing this using InstanceType, but it doesn't work. I Give this error: "[@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type"
const emit = defineEmits<emits & { (e: "update:modelValue", value: string | null): void }>(); const fromProps = withDefaults( defineProps<props & {errorMessage?: string | undefined, timeout?: number | undefined}>(), { timeout: 0 } ); const { timeout } = toRefs(fromProps); const timeoutToken = ref<NodeJS.Timeout>(); function updateValue(val: string | null) { val = val === "" ? null : val; if (timeout.value !== 0) { clearTimeout(timeoutToken.value); timeoutToken.value = setTimeout(() => emit("update:modelValue", val), timeout.value); } else { emit("update:modelValue", val); } } </script> I tried doing this using InstanceType, but it doesn't work. I Give this error: "[@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type"
11 Replies
Hi @_matcheck. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the knowledge sources provided do not contain specific information about wrapping Vuetify components in Nuxt 3 using TypeScript, nor do they address the error "[@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type" when using InstanceType with Vuetify components. The sources do discuss related issues such as prop reactivity, event handling, and some Vuetify usage, but they do not cover this particular TypeScript typing problem or provide a recommended approach for inferring prop and emit types from Vuetify components in Nuxt 3.
If you need further help, you may want to consult the official Vuetify and Nuxt documentation or seek advice on forums with more context about TypeScript support for Vuetify in Nuxt 3.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@1300178283945529427> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai i would like get props from other component and put to defineProps
Let me check the knowledge base for you again. One moment! :books:
----------------------
To get props from another component and use them in
defineProps, you can leverage the approach provided by Nuxt Content's property().inherit() utility. This allows you to reuse a Vue component's props as part of your schema, which helps keep your content model aligned with your UI and reduces duplication. However, this is specifically for content collection schemas, not for directly importing and using props in defineProps within a Vue component.
Here’s how it works in the context of Nuxt Content:
- The inherit() method reads the component's props and converts them to JSON Schema, merging them into your collection schema.
- The argument to inherit() is resolved like a module path.
Note: This approach is for schema inheritance in Nuxt Content, not for directly importing prop types into defineProps in a Vue component. The knowledge sources do not provide a way to directly import and use another component's props in defineProps for a Vue SFC. If you need to share prop types between components, you would typically define a TypeScript interface or type in a separate file and import it where needed, but this is not covered in the provided sources.
For more details, see the Nuxt Content documentation on inheriting schema from a component<source>https://content.nuxt.com/docs/collections/inherit-schema-from-component</source.>
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1300178283945529427> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai i dont want use schema
Let me check the knowledge base for you again. One moment! :books:
----------------------
I'm sorry, but the knowledge sources do not contain information about directly importing or reusing the prop types from one Vue component in another using
defineProps without using a schema or external tools. The available documentation covers prop usage, reactivity, and schema inheritance for content collections, but does not describe a method for sharing or inheriting prop types between components at the SFC or defineProps level in Nuxt 3 or Vue 3.
If you want to share prop types between components, the typical approach (not covered in the sources) is to define a TypeScript interface or type in a separate file and import it where needed, but this is not mentioned in the provided knowledge sources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1300178283945529427> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai clone props dynamic from other component and put my component to defineProps<....>()
Let me check the knowledge base for you again. One moment! :books:
----------------------
I'm sorry, but the knowledge sources do not provide a way to dynamically clone or import props from another component and use them directly in
defineProps<...>() in your own component. The only related functionality described is for schema inheritance in Nuxt Content collections using property().inherit(), which is not applicable to standard Vue component prop definitions and does not affect defineProps usage in SFCs Inherit Schema from a Vue Component<source>https://content.nuxt.com/docs/collections/inherit-schema-from-component</source.>
If you need to share prop types, the knowledge sources do not mention a built-in or dynamic way to do this in Nuxt 3 or Vue 3 components.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1300178283945529427> Kapa.ai is still learning and improving, please let me know how I did by reacting below.