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
andv-footer
- The
main
element should have a first child ofv-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 yourv-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 singlev-stepper-items
component - Replace all contextual properties (primary, secondary, etc..) for
v-alert
andv-snackbar
with color="primary", color="secondary" - Replace
include
withexclude
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
andv-badge
have been moved to regular componentsv-stepper-content
must now be wrapped in av-stepper-items
component, andv-tabs-bar
should no longer be placed inactivators
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
andv-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
andv-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
andv-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 defaultv-list-tile
- #1313 #1314 #1629 #1739 Refactored the
v-tooltip
directive into a component. Works similar to thev-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
andv-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 parallaximg
- 24dba06 Refactored
v-menu
to be more performant and abstracted functionality for positioning and collision detection for use in the newv-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 transitionv-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
andv-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 overflowedv-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 av-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 av-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 dynamicv-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 overlapv-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
, andv-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 av-dialog
in the activator that is contained withinv-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 ofv-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 newv-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 av-list-tile-action
was not styled properly (thanks @KaelWD ) - #1853 Fixed a bug where
v-btn
's margin did not properly matchv-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 )