Skip to content

@johnleider johnleider released this Oct 5, 2017 · 3896 commits to master since this release

Let's lay it out on the line

Be honest, the layout system was extremely opinionated and didn't work in every scenario. We definitely agree, and that's why we completely rewrote the layout system from scratch. Now controlled programmatically, the new structure not only allows you to place your main application elements where you want, they are now dynamic and allow you to change the sizes of the components without downside. We are super excited for you to get your hands on it, let us know what you think! Of course, if you don't read patch notes and just head straight to the website, no worries. The documentation is now configured with DocSearch from Agolia. Easily find what you are looking for with no more digging!

With 0.16 being the last minor release before 1.0, it's very exciting to see how far we have been able to bring this framework. Far from perfect, but a solid offering that has enabled thousands of developers to create amazing applications. One of the last sore points (imho) left are defining your theme and application defaults, which is why these will be the 2 focus points for 1.0 release. With these main features will come a myriad of performance improvements, quality of life changes and new functionality. The documentation now has a new roadmap section outlining the future plans of the project. This will be updated in more detail as time passes, but should provide you with an clear picture of the goals and aspirations of Vuetify.

In closing, I'd like to thank everyone who has given Vuetify the opportunity to be a part of your next great idea. With the support of you, and our project patreon backers helping Vuetify reach its goal of $1,000. This is an exciting time for the framework and I am eager to get working on goal projects after 1.0 release.

Upgrade Guide

  • Remove all layout specific props from v-app, (toolbar, footer, etc..)
  • Apply the app prop your application based v-toolbar, v-navigation-drawer and v-footer
  • The main element should have a first child of v-content. This component is used to dynamically adjust your content space based upon your layout
  • If using the clipped prop on v-navigation-drawer, add the clipped-left or clipped-right prop on your v-toolbar, depending on which side is clipped
  • Replace all v-tooltip and v-badge directives with their new component counter-parts. Examples are in their respective docs, tooltips and badges
  • Wrap all v-stepper-content items with a single v-stepper-items component
  • Replace all contextual properties (primary, secondary, etc..) for v-alert and v-snackbar with color="primary", color="secondary"
  • Replace include with exclude in your webpack.config.js or webpack.base.conf.js:
