v3.4.0

v3.4.0 (Blackguard)

Welcome to the v3.4.0 release of Vuetify!

VBottomSheet, VDataIterator, VDataTable, VDatePicker, VInfiniteScroll, VOtpInput, VSkeletonLoader, and VStepper have been moved from labs.

---

💪 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:

• Requesting Enterprise Support
• Sponsoring John on Github
• Sponsoring Kael on Github
• 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

❗️ Important Links

• 📄 Docs
• 🚨 Issues
• 🏬 Store
• 🎮 Play
• 💬 Discord

📑 Upgrade guide

• vuetify/labs imports for the above components should be changed to vuetify/components, or removed entirely if you're using auto-imports.
• If you were using labs components, read the changelog to see if you need to make any other adjustments.
• Support for browsers older than two years has been dropped.

💯 Release notes

Since 3.3.23

🚀 Features

• require vue 3.3 (cc5a882)
• expose util/colors (dafc148), closes #16346
• update browser support (7f3c472)
• add gap utility classes (#17715) (5290bfc), closes #15282
• date: add ability to pass custom formats (#18375) (3c75ca0)
• date: promote from labs (a5c857e)
• directiveComponent: create new composable (#17395) (6c9eb7a)
• display: add local mobile-breakpoint support (#18010) (f1ff554), closes #15381
• theme: change default theme colors (#17999) (3d70698)
• VAvatar: add text prop (68b2ab4)
• VBanner: add bg-color prop (#18094) (511c9aa), closes #17124
• VBottomSheet: promote from labs (707c058)
• VBreadcrumbs: add item slot (#15743) (5fce8d1), closes #15742
• VBtn|VListItem: add slim prop (#17562) (788a583)
• VColorPicker: add eyedropper button when supported (#17952) (3559698), closes #14790
• VDataIterator: promote from labs (1f9ea81)
• VDataTable: rename items to internalItems in slots (#18618) (6d1df42), closes #18612
• VDataTable: rename column. slots to header. (#18619) (71715aa), closes #17206
• VDataTable: promote from labs (6c3f833)
• VDataTable: add sort and filter functions to headers (#18590) (72598d2), closes #17588
• VDataTable: infer headers from first item if not provided (15e7dd3)
• VDataTable: add headerProps/rowProps/cellProps (#18589) (0c87f70), closes #16648 #16991
• VDataTable: add 'body.prepend', 'body.append' slots (#18472) (f28ef5b), closes #17128
• VDataTable: add generic '*:row' events (6bb8b38), closes #18197
• VDataTable: nested headers object structure (#18512) (fc84e78), closes #18484
• VDatePicker: promote from labs (8507e5b)
• VDatePicker: extract ok/cancel into separate component (#18575) (ec69622), closes #2945
• VDatePicker: refactor structure (#18558) (5c1b302)
• VDatePicker: remove variant prop (cab3545)
• VExpansionPanels: add static prop (#18014) (51f3c14)
• VImg: add object-position (397daa9), closes #16089
• VImg: support draggable attribute (#17976) (afeb6c0), closes #17973
• VImg: support referrerpolicy attribute (d923ed8), closes #15396
• VImg: add prop to set crossorigin attr on v-img (#17927) (a959159), closes #17848
• VInfiniteScroll: promote from labs (08e1fb9)
• VInput: add hide-spin-buttons prop (#17936) (ea92424)
• VInput: expose isValid and errorMessages (32968db), closes #17502
• VOtpInput: promote from labs (6ac63d3), closes #16458
• VOverlay: add target prop (#16425) (569c69e), closes #15658
• VPicker: add hideHeader prop (7cdabd4)
• VSelectionControl: add base-color prop (5657a1e), closes #7284
• VSkeletonLoader: promote from labs (a1867e8)
• VSlider: add ripple prop (a906691), closes #17766
• VSnackbar: add timer prop (#18013) (ad6ee62), closes #8451
• VSnackbar: add text prop (44ee8ed)
• VStepper: promote from labs (fd76fd3)

🔧 Bug Fixes

• properly passthrough non-bubbling events to input elements (#15904) (796bc01), closes #16812
• date: expose adapter on this.$vuetify (bcf21dc)
• date: count null as a valid date (d604929)
• defaults: react to sub-component updates (#17446) (97085ae), closes #17815
• locale: update Italian translations (#18551) (1d3b0cd)
• rtl: correctly apply same-element selector (1d1c5f0), closes #18009
• VDataTable: use theme surface color for group header rows (#18544) (aeabb45), closes #18543
• VDataTable: only emit options once on search change (ac46a9a)
• VDatePicker: generic props (6b4b0fc)
• VDatePicker: update on external changes, emit Date object (efc65ef)
• VDatePicker: show number of selected dates in header (92bda78)
• VDatePicker: use adapter to setYear on date (99d42b0)
• VDatePicker: viewMode button active state rotation (cb1f6ab)
• VDatePicker: use monthShort for month formatting (cc0f01a)
• VField: correct height for compact/comfortable densities (#18025) (7a24848), closes #17898 #17837
• VImg: update size before emitting load event (f885881)
• VOtpInput: limit length when type=number (#18585) (dc1a98b)
• VOtpInput: modify onInput value after focusIndex check (e8abb2f)
• VOtpInput: infinite loop when pressing multiple keys at once (a13b554), closes #18548
• VOtpInput: maintain focus after input completion (ecaea86), closes #18016
• VOtpInput: Display numeric keyboard when type is number (#18560) (3ffe9c5), closes #18000
• VSlider: correct thumb-label and tick label slot types (#18058) (11544bc), closes #18043
• VSpacer: import VGrid styles (#18614) (c007457), closes #18121
• VTextarea: pass input id to VField (bccf9bc), closes #18441
• VVirtualScroll: use a dynamic window size, cache offsets (#18392) (8a71a7d), closes #18198 #17801

🔬 Code Refactoring

• make filterProps faster (a36dfb8)

Since 3.4.0-beta.1

🚀 Features

• require vue 3.3 (cc5a882)

🔧 Bug Fixes

• VDataTable: pass events to rows (1b01a1c), closes #18634
• VSpacer: import VGrid styles (#18614) (c007457), closes #18121
• VStepper: disable touch and arrow buttons (1c8b251), closes #18605 #18632