🔧 Bug Fixes

• grid: don't halve gutters between v-rows (#12916) (f33d0c1), closes #12915
• types: remove index signature from VuetifyParsedThemeItem (b01e74a), closes #10863

🔧 Bug Fixes

• VBtn: show background on non-elevated buttons, fix color states (#12908) (a2a61c2), closes #12903 #12892 #12845

v2.4.0 Endurance

The latest release (Endurance) brings multiple bug fixes, features, and quality of life changes to the Vuetify. Long awaited features such as the plain property for v-btn, new slots for v-carousel, and support for a globally defined icon component. In addition, we added support for 2 new locales, Azerbaijani and Central Kurdish, improved accessibility in the v-menu component, and new typography css classes.

We resolved numerous issues related to components and features we are building in Vuetify 3 right now! If you haven't yet, check out John's talk from Vue Conf Toronto Online 2020 with more information about what to expect with the upcoming release. Keep an eye out for updates pertaining to Titan in the coming weeks.

If you have questions regarding v3, connect with us in the Vuetify Discord.

-John Leider-

Supporting Vuetify

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

• Becoming a sponsor on Github
• Supporting the Core Team on Open Collective
• Becoming a sponsor on Patreon (supports the author)
• Becoming a subscriber on Tidelift
• Make a one-time payment with Paypal
• Direct support from Vuetify

📖 Table of Contents

#Release Introduction
#Important Links
#Documentation Updates
#Release Notes
#I need help! 🆘

Have questions? Check out our Frequently Asked Questions or join our Discord community.

❗️ Important Links

Vuetify Store
Documentation
Report a Bug
Community Discord
Twitter

🤚 FAQ

• Where is the Vuetify documentation?
  • The framework documentation is located at https://vuetifyjs.com/
• Where is the upgrade guide?
  • There are currently no steps required to update your application

💯 Release notes

🆘 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 #release-migration channel.

🔧 Bug Fixes

• VCard: incorrect positioning for v-card-actions in v-dialog (#12734) (5ce3cd5), closes #10605 #10605

🔄 Reverts

• VDivider: vertical v-divider not displayed when inside div (#12758) (f5a234a)
• VTextField: partial revert of #12554 (#12757) (d2957b1)
  • Initial issue was still resolved.

🔧 Bug Fixes

• VCalendar: resolve wrong relative day span for 4day (#12687) (d9138f5), closes #12666
• VCarousel: stop event propagation for prev/next buttons (#12678) (07eb09e)
• VDivider: vertical v-divider is not displayed when inside div and inline (#12735) (985ef44), closes #8656
• VTextField: add padding-top custom variable to details (#12661) (47e190e), closes #12660
• VTextField: hide-details auto animation (#12554) (07ef4e1)
• VWindow: fix wrong reverse animation logic for only 2 items (#12685) (be00b92), closes
  #12672

🔧 Bug Fixes

• VCarousel: incorrect transition direction when using touch (#12357) (2160daf), closes #11280
• VDataFooter: show custom footer.page-text on empty data tables (#12651) (d9d3cb3)
• VRating: add icon aria-label (#12345) (1be735c), closes #11590
• VTabsItems: keep rounded corners during animations (#11983) (107bd32)
• VTooltip: don't add role:button to activator (#12428) (ec15822), closes #12360

📖 Documentation

https://dev.vuetifyjs.com/

🐛 Bug Reporting

https://issues.vuetifyjs.com
https://community.vuetifyjs.com in the #release-migration channel

Potential breaking changes for evaluation:

• Reset/clear on inputs should now change the value to null instead of undefined for better JSON compatibility. Make sure this always happens and we haven't left any undefined in. This change may break implementations needing to differ between empty and cleared, let us know on discord if that's the case.
• If both label and placeholder are set, placeholder will now only be shown on focus instead of pushing the label up
• Snackbar timeout resets on mouseover

🔧 Bug Fixes

• Inputs: reset value to null instead of undefined (#12373) (8e5554d), closes #7429
• VChip: add close button aria-label (#12384) (9cd505d)

🚀 Features

• Locale: add Azerbaijani locale (#12084) (a2267b2)
• Locale: add Central Kurdish locale (#12100) (e121bc2)
• Typography: add text-pre helper class (7a03376)
• Typography: add text-pre-wrap utility class (#11772) (bf78f62), closes #11761
• Typography: improve <code> styles (7877bef)
• VAppBar: don't truncate title with shrink-on-scroll (#12516) (8c5ee02), closes #12514
• VCalendar: add support for object categories (#12518) (806864c)
• VColorPicker: add hideSliders prop (#12618) (e35d79b), closes #11138
• VDataTable: add cellClass property to headers (#11775) (8d06d45)
• VDataTable: index prop in item* slots (#12605) (9daeb16), closes #10646
• VDataTable: isMobile prop in scoped slots (#12604) (e1720a8), closes #11330
• VDatePicker: show-adjacent-months prop (#12603) (8f1cf64), closes #12237
• VIcon: specify a global default icon component (#12244) (41fd082), closes #7821
• VMenu: add jump to first/last item keyboard navigation (#12348) (181d337)
• VSnackbar: keep snackbar open while mouseover (#12599) (8808d98), closes #12494
• VTextField: only show placeholder on focus if label is set (#12635) (ff500ba), closes #12499
• VWindow,VCarousel: prev and next slots (#12602) (a0140b0), closes #3235

🔧 Bug Fixes

• locale: improve japanese translations (#12535) (6c80202)
• VBanner: remove bottom-border on outlined banner (#12548) (49e25bb), closes #12172
• VColorPicker: extractColor util (#12305) (e7f63c5), closes #12574, #12183
• VDataFooter: translate itemsPerPageText (#12259) (bcfe8ef), closes #12012
• VFileInput: file-input-slot dense min-height (#12570) (3e65162), closes #11300
• VInput: use $label-letter-spacing variable (#12546) (915fbaa), closes #12250
• VMenu: open-on-hover does not close on-content-click (#12566) (389d023), closes #12412
• VRadio: do not use cursor pointer if disabled (#12058) (42c79b7), closes #12023
• VRadioGroup: label styles (#12382) (c61093f)
• VSimpleTable: add border radius to first and last row (#12553) (36080ca), closes #12550
• VTabs: resize slider when icons-and-text prop changes (#12525) (aac7c54), closes #12524
• VTextField: add background color to line on focus (#12556) (3e78556)
• VToolbar: v-toolbar sass variables typo (#12547) (11c746e), closes #12222
  • SASS variable renamed from $toolbar-promient-padding -> $toolbar-prominent-padding

🔧 Bug Fixes

• types: export Vuetify as a class (3a0bd24), closes #12511
• VDialog: close on esc when eager is not set (0e31691), closes #11257
• VDialog: refocus previous element when dialog is closed (700fd42), closes #7907
• VSelect: do not deduplicate headers or dividers (4a855cd), closes #12517
• VTextField: count non-string types (#12475) (5dec772), closes #12451

🔧 Bug Fixes

• icons: use correct mdi icon for rating-half (#12429) (82fb3b9)
• VProgressLinear: remove unnecessary z-index (#12386) (7c8b0b4), closes #11847
• VTextField: count characters instead of codepoints (#12451) (c048a77)

🔧 Bug Fixes

• locales: update language for th-Thai 18n translation (#12338) (b0913ae)
• VAutocomplete: don't try to set data on an empty clipboard event (8e8c360), closes #11187
• VCombobox: don't try to get data from an empty clipboard event (7106472), closes #11187
• VDataTable: add padding for mobile rows (#11865) (ec2b4b9), closes #8411 #11325
• VIcon: don't apply fill styles to component icons (eaf2f1b), closes #12378 #12148
• VIcon: set svg dimensions in style instead of attributes (#12319) (3576aa5), closes #12372 #12148
• VSelect: do not highlight search text without an item match (#12163) (148ecf5), closes #10843
• VSelect: do not open menu if clicking on selection item (#12343) (dcfbca6), closes #11824
• VTextField: show label slot when filled prop is used (#12371) (d7d77a3), closes #11533

Reverts

• Revert "fix(VTextField): remove erroneous white space for outlined style (#11748)" (15469e0), closes #11748

🔧 Bug Fixes

• types: remove number type from Breakpoint['name'] (#12113) (592aca5)
• VVirtualScroll: pass through native events (c2734d3), closes #12077

🔧 Bug Fixes

• VExpandTransition: Properly trigger transition listeners (#12019) (b6e27f6), closes #12018
• VListItem: disable mouse click in animating menu (#12059) (0b8ec25), closes #12021

🔧 Bug Fixes

• locales: update NL i18n translation (#11992) (47325bf)
• validatable: allow "messages" properties to be null (#11927) (8ccff06), closes #11926
• VTreeView: don't render filtered-out items (45767d2), closes #11872

🔧 Bug Fixes

• framework: use $ssrContext instead of options.ssrContext (5da64d2), closes #11935
• selection-controls: refactor click event handling (f055c36), closes #5968 #9408
• VAlert: pass events through to root element (05e7d22), closes #11929
• VEditDialog: return returnValue on save (#11740) (2620930), closes #11736
• VExpandTransition: include collapsed margins in calculated height (046d4e0)
• VIcon: add top and left to pseudo class for IE11 (a3d0cf7), closes #11686
• VSnackbar: remove transparent background with text/outlined props (3dbd910), closes #11835
• VSlideGroup: prevent thrashing DOM when available space < width (0f3f4b5), closes #11122

🔄 Reverts

• _reset.scss: partially revert change made in 2c723c0 (cebed02)

🔧 Bug Fixes

• ssr: don't assume $el exists (9f42467), closes #11903

🔧 Bug Fixes

• sass variables: add missing !default suffixes to numerous variables (#11760) (77a0a91), closes #11751
• VFooter: add missing tag prop (#11749) (6160e46), closes #11580
• VSkeletonLoader: use rgba transparency for animation on Safari (#11714) (f55db8d), closes #10740

🔧 Bug Fixes

• _reset.css: add removed overflow to html (6663607)
• locales: update hu-Hungarian 1i8n translations (#11719) (ed17793)
• VImg: render gradient when src isn't provided (c0fa6d5), closes #11729
• VImg: stop polling for size when loading fails (be907b5), closes #11026
• VMain: add existing v-content classes for backwards compatibility (#11659) (31912d7)
• VSelect: attach menu scroll handler when loading items async (d9bb128), closes #11675
• VSelect: ensure VMenu's content has scroll listener added (#11725) (a406dd4), closes #11737
• VVirtualscroll: calculate child on mounted instead of created (#11712) (f3c8aa5), closes #11707

🔧 Bug Fixes

• _reset.scss: hide clear icon for search inputs (eeb7492)
• typography: partially revert changes made in e83a203 (8c650e4), closes #11629
• VAutocomplete: select last item when pressing backspace without a prior selection (524c1e8), closes #11639
• VSlideGroup: revert deprecation of show-arrows true (1085c02), closes #11620
• VVirtualScroll: provide correct item index to default slot (#11643) (4dbaec1), closes #11622

🔧 Bug Fixes

• VContent: display proper deprecated message (#11589) (0489e64)

🔧 Bug Fixes

• validatable: change logic for disabled and readonly inputs (7e78d75), closes #11504
• VDataTable: update child combinator selectors for dense & fixed-header props (#11568) (93a8aac), closes #11566 #11567
• VSimpleTable: change css selector for fixed-header dense tables (1ec7de8), closes #11525
• VSimpleTable: reset table line-height and adjust td dense height (d634514)

🚀 Features

• loaders: improve loading styles for cards (c2c1d6a)
• VMain: create new component from v-content (7a85220)

🔧 Bug Fixes

• transitions: make default transition !important (d23ca5d), closes #9938
• VAutocomplete: return all filtered items, ensure itemText is present (6432fb4), closes #11451 #11415 #11442
• VDialog: don't try to focus disabled elements (238f361), closes #11547

🔧 Bug Fixes

• VAutocomplete: add minimum input width when focused (254bb29)

🔄 Reverts

• "fix(VSelect): add Y offset to menu to match material guidelines (#10940)" (f225c5b)

🔧 Bug Fixes

• locales: SK localization fixes and additions (#11497) (29f8bb5)
• spacing: set negative margin baseline to -4px (#11453) (3d2332c)

🚀 Features

• directives: expose all options to templates (#10905) (30f67e1), closes #4654
• theme: add new option to disable variation generation (6f037e8)
• VRipple: hide effect for touch scroll events (#7887) (#10596) (ca7605c)
• VAvatar: integrate roundable mixin (#11435) (e80e7e5)
• VCalendar: general improvements & category view (#11198) (f5adad0), closes #8667 #11080 #11093 #11133 #11182
• VCalendar: show week numbers in month-view (#10928) (8820b68), closes #9117
• VDataTable: add groupable property to header items (#11361) (622cf8a), closes #10889
• VSnackbar: add applicationable support (#11448) (2a2203a), closes #4468

🔧 Bug Fixes

• change type import paths (#11314) (2325dd9)
• VBtn: add back tile prop (137186a)

🚀 Features

• VFileInput: add new prop hide-input (#11031) (0b256c9), closes #10886
• VParallax: add srcset support (e72e78f), closes #1535
• allow all console messages to be disabled (#10909) (7f99918), closes #10888
• Spacing: add support for 16 sizes of margin/padding (bbfe878), closes #10675
• VDatePicker: prev/next month/year icon aria label (#10366) (9c2a8b5), closes #9694
• VForm: add form level disabled prop (#10325) (ccf25e8), closes #1707

📖 Documentation

https://dev.vuetifyjs.com

🔧 Bug Fixes

• VDatePicker, VDataTable: incorrect date picker styling when in data table (#11325) (3fcc67e), closes #7384
• VSimpleCheckbox: pass listeners to component (#11358) (d937f5b), closes #11345
• VVirtualScroller: properly key children to avoid re-render (#11327) (14ce2f1)

🚀 Features

• VDataTable: add item-class property (#11254) (7d1489a), closes #8643
• VSheet: refactor style propagation (#11335) (cbaf955)

Developer Notes
This release has a large refactor for v-sheet and components that extend it. The refactor does not cover every component as some use-cases will added as separate PRs or in v3.0.

Changes made:

• v-sheet - default border radius is now 0
• v-list - default border radius is now 0

John Leider

🔧 Bug Fixes

• VCheckbox,VRadio: ripple color for colored selection control (#11299) (4b849fa), closes #11290
• VDataTable: close multi-sort select when clicking on mobile (#11332) (6f8d84a), closes #10735
• VDataTable: respect mustSort property in options prop (#11334) (248300f), closes #10244
• VGrid: offset in RTL mode (#11359) (db52c0a), closes #6317
• VTreeview: disabled items should be ignored when selecting parent (#11232) (3184f7e), closes #8244
• VTreeview: emit opened nodes when using load-children (#11339) (4a0916f), closes #9693
• VTreeview: independent children should be selectable when parent is disabled (#11233) (06a7af3), closes #10770 #10990

🔧 Bug Fixes

• typography: conditionally remove important from utility mapping (c11ae35)
• VDatePicker: set proper tableDate if showCurrent is set (#11305) (6aa01a7), closes #6714

🚀 Features

• a11y: add visually hidden css utility classes (#11258) (9e4c3c8), closes #10914
• VDatePicker: add native events on day/month/year (#11126) (e706660), closes #5598
• VPicker: add new flat and elevation props (#10362) (e557759), closes #6006
• VProgressLinear: add new reverse prop (#11259) (b4e16c6), closes #11245

📖 Documentation

https://dev.vuetifyjs.com

🚀 Features

• rounded: add border-radius helper classes (82dbdbf)
• typography: add break-point functionality to new type classes (#11033) (e83a203)

🖱 Developer notes

Typography has been updated to match current MD type spec. The following classes have been deprecated and will be removed in version 3.

• .display-4 is now .text-h1
• .display-3 is now .text-h2
• .display-2 is now .text-h3
• .display-1 is now .text-h4
• .headline is now .text-h5
• .title is now .text-h6

🔧 Bug Fixes

• colorutils.ts: lookbehind regexp causing FF throw error (#11215) (0604b0b), closes #11214

🚀 Features

• v-scroll: add self modifier that targets the bound element (#11244) (9748731)
• VBanner: allow banner text to extend full-width (a3466e0)
• VVirtualScroll : add new component (#10944) (a1423cd)

📖 Documentation

https://dev.vuetifyjs.com/

🐛 Bug Reporting

https://issues.vuetifyjs.com
https://community.vuetifyjs.com in the #release-migration channel

🔧 Bug Fixes

• Locale: add missing pagination objects to fi/sk (aae297b)

🚀 Features

• directives: add color directive (#10866) (bf3799b)
• framework: create new decoration helper classes (#11035) (bf3fad2)
• kbd/code: update colors/style, added new variables (47042cd)
• locale: add Finnish translation (#10381) (0ce1a66)
• locale: add Slovak translation (#10328) (59b8422)
• VAlert: add closeIcon prop (#11124) (ec151b3)
• VDataIterator: emit the page-count event from VData (#10588) (db98a1e)
• VDataTable: add contexmenu:row event for data table (#10989) (26c9ec9), closes #9382
• VImg: add themeable support (#11034) (5e13729)
• VImg: remove error logging (755dc3d), closes #6755
• VLazy: add measurable mixin (a3a4e67)
• VPagination: add a11y support (#9926) (042a4bd), closes #9849

🔧 Bug Fixes

• VRipple: add keyboard trigger support (#10304) (b745d00), closes #10285
• VSparkline: stop and fill color propagation (#11102) (4c50717), closes #6387

🔄 Reverts

• fix(VNavigationDrawer): dynamic expand-on-hover (#10903) (dcb3292), closes #10968

🔧 Bug Fixes

• i18n: remove untranslated string from ru.ts (#10945) (c092083)
• overlayable: overlay must be removed if quickly deactivated (#10975) (63eb1be), closes #8625 #9588
• VBtn: add hover effect radius inheritance (#10956) (001af08), closes #10671
• VIcon: add missing width attribute when rendering svg icons (#10942) (2112add), closes #10938
• VPagination: add interesectable support (f245833), closes #2434
• VSelect: add Y offset to menu to match material guidelines (#10940) (3586847), closes #10859
• VTextField: adjust margin and css target for dense field prepend/append icons (6603b05), closes #11011

🔧 Bug Fixes

• VGrid: correct row width in fill-height container (#10241) (9d69b75), closes #9773
• VSkeletonLoader: remove unnecessary border-radius on card style (#10806) (ac754ca)

🔧 Bug Fixes

• VAppBar: inverted scroll not hiding the app bar in an edge case (#10656) (151ae74), closes #10590
• VDataTable: groups should be sorted according to groupDesc (#10771) (6471332), closes #10627
• VDataTable: show correct aria-labels for sorting (#9638) (e3ea39d), closes #4975
• VImg: correctly pass options to intersect directive (#10855) (2133162), closes #10848
• VNavigationDrawer: dynamic expand-on-hover (#10903) (a4fe6f5), closes #10862
• VProgressLinear: use both horizontal and vertical repeat (#10876) (583c811), closes #10852
• VSelect: normalize dense height (#10892) (1890bec), closes #10877
• VSimpleTable: set max width to 100% (#10707) (905fc45), closes #8993

🔧 Bug Fixes

• locale: german translation of carousel.ariaLabel.delimiter (#10789) (02df247)
• VAutocomplete: prefix overlap with placeholder (#10781) (02723e5), closes #10538
• VCard: add !default flag to elevation variable (7746da6), closes #10869
• VDataTable: pagination event fires twice in a row (#10769) (cfee1b4), closes #10715
• VInput: show bottom border when loading prop is null (0f9b034), closes #10828
• VNavigationDrawer: change closed navigation drawer visibility (#10824) (0a0f44d), closes #10821
• VNavigationDrawer: scrolling in temporary hide-overlay (#10759) (8c99fee), closes #10758
• VSelect: emit click event (#10853) (be86aac), closes #10839
• VSelect: incorrect dense height (#10694) (07fa3da), closes #10635
• VSlider: readonly should apply only to slider control (#10768) (e089a7c), closes #10684
• VTextField: incorrectly displayed counter with hide-details=auto (#10705) (0e57814), closes #10701
• VTreeview: respect selection-type when rebuilding tree (#10653) (10087bb), closes #8720
• VTreeview.sass: center vertically treeview items on IE11 (#10816) (f39a93d), closes #10534

🔄 Reverts

• chore(travis): skip_cleanup is deprecated (c754c7d)
• fix(VAutocomplete): check for inital search input prop (02bdf28), closes #10688

Bug Fixes

• VSelect: close menu on blur (7f86d4c), closes #10660

🔧 Bug Fixes

• VAutocomplete: check for inital search input prop (#10642) (e09c916), closes #9757 #9757 #9757
• VDataIterator: emit page-count event (#10652) (4d04771), closes #8886
• VDataTable: emit pagination event when filtering (#10651) (7856dba), closes #10212
• VRangeSlider: add unique id for inputs elements (#10654) (1244991), closes #6843 #6843

🔧 Bug Fixes

• VDatatable: remove extra border from expanded row (#10321) (b44ef23), closes #6429
• VSelect: resolve bug in Safari/Edge/IE with event order disparity (#10620) (49cb28b), closes #10609
• VSelect: skip items without text in keyboard lookup (333588d), closes #8671
• VTextField: prevent IE11 error with mask delimiters (977e586), closes #8917

🔧 Bug Fixes

• VCombobox: blur on click outside when empty (08c503e), closes #10612
• VMenu: set dimensions to 0 if content does not exist yet (5358676), closes #10606

🔧 Bug Fixes

• VAutocomplete: change onClick to not reopen menu (#10158) (10abc11), closes #6564
• VDataTable: group-by column should be included in search (#10591) (a40e8d3), closes #10392
• VDataTable: group-by should use correct slot (#10592) (065e93c), closes #10289
• VDataTable: Loading Progress bar pushes content down (#10169) (6bb6238)
• VDataTable: remove hover on empty (no data) wrapper (#10600) (c978f11)
• VIcon: change default icon svg size to match regular icon (#10507) (2045295)
• VMenu: allow more than 1 content node (#10525) (5d8d487), closes #10522
• VSimpleTable: bottom border of tbody th (#10594) (c014bdc)
• VSlideGroup: add display none to immediate child (#10567) (bb69192), closes #10310
• VTimePicker: show 12 hr time in title in ampm mode (#10364) (279af0e), closes #9572

🔄 Reverts

• fix(VCheckbox): use correct unchecked checkbox icon using FA4 (f62afda), closes #10602

🔧 Bug Fixes

• VDataIterator: add missing isMobile property to custom item slot scope (#10345) (f4b4f0a), closes #8394 #9436
• VDialog: allow more than 1 content node (cc17fe1)
• VDialog: show transition on close (1491914), closes #10506
• VList: use tag prop (fb062bf), closes #10529
• VTooltip: lazy without transition (2e55652)

🔧 Bug Fixes

• SelectionControls: fix mouse events on field (40557a6), closes #10479
• VAutocomplete: avoid scrolling screen when pressing down (4fce059)
• VSelect: allow blur from outside click (47b2535)
• VSelect: bind scroll listener to menu content (972d188), closes #10485
• VSelect: expose clickable icons to screen readers (#10489) (cee1404)
• VSelect: properly handle up and down arrows when focused (f72db83), closes #8361
• VSelect/VMenu: remove duplicate IDs, add aria-activedescendant (#10226) (b2e5691), closes #9680 #7385

Notes from the Author

This patch resolves multiple a11y issues with <v-icon> that were introduced in 86133ea. This update added tabindex to <v-icon> when its being used as a interactive element (a bound click listener or using the link prop). While it resolved the issue, the icon wasn't responding to the enter key. This fix resolves those issues and consequently a few other ones. <v-treeview> now has keyboard support by using tab to cycle between branches and pressing enter to expand them:

As defined in the Material Specification, active icons should have an increased opacity when active and focused: In practice, it is not very easy to follow. While we have maintained the originally intended opacity of an active/focused icon, a circular outline (very similar to <v-btn> with the icon prop) was added to better emphasize the change. Reference: https://material.io/design/iconography/system-icons.html#color

If you have any questions, feel free to reach out to me in Discord
—John

🔧 Bug Fixes

• bootable: don't generate lazy content until it's rendered (#8823) (2b975f5), closes #8712 #8712
• SelectionControls: adjust focus and hover styles (1e66229)
• SelectionControls: remove color from transition-property (2f499d2)
• SelectionControls: remove duplicate import (2beb81b)
• VCheckbox: spacing issue with dense (#10407) (7aa8aa0), closes #10336
• VDateTable: events alignment on current date (#10367) (fc2eaa5), closes #8182
• VIcon: use a button element for clickable icons (#10439) (1596e55), closes #10265 #10391 #10398
• VListGroup: remove empty div child selector (60844a3), closes #8823
• VMenu: remove events from old element when activator changes (0a6946a), closes #10430
• VMessages/VCounter: resolve layout jump caused by incorrect line-height (5c8be69)
• VPicker: content position in landscape / rtl mode (#10371) (92e77a2), closes #9258
• VRadioGroup: apply legend style changes only when using row (f0ceca0), closes #10403
• VRating: remove tabindex from icons (6e6d6b8), closes #10379
• VSelect: get menu content when needed (bd2278f), closes #8823
• VTextField: apply different color logic for solo-inverted fields (afa2647), closes #8827
• VTextField: remove inherit border-color and scope styles (47c986a), closes #10388
• VTimePicker: AM/PM farsi translation and margins in RTL mode (#10399) (a6761a9)
• VTimePicker: increase clock click accuracy (#10400) (50ed3ef), closes #7299
• VTimePicker: missing end circle in clock hand (#10415) (755c5b8)
• VTimePicker: missing update:period event when ampm clicked in title (3a510e8), closes #7027
• VTreeview: do not set indeterminate on new leafs (adbb374), closes #8256

🔧 Bug Fixes

• VTextField: properly focus field when calling public "focus" method (e783162), closes #10369

Notes from the Author

To help bring the framework styles better in line with what Material Design dictates, the default application background color for both light and dark variants has been fixed. In addition, multiple components were updated to properly match the dark theme specification.

Affected styles:

Light Theme

• application background color - #FAFAFA -> #FFFFFF

Dark Theme

• application background color - #303030 -> #121212
• v-app-bar - #212121 -> #272727
• v-bottom-navigation - #424242 -> #2E2E2E
• v-card - #424242 -> #2E2E2E
• v-navigation-drawer - #424242 -> #363636
• v-toolbar - #212121 -> #272727

You can revert to the previous values by setting up a SASS Variables variables.s(a|c)ss file with the following snippet:

// styles/variables.scss

$material-dark: (
  'app-bar': #212121,
  'bottom-navigation': #424242,
  'background': #303030,
  'cards': #424242,
  'navigation-drawer': #424242,
  'toolbar': #212121
);

$material-light: ('background': #FAFAFA);

There is also a new SASS variable that contains the color value for each elevation outlined on the Material Design Specification for dark variants.

$material-dark-elevation-colors: (
  '0': #000000,
  '1': #1E1E1E,
  '2': #222222,
  '3': #252525,
  '4': #272727,
  '6': #2C2C2C,
  '8': #2E2E2E,
  '12': #333333,
  '16': #363636,
  '24': #373737
);

If you have any additional questions, please reach out to me in the Release Migration channel of the community.

🔧 Bug Fixes

• theme: apply correct material theme for dark variants (24c95f4)
• theme: resolve more dark variant inconsistences (07a285f)

🔧 Bug Fixes

• activatable: stop activator event listener propagation (be58395), closes #3333
• application-service: overwrite location sizes when registering (59a6bbf), closes #9797
• detachable: change detach target (6d001c7), closes #9906
• framework: update colors to match spec (103becb)
• SelectionControls: change selection-control disabled color (f6ef33c), closes #9280
• SelectionControls: properly align slotted labels (840f0ce), closes #10214
• VBanner: hook up missing color support (8f1ed83), closes #10216
• VBottomSheet: remove min-width and update flex (22cf5a1), closes #10261
• VChip: remove user-selection when used as link (603496e), closes #9737
• VCombobox: do not add search to list when selecting items with keyboard (#9866) (78aa42f), closes #6697 vuetifyjs/vuetify#8841 /github.com/vuetifyjs/vuetify/pull/9866/files/ba3f8a40b327e7509272530fe40ffe726f016a02#r359313120
• VDialog: remove unnecessary event.stopPropagation (9ca0519), closes #10167
• VFileInput: filter out values that are not instance of File (ebdb4f6), closes #10281
• VFileInput: remove input from normal document flow (7fa2e79), closes #8931
• VFileInput: set value to undefined by default and on clear (19bdb4c), closes #10287
• VIcon: apply default tabindex if click listener present (86133ea), closes #10265
• VInput: apply correct placeholder color (f6d0d61), closes #10221
• VListGroup: allow user to hide prepend-icon in subgroup (172724e), closes #8980
• VMenu: remove unnecessary event.stopPropagation (5af2cd1), closes #6654
• VNavigationDrawer: apply a better default mini width (d80e01f), closes #2830
• VNavigationDrawer: hide navigation drawer labels visually (#10250) (a28d03e), closes #9741
• VOverlay: enable touch interaction (3365cac)
• VRadioGroup: use correct element tags for a11y (75f6197), closes #9851
• VResponsive: apply rtl margin styles (#10269) (196bcdb), closes #10268
• VSelect: emit keydown event (6bf9eff), closes #10240
• VSlider: prevent default when pressing slider dot (7d2e162), closes #7241
• VSnackbar: a11y and appearance improvements (#10263) (80b1568), closes #10047 #10047
• VSparkline: avoid computing path total length if only 1 value provided (f57b7a7), closes #9426
• VStepper: fix styles in RTL (#10145) (879adcc), closes #10098
• VTextField: legend position with reverse and outlined prop (#10278) (55cbdbb), closes #10277

🔧 Bug Fixes

• css-reset: add missing comma for style declaration (3a347a1), closes #9521
• form-controls: fix disabled styles (#10191) (b4ad01a), closes #9488 #10154
• presets: export interfaces (#10161) (843a875)
• VAlert: fix transition irregularities (5f35eff), closes #9033
• validatable: properly handle boolean false as fn return (2ac7392), closes #9976
• validatable: validate on blur after value has persisted (33132a2), closes #10174
• VCalendar: wait for animation frame before updating events (b9809d2), closes #10168
• VCheckbox: properly style checkbox icon with fa iconfont (2af8c6d), closes #10157
• VChip: prevent navigation on close icon click (c486693), closes #10166
• VChip: scope close icon styles (4f151bb), closes #9451
• VChipGroup: remove unnecessary color declaration for v-icon (2cbf929), closes #9604
• VDataTable: fix default table header color (#10171) (7d5d5be)
• VDatePicker: restore event border radius to 50% (9e4cfa9)
• VDialog: prevent scroll on mobile devices (#10149) (183d79b), closes #10086
• VItemGroup: update toggled item when the items array changes (85f963e), closes #9854
• VItemGroup: update value when using mandatory and multiple (f4bc5bd), closes #10077
• VListItemAvatar: apply correct margin according to spec (97fc2de), closes #9789
• VRangeSlider: resolve infinite loop when using NaN values (35a654c), closes #9818
• VRating: check if half-increments prop is used alongside rtl (ddf3aec), closes #10093
• VSelect: disable menu when readonly (ba5cc58), closes #9960
• VSkeletonLoader: don't call the default slot if not used (e0f3f08), closes #10201
• VSkeletonLoader: properly animate incoming content after loading (9ac1158), closes #9459
• VSpeedDial: apply a baseline z-index (1c42ed1), closes #10194
• VStepper: adjust svg size to match icon font-size (bc55564), closes #8665
• VStepper: allow numeric 0 value (996a37f), closes #10096
• VTabs: correct width of v-tab's bar and content with vertical (df502ff), closes #10031
• VTextarea: adjust height for smaller rows and dense (792f183), closes #9346
• VTextField/VTextarea: change styles to match specification (8242e05), closes #4639
• VWindow: apply correct transition when using the reverse prop (51d61d2), closes #10182

🔄 Reverts

• "fix(VSparkline): add label color for light/dark theme (fix #8557)" (827d525)

A regression was identified in v2.2.2 in #10144, reverted in fb5c5cc and re-fixed in 1583d7c.

🔧 Bug Fixes

• VBadge: re-enable pointer-events (1583d7c), closes #10144 #10125

🔄 Reverts

• fix(VBadge): re-enable pointer-events (fb5c5cc)

🔧 Bug Fixes

• helpers: check if source property is object in mergeDeep fn (5a4578c), closes #10100
• VBadge: oblong circle when using v-icon (a5b9cbc), closes #10054
• VExpansionPanel: remove rounded corners with tile and accordion (30b8b9e), closes #9643
• VSlider: avoid unnecessary input event (2f9b28f), closes #10018

📜 Documentation

https://dev.vuetifyjs.com

🔧 Bug Fixes

• icons: add support for font awesome svg icons (#8092) (c4b7225), closes
  #8016
• VNavigationDrawer: set proper border width (9bc631a)

🚀 Features

• presets: add new service (#9894) (5c0a67c)
• VCalendar: redo event overlap logic (#9974) (20a7a1a), closes #8826 #8928 #8620 #8396 #8792 #8937 #8565 #8400
• VCard: increase hover effect when focusing (#8143) (5dc3345)
• VDatatable: add isOpen to group.header slot parameters (#9721) (bb26a2e)
• VExpansionPanels: implement flat, tile, hover, and color props (#9643) (39d7e1e), closes #8939
• VInput: auto hiding details if no messages/counter (#7472) (7a9080a), closes #7434
• VTabs: add new bar-background-color variable (72f46dc)
• VTextField: add $text-field-filled-border-radius sass variable (d1a0189)

How to use presets

For the official documentation on presets, you can navigate here. It is still in progress and will receive updates over the next few days.

Update your vuetify-cli-plugin to the latest beta.

yarn add vue-cli-plugin-vuetify@^2.0.3-beta -D
## OR
npm install vue-cli-plugin-vuetify@^2.0.3-beta --dev

Pick an available preset (only basil/crane available atm).

vue add vuetify-preset-{preset}

You can monitor the available presets here: https://github.com/vuetifyjs/vue-cli-plugin-vuetify/tree/feat/add-material-presets/packages

🔧 Bug Fixes

• VCard: switched sass var values (cfb90e2)
• VDatePicker: typo in sass variable name (5997b95)

🚀 Features

• VDataIterator: add current items to toggle-select-all event (#9641) (ab28d72), closes #8532
• VDataIterator: items can now be made unselectable (#9645) (65256b2), closes #8915

📖 Documentation

https://dev.vuetifyjs.com/

🔧 Bug Fixes

• VTabs: update to better match md2 spec (a49f2c8)
• VTreeview: incorrect alignment of nodes (#9640) (6e368ed), closes #8212

🚀 Features

• colorable: add support for CSS custom props (#9637) (ac58e80)
• sass: create more preset variables (#9766) (2c901ba)
• types: expose public interfaces for props and slots (#9763) (b03b507)
• VBadge: refactor for v2.2 (#9328) (b7fe7c2), closes #8245
• VData: custom grouping functions (#9253) (87f22c2)
• VDataTable: expose expand/select functionality (#9642) (587edf9), closes #8008
• VDataTable: hide sort by select on mobile if not needed (#9215) (665ebe3), closes #9209
• VIcon: add font awesome duotone support (#9170) (629b595), closes #8398
• VImg: add themeable support (#9805) (5d180dd)
• VLazy: add tag prop (00fb555), closes #9191
• VSelect: add prop for disabling keyboard lookup (#9297) (b0a7c30), closes #9271
• VTextField: add customizable counter value (#8802) (9aa761e), closes #8788
• VThemeProvider: add new component (#9804) (2dba817)

🔧 Bug Fixes

• styles: add missing ltr() rules (#9649) (8f772a7), closes #7586
• VBtn: add missing sass variable for text-transform (9cd96a8), closes #8619
• VBtn: normalize width behavior (426dd02), closes #8699
• VImg: resolve NaN value when computing normalizedSrc (8d110bf)
• VItemGroup: apply maximum width for use in flex containers (6362eec), closes #8752
• VListItem: only apply user-select style when using a link (fbc8ed8), closes #8648
• VTextField: fix style cascading when combinging multiple style props (fc7b05a), closes #8586
• VTextField: remove unnecessary margin on filled inputs (130fa8e)

🔧 Bug Fixes

• grid: allow binding style strings (3279945), closes #8328
• locale: update Russian translation (#9563) (bbae296)
• locale: update Ukrainian translation (#9562) (ddb90b1)
• types: add missing component declarations (#9652) (50e66da),
  closes #9364
• VBtn: keep border of outlined button when focused (cad50e2), closes #9603
• VColorPicker: allow null as initial value (#9616) (2246e6b),
  closes #9472
• VDataTable: revert to non locale sensitive number sort (a54a21d), closes #9515
• VImg: remove observer once init (1700d57), closes #9490
• VMenu: only use the activator slot in getActivator if it exists (0c6175f)
• VMenu: prefer the activator slot over a click event (baeb7ba), closes #6906

Reverts

• fix(VDialog): check if element is already focused on focusin event (7ecc216), closes #9144, see #8459
  If you get infinite recursion errors in a dialog, add :retain-focus="false"

🔧 Bug Fixes

• VMesssages: apply escapeHTML to provided values (9fd5e0a), closes #9491

⚠️ BREAKING CHANGES

A low impact security vulnerability was identified with the v-messages component. Using the value prop, it was possible to perform an XSS attack.

NOTICE
If you are not using HTML for the props rules, messages, hint, success-messages or error-messages, you do not need to do anything.

All values for v-message are now escaped. This primarily affects inputs as they use v-message for rule and hint output. To accommodate this change, a scoped slot has been added for users who
need to customize the styling of messages as they will no longer render html.

Components this fix impacts:

• v-autocomplete
• v-checkbox
• v-combobox
• v-file-input
• v-input
• v-messages
• v-overflow-btn
• v-radio-group
• v-select
• v-slider
• v-switch
• v-textarea
• v-text-field

<!-- v2.1.7 -->

<v-text-field :rules="['<em>Foo<em>']" />

<!-- v2.1.8  -->

<v-text-field :rules="['Foo']">
  <template v-slot:message="{ message, key }">
     <em :key="key">{{ message }}</em>
  </template>
</v-text-field>

If you have any questions, please reach out to us in our community, https://community.vuetifyjs.com

🔧 Bug Fixes

• locale: update Norwegian translation (#9455) (051399a)
• VCalendar: escape html of event name (#9387) (283d601)
• VDataTable: adjust filter & sort functions to use Intl.Collator (#7805) (43adae8), closes #3672 #4622
• VDialog: fix close on outside click with persist and hide-overlay (#9304) (ba99a45), closes #8697 #8697
• VFileInput: trigger onInput after value has changed (#9091) (507f1b0), closes #9045
• VImg: do not lazy load if intersection observer is not supported (22e23e2), closes #9412
• VLazy: properly show transition on activation (ac7136d)
• VSwitch/VCheckbox: color not applied if value is 0/false (#9431) (9856ca7)

🔧 Bug Fixes

• theme: use new vue-meta api (#9268) (6d829ef)
• VAlert: remove pointer events from psuedo element (1958333), closes #9407
• VListItem: fix to misplaced small icon in dense list (#9395) (f5b5e98)
• VPagination: max length (#9423) (1394b6c)
• VRangeSlider: allow handles on same value (#9218) (3ab0f67), closes #8756
• VSkeletonLoader: properly cascade border-radius (74bc901)
• VTextField: dense filled & outlined (#9403) (2283635)

🔧 Bug Fixes

• sass: move global style imports to component variable files (63f128f), closes #9323
• VAlert: typo in computedIcon (#9390) (15ba83b), closes #9386

🔧 Bug Fixes

• activatable: get activator element from event or nested component (#9294) (4b73dd2), closes #8846
• locale: fix ko translation of noDataText (#9305) (058b1fe)
• locale: update Thai translation. (#9292) (5d5241c)
• VAutocomplete: default broswer autocomplete to disabled (3387708)
• VDatePicker: fix min date (#9097) (45c07c5), closes #9039
• VDatePicker: improve range performance (#9128) (349ae88), closes #9120
• VTextArea: fix clear icon overlapped by the scrollbar (#9190) (1c21d76), closes #8910

🔧 Bug Fixes

• bind-attrs: fix transition-group animation (#9224) (356034a), closes #9171
• locale: update japanese translation (#9238) (d7b8e5a)
• types: fix lang option name in preset (#9169) (06d17cf)
• VAutocomplete: disable browser autocomplete by default (#9246) (c01f564), closes #8395
• VAutocomplete: move eventlisteners to focus watcher (#9273) (6d77ea0), closes #9204
• VBtnToggle: allow individual v-btn color override (#9250) (9fc9393), closes #9226
• VImg: properly update image on src change (6eb5e6e), closes #9210
• VProgressLinear: invalid background position in RTL mode (#8421) (a870dfa), closes #8419
• VSelect: remove reference to missing variable (73e08a8), closes #8417
• VStepper: Increase selector priority .v-icon (#9262) (d650e7e), closes vuetifyjs/vuetify#9261
• VTimePicker: reset margin on full width (#9139) (b983ea5), closes #9119 #9141

🔧 Bug Fixes

• detachable: detach when lazy and inititally open (19bf5d3), closes #9175
• locale: update Turkish translations (#9183) (72959c4)
• VSelect/Autocomplete: fix filled prop height with dense (fd25779)
• VSheet: add removed border-radius sass variable (0949763)

🔧 Bug Fixes

• VAlert: properly remove border radius with tile prop (eefa18c)
• VAlert: properly inherit/pass down border-radius (7800d56)
• VCard: properly remove border radius with tile prop (3905b28)

🔄 Reverts

• "refactor(VTabsSlider): convert to functional" (1c0f0ad)

🚀 Features

• locale: add Czech translation (#8228) (8ec6f05)
• locale: add Lithuanian translation (#8605) (6216517)
• overlayable added color and opacity props (#8861) (fc7697d), closes #8301
• VAutocomplete: make items copy-pasteable (#7759) (c72f902), closes #6226
• VBtn: add retainFocusOnClick property (#9046) (14a0acd)
• VBtnToggle: add new variants (#7582) (33f031a), closes #4325
• VCard: add new shaped prop (18d732d)
• VCol: add justify-self property (1ba5f82)
• VDataFooter: added page-text prop (#8511) (d00534f), closes #8110
• VDataIterator: propagate and add toggle-select-all event (#8975) (c9b00db), closes #8974
• VDatePicker: pick date range (#8891) (64867ba), closes #1646
• VDataTable: added filterable property to header items (#8439) (00c6a73), closes #8242
• VImg: add lazy loading functionality (0df5f42)
• VInput: add dense prop (#8810) (5bfc87e), closes #1846
• VIntersect: add new directive (#9071) (9aee2d6)
• VLazy: add new component (86590b4)
• VListItem: add selectable prop (#8622) (b6c4f15), closes #8464
• VSelect: emit selected listIndex event (#7828) (b795145), closes #7808
• VSkeletonLoader: add new component (#9037) (160c7e8)
• VSnackbar: add border-radius sass variable (5b7341e)
• VTimePicker: am/pm i18n. (#9032) (0b8fa7c)

🔧 Bug Fixes

• VAppBar: v-model control when using elevate-on-scroll (#8584) (74b3270), closes #8583
• VSheet: remove default transition, display and position (fbcb008), closes #8272
• VTabs: scope tab white-space to horizontal only (a173b95), closes #8981
• VToolbar: remove overflow when collapsed (35b0fb1)

🔧 Bug Fixes

• provide backward compatibility for vue-meta@1 (#8922) (21e44d4)
• update hebrew translation (#8930) (4464455)

🔧 Bug Fixes

• SelectionControls: better scope css selector for input (d7d1ae3), closes #8523
• VCheckbox: wait for dom to process before changing indeterminate state (7080ed4), closes #8270
• VDialog: check if element is already focused on focusin event (fa0a893), closes #8459
• VDialog/VMenu/VTooltip: make all activators inline elements (b40fa43), closes #6951
• VPagination: display length if maxButtons is less than 1 (7f7391d), closes #8558
• VTabs: only indent tabs if overflowing (dc2850f), closes #8540
• VTabs: properly position slider after resize, fix align-with-title prop (a8c3f2a), closes #8621 #8653
• VTextField: better scope hover styles for outlined text-fields (9ddb4db), closes #8546

🔄 Reverts

• "fix(VDialog): inherit listeners (#8491)" (4579b1d)

🔧 Bug Fixes

• VNavigationDrawer: conditionally apply clipped z-index (15e554d)

🔧 Bug Fixes

• VCarousel: pass mandatory prop to the delimiters (#8639) (6c086cb), closes #8273
• VDataFooter: disable last page button if there's no items (#8590) (2277942), closes #8577
• VDataTable: default to first itemsPerPage option (#8578) (cb045a2), closes #8184
• VDataTable: page resets when server-items-length is zero (#8594) (39f9d8b), closes #8359
• VDataTable: use convertToUnit in table header width styles (#8592) (4a52142), closes #8591
• VTabs: slider hides behind the colored tab (#8600) (f74b70a), closes #8596
• VTextField: remove !important flag for bg-color (#8652) (83e1c9a)

🔧 Bug Fixes

• VBtn: correct larger size button font-size (d775278)
• VListGroup: adjust nested item padding only for nav/dense (d98a227)