TLDR
The documentation is still a WIP and will be missing information and examples for a lot of the new functionality. If you have questions about this, please come to the community.
- v1.1 Alpha Docs
- v1.1 Alpha Support/Testing Conversation
- New input styles
- New components
- Style scoping
- Global icon config
v1.1 Forms Update
All form components have been rebuilt to adhere to a new structure that makes it easier to maintain and extend functionality. With this change, we have abstracted core functionality from various components and moved them to new, more specialized versions. The 3 new base components, v-input
, v-label
and v-messages
will allow you to easily create your own custom input implementations all while still maintaining a fluid design and interface.
We have also started to move configuration options into the global $vuetify object. You can now specify individual icon types for your entire application or select from 1 of 4 presets — Material Design (default), MDI, Font Awesome 4, Font Awesome 5 (you can also add your own presets!).
This release also includes our first round of RTL updates with all form components RTL compatible out of the box. This is an ongoing effort and you will see more components added with each minor release until we have 100% support. Thank you to everyone for your patience on this particular functionality.
Beyond the above mentioned components, we also have created quite a few new additions and added a very large chunk of community feedback to existing ones. Due to the flexibility of Vue, we are able to softly deprecate component properties that have been moved to a new component, such as v-textarea
which removes the multi-line and textarea props from v-text-field
. The prepend/append slots now support custom html such as v-btn
s or v-tooltip
s.
- v-input — new
- The baseline for all form components
- v-text-field — updated
- Now supports outline styles.
- The box and solo props have been given some QOL tweaks such as removing excessive margin, or implementing proper styles, such as the ripple effect when clicking on a box.
- Has a new append-outer-icon and append-outer scopedSlot. The previous append slot actually consumes a new inner slot specific to
v-text-field
.
- v-textarea — new
- deprecates the multi-line and textarea props from
v-text-field
- deprecates the multi-line and textarea props from
- v-select — updated
- now extends
v-text-field
directly - inherits all available props from
v-text-field
andv-menu
- now extends
- v-autocomplete — new
- deprecates the autocomplete, combobox, and tags props from
v-select
- deprecates the autocomplete, combobox, and tags props from
- v-overflow-btn — new
- deprecates the overflow, segmented, and editable props from
v-select
- deprecates the overflow, segmented, and editable props from
- v-range-slider — new
- Same functionality as
v-slider
, but with more sliders!
- Same functionality as
Upgrade guide
Click to expand
Things that might break
v1.1 brings style scoping to the framework with ~90% of classes gaining a prepended v-
. If you have styles that are specifically modifying Vuetify classes you will need to update the selectors. The exception to this are grid and helper classes. Many internal methods have been moved/been renamed. If your implementations depend on these and you are looking for an updated way to handle your use-case, please stop by the community.
The id prop on form inputs has been properly moved to the input. If you have classes that rely on this for specification, you will need to update them.
Labels used in v-switch
, v-checkbox
and v-radio
are now relatively positioned (previously absolute).
If you are using a v-select
with chips and scopedSlots, it is recommended that you update your @input hook to the parent onChipInput method.
<template>
<v-select :items="items" chips multiple>
<template slot="selections" slot-scope="props">
<v-chip @input="props.parent.onChipInput">{{ props.item.text }}</v-chip>
</template>
</v-select>
</template>
The v-tabs
component with the centered prop has been updated to use the proper width (previously had a min of 164px). If you liked this previous look, use fixed instead.
Deprecations
Your application should still continue to work exactly as it did on v1.0. Below is a list of functionality that is being deprecated and will be removed in future releases. Don't want to read? Don't worry, if you are using this functionality, you will receive deprecation warnings inside of your app.
v-select
with the tags, combobox or autocomplete props has been moved tov-autocomplete
v-select
with the segmented, overflow or editable props has been moved tov-overflow-btn
v-text-field
with the multi-line or textarea props has been moved tov-textarea
- The textarea prop has been renamed to outline
- The prepend-icon and append-icon slots are now prepend and append respectively
v-expansion-panel-content
v-model has been moved to the parentv-expansion-panel
- Can be controlled by an array of indexes that correspond to the content index
Known bugs
Click to expand
v-autocomplete
with an array of objects injects the value instead of text into the input field when selecting an item
Changelog
Click to expand
Things we changed
- 725cb26 The attach prop on
v-menu
is now dynamic - #1322, #2739, #3305 Added better support for custom append and prepend slots. Can now accept components such as
v-btn
orv-tooltip
- #1561 Added
v-
to most vuetify classes to prevent conflicts with other libraries. Note that this will break custom styles and simple use of component classes (eg.<div class="card">
instead of<v-card>
). Huge thanks to @peluprvi and @juanpa669 - #2264 Removed the variable padding from
v-container
when using grid-list-{size} props - #2457 The behavior of
v-checkbox
andv-radio
should now mimic HTML 5 inputs - #2661 Improved click areas of selection controls
- #3191
v-data-table
now resets to the first page when sorting changes - #3353 Focused
v-data-table
headers now have a different background color instead of an outline (#3331) - #3324 Added v-model support for
v-expansion-panel
(#3271, #3313) - #3915 target can now be specified on any routable component, not just those with href (thanks @SeregPie)
- #3962
v-btn
now has padding on its root element instead of.btn__content
, fixed #3452 (thanks @peluprvi) - #3750
required
no longer adds an asterix to the input's label, this must be done manually - #3616
v-select
now passes the attach prop through correctly to its menu - #3576 Reduced the width of
v-radio
,v-switch
, andv-checkbox
click targets to not extend past the label - #3057
v-switch
hints should now be always visible
Things we added
- bc32335 Added new prop to
v-select
, small-chips - 168defa A persistent
v-dialog
will now pulse when clicked outside - 60a4bc6 Added support for the color prop to
v-stepper-step
(#3276) - 1822153 Fixed regression of toolbar scrolling functionality (#3484)
- b71b4f8 Added new vertical prop to
v-divider
- 27e4e85 Added new tick-size prop to
v-slider
- #3920 Added new headers-length prop to
v-data-table
, fixed #3419 and #3338 - #1307 #1837
v-select
's activation area has been reduced to match field location - #1686 Added new props to
v-slider
, thumb-label-size, always-dirty and tick-labels - #1782 Added new reverse prop to
v-text-field
. Will invert the component's slot items and right align the label - #1973 Added support for box, solo and outline to
v-select
- #2050 Added readonly support for all form inputs
- #2385 New
v-messages
component allows the user to createv-form
level errors - #2399 Added support for loaders on all
v-text-field
variations (propagates tov-select
,v-autocomplete
,v-textarea
andv-overflow-btn
) style props, box, outline and solo - #2414 You can now place elements other than
v-radio
inside ofv-radio-group
- #2591 #3116 Added start, end and change events to
v-slider
(event names still pending) - #2613 Improved the functionality of
v-autocomplete
with no data present. Added new hide-no-data prop to remove the no-data text/slot - #2641 Fixed a bug that allowed a
v-text-field
with the clearable prop that was disabled to be cleared - #2656 Improved
v-menu
width on Edge and IE11 - #2708 thumb-label and ticks props are now strings and can take values hover and always added thumb-label scoped slot to style thumb-label
- #2767 Added new no-filter prop to
v-autocomplete
. Useful when data is being provided already filtered - #2784 Can now specify
v-checkbox
andv-radio
on and off icons at the config level (Vue.use(Vuetify, { .. })) and at the component level - #2748 Added a new header slot to
v-data-iterator
(#3922) - #2788
v-select
now supports the allow-overflow prop - #2871 #3591 Added a global icon config. This allows you to use a single icon font without also needing the standard material icons (thanks @appurist)
- #3287 Added a new prop delimiters for
v-autocomplete
with tags. Accepts an array of strings that should create a new tag - #3320 Added stylus variables
$heading-font-family
and$headings.x.font-family
(thanks @jaxn) - #3352, #3540 Added new props readonly and disabled to
v-expansion-panel
andv-expansion-panel-content
- #3379 The theme stylesheet can now be disabled. This is useful if you want to generate it statically instead of on the client
- #3785 Added the Vuetify plugin to the type definition. You should now get type hints in
Vue.use
- #3748
this.$vuetify.goTo()
now returns a promise (#3832) - #3915 The target prop will now work on all
router-link
components (thanks @SeregPie) - #3950 Can now specify a nonce for the app stylesheet
Things we fixed
- fef9a0a Fixed a bug in
v-menu
where the auto prop styles were being applied always - #838 (yea I know right) All form elements now have a input element
- #1829 #3135 #3821 Improved style support for all
v-text-field
and extending components - #1969 Fixed
v-slider
error state styles - #2119 #2777 Using the id prop in all input controls will now apply to the actual input element
- #2128 Fixed a bug where
v-checkbox
was not respecting dark and light themes properly - #2171 Fixed a bug that prevented
v-radio
from being wrapped in av-tooltip
- #2228 Fixed outline styles for
v-textarea
in Firefox - #2542 All selection controls should now properly lineup with other input types when using prepend and append icon props
- #2686 Selection control labels are now relatively positioned and should break as you would expect
- #2807 #3793 Fixed a bug where
v-autocomplete
would automatically highlight the first item when filtering - #2933 Improved scoped slots with chips in
v-select
. New method provided by parent, onChipInput is available on the parent instance passed to the slot - #2948 Fixed a bug where using the reset method on
v-form
was not properly resettingv-select
- #2982
v-text-field
will now match the default input behavior of emitting a change event when pressing enter - #3082 Fixed a bug where
v-textarea
would reset the scroll position in very long fields - #3097 Fixed a bug where a disabled value could be removed by using the keyboard in
v-autocomplete
- #3137
v-slider
has been refactored to use the newv-input
and now supports custom icons and the single-line prop - #3425 Fixed a bug where
v-autocomplete
with the combobox could not be cleared with keydown.backspace - #3452 Fixed a bug where
v-btn
had the incorrect ripple styles when used inv-bottom-nav
- #3487 Fixed disabled styles for selection-controls when using the readonly prop
- #3499 Prevent layout thrashing on menu mount (#3497), thanks @Toilal
- #3532 Fixed a bug where
v-select
with the hide-selected prop was not working properly - #3567 Fixed a bug where
v-slider
would activate from a drag not started by the slider - #3593 Applied lazy behaviour to detachable components (#3570)
- #3704 Added more padding to
v-snackbar
buttons (thanks @Bingbazaar) - #3722 Improved
v-bottom-nav
styles to better mach material spec (thanks @peluprvi) - #3837 Fixed the text color for solo-inverted components
- #3934 Fixed a bug where the centered prop on
v-tabs
would apply an incorrect min-width to the tabs - #3937 Fixed a bug where
v-chip
inside av-card
wouldn't have the correct border-radius (thanks @peluprvi) - #3946 Fixed a bug where grid components would recieve a
slot
class when used at the root of a slot - #3959 Added missing lazy behavior from
v-tooltip
- #3962 Fixed a bug where
v-btn
had the incorrect click styles when used inv-bottom-nav
- #3958 Fixed a bug where the lazy prop would not work correctly on
v-tooltip
(#3959), thanks @FFxSquall - #3965, 02f3ad8 Fixed various stylus variable conflicts, in particular
v-progress-linear
(thanks @detroitenglish) - #3071 Fixed the
v-text-field
solo append-icon position in IE11 - #3186 Fixed the spacing in textareas with box
- #3487 Fixed a bug where a readonly
v-switch
would still have the ripple effect - #3532 Fixed a bug where hide-selected would not work correctly with tags
- #3567 Fixed a bug where
v-slider
would change its value when the mouse button was released over it - #3793 Fixed a bug where
v-autocomplete
would always highlight the first list item when opened - #3821 Fixed the bottom border margin on box inputs with a prepended icon
- #3878 Fixed the text color in
<v-select solo-inverted>
- #3954 Fixed a bug where
v-form
would not watch sub-components, only slotted children