Guardians of Development

Hello again! I am very excited to bring to you one of the most impactful updates that we have released since the launch of Vuetify back in December. The documentation has been 100% overhauled from top to bottom to offer the best possible experience when coding with Vuetify. Every example provided has been converted to a full .vue component with source code available from template, script, and style. This should be a great asset in removing some of the magic that is not seen with the current examples and help you better understand how things work. Along with the technical updates, you'll be able to enjoy a better visual design and navigation throughout the entire platform.

This release also comes with a completely overhauled layout and grid system. Depending on your design, one of the more complicated features of Vuetify was the layout system. What was initially aimed to be flexible, turned into a nightmare for some users. Combined with poor examples, if you had issues, you were heading to gitter to talk to someone. This change was a difficult one for a few reasons. Specifically, the more opiniated approach that had to be taken. This approach, however, offers a great deal of flexibility and guarantees that your development time will not be wasted on getting the layout to work. The new grid system, originally spearheaded by developer @dohomi, has been rebuilt to really allow you to utilize the power of flex box. For most, the only thing changing will be the component's tag. Whereas for others, a more powerful system awaits.

Better themeing options have been propagated throughout the entire framework. This will give you better control over the colors of various components. One of the challenges with moving the Material Design theme options over was the difference between a light and dark theme. This varied by component and sometimes had us scratching our head for which color to use. Some components would have white for a dark theme and some would have black. To simplify this, we have determined that light and dark will refer to the color used on the component. Light corresponds to a base color of white, and dark is black.

Tabs have received quite a few updates this release, ranging from better router support to better themeing options. One of the difficulties encountered was how do we handle these theme changes? Take in props, such as bg-color and slider-color, or abstract these components so the dev can explicity specify how they would like to handle it. This was accompanied by a few naming changes to make sure it was easy to remember names, such as v-tab-item changing to v-tabs-item. For more information, you can checkout the documentation here

Lastly, I have opened up a Patreon and Paypal to allow developers to donate to the project. I greatly appreciate the community support, which surprisingly has been asking to donate to Vuetify's development. I am very humbled and greatly appreciative of the support. Keep coding hard and keep pushing forward.

New things

• #352 v-breadcrumbs-item can now be used with vue-router beb2c79
• #372 Added caption, body-1 and body-2 helper classes for Typography e481c08
• #376 Added prefix and suffix support to v-text-field 9972e95
• #385 Removed initial transition in tabs
• #386 Converted padding and margins in helper classes and components to be based off of px instead of rem dbc4909
• #387 Removed explicit box-shadow removal for cards inside of v-tabs-content c6898d8
• #446 Added server side pagination and sorting support to v-data-table 7c0d381
• #448 Added the ability to specify allowed-dates in v-date-picker b08d192
• #450 v-text-field now supports an explicit placeholder declaration b9f08c0
• #460 v-text-field now supports the readonly property 15767f3
• #461 Added box-shadow to v-dialog 0735d42
• #465 v-data-table will now automatically sort the first sortable column if none is specified a7ae1ec
• #497 Added disabled prop functionality to v-dialog 3d587e3
• #517 Added dynamic overflow so that selects will not be hidden inside of v-tabs-content 917cdcc
• #516 #498 #400 Added better support/control of pagination and sorting in v-data-table. The entry point for items has moved from v-model to the items prop. v-model will now return the selected items within the data-table. Fixed vuex prop mutation errors. aa6e13e
• #535 Added explicit for declaration on v-text-field's label if the id attribute is used 8f3ebc4
• #546 Added ability to specify a target for a v-list-tile. This change also affects any component that can use the route prop 701dc61
• The entire grid system has been revamped, see above for more information
• Added theme options to components.
• Added flat property to v-card which specifies no box-shadow
• Added default transition to v-toolbar aeabc37
• The v-navigation-drawer (old v-sidebar) is now within MD spec and has an array of new props to utilize
• v-icon now supports Font Awesome out of the box
• v-data-table now supports sorting within nested properties 4139aa6
• v-navigation-drawer (old v-sidebar) now supports an overlay scrim
• v-app no longer requires declaration of the type of layout being used
• v-card-row is now a functional component
• v-icon is now a functional component
• v-icon will now look proper when placed inline with text 29c937f
• Added default slot to v-parallax
• v-select will now by default return the value of the selected item, or array of values in the case of multiple. A new prop has been added, return-object if you would like to maintain the same functionality from before c7cc6b6
• v-date-picker now has the years ordered descending 8f0eb59
• All selection controls now have the proper Material Design theme by default. This can still be overwritten 868ea0f
• Changed border radius of v-chip with label property cc7e440
• Added flat prop to v-card, forces elevation-0 048c066

Things we removed

• v-content

Things we broke

• v-sidebar is now v-navigation-drawer
• v-row is now v-layout
• v-col is now v-flex
• v-tabs has a new structure and new components, see above
• v-app has been completely overhauled with a new layout system

Things we fixed

• #368 Fixed a bug where mobile tabs were not showing scroll arrows faee3c0
• #438 Fixed bug where .btn--raised class was still being applied to flat buttons e22ef96
• #441 Fixed a bug where tooltips were inheriting text-transform f34bb69
• #451 Fixed a bug where v-dialog was setting the model twice on close
• #466 Fixed a bug where the v-tab-reverse-transition was not working properly
• #470 v-date-picker buttons have been converted to anchor tags a315166
• #471 Fixed a bug where v-select would overflow inside of v-dialog c2d0cbf
• #473 The v-tabs component will now properly highlight the active route when used as a router 6890bb5
• #476 Fixed a bug where dynamic v-tab-item's would not work 271699c
• #478 Fixed a bug where the v-click-outside directive would attempt to remove an event listener from an already removed element e0890dd
• #492 Fixed a bug where v-date-picker would not properly mouse scroll on Firefox 8f0eb59
• #512 Fixed rendering issue with buttons inside of a horizontal v-stepper 9ce5269
• Improved coverage of IE11 browser
• Fixed a bug where a date would have to be clicked twice for it to register 280f50b
• Fixed mis-aligned text on v-text-field when using the prepend-icon prop 62f1960
• Fixed prepend icon incorrect padding ca7060b

Things you fixed

• #488 Default search and filter functions have been replaced with props that can be modified 3979f0d (thanks @avengerweb)
• #513 Fixed card style in fullscreen dialogs b39771b (thanks @avengerweb)
• #523 Added cross-env support for building the Vuetify package 87293eb (thanks @motia)
• #537 #540 removed Edge browser default native icons cf5765e (thanks @jamesxv7)

Things we didn't get to

• IE11 coverage is still not 100% where I'd like it to be
• Material Design spec April updates have not been 100% completed yet
• New Webpack-SSR guide needs to be written
• Theme coverage still has improvements that need to be made