v1.0 Release Party

Letter from the author
Come join us in the community
Support us on patreon
View the new documentation

• Русский
• 简体中文
• 한국어

Highlighted New Features

• Documentation i18n support
• New Component v-jumbotron
• New Component v-data-iterator - similar to v-data-table, but allows you to use any component to display your data
• #2872 Added support for darken and lighten for declared theme values (primary, secondary, etc). Added support for caching and minification of application theme
• #2991 #3008 #2945 v-date-picker has received numerous updates and feature implementations. Can now watch the internal month/year with picker-date.sync. Save/Cancel have been abstracted and put into v-edit-dialog. All pickers now support a new width and full-width props which will allow developers to make responsive implementations. Added min and max props to v-date-picker and v-time-picker for easier restricting the allowed values (v-date-picker additionally forbids navigating to dates outside the min/max)
• #2920 Unified all console messages. Framework level errors will now be marked with [Vuetify]
• #3073 Added Global scroll utility, $vuetify.goTo documentation (thanks @Zaken)

New v-tabs

The tabs component has been completely rebuilt from the ground up. Now offering more flexibility in markup and functionality, the updated component will now accommodate vastly more use-cases than it did before, while also being just as performant.

While this is not an exhaustive list, some of the key highlights are:

• Removed the need to declare a v-tabs-slider. This is now done automatically and can be modified in one of two ways:
  • If a v-tabs-slider is detected within v-tabs, it will automatically be injected, so your previous settings do not have to be changed
  • You can change the color of the slider (most common use-case) by using the new slider-color prop
• Removed the need for v-tabs-bar. All functionality has been moved back to v-tabs and this element can be removed entirely, just move its props to v-tabs
• Removed the need for v-tabs-items. There are 3 different ways that you can configure your tabs setup now:

// The most basic markup
<v-tabs>
  <v-tab>Tab</v-tab>
  <v-tab-item>Lorem Ipsum</v-tab-item>
</v-tabs>

// Useful when you need to modify the tab items container
<v-tabs>
  <v-tab>Tab</v-tab>
  <v-tabs-items class="myClass">
    <v-tab-item>Lorem Ipsum</v-tab-item>
  </v-tabs-items>
</v-tabs>

// Completely abstracted
<v-tabs v-model="tabs">
  <v-tab>Tab</v-tab>
</v-tabs>
<v-tabs-items v-model="tabs">
  <v-tab-item>Lorem Ipsum</v-tab-item>
</v-tabs-items>

Tabs now utilizes the registrable mixin to register children, along with parsing its slotted items to allow for much more diverse templates. This now also applies to $routes. The v-tabs component will now properly update the model when it contains children that are activated by route (using the :to prop).

This rewrite has also started paving way for a similar update to components that share the same general functionality, such as v-carousel and v-stepper. Look for similar functionality to come to these components in a future release.

Upgrade Guide

• v-list-group
  • item slot is now called activator
  • No longer needs an explicit dropdown arrow or v-list-tile-action for icons, use append-icon and prepend-icon now
