Proposal: Add native v-model modifiers like .capitalize, .upper, .mask etc.

[RikkuKaiser]

Context

Vue's v-model currently supports a few useful built-in modifiers like:

• .trim
• .number
• .lazy

These are extremely helpful to reduce boilerplate in components and forms.

However, in real-world scenarios, developers often need to apply other common input transformations, which currently require custom components or computed setters.

---

Suggested new native modifiers

Modifier	Purpose	Example Usage
.capitalize	Capitalize first letter	<input v-model.capitalize="name" />
.upper	Convert value to uppercase	<input v-model.upper="city" />
.lower	Convert value to lowercase	<input v-model.lower="email" />
.alphanumeric	Remove non-alphanumeric characters	<input v-model.alphanumeric="user" />
.mask	Apply an input mask (e.g. phone)	<input v-model.mask="phone" mask="(###) ###-####" />

---

Benefits

• Improve productivity and developer experience
• Avoid redundant computed/setters
• Reduce need for component wrappers just for formatting
• Align with how Vue handles .trim and .number natively

---

Proposal Details

• All modifiers should be optional and backward compatible
• Should only affect the input → model transformation (not model → view)
• .mask might require a v-model.mask="..." + a mask prop/attribute

---

Willing to contribute

Yes, I’d be happy to collaborate or submit a PR, starting with v-model.capitalize if the core team supports the direction.

If there is already something similar in development or discussion, I’d really appreciate being pointed to it so I can contribute or align my efforts.

Thanks for considering!

[posva]

Duplicate of #376