v3.3.0

v3.3.0 (Icarus)

Welcome to the v3.3.0 release of Vuetify!

This MINOR release is meant to coincide with Vue v3.3 and includes a few new features and bug fixes.

The v-bottom-sheet component has hit labs and is ready for testing:

It is a modified version of v-dialog that extends from the bottom of the screen.

The group composable's model now respects selection order:

We cleaned up the Forms validation documentation and added greater control over when an input is validated.

The new lazy option skips validation on mount allowing you to avoid unnecessary rule invocation.

The following is a table of the different validation options:

validate-on=	"input"	"blur"	"submit"	"lazy"
On mount	✅	✅	✅	❌
On input	✅	❌	❌	*
On blur	✅	✅	❌	*
On submit	✅	✅	✅	*

*Uses the behavior of whatever it's combined with.

In addition, we ported over auto-select-first from v2, added loading indicators to all Data Table variants, and added Data Iterators to labs.

The team is now shifting focus to v2.7 Nirvana-lts and v3.4 (Blackguard); while also preparing to move Date Pickers and Calendars to Labs and promoting Data Tables to the core framework. These updates bring Vuetify 3 dangerously close to feature parity with Vuetify 2 and will mark a major milestone in the Vuetify 3 release cycle.

Once we have completed the above, it will free up the team to work on shoring up our GitHub issues and adding new features and functionality. Speaking of issues, in preparation for LTS, the team has been on an absolute tear triaging and dispositioning:

We hope that you enjoy this release and we look forward to rounding out the year with some exciting updates.

Until next time,

John Leider

---

💪 Support Vuetify Development

Vuetify is an open source MIT project that has been made possible due to the generous contributions by our sponsors and backers. If you are interested in supporting this project, please consider:

• Sponsoring John and Kael on Github
• Requesting Enterprise Support
• Supporting the team on Open Collective
• Becoming a sponsor on Patreon
• Becoming a subscriber on Tidelift
• Making a one-time donation with Paypal

📖 Table of Contents

• #Release Introduction
• #Important Links
• #Upgrade Guide
• #Release Notes
• #I need help

❗️ Important Links

• 📄 Docs
• 🚨 Issues
• 🏬 Store
• 🎮 Play
• 💬 Discord
• 🐦 Twitter
• 👽 Reddit

📑 Upgrade guide

• The active-color prop on v-list-item is deprecated, just use color (they did the same thing anyway)
• v-img now has an automatic width and height, so you can probably remove some flex styles and explicit dimensions

💯 Release notes

🚀 Features

• framework: support vue 3.3 (#17282) (ca10d14)
• ssr: add server-side clientWidth/clientHeight options (178b013), closes #17252
• types: emit declarations as .d.mts (5e08832), closes #15885
• VAutocomplete/Combobox: add auto-select-first prop (#17257) (ffb0852), closes #9270 #13788 #15528 #16508
• VColorPicker: accept rgb()/hsl()/hsv() swatches (42f7cbd), closes #8833
• VForm: allow individual inputs to be enabled in disabled form (d768946), closes #17391
• VImg: use intrinsic size (#17090) (d7d111b), closes #17031 #5757
• VListItem: add baseColor prop, deprecate activeColor (#17267) (c110997), closes #16624

🔧 Bug Fixes

• group: respect selection order in v-model (#17325) (1de8468), closes #17227
• types: declare array props as readonly (81dcc7c)
• validation: validate initial input value (#17111) (d1da47a), closes #15568
• VBadge: add missing variable !default declaration (c38c018)
• VCheckbox: use internal indeterminate value (a3150c4), closes #17389
• VCombobox: show menu icon when hideNoData is disabled (c69dc9e)
• VCombobox: close menu on icon mousedown (3d91fe7), closes #17280 #17355
• VField: match chips line-height, center prepend/append (#17175) (9b88014), closes #15980 #17307
• VSelect: avoid distributive conditional type with unbounded generic (5bdcfde), closes #17383
• VSelect: don't rotate append-inner-icon (4d60eb7), closes #4447

🧪 Labs

• VBottomSheet: add to labs (#17010) (d6487bf), closes #13466
• VDataIterator: add to labs (#16839) (31a8f4d), closes #13478
• VDataTable: add loading prop to all data-table variants (#16829) (0a4b9fd)
• VDataTable: expose slot props (3da827f)

BREAKING CHANGES

• types: .d.ts imports have to be changed to .d.mts
• types: minimum typescript version 4.7

🆘 I need help!

If you are stuck and need help, don't fret! We have a very large and dedicated community that is able to provide help 24/7. Come to the #vuetify-3-help channel.