• Debouncing the search-input prop when using the .sync modifier in v-select needs to be manually handled by the developer
• Change prepend-icon/append-icon props to prev-icon/next-icon in v-carousel, v-date-picker and v-tabs
• v-date-picker's allowedDates prop now accepts only functions. If you used an array as a prop's value change the markup from :allowed-dates="arrayOfDates" to :allowed-dates="date => arrayOfDates.includes(date)". If you were using object { min: minDate, max: maxDate } use the new min and max props: :min="minDate" :max="maxDate". min and max props not only disable dates outside of the allowed range but additionally restrict the year selection and disallow navigating to the months outside of the range
• v-time-pickers's allowedHours and allowedMinutes props now accepts only functions. The upgrade steps are similar to v-date-picker, the difference is that new min and max props refer to the time as a whole (not hours and minutes separately), so it's now trivial to restrict the allowed values for example from 9:30 to 16:00.
• Save/cancel functionality has been removed from pickers. To keep this feature in your project you need to add :return-value.sync="date" prop to v-menu or v-dialog and just close the menu when "cancel" button is pressed or call this.$refs.MENU_REF.save(date) when "OK" button is pressed. See the diff for updated date picker example. The v-edit-dialog has been refactored to use the same mechanism. It is also possible to use it without adding ref to menu/dialog. Additionally autosave prop has been removed from v-time-picker, updated time picker example shows how to use a new @change event instead.
• v-data-table no-data and no-results slots with a top level <td> will need to apply the attribute colspan: 100% in order to achieve the same look as previous versions
• v-data-table default header align is now left. Right alignment is specific for numbers and should now be explicitly defined using the align property in the headers object.
• v-tabs-bar can be removed
• Move props from v-tabs-bar to v-tabs
• Rename v-tabs-item to v-tab
• Rename v-tabs-content to v-tab-item
• v-tabs-slider is no longer required. If you only changed the color, use the slider-color prop on v-tabs
• v-tabs-items is no longer required
• the icons prop has been renamed to icons-and-text
• the fixed prop has been renamed to fixed-tabs

Things we broke

• b8d72ab When using the app prop, components will automatically be set to fixed. This can still be overwritten by explicitly defining the absolute prop.
• v-data-table's default header align is now left.
• #2664 Date and time pickers has been refactored to be more reusable, testable and maintanable. Although the change is quite massive, there are just a couple of breaking changes:
• #2903 Renamed v-speed-dial's hover prop to open-on-hover. It should now better match how this prop is used in other components
• #2978 Removed the debounce prop from v-select
• #3029 Refactored allowed-hours/allow-minutes of v-time-picker and allowed-dates of v-date-picker to only accept functions.
• #3152 prepend-icon/append-icon props were renamed to prev-icon/next-icon in v-carousel, v-date-picker and v-tabs
• v-time-picker now internally stores value in ISO format '15:30' (string, hour and minute with leading '0', 24hr format). It still accepts value as a Date object or in ampm format ('3:30pm'), but when the value is updated the 24hrs ISO string will be emited regardless of the the initial type. The allowedHours prop should use 24hr number. In ampm mode it was possible to do before :allowedHours="[3]", now it should be :allowedHours="[3,15]"
• No day is selected in the VDatePicker if the value is null (before the current day was selected)

Things we added

• 2f060f2 v-icon now supports FontAwesome 5
• 25d3faf Added show-current prop to v-date-picker. Allows you to hide the current day/month indicator or change it to another day/month
• 0e81afa Added new prop v-text-field and v-select, solo-inverted. Depending on the selected theme (dark|light), will have a lower opacity when not focused and full opacity on focus.
  e.g.
  
  
• d714af9 v-avatar now uses the colorable mixin
• 73f7bf1 Added new stylus variables for $tab-text-transform (thanks @julkuh)
• 11d0a5e The scroll-off-screen prop in v-toolbar can now be dynamically toggled
• b49c980 All routable implementing components now support an object for the ripple prop
• 6c612c5 Added a size prop to v-icon
• eac768b Updated v-toolbar scrolling behaviour
  • New props: extension-height and inverted-scroll
• 1988ab7 v-list-group now has append-icon and prepend-icon props and supports the appendIcon and prependIcon slots
• 23dbfa2 Added grow and shrink props to grid components
• d89401a Added height prop to v-system-bar
• b748b73 Added new mx-auto class to horizontally center block elements
• 5bc20c8 Added new width prop to v-card
• Added theme support to input groups that support the solo prop (v-text-field, v-select)
• Added a new prop to v-menu, attach. Accepts [Boolean, String, Object]. Helps resolve issue of v-menu content inside of scrolling containers
• #1709 v-carousel-item now supports all router-link props
• #1898 Addded text--primary, text--secondary, text--disabled classes. Not to be confused with primary--text, these helper classes are for default text colors
• #2436 v-list-tile now supports the color prop to change its inactive text color
• #2504 The v-data-table no-data and no-results slots now accept <tr> and <td>'s
• #2554 v-avatar and v-list-tile-avatar now support the color prop
• #2563 v-list-groups can now be nested, just use the sub-group prop on all children
  • New prop: sub-group - nested v-list-group
  • New prop: expand - similar to v-expansion-panel, does not close siblings on selection
  • New prop: no-action - indent v-list-tile children
• #2668 Added the hide-overlay prop to v-bottom-sheet
• #2710 Added support to use a v-list-tile as the root element of the item scoped slot (thanks @Fl0pZz)
• #2946 Added support for events in v-date-picker
• #2974 Added readonly prop for v-date-picker
• #3055 Added auto-height to v-snackbar
• #3115 Added new prop reactive to v-date-picker. When enabled, will update the picker's model when year, month or day is changed. Without, will only react when the day is changed
• #3148 Added sort-icon prop to v-data-table
• #3152 Added next-icon and prev-icon props to v-data-iterable and expand-icon prop to v-expansion-panel-content
• #3195 Added persistent prop to v-edit-dialog

Things we changed

• f89ba2b Refactored duplicate algorithm for v-select, increasing performance by 540% (thanks @Phlow2001).
• 0eb7edf Optimized iterations throughout the entire framework
• 48a2a1a Updated elevation stylus variables to be editable (thanks @Banandrew)
• f629416 Adjusted the logic for v-navigation-drawer route watcher. Will not re-open on a route change if the drawer is inactive
• fb991b4 Removed deprecated code from v-btn
• bde8944 v-tabs node parsing will now put non tabs components with v-tabs
• 7cd0f31 Remove unused fill prop from v-progress-circular
• 7272a58 Added missing !important declaration for grow, shrink and mx-auto grid helper classes
• d5154ad Improved v-chip spec compliance
• 8936e19 Improved the scroll-threshold behavior in v-toolbar
• 606de4d Converted v-btn-toggle to use the new registrable mixin (thanks @Phlow2001)
• b75f243, d634351 removed animations on layout components when using SSR
• #2465 Updated v-stepper styles to better match material design guidelines (thanks @manico)
• #2620 Removed support and warning for extra <main> inside v-content (previously deprecated)
• #2621 Removed contextualable props from v-btn, you must use color now (previously deprecated)
• #2845 v-icon will now use its default size determined by css. This allows the value to be changed through a class, or still be defined with the size prop (thanks @mattpjohnson)
• #2909 v-tab css styles from bound classes will now affect font-size
• #2155 You can now redefine the colors object in stylus
• #2759 v-snackbar should now better reflect Material Design spec (thanks @manico)
• #2802 Added support for v-footer and auto height.
• #3054 all files under vuetify/es5 now use commonJS instead of ES2015 modules (thanks @ishitatsuyuki)
• #3134 Improved keyboard interaction when using v-select
• #3129 #3053 full-width columns in v-data-table now use the table's column count for their colspan instead of colspan="100%" (thanks @NicoCevallos)

Things we fixed

• 355a0d1 Fixed a memory leak caused by referencing the vnode context passed to v-click-outside and v-resize
• a9154e7 fixed a bug where the theme stylesheet would sometimes not be generated when using SSR
• 575d717 Fixed a bug where in certain environments, v-scroll would throw an error during hot reloading
• be7fef1 Fixed a bug where v-btn was not properly watching click events when used as a router-link. This would cause the v-btn to maintain highlighting when clicking to a new route
• be0418c Fixed a bug where v-date-picker pad util was using the wrong bitwise operator
• c02bb83 Fixed a bug where the focused state of v-chip was not correct in IE11
• ffec22b Fixed a bug where v-avatar was explicitly overwriting bound classes e.g. (<v-avatar :class="['class']")
• 143e501 Fixed a bug where in some browsers v-expansion-panel was overflowing, causing scrollbars
• 3d36d83 Fixed a bug where imported tools were being duplicated in the output css file
• a8ad157 Removed old tooltip style import in app.styl
• 743ba06 Fixed a bug where v-toolbar with the app prop was not updating the application properly when toggling the manual-scroll prop
• 36bc2a1 Fixed a bug where v-toolbar would process its onScroll method even if manual-scroll was specified
• 50cfa89 v-text-field was using different transition times for its prepended and appended icon
• 0985915 Fixed a bug where v-select with the combobox prop
  would reset the current value if lazySearch was empty
• 5453fd6 Fixed a bug where v-text-field and v-select (with any autocomplete prop) did not assign a width to the actual input element, causing overflow on smaller screens
• c2c114c Fixed a bug where v-progress-linear was not animating its entry/exit when toggling the active prop
• 9f17ac0 Fixed a bug where icons in a v-list-group were text-selectable on mobile
• 5acd07e Fixed a bug where v-navigation-drawer was closing for any touch event
• e9c405a Fixed a bug where a combobox v-select would ignore dropdown selections with an active text input
• a082374 Fixed a bug where the theme stylesheet wouldn't be created when using SSR with extract-text-webpack-plugin
• d7215d0 Fixed a bug where v-btn inside a v-card would sometimes inherit an incorrect border radius
• 496ff2c, e05a390 Fixed a bug where an autocomplete v-select would have the wrong caret position if an integer was selected
• #1805 Fixed a bug where a v-avatar with a colored background would become distorted if used inside a v-list-tile
• #1989 Fixed a bug where v-menu with the absolute prop was not properly positioning the menu
• #2161 Fixed a bug where v-data-table's actions would overflow with the screen (thanks @Phlow2001)
• #2239 Fixed a bug on Mobile Firefox where v-select would trigger text selection controls (thanks @qw3n)
• #2410 Fixed a bug where the v-stepper animation would sometimes cancel early
• #2485 Fixed a bug where the exact prop was not being properly evaluated in routable implementing components
• #2418 Fixed a bug where append and prepend-icon on v-switch and v-checkbox was not styled properly
• #2544 Fixed a bug where v-navigation-drawer would not close properly on iOS devices (thanks @jingzheshan)
• #2558 Fixed a bug where sized icon buttons would have the incorrect padding
• #2581 Fixed a bug where <v-btn color="accent"> would have the wrong text color
• #2616 Fixed a bug where v-time-picker would reset to current time when explicitly cleared with a null value
• #2617 Converted v-expansion-panel to use the registrable mixin. v-expansion-panel-content no longer has to be a direct child
• #2630, 2cf08d7 Added keys to all iterating components
• #2650 Fixed a bug where only icons would work in the v-speed-dial activator button
• #2653 Removed redundant transition-group from input components (thanks @Phlow2001)
• #2666 Reset v-data-table expanded value to an object instead of an array (thanks @GregYankovoy)
• #2667 Fixed a bug where initial items passed to v-select wouldn't be cached (thanks @pinguinjkeke)
• #2670 Fixed a bug where selection controls (v-checkbox, v-radio, v-switch) were clickable when using the disabled prop
• #2677 Fixed a bug where v-ripple was not properly unbinding or updating (thanks @nkovacs)
• #2679 Fixed a bug where v-navigation-drawer was improperly removing layout padding
• #2684 Fixed alignment for v-list-tile-action when using selection-controls (v-radio, v-switch, v-checkbox)
• #2697 Fixed a bug where v-select with the autocomplete prop would clear its input when tabbing out
• #2764 Fixed a bug where v-icon would not accept a custom style tag
• #2781 Fixed a bug where the application layout was not being updated when v-toolbar's computed height changed
• #2707 Fixed a bug where v-pagination was caching its items (thanks @onlyurei)
• #2722 Fixed a bug where v-text-field was not properly converting an unmasked value to its masked variant when using the return-masked-value prop on mount
• #2760 Updated the menuable mixin (v-tooltip, v-menu, etc) to properly calculated its activators margin to allow for better positioning, removed defined margin on the actual v-menu component
• #2762 Fixed a bug where the close icon was not styling properly for v-alert when using the outline and dismissible prop
• #2754 Fixed a bug where using an array of objects in the items prop for v-select would compare the wrong properties when being tabbed to
• #2773 Fixed a bug where safari was stuck infinitely re-painting the DOM under certain conditions
• #2791 Fixed a bug where v-select with the chips prop and another autocomplete based prop (autocomplete, tags, combobox) would hide the input when removing chips (thanks @dalevfenton)
• #2801 Fixed a bug where v-bottom-nav was not properly highlighting the currently active/selected v-btn. also updated default height to match spec, 48px -> 56px
• #2809 Fixed a bug where switching between date and month view using the type prop was not working in v-date-picker
• #2812 Fixed a bug where active and current (dates && months) in v-date-picker has incorrect styles
• #2853 Fixed a bug where v-footer did not have the proper text color when using the dark theme (thanks @phainv)
• #2870 Fixed a bug where v-stepper-content was not switching its internal height to auto after boot
• #2841 Fixed a bug where v-data-table was not checking the select toggle when using the select-all prop (thanks @ReneU)
• #2878 Fixed a bug where v-select with the combobox prop would change its value to match searchValue when blurred even if an item was already selected (thanks @rokkie)
• #2914 Fixed a bug where v-list-tile with the dark prop was receiving the incorrect hover styles
• #2917 Removed deprecated pointerSupport functionality from v-app
• #2942 Fixed a bug where v-dialog's activator slot was not properly stopping event propagation
• #2970 Fixed a bug where snackbars would be limited to 50% screen width near the sm breakpoint
• #2977 Fixed a bug where v-select's menu could become 1px offset on the x-axis, causing a small line bleed through (thanks @Phlow2001)
• #2995 Fixed a bug where no error was given when using invalid colors in the theme object (introduced in beta.3)
• #2996 Fixed a bug where v-btn and v-btn-toggle were not applying the correct styling when using dynamic colors
• #2998 Fixed a bug where in some cases masking would throw a ReferenceError (thanks @sorinsarca)
• #3002 Fixed an incorrect stylus import in es5/index.js
• #3020 Fixed a bug where icons were not showing properly in IE11 Compatibility View (thanks @krestaino)
• #3021 Fixed a bug where click-outside was not being registered properly for various components
• #3068 Fixed a bug where v-btn with the fab prop was not styled properly in IE11
• #3072 Fixed a bug where v-text-field was not working properly in IE11 when using unsupported attributes
• #3077 Fixed improper transition from hint to error in all input controls
• #3084 Fixed a bug that prevented content from showing when using the lazy prop but also having content set to active at runtime
• #3088 Fixed a bug where the no-data slot in v-data-table was not being wrapped in a <tr> tag
• #3094 Fixed a bug where v-btn styles for v-stepper were affecting nested components
• #3156 Fixed a bug where application components were not resolving their state properly
• #3160 Fixed a bug where v-date-picker-title was not using the proper transition when changing dates
• #3162 Fixed a rendering issue in v-time-picker in Chrome 64 (from 0.17.7)
• #3165 Fixed a bug where v-select with the dense prop was not scrolling the proper amount when using the keyboard (thanks @dalevfenton)

Changes from 1.0.0-beta.6

Things we added

• #3195 Added persistent prop to v-edit-dialog

Things we fixed

• #3022 Fixed a bug where v-list-group would generate empty elements when no icon is set
• #3151 Fixed a bug where the v-select menu would stay open on blur when using tags
• #3174 Fixed a bug where an initially active v-tab would not have the appropriate classes
• #3199 Fixed v-snackbar color prop (thanks @timoschwarzer)
• #3203 Fixed a bug where v-tabs would lag a page behind when used with vue-router
• #3205 Fixed v-tooltip activator height inside v-toolbar-items
• #3207 Fixed the close icon in FABs
• #3200 Fixed an incorrect type definition for $vuetify.goTo
• #3226 Fixed a bug where the attach prop would not accept a HTMLElement
• #3240 Fixed a bug where it was not possible to add tags with the tab key in v-select
• #3242 Fixed a bug when using an initially-open v-dialog with SSR