[Bug Report][4.1.2] Typescript issues with mode and modes in v-color-picker
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Environment
Vuetify Version: 4.1.2
Vue Version: 3.5.39
OS: Linux undefined (current)
Steps to reproduce
- Write a computed that returns a string array with valid modes in it and hand it into the modes property
- Observe the typing issue
Expected Behavior
When something has such strict typings that just using a computed to calculate and return a valid value breaks them I would expect to be able to be provided the typing so I can use it accordingly and avoid the typescript errors instead of having to write them myselve. I would expect to be able to import a ColorPickerMode type that I can just import and use for typings.
Not having a typing this strict would also work for me, though it is the worse option
Actual Behavior
If I want to correctly type the computed I have to either look up the type myself (code or documentation) and write it, or extract the type from an imported component instance. The first is causing issues when the types are modified (by adding or removing a mode) and the other requires importing the component and still adding the type myself, which is something I would expect a library to do if they use strong typings, and not shift it to their users.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
This issue with the types not existing and instead being hardcoded is happening everywhere (density for example) but most typings are broad enough that they accept string. There are ways to get the types, some being extract the typings from an imported component instance or writing them out by hand or copying from the documentation, but in most cases, not having the typings is not causing issues.
Images

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the v-color-picker mode and modes typings and reproduce the issue with the linked Vuetify Playground example. Trace how the valid modes are defined and exposed, then verify that consumers can import a ColorPickerMode type for computed values without duplicating the union; the broader note about similar typings may require checking related component types.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100