module: {
  rules: [
      test: /\.js$/,
      loader: 'babel-loader',
-     include: [
-       resolve('src'),
-       resolve('test'),
-       resolve('./src'),
-       resolve('./node_modules/vuetify')
-     ]
+     exclude: /node_modules/

Breaking changes

  • v-tooltip and v-badge have been moved to regular components
  • v-stepper-content must now be wrapped in a v-stepper-items component, and v-tabs-bar should no longer be placed in activators slot.
  • v-app no longer accepts layout props, instead, application layout components, (v-navigation-drawer, v-toolbar, etc..) must use the app prop.
  • The async-loading prop on v-select has been renamed to loading
  • v-snackbar and v-alert no longer use the contextuablable mixin (being deprecated). Now uses the colorable mixin and have the color prop

Deprecated features

  • The contextualable mixin is being deprecated in favor of colorable. v-btn and v-icon will trigger a warning until corrected

Things we added

  • A La Carte 2.0 - Simplified process, more information in the documentation
  • Added many new tests throughout the framework
  • Improved performance and fixed performance issues related to a browser reflow due to improper logic
  • Added router functionality to v-card
  • Added Roadmap to documentation
  • Updated v-btn with the segmented prop so that it behaves as specified in the spec
  • #861 Added masks to v-text-field and v-select
  • #972 Added the colorable mixin to v-text-field, you can now use custom colors!
  • #1188 Added the ability to swipe v-tabs-content on mobile. This can be disabled using the touchless prop
  • #1246 Added a new must-sort prop to v-data-table that enforces that one column always be sorted
  • #1304 Added a new slot to v-select, no-data. This slot will show when the filtered results are 0, as opposed to the default v-list-tile
  • #1313 #1314 #1629 #1739 Refactored the v-tooltip directive into a component. Works similar to the v-menu component in regards to state manipulation with a slotted activator or using the value prop docs
  • #1346 Refactored the v-badge directive into a component so that you have the flexibility to use any icon library. Also added the ability to transition the entrance and exit of the badge docs
  • #1435 Added month functionality within v-date-picker (BIG thanks @jacekkarczmarczyk )
  • #1476 Added expand-row functionality to v-data-table
  • #1595 Added the ability to specify Boolean (false) on v-grid components
  • #1663 Drastically improved the collision detection and readability of the menuable mixin (used by v-menu and v-tooltip
  • #1723 Added numerous tests with provide (thanks @jacekkarczmarczyk )
  • #1760 Added routing to the Vuetify Playground dev environment (thanks @jacekkarczmarczyk )
  • #1797 Brand new automatic layout system
  • #1863 Added class property to the headers array for v-data-table. Allows you pass in a custom static class or array of classes.
  • #1838 Added the colorable mixin to v-slider and also added props for track/thumb color (thanks @bkpratt84 )
  • #1862 Added touchSupport property to the $vuetify.breakpoint object
  • #1960 #1961 Added the colorable mixin to v-alert & v-snack, now has the color prop
  • d892bd6 Added new prop to v-toolbar, manual-scroll. This will allow you to programmatically control the scrolling state and slide the toolbar off screen
  • 85ce427 Added new alt prop for v-parallax that is set to the parallax img
  • 24dba06 Refactored v-menu to be more performant and abstracted functionality for positioning and collision detection for use in the new v-tooltip component.

Things we fixed

  • #385 Fixed a bug where v-tabs was not removing the initial entrance transition on load
  • #943 Fixed a bug where the v-stepper would not properly transition v-stepper-content's when using variable heights
  • #999 Fixed a bug where v-tooltip would cause an element to overflow. Is now a regular component
  • #1481 Fixed a bug where v-checkbox and v-radio-group with the prepend-icon prop was not being styled properly
  • #1665 Fixed a bug where v-radio still had a focus and ripple state when using the disabled prop
  • #1710 Fixed a bug where select-all in v-data-table was not working properly when using the component option
  • #1711 Fixed a bug where v-tabs-bar would not properly account for dynamic children when determining when to show the left and right arrows for an overflowed v-tabs
  • #1724 Fixed a bug where v-navigation-drawer did not properly respect the value given when using the disable-route-watcher prop and the persistent prop
  • #1727 Fixed a bug where the selected value in v-select would not properly dim when using the disabled prop
  • #1753 Fixed a bug where v-btn inside of a v-bottom-nav was not properly receiving an active class when the application was booting
  • #1762 Fixed a bug where v-form would throw console errors when resetting a v-select's validation
  • #1783 Fixed a bug where v-navigation-drawer was using the incorrect default break-point value for the mobile-break-point prop
  • #1798 Fixed a bug where v-radio-group with dynamic v-radio children would not work properly
  • #1818 Fixed a bug where v-time-picker was not properly reverting back to the hours state
  • #1814 Fixed a bug where v-progress-linear would overlap v-btn with the fab prop
  • #1824 Fixed a bug where you could not define the item-avatar property within the items array
  • #1848 Fixed a bug where custom font libraries did not have the proper line-height
  • #1880 Fixed a bug where v-select with the autocomplete prop did not allow the space character if the menu was not open
  • #1895 Removed top padding from all selection-control components, (v-radio, v-switch, and v-checkbox)
  • #1913 Fixed a bug where v-select with the segmented prop was not properly styled to MD spec
  • #1939 Fixed a bug where v-date-picker would select the wrong date in certain Locales
  • #1943 Fixed a bug where changing rowsPerPage on the v-datatable pagination prop that caused a javascript error
  • #1953 Fixed a bug where v-btn did not receive the proper margins when used inside of a v-dialog in the activator that is contained within v-card-actions
  • a8fd957 Fixed a bug where all form components had their error messages limited to 1
  • 9fcdd10 Fixed a bug where v-tabs-bar did not have the proper styles when using the dark prop
  • 15472b2 Fixed a bug with v-data-table where the computedPagination computed property was being evaluated more time than it should have
  • 6b49177 v-list's inside of v-navigation-drawer will now have their backgrounds set to inherit, making it easier to style them

Things you fixed

  • #1456 Fixed a bug where the sortBy prop in the defaultPagination of v-data-table was not being initialized with a value (thanks @stephane )
  • #1637 Fixed a bug where it was not possible to remove the hover functionality when removing the ability to click the v-list-tile element (thanks @jacekkarczmarczyk )
  • #1729 Fixed a bug where lazyValue was not properly being updated when v-text-field was focused (thanks @KaelWD )
  • #1743 Fixed a bug where the selected item in v-select would not show properly when populating the items prop asynchronously (thanks @KaelWD )
  • #1755 Fixed a bug where the v-select when using the disabled prop, had the incorrect mouse cursor (thanks @jacekkarczmarczyk )
  • #1773 Fixed a bug where v-select with the clearable prop was replacing the prepend-icon prop (thanks @jacekkarczmarczyk )
  • #1775 Removed the rotate animation from the clear icon in v-select when using the clearable prop
  • #1777 Fixed a bug where v-select was showing duplicates when using the autocomplete and cache-items prop (thanks @jacekkarczmarczyk )
  • #1791 Fixed a bug where the html overflow css was causing issues with inline styles using rems (thanks @kimixu717 )
  • #1809 Fixed a bug where v-text-field was firing a change event at the incorrect time
  • #1817 Fixed a bug where v-menu did not properly deactivate if it was tabbed from to a new v-btn (thanks @KaelWD )
  • #1819 Fixed a bug where v-select with the autocomplete prop would sometimes not focus properly when the method was called from an external ref (thanks @KaelWD )
  • #1843 Fixed a bug where v-btn had a border focus on the Firefox browser (thanks @KaelWD )
  • #1849 Fixed the right margin of v-stepper with the vertical prop (thanks @azaars )
  • #1851 Fixed a bug where v-text-field within a v-list-tile-action was not styled properly (thanks @KaelWD )
  • #1853 Fixed a bug where v-btn's margin did not properly match v-speed-dial (thanks @d3radicated )
  • #1874 Fixed a bug where v-dialog with the scrollable prop did not scale properly on smaller screens (thanks @d3radicated )
  • #1938 Fixed a bug where in certain cases, v-text-field would try to evaluate its input ref after it had already been destroyed (thanks @KingMario )
  • #1939 Fixed a bug where v-date-picker would select the wrong date under certain conditions (daylights savings for example)

Things you changed

  • #1745 Changed link color to use the application accent theme when using the dark prop on v-app (thanks @jacekkarczmarczyk )
  • #1768 Added the themable mixin to v-footer, dark - light (thanks @njouanin )
  • #1779 Added the bootable mixin to v-list-group, removed hard coded declarations (thanks @jacekkarczmarczyk )
  • #1780 Added the colorable mixin to v-progress-circular (thanks @jacekkarczmarczyk )
  • #1794 Added the ability to add a delay for the opening and closing of v-menu when using the hoverable prop, open-delay and close-delay (thanks @jacekkarczmarczyk )
  • #1847 Abstracted ripple functionality from selection-control components into a common mixin (thanks @KaelWD )
Assets 6
You can’t perform that action at this time.