NuxtUI input components don't support v-model.trim?
If I use NuxtUI
UInput or UTextarea components with v-model.trim property, I get typescript error TS2353, but it's fine if I use the native <input> tag.
Object literal may only specify known properties, and modelModifiers does not exist in type {...}
The trim modifier seems to be working in the form, but I can't make the error go away...2 Replies
Hi @partap. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the provided knowledge sources, there is no explicit mention of support for Vue's v-model modifiers (such as .trim, .lazy, or .number) on NuxtUI input components like UInput or UTextarea. The documentation and examples consistently use v-model without modifiers, and there is no reference to modelModifiers or handling of v-model modifiers in the API or usage sections for these components UInput documentation UTextarea documentation.
The TypeScript error you are seeing (
- NuxtUI input components (UInput, UTextarea) do not officially document support for v-model modifiers like .trim. - Using v-model.trim on these components results in a TypeScript error because the modelModifiers prop is not defined. - The trim behavior may appear to work at runtime due to how Vue handles v-model, but the type error cannot be resolved unless the component explicitly supports modelModifiers. Workaround:
To avoid the TypeScript error, you can manually trim the value in your event handlers or use a computed property to handle trimming before updating the model. I'm sorry, but there's no information in the knowledge sources about official support for v-model modifiers in NuxtUI input components, nor about a recommended way to suppress the TypeScript error. If you need this feature, you may want to open an issue or feature request on the NuxtUI GitHub repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
modelModifiers does not exist in type ...) suggests that the NuxtUI input components do not natively support v-model modifiers, which are a feature of native Vue input elements. This is a common limitation in many custom Vue component libraries, as v-model modifiers require explicit support in the component's implementation.
Summary:- NuxtUI input components (UInput, UTextarea) do not officially document support for v-model modifiers like .trim. - Using v-model.trim on these components results in a TypeScript error because the modelModifiers prop is not defined. - The trim behavior may appear to work at runtime due to how Vue handles v-model, but the type error cannot be resolved unless the component explicitly supports modelModifiers. Workaround:
To avoid the TypeScript error, you can manually trim the value in your event handlers or use a computed property to handle trimming before updating the model. I'm sorry, but there's no information in the knowledge sources about official support for v-model modifiers in NuxtUI input components, nor about a recommended way to suppress the TypeScript error. If you need this feature, you may want to open an issue or feature request on the NuxtUI GitHub repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@514241592459264010> Kapa.ai is still learning and improving, please let me know how I did by reacting below.