Skip to content

@johnleider johnleider released this Sep 2, 2017 · 4298 commits to master since this release

Take what you want, I don't care

Seriously, take whatever you want, Vuetify now supports a la carte. It has been a very large effort with hundreds of dev hours and I cannot wait for you to get your hands on it. In light of the large changes, we are doing a beta release to make sure there is nothing critical breaking in applications. Big shoutout to @nekosaur and @mfferreira for all their effort that they've put into this patch, from writing tests (100+), to helping restructure the entire repository to be compatible for single component exporting. Also, a big thanks to all of the community members that have provided constructive feedback and PR's.

Things I potentially broke

I realized today that the grid system was fundamentally broken for applying the proper gutters between flex items. I also realized that some of the baseline functionality of flex-box was not actually available to the developer. In light of this, I made a few tweaks that could potentially break your layout depending on your current setup. Some of the new features are:

  1. Ability to set display through helper classes d-{flex|inline-flex|block|inline-block}
  2. Can now properly nest v-layout and v-flex
  3. Only 1 v-container element is needed in order to specify the spacing between all children grid components
  4. v-container no longer has a gutter by default. This means that if you were relying on it to give row spacing between elements, you will need to specifically designate the grid-list property on the container.
  5. The documentation for grids have been significantly improved providing more examples and use-cases.
  6. breaking removed row-{size}|column-{size} because it was redundant. If you want to assign a column layout, you can do so with the already existing functionality

Upgrade Guide

  • v-tabs - Remove all slot designations from children, wrap all v-tabs-content in a single v-tabs-items
  • If you were relying on explicit declaration of the v-ripple prop on route-link implementing components, v-btn|v-list-tile|v-tabs-item etc...You will now need to manually declare the ripple effect using the ripple Boolean prop
  • The counter and required props on all accepting form components, v-text-field|v-select etc, do not trigger errors based upon the counter or required conditions not being met. The required prop now only adds the asterisk after the label and the counter prop functions pretty much the same. We now fully support vuelidate and vee-validate out of the box, but also have included a built in v-form component that can manage all of your validation needs. For more information, visit the documentation page.
  • v-flex no longer has padding by default. If you relied on this for your spacing, you now need to move to grid-lists. Simply add grid-list-{xs through xl} to the surrounding v-container to have the gutters applied.


Cleaned up numerous sections, added new examples for grid and text-fields


Things we added

  • New v-form component
  • New v-bottom-sheet component
  • New v-avatar component
  • 4 new tests for v-select to accommodate the new process
  • #454 v-text-field now supports the Material Design box design
  • #974 Added new global object to determine the current break-point. Can be accessed by
  • new from beta.5 #1545 v-form can now be submitted when pressing enter
    this.$vuetify.breakpoint. It can be used like this: :class="{ 'pa-3': $vuetify.breakpoint.xsOnly }"

Things we fixed

  • #1309 Fixed a bug where certain input types (time, date, etc) were being overlapped by the label when empty and not focused
  • #1319 Fixed a bug where v-date-picker would select the wrong week day in certain locales
  • #1330 Fixed background hover when mousing over v-data-table rows
  • #1331 Fixed a bug where v-time-picker was setting the improper time period
  • #1333 Fixed a bug where v-text-field was propagating input events to v-navigation-drawer
  • #1352 Fixed a bug where a v-list-tile with multiple v-list-tile-action's or v-list-tile-avatar's would only apply styles to the next sibling element
  • #1357, #1359 Fixed a bug where the active-class prop was not properly applying the active class (doh!)
  • #1368 Fixed a bug where v-toolbar-side-icon was not working with directives
  • #1373 Fixed a bug where the .native modifier was still needed when applying @ events on v-select
  • #1374 Fixed a bug where v-list-tile's would not properly display as active when not inside of a v-list-group
  • #1375 Fixed a bug where Typography headers were not changing color with theme
  • #1377 Fixed a bug where v-select with the auto prop was not aligning the selected item over the selected value text
  • #1393 Fixed a bug where v-text-field would cause an error when referencing the internal input
  • #1397 Fixed a bug where v-edit-dialog was not properly changing theme when its parent v-data-table was set to dark
  • #1403 Fixed a bug that disallowed deselecting an option in v-btn-toggle when using the mandatory prop even if it was not the only selection
  • #1405 Fixed improper padding on v-toolbar
  • #1409 Fixed a bug where when evaluating older years in certain locales, that the v-date-picker would show the improper months
  • #1419 Fixed improper applying of opacity on disabled v-btn's
  • ddf74aa Fixed a bug where user bound @click events would be overwritten for all route-link implementing components
  • fd93077 Fixed a bug where certain heading helper classes were trying to apply a non-existent line-height and letter-spacing
  • 23eb7b3 Fixed a bug where v-menu was not properly applying the origin prop for its transition
  • 8f34860 0b6c130 Greatly improved search functionality, async items and searching async items for v-select
  • #1483 Fixed a bug where Edge was not able to iterate the node list throwing an error when searching
  • #1489 Fixed missing v-tooltip style declarations
  • #1494 Fixed v-btn using the disabled prop in v-toolbar not being styled properly
  • #1487 Disabled animation of v-icon when opening v-expansion-panel. This is a rendering issue and we will revisit it at a later time
  • #1484 Fixed a bug where when searching in v-select with the autocomplete prop, and then selecting an item, the wrong item would be selected
  • #1493 Fixed a bug where $vuetify.breakpoint.value would be undefined at runtime
  • df42a69 Fixed a bug where v-icon inside of a v-btn with the icon prop was not receiving the proper disabled styles
  • #1482 Fixed a bug where v-text-field would cause a horizontal scroll in a v-dialog when focused on Edge
  • #1462 Fixed a few styles and updated documentation examples for v-toolbar with a inner v-tabs
  • df85e48 Fixed a bug where v-select could be tab targeted when using the disabled prop
  • 283c5c5 Fixed a bug where it was possible to vertically overflow v-list-tile-title and v-list-tile-sub-title
  • 4016342 Fixed a rendering issue with v-expansion-panel using the popout prop
  • ee052a3 Fixed a bug where v-select WITHOUT the autocomplete prop would not work
  • #1495 Fixed/improved logic for determining if a select is overflowed
  • #1504 Fixed v-badge not working
  • #1506 Fixed a bug where when using a v-btn as the activator for v-menu inside of v-toolbar was not styled correctly
  • #1382 Fixed a bug where v-select did not work properly with the placeholder prop
  • #1511 Fixed bug where v-toolbar was not merged properly and didn't scroll off screen when using the scroll-off-screen prop
  • #1510 Fixed a bug where v-time-picker was not properly setting the background color to the middle circle element
  • #1517 Fixed a bug where v-icon was not properly inheriting colors
  • e483aa2 Fixed a bug where the line-height was not set properly for v-list-tile-title and v-list-tile-sub-title
  • new from beta.5 #1544 Fixed a bug where external pagination was not properly syncing with v-data-table
  • new from beta.5 #1541 #1522 Fixed a bug with v-text-field using the multi-line prop where the label was not properly positioned when resizing
  • new from beta.5 #1552 Fixed a bug with v-slider where when its model was shared, values outside of its min and max could be set
  • new from beta.5 #1556 Fixed a bug where a v-stepper with an a label that had wrapping text was not properly vertically aligned with its corresponding step icon
  • new from beta.5 #1550 Fixed a bug where v-select with the editable or autocomplete prop was not properly reacting to outside model changes

Things we changed

  • breaking Refactored v-tabs to be a little more intuitive. No longer needs to designate slots, now requires a v-tabs-items component around v-tabs-content
  • breaking The v-ripple directive is no longer automatically applied to all route-link mixin implementing components
  • breaking The v-text-field props counter and required no longer automatically apply any validation but are instead purely cosmetic. You will need to set up validation rules for these using either the built-in rules prop or external libraries.
  • Improved v-select and v-menu performance by up to 33%. Now has more intuitive keyboard navigation and search feel
  • Improved v-edit-dialog styles
  • Added label slot to all form components
  • Added babel-polyfill to dev build to allow for testing in ie
  • #1417 Added more finite control over the visible length of v-pagination and improve mobile support
  • 1523c37 Removed the ability to tab to disabled form components
  • breaking b4c7c6a v-layout will no longer apply negative margins when not inside of a v-container or a v-flex
  • #1166 #1376 Added dark theme to v-expansion-panel and a target-able class on its content
  • #1461 #1454 Removed type declaration for radio

Things you added

  • A big shoutout to @Phlow2001 , @jacekkarczmarczyk and the countless others that helped add numerous tests throughout the framework
  • #1289 Added prop to all form components that allows the defining of the toggle-keys (thanks @ckaczor)

Things you fixed

  • #548 Fixed a bug where when a v-carousel was cycling through images and the focused tab changed, after a period if time, when returning to the tab, the carousel would show a black screen (thanks @jacekkarczmarczyk)
  • #1258 Fixed a bug where when using v-text-field with a type of number would cause the label to not work properly if the input was given a valid but incomplete number, such as 0. (thanks @jacekkarczmarczyk)
  • #1350 Fixed a bug where v-progress-circular with the indeterminate prop did not work properly on IE11 (thanks @jacekkarczmarczyk)
  • #1355 Fixed a bug where the border was not displaying properly on v-navigation-drawer when using the right prop (thanks @SquareBeard)
  • #1356 Fixed a bug where v-select did not properly update when the multiple prop was dynamically changed (thanks @SquareBeard)
  • #1407 Fixed a bug in v-slider with a shared v-model and using the min prop (thanks @jacekkarczmarczyk)
  • #1472 Fixed disabled text field colors to match MD spec (thanks @jacekkarczmarczyk)
  • #1515 Fixed a bug where disabled dates on v-date-picker where not receiving the proper styles
  • new from beta.5 #1532 Fixed the designated location for help in CONTRIBUTING (thanks @jordanw)

Things you changed

  • #1273 Added new prop filter for defining the function used for filtering v-select items (thanks @vanhoavn)
  • #1342 Removed css blur on overlay (thanks @c4software)

Things nekosaur broke

  • Fixed Vuetify binding for direct template use (binding to window)
Assets 2
You can’t perform that action at this time.