Update vuetify to the latest version 🚀 #27

greenkeeper · 2019-07-23T19:20:24Z

The dependency vuetify was updated from `1.5.16` to `2.0.0`.

This version is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

Publisher: johnjleider
License: MIT

Release Notes for v2.0.0

v2.0.0 Arcadia

Welcome to the official version 2.0 release of Vuetify! Before getting into the actual release introduction, I wanted to take a moment of your time to talk about project sponsorship and a unique opportunity that I've been fortunate enough to be a part of.

Version 2.0 represents the culmination of 8 months of development. Through the combined efforts of numerous developers, we have been able to bring the largest update we have ever had — the framework has never felt better.

Github has recently released a new program called Github Sponsors, something I've been fortunate enough to receive a beta invite for. Some of you know that I currently run a Patreon campaign for the same purpose. With my invite, I have started to transition supporters to the new platform due to the amazing benefits that Github is offering. What that is in a nutshell:

Funding matching for the 1st year
Waived processing fees for the 1st year
Offered on a platform that more people know and are comfortable with

With that being said, I wanted to quickly talk about the 3 pillars of support available with sponsorship and highlight how it can benefit developers and businesses that use Vuetify.

Single developer

Sponsor support channel
Vue/Vuetify consulting services

Company

Elite Sponsor support channel (direct support from me)
Monthly live support calls
Github issue prioritization

Enterprise

Subscription based model through Tidelift
Github issue prioritization

The generous fund matching program from Github provides a rare opportunity for me to be able to invest more into the Vuetify ecosystem and continue to provide developers with a polished and expansive library for Vue.

Thank you for your support and please consider sponsoring the project.

If you have any questions, please do not hesitate to reach out to me in the community. Thank you for using Vuetify!

—John

📖 Table of Contents

#Release Introduction
#Important Links
#New Components & Features
#Documentation Updates
#Upgrade Guide
#Release Notes
#Known Issues
#I need help! 🆘

💥 Release Introduction

Hello and welcome to the v2.0 release, Arcadia. It has been almost 8 months since development kicked off and I believe we have accomplished something very special. As described in my talk in last year's VueConf TO presentation, we have performed a massive overhaul to every aspect of the framework, making it easier to use and maintain.

Updated every component to the new Material Design 2 specification
Added an improved grid system
Every component has been updated with proper accessibility (a11y) support
Every component has been updated with proper bidirectionality (rtl) support
Converted from stylus to sass
Converted from javascript to typescript
Converted from avoriaz to vue-test-utils
Moved all styles and unit tests into its corresponding component's folder

This is only a small list of overall framework improvements from quality of life changes, to new features and functionality (outside of the MD2 improvements). The documentation has been massively updated with over 250 new examples, tons of updated information on how to use the framework's internals, details on long-term support, an extended roadmap and a better API display for components. We have also setup a process for exporting the component api for vetur so that it is easier for us to keep it up to date.

I have also teamed up with Vue Mastery to bring high-quality tutorials into the Vuetify ecosystem. This video series has been developed around using version 2, is taught by Ben Hong and is perfect for new and experienced Vuetify developers alike. Make sure to check it out!

Since early alpha, we have been working with the community on small and large projects to ensure we have an easy and managable upgrade process from v1.5. Kael has even created an eslint-plugin to make the process of upgrading to the new grid even easier. If you run into any issues that do not appear to be covered in the Upgrade guide, please reach out to a developer in the release migration channel.

I'd like to give a huge thank you to everyone for your unwaivering support and for enabling me to work on open source as a full-time job. For the first time in the framework's history, I feel like we have a solid base for maintaining and developing new features and I've never been more excited for the future. Finally, while this release was an effort by many Vuetify developers, I would like to send a special thank you to some that went above and beyond in ensuring the v2 release was as polished as possible. In no particular order:

Thank you everyone for using Vuetify!

—John

❗️ Important Links

Documentation
Becoming a Github Sponsor (supports the author, John)
Becoming a backer on OpenCollective (supports the development team)
Become a subscriber on Tidelift (supports the author, John)
Consulting with the author, John
Community discord
Twitter
Medium publication
Shop

🤚 FAQ

What will be happening to v1.5?
- No more features
- Issues will be resolved on a case by case basis. Any security vulnerabilities will also be fixed.
- Long-term support until July 2020
Will the light and dark theme variants apply to individual components? (e.g. a light theme application with a dark <v-card>)
- No. Variants only apply from the designation of $vuetify.theme.dark being boolean true or false.
My application is saying "Cannot read dark of undefined"
- Make sure that you have properly followed the upgrade guide.
Is it still possible to view the v1.5 documentation?
- Yes
Should I upgrade to v1.5 before upgrading to v2.0?
- Yes, you can find a list of upgrade guides on the Long-term support page
Where can I suggest changes to the upgrade guide?
- In the #release-migration channel on discord

⚡ New Components & Features

🔗 VAppBar

Brand new component that was created to better scope the functionality of v-toolbar. All existing scrolling techniques and app functionality from v-toolbar has been moved. New scrolling techniques such as collapsing bar, scroll shrink and more have been added.

🔗 VBanner

Brand new component introduced in MD2. You can find more information in the banner specification.

🔗 VChipGroup

Brand new component for grouping multiple v-chips together in a column or row based format.

🔗 VColorPicker

Brand new component designed to making color selection a breeze. With 5 available formats, hex, hexa, rgba, hsla and hsva, v-color-picker can accommodate a wide variety of use cases.

🔗 VFileInput

The long awaited and highly anticipated file upload component. The v-file-input is aimed to replacing the default functionality and behavior of a regular <input type="file">. It features a multitude of customization options for tweaking the way selections are displayed, all of the available styling of v-text-field and more.

Developers notes: You may be wondering about 2 things: built in upload support and drag-and-drop. There will be an upcoming second component, v-upload that is designed to have a more visual interface for manipulating file uploads and will support xml requests. With its introduction, we will be bringing drag-and-drop to both upload components.

🔗 VListItemGroup

Brand new component for grouping multiple v-list-items together.

🔗 VOverlay

A staple feature that was previously integrated as part of dialogs and navigation-drawers has been abstracted into its own component for consumption.

🔗 VSimpleTable

Meant to be a replacement for a generic table element.

🔗 VSlideGroup

A new group component designed to provide the functionality of v-item-group within a custom slide interface.

📃 Documentation Updates

Over 250 new examples
- Heavy focus on providing examples for all props
- Added playgrounds
Improved property descriptions with relevant links to corresponding functionality
Added snippets for object based properties displaying what properties are available
- Individual property descriptions coming soon
Improved existing information on advanced Vuetify usage with more examples and better explanations
Brand new API design for components
Numerous a11y improvements throughout the docs
Greatly improved performance with lazy loading

🛠 Upgrade Guide

Version 2 contains non backwards compatible breaking changes. This includes previously deprecated functionality from v1.x.x. These breaking changes are noted in the console for the corresponding components.

The existing grid is still operational and has an eslint plugin to help with migration. This plugin can also be used to help upgrade to the new grid.

Upgrade now!

Bootstrap

Vuetify must now be instantiated and passed to the initial Vue instance. This is similar to how vue-router and vuex are bootstrapped.

Full Install

// v1.5
import Vue from 'vue'

import Vuetify from 'vuetify'

import 'vuetify/src/stylus/main.styl'
const opts = { ... }

Vue.use(Vuetify, opts)
new Vue(...).$mount('#app')

// v2.0
import Vue from 'vue'

import Vuetify from 'vuetify'

import 'vuetify/dist/vuetify.min.css'
const opts = { ... }

Vue.use(Vuetify)
new Vue({

vuetify: new Vuetify(opts)

}).$mount('#app')

A-La-Carte Install (vuetify-loader)

// v1.5
import Vue from 'vue'

import Vuetify from 'vuetify/lib'

import 'vuetify/src/stylus/main.styl'
const opts = { ... }

Vue.use(Vuetify, opts)
new Vue(...).$mount('#app')

// v2.0
import Vue from 'vue'

import Vuetify from 'vuetify/lib'
const opts = { ... }

Vue.use(Vuetify)
new Vue({

vuetify: new Vuetify(opts)

}).$mount('#app')

Framework

The following components are now lazy by default. This means they will not render their content until they are explicitly activated. This drastically improves performance but may not be wanted depending upon your application's needs (i.e. For SEO purposes). To return to the previous behavior, use the eager prop.

v-badge
v-menu
v-tooltip
v-dialog
v-bottom-sheet

Theme

Now supports dark/light theme variants. The dark property has been moved into the theme property. Will dynamically change when toggling $vuetify.theme.dark. If only using one variant, you only need to define its colors.

// v1.5
const opts = {

dark: true,

theme: {

primary: '...',

...

}

}

// v2.0
const opts = {

theme: {

dark: true,

themes: {

light: {

primary: '...',

...

},

dark: {

primary: '...',

...

}

}

}

}

Icons

Icon and iconfont declaration is now scoped under the icons property.

// v1.5
const opts = {

iconfont: 'fa4',

icons: { ... }

}

// v2.0
const opts = {

icons: {

iconfont: 'fa4',

values: { ... }

}

}

Now defaults to use mdi icons. For information on how to install please navigate here.
Is now located under the icons property of the Vuetify options

If you want to use a custom iconfont, you must set it up in the initial Vuetify options now.

// v1.5
import Vue from 'vue'

import Vuetify from 'vuetify'
Vue.use(Vuetify, {

iconfont: 'fa4'

})

// v2.0

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  icons: {
    iconfont: 'fa4'
  }
})

Goto (scrolling helper)

Import location has changed. Must be explicitly bootstrapped with the Vuetify instance to use in vue-router scroll-behavior. Example of how to do this here. Reference documentation for scroll-behavior usage here.

// v1.5
import goTo from 'vuetify/es5/components/Vuetify/goTo'

// v2.0
import goTo from 'vuetify/lib/services/goto'

Lang

The translator function t is now nested under the lang property.

// v1.5
this.$vuetify.t(...)

// v2.0
this.$vuetify.lang.t(...)

Grid

The grid has been rebuilt modeled after bootstrap. The existing grid still works and needs some slight modifications. Kael has created an eslint plugin to help with this process.

eslint-plugin-vuetify to fix most of these for you
Spacing helpers have changed to represent the number of 4px intervals from 0-12 (0-48px)
- eg. px-7 is 7 * 4 = 28px
- 3 → 4
- 4 → 6
- 5 → 12
Most "breakpointed" and "non-breakpointed" helpers have been normalised, eg. .text-xs-center is now text-center as it applies to all screen widths unless overridden
Children of .d-flex no longer have extra flex rules applied. This can be done manually with .flex-grow-1
Helper classes changed:
- .fluid → .container--fluid
- .scroll-y → .overflow-y-auto
- .hide-overflow → .overflow-hidden
- .show-overflow → .overflow-visible
- .no-wrap → .text-no-wrap
- .ellipsis → .text-truncate
- .left → .float-left
- .right → .float-right

Use the following regex to update spacing classes:

find: ([\s"][mp][axytblr])-5
replace: $1-12
find: ([\s"][mp][axytblr])-4

replace: $1-6
find: ([\s"][mp][axytblr])-3

replace: $1-4

Styles

The main framework styles are now important automatically.

// v1.5
// src/plugins/vuetify.js
import 'vuetify/src/styles/main.sass' // can be removed

Must install the sass package

yarn add sass -D
// OR
npm install sass --dev

Do not install node-sass, it is not the correct library.

Typography

The root font-size (per MD2 specification) is now 16px.

The following typography classes have been replaced:
- subheading → subtitle-1

Event names

All event names has been changed from camelCase to kebab-case:

update:searchInput → update:search-input
update:inputValue → update:input-value
update:miniVariant → update:mini-variant
update:pickerDate → update:picker-date
update:selectingYear → update:selecting-year
tableDate → update:table-date
update:returnValue → update:return-value

Activators

Components with activators, v-tooltip, v-menu, v-dialog, v-list-group and v-bottom-sheet must now be bound using the new v-slot syntax.
- Requires [email protected]
We understand this is considerably more verbose than the v1.5 counterpart. We are still exploring ways to support the new v-slot in a more concise manner.
- You can find more information on the official Vue documentation for Destructuring Slot Props.
- You can find more information on the official Vue documentation for v-slot.
The upside to this change is it is easier to support nested activators and provide proper a11y support

Regular activator

<!-- v1.5 -->
<v-dialog>

<v-btn slot="activator">...</v-btn>

</v-dialog>

<!-- v2.0 -->
<v-dialog>

<template v-slot:activator="{ on }"

<v-btn v-on="on">...</v-btn>

</template>

</v-dialog>

Nested activator

<!-- v2.0 -->
<v-menu>

<template v-slot:activator="{ on: menu }">

<v-tooltip bottom>

<template v-slot:activator="{ on: tooltip }">

<v-btn

color="primary"

dark

v-on="{ ...tooltip, ...menu }"

>

Dropdown w/ Tooltip

</v-btn>

</template>

<span>Im A ToolTip</span>

</v-tooltip>

</template>

</v-menu>

Unit tests

Testing with Vuetify is now similar to that of vue-router and vuex.

// setup.js
import Vue from 'vue'

import Vuetify from 'vuetify'
Vue.use(Vuetify)

// Component.spec.js
import { createLocalVue, mount } from '@vue/test-utils'

import Vuetify from 'vuetify'

import Component from 'path/to/my/component'
const localVue = createLocalVue()
describe('Component.vue', () => {

let vuetify
beforeEach(() => {

vuetify = new Vuetify(...)

})
it('should...', () => {

const wrapper = mount(Component, {

localVue,

vuetify

})

})

})

Form Input Validation

All form inputs default to white when using the dark prop unless the application is explicitly set to dark mode.

Removed Component Properties

These are previous deprecations from earlier versions that have now been removed:

<v-text-field textarea> will no longer render <v-textarea>
<v-select autocomplete> will no longer render <v-autocomplete>
<v-select combobox> will no longer render <v-combobox>
<v-select overflow> will no longer render <v-overflow-btn>
<v-select segmented> will no longer render <v-overflow-btn segmented>
<v-select editable> will no longer render <v-overflow-btn editable>
<v-text-field textarea> will no longer render a <v-textarea>

Individual Components

These are the changes required for existing components.

`v-app`

Component classes have been prepended with v-. eg .application → .v-application
The dark and light prop no longer have an effect on application theme variants

<!-- v1.5 src/App.vue -->
<template>

<v-app dark>

...

</v-app>

</template>

// v2.0 src/plugins/vuetify.js
import Vue from 'vue'

import Vuetify from 'vuetify'
Vue.use(Vuetify)
export default new Vuetify({

theme: { dark: true }

})

`v-alert`

Alerts are visible by default

<!-- v1.5 -->
<template>

<v-alert :value="true">

...

</v-alert>

</template>

<!-- v2.0 -->
<template>

<v-alert>

...

</v-alert>

</template>

`v-carousel`

The cycle prop is no longer implicit, must be defined in order to have screens switch

`v-btn`

The flat prop is now text
The round prop is now rounded
No longer has explicit margin

`v-chip`

value no longer controls visibility, use active
input event emitted when clicking
The close event is now click:close
@input listener is now @active.sync

<!-- v1.5 -->
<v-chip :value="chip" @input="chip = $event">...</v-chip>

<v-chip v-model="chip">...</v-chip>

<!-- v2.0 -->
<v-chip :active="chip" @update:active="chip = $event">...</v-chip>

<v-chip :active.sync="active">...</v-chip>

`v-bottom-nav`

Renamed from v-bottom-nav to v-bottom-navigation

`v-bottom-navigation`

The color prop is now background-color
The color prop now affects the active <v-btn> color

`v-bottom-sheet-transition`

Component has been removed

Developer notes: Was never explicitly listed in API

`v-btn`

The flat prop is now text
The round prop is now rounded
No longer has explicit margin

`v-carousel`

The cycle prop is no longer implicit, must be defined in order to have screens switch

`v-chip`

The value prop is now active
value no longer controls visibility. input event emitted when clicking
The selected prop is now input-value or v-model
The close event is now click:close

`v-data-iterator` & `v-data-table`

Data table (and iterator) have been rewritten from the ground up to be both easier to use and to allow for more flexibilty in more advanced use cases. This has resulted in a number of breaking changes. Some of these are shared between both components while some are unique to each.

Shared

disable-initial-sort has been removed. Neither component initially sorts data anymore. Use sort-by (or options) prop to sort.
filter prop has been removed. Instead use custom-filter. This was done in an effort to make custom filtering less confusing.
pagination prop has been removed. Instead use the separate props such as page, sort-by, etc. If you want to provide a single object you can use the new options prop instead. NOTE: The options prop has a different object structure than pagination. Check API docs for details.
total-items prop has been renamed to server-items-length
hide-actions prop has been renamed to hide-default-footer. Also it no longer changes the visible items per page
Props related to the default footer have been move to the footer-props prop. These are:
- prev-icon
- next-icon
- rows-per-page-items → items-per-page-options
- rows-per-page-text → items-per-page-text
The expand prop has been removed.

`v-data-iterator`

The content-tag, content-props, content-class props have been removed. Instead simply use the default scoped slot to implement your intended markup.

`v-data-table`

items slot has been renamed to item
headers slot renamed to header
item slot (and header) now require you to define a <tr> element. Previously this was optional.
hide-header has been renamed to hide-default-header
select-all has been renamed to show-select. This will also render a checkbox on each item row as long as you are not defining a slot that overrides the internal row rendering (such as item or body).
Props related to the default header have been moved to the header-props prop. These are:
- sort-icon

`v-expansion-panel` et al

Many components have been renamed and props moved
- v-expansion-panel → v-expansion-panels
- v-expansion-panel-content → v-expansion-panel
New components
- v-expansion-panel-header
- v-expansion-panel-content

<!-- v1.5 -->
<v-expansion-panel>

<v-expansion-panel-content

v-for="(item,i) in 5"

:key="i"

>

<template v-slot:header>Item</template>

<v-card>

...

</v-card>

</v-expansion-panel-content>

</v-expansion-panel>

<!-- v2.0 -->
<v-expansion-panels>

<v-expansion-panel

v-for="(item,i) in 5"

:key="i"

>

<v-expansion-panel-header>

Item

</v-expansion-panel-header>

<v-expansion-panel-content>

<v-card>

...

</v-card>

</v-expansion-panel-content>

</v-expansion-panel>

</v-expansion-panels>

`v-footer`

Now has explicit padding to match other similar MD components. Can be removed with the padless prop or a helper class, class="pa-0"

`v-jumbotron`

Component has been removed

`v-list` et al

Many components have been renamed
- v-list-tile → v-list-item
- v-list-tile-action → v-list-item-action
- v-list-tile-avatar → v-list-item-avatar
- v-list-tile-content → v-list-item-content
- v-list-tile-title → v-list-item-title
- v-list-tile-sub-title → v-list-item-subtitle
- The avatar prop has been removed

`v-list-group`

Can no longer use v-list-items in the activator slot
- listeners are passed through to the internal v-list-item for activators
- use v-list-item-content/v-list-item-title etc instead

`v-navigation-drawer`

Default width has been changed from 300px to 256px. You can adjust it using width prop.

`v-select`, `v-autocomplete`, `v-combobox`, `v-overflow-btn`

Now passes split attributes and listeners for proper a11y support (split from tile to match other implementations).

<!-- v1.5 -->
<v-select>

<template v-slot:item="{ item, tile }">

<v-list-tile v-bind="tile">

...

</v-list-tile>

</template>

</v-select>

<!-- v2.0 -->
<v-select>

<template v-slot:item="{ item, attrs, on }">

<v-list-tile v-bind="attrs" v-on="on">

...

</v-list-tile>

</template>

</v-select>

The item scoped slot value of { tile } is now { attrs, on }. is now bound similar to the v-menu activator slot.

`v-select`

No longer has a default autocomplete of on

`v-speed-dial`

Icons no longer have inferred swapping for activator through css
The activator slot will provide a model in the future

<!-- v1.5 -->
<v-speed-dial>

<template v-slot:activator>

<v-btn

dark

fab

>

<v-icon>account_circle</v-icon>

<v-icon>close</v-icon>

</v-btn>

</template>

</v-speed-dial>

<!-- v2.0 -->
<v-speed-dial v-model="fab">

<template v-slot:activator>

<v-btn

dark

fab

>

<v-icon v-if="fab">account_circle</v-icon>

<v-icon v-else>close</v-icon>

</v-btn>

</template>

</v-speed-dial>

`v-tabs`

The color prop is now background-color. Color now affects the default text and slider color
Various class names have been changed throughout
- v-tab__div removed, use v-tab
- v-tab__item → v-tab
- v-tabs__slider → v-tabs-slider
- v-tabs__bar → v-tabs-bar

`v-tabs-items`

No longer implicitly inherits the v-tabs model when nested. Must have :value or v-model explicitly bound.

<!-- v1.5 -->
<v-tabs v-model="tabs">

...

<v-tabs-items>

...

</v-tabs-items>

</vtabs>

<!-- v2.0 -->
<v-tabs v-model="tabs">

...

<v-tabs-items v-model="tabs">

...

</v-tabs-items>

</vtabs>

Developer notes: The tabs-items component does not have to be provided and is only necessary for custom implementations.

`v-text-field`, `v-select`, `v-textarea`, `v-autocomplete`, `v-combobox`

The box prop is now filled

<!-- v1.5 -->
<style>

  .application {

    ...

  }

</style>

<!-- v2.0 -->
<style>

  .v-application {

    ...

  }

</style>

💯 Release notes

Below is a consolidated list of changes made in v2. Every component that has a MD2 specification has been updated to match (with the exception of the known issues below). Every component that has a MD1 specification (and not 2) has been re-verified and updated to ensure that it matches the previous spec.

New Components

New components are listed under the New Components & Features section.

Framework

Rebuilt the entire core for better usability and maintainability
Scoped all Vuetify global styles to .v-application
Added theme support for default anchor colors
All components are now lazy by default meaning they will not render their content unless activated. This can be overriden with the eager prop
Converted all components and functionality from javascript to typescript
Converted all components and functionality from stylus to sass
Converted all unit tests from avoriaz to vue-test-utils
Added support for dark and light theme color palettes
Issues closed:
- #6020

Grid & Helper classes

Rebuilt using the bootstrap-style grid system
Added negative margin helper classes: .pr-n4 applies margin-right: -16px
Added more responsive helper classes: .pa-md-6, .justify-lg-center, .order-sm-first, .float-lg-right etc
Made using flex helper classes easier: .flex-grow-1 and .flex-shrink-0 instead of .grow/.shrink
Added new rtl/ltr start/end spacing and alignment helper classes: .ps-md-6, '.me-1' (s stands for start, e stands for end), .text-start etc
Helper classes are now scoped with .v-application - it means that they won't interfere with similarly named classes from other frameworks if they are used outside of the Vuetify application
Issues closed:
- #1434
- #4660
- #5168
- #5272
- #6020
- #7733

Typography

Added new helper classes
- .subtitle-1
- .subtitle-2
- .overline

Vetur Support

Releases of Vuetify now include auto-generated files for tags and attributes to allow for accurate Vetur auto-completion.

Alerts

Added a11y support
Added new properties
- border - Apples a border to the designated direction, top, right, bottom and left
- colored-border - Applies the current color to the alert's border
- prominent - Increases the height and icon size
- text - Applies the defined color to text and a low opacity background of the same

Badges

Added support for having more than 1 character
Issues closed:
- #4934

BottomNavigation

Added new properties
- horizontal - Positions icons to the right of text as opposed to stacked vertically

BottomNavigation

Added new properties
- tile - Removes the border radius

Breadcrumbs

Added a11y support

Calendars

Improved event interaction
Fixed next/prev with irregular weekdays
Will now throw an error when no days are available
Renamed all scoped slots to use kebab-case
Issues closed:
- #6264
- #6307
- #6704
- #7155

Cards

Added new properties
- link - Explicitly applies link styling (href/to), can now be focused
- loading - Can now be put into a loading state (similar to buttons)
- outlined - Removes elevation and adds a thin border around the card
- tile - Removes the border radius

Carousels

Added new properties
- vertical-delimiters - Changes delimiters from horizontal to vertical
- progress - Displays current slide progress compared to total

Checkboxes

Normalized indeterminate behavior with native checkbox input

Chips

Can now be used as a router-link
Added new properties
- filter - Displays a selection icon when selected
- filter-icon - Changes default icon used with the filter property
- link - Explicitly applies link styling (href/to)
- pill - Fits v-avatar flush along edges
- tag - Can now define a custom html tag

Comboboxes

Resovled an issue where auto-select-first was not working properly
Issues closed:
- #6607

Data Tables

Will now properly apply a background-color on Safari
Removed opacity on sort arrows for better contrast ratio
Made custom filter function more user friendly
Issues closed:
- #6766

Date Pickers

Added language support for selected items translation
Issues closed:
- #7070

Dividers

Added a11y support

Dialogs

Added a11y support
Will now emit an event when the user clicks outside of the dialog, click:outside
Will now properly size card title, text and actions when using the scrollable property
Issues closed:
- #6754

Expansion Panels

Refactored to properly match MD1 specification
Issues closed:
- #6290
- #6663

Form Inputs

Improved a11y
Fixed validation state colors for all inputs
Issues closed:
- #6178

Icons

Changed the default iconfont from Google Material Icons to Material Design Icons
Added svg path support
Turned off browser translation
Added new properties
- tag - Can now define a custom html tag
Issues closed:
- #6899
- #7689

Images

Now uses inherited width from provided image
Issues closed:
- #5757

Inputs

Will now properly apply provided attributes to the input element
VInput: attrs should be applied on input not root element (#7579) (318553a), closes
Issues closed:
- #5412

Lists

Added a11y support to all list based components
v-list
- Added new properties
  - flat - Removes elevation
  - nav - An alternative styling that reduces v-list-item width and rounds the corners
  - rounded - Adds a large border radius
  - shaped - Adds a large border radius on the top left/right of the item
v-list-group
Will now propagate a click event when the activator is clicked
v-list-item-title
- Will no longer cut off badges
Closed issues:
- #7117

Menus

Added a11y support

Navigation Drawers

Improved a11y support
Added new properties
- expand-on-hover - Applies the mini state that expands on hover
- src - Can now apply a background

Parallaxes

Will now show the image provided image cannot translate (not big enough)
Issues closed:
- #7010

Progress Linear

Added new properties
- rounded - Adds a large border radius
- stream - Adds a new style to indicate loading
- striped - Adds a striped style

Ratings

Icons will no longer wrap
Issues closed:
- #6481

Selects

Added a11y support
VSelect: resolve bug in safari/ie11 with event order disparity (5fa6a68), closes
VSelect: tab selection (4963f72), closes #5614 #7544
VSelect: set input type to hidden to fix potential layout issues (#7544) (bd35bee), closes
Issues closed:
- #5614
- #5913
- #6608

Developer notes: v-autocomplete, v-combobox and v-overflow-btn all benefit from a11y updates

Sheets

Added new properties
- tile - Removes the border radius

Sliders

Added new properties
- vertical - Positions the slider vertically

Sparklines

Will now properly show custom labels when using the bars property
Issues closed:
- #7584

Tabs

Improved a11y
Improved touch support, allowing other touch based components that require swiping to properly work inside tabs items now
Issues closed:
- #3617
- #3631
- #3633
- #3971
- #4204
- #4420
- #4735
- #5398
- #5515
- #5762
- #6014
- #6278
- #6462
- #6505
- #6527
- #6575
- #6801

Text Fields

Improve multiple style prop combination styles
Added new properties
- filled - Replaces old box property
- rounded - Adds a large border radius
- shaped - Adds a large border radius on the top left/right of the item
Removed the autocomplete prop, will now propagate to the inner input
Prefix and suffix will no longer wrap under certain circumstances
Will now check the existance of the input when refocusing after clearing
Updated outlined style to match MD2 spec
Issues closed:
- #6922
- #7059
- #7711

Developer notes: v-select, v-textarea, v-file-input, v-autocomplete and v-combobox all benefit from the updated style properties

Textareas

Will now properly recalculate component height when model is updated
Issues closed:
- #4683
- #6978

Timelines

Will no longer add carets to children cards
Added new properties
- reverse - Reverses left/right positioning
Issues closed:
- #5437

TimePickers

0 hour/minute will now properly not work when disabled

Toolbars

Improved a11y

Treeviews

Will no longer emit model events on mounted
Added new properties
- color - Designate a custom color for active nodes
- dense - Reduces the height of nodes
- item-disabled - Specifies a unique key for a disabled item
- rounded - Adds a large border radius
- selection-type - Controls how the v-treeview selects nodes. There are two modes available: leaf and independent
- shaped - Adds a large border radius on the top left/right of the item
Issues closed:
- #6903
- #7296
- #7475
- #7613
- #7614

Windows

Will now select the first non-disabled v-window-item when using touch swipe
Removed transition jumping when resolving content (not scroll related)
Issues closed:
- #5000
- #6206

Individual Releases

Below are the changes from beta.9 to release:

🔧 Bug Fixes

style: bring back .v-application scope to utility classes (#7921) (bf15ab7)
utilities: allow multi-dimensional values (9ac0d11)
VContainer: propagate id (4d575f8), closes #7919
VData: typo in ts interface name (e4e01e9)
VDataTable: make custom filter function more user friendly (#7885) (132ac8e)
VIcon: add missing x-small prop functionality (9b77c73), closes #7873
VList: disabled pointer events for disabled item (71771da)
VSelect: add selection padding for outlined style (9566d4d)
VSnackbar: update to better match md2 spec (9f12df7), closes #7772
VTextField: properly align suffix in filled variant (126f891), closes #7871
hyphenate remaining event names (#7917) (6fac25d)

🔁 Code Refactoring

VDataTable: disable virtual-rows (8284ef5)

🚀 Features

styles: float classes breakpointed (#7922) (26ad2e5), closes #7921
VBtn: inherit justify-items from root (c028904), closes #7896
VDataTable: change data-table scoped slot props structure (#7585) (878be3e)
VDialog: add retainFocus prop (3681cd5), closes #6892

◀ Reverts

docs(Validatable): fix a typo (#7851) (c70c078)
fix(VDialog): focus the first child when tab leaves the dialog (513cb56), closes #6892

⚠ BREAKING CHANGES

VDataTable: the virtual-rows prop (from alpha/beta) will no longer work

For the previous alpha/betas, check out the below releases:

Releases

🌐 New Locales

Hebrew
Korean
Latvian
Norwegian

😱 Known Issues

Here is a list of known issues that were not able to be resolved before the official release. There is no need to create an issue, these are explicitly tracked and will be resolved in an upcoming patch.

Some components are missing slot descriptions
Some components are missing a playground
Some types are missing follow this PR
v-data-table
- Missing virtualized rows
<v-btn fab>
- Missing extended variant
v-speed-dial
- Missing proper positioning for attaching to cards, toolbars etc
- Missing icon change animation

🆘 I need help!

If you are stuck and need help, don't fret! We have a very large and dedicated community that is able to provide help 24/7. Come to the #release-migration channel.

Commits

The new version differs by 1293 commits.

ccd3fb5 chore(release): publish v2.0.0
7130ba1 docs(Roadmap): complete v2.0 and highlight v2.1
ab84263 docs: final clean-up before release
6249ceb docs(roadmap): update
71771da fix(VList): disabled pointer events for disabled item
294fa0c docs(VSelect): Update API for 2.0 (#7904)
cb8b8a0 docs: fixed markdown in faq
6ec3461 docs(CoreVersions): update language
62f6fd5 refactor(grid): move v-spacer to a separate file
dc14041 refactor(VRow): change .form-row to .row--dense
6f502df docs: remove row from v-layout
7f9d060 docs: add grid-list-xl to v-form > v-container
b67610f revert: fix(VForm): apply grid-list-lg to nested containers
c6a3ac9 chore: use cross-spawn for build and dev scripts
d3c47e1 refactor(VContainer): use BEM for fluid

There are 250 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper bot 🌴

Closes #27

greenkeeper · 2019-07-25T19:18:57Z

The dependency vuetify was updated from 1.5.16 to 2.0.1.

Update to this version instead 🚀

Release Notes for v2.0.1

🔧 Bug Fixes

VContainer: import new grid styles (0315233), closes #7978
VSpeedDialg: change spacing between list and fab from margin to padding (4bfd0b4), closes #8015
VTabs: allow proper adjustment of slider size (c31b01d), closes #8014

Commits

The new version differs by 38 commits.

6a80746 chore(release): publish v2.0.1
244cd64 fix(types): remove VToolbarSideIcon (#7949)
8865c9a fix(styles): add missing text-start and text-end classes (#7958)
2f68725 chore: restrict vuetify version to current major (#7984)
4bfd0b4 fix(VSpeedDialg): change spacing between list and fab from margin to padding
c31b01d fix(VTabs): allow proper adjustment of sldier size
ce27c73 docs(VSlideGroup): update API for 2.0 (#8012)
a373af4 docs(Faq): add new question/answer
67911a8 docs(VSimpleTable): update API for 2.0 (#8009)
0c1bcc5 docs: fix incorrect npm/yarn options
29453b1 docs(VTextarea): update API for 2.0 (#7993)
2ebe6b5 docs(VTextField): update API for 2.0 (#7994)
9aa5762 docs(vdatatable): fix slot names (#8000)
ccc39eb docs(VTabs): update API for 2.0 (#7986)
4866fb1 docs: fix spelling of inheritAttrs (#7990)

There are 38 commits in total.

See the full diff

Closes #27

greenkeeper · 2019-07-28T18:17:14Z

The dependency vuetify was updated from 1.5.16 to 2.0.2.

Update to this version instead 🚀

Closes #27

greenkeeper · 2019-07-30T18:35:10Z

The dependency vuetify was updated from 1.5.16 to 2.0.3.

Update to this version instead 🚀

Closes #27

greenkeeper · 2019-08-01T18:38:34Z

The dependency vuetify was updated from 1.5.16 to 2.0.4.

Update to this version instead 🚀

Closes #27

greenkeeper · 2019-08-06T16:22:42Z

The dependency vuetify was updated from 1.5.16 to 2.0.5.

Update to this version instead 🚀

Closes #27

greenkeeper · 2019-08-13T15:53:56Z

The dependency vuetify was updated from 1.5.17 to 2.0.6.

Update to this version instead 🚀

Closes #27

greenkeeper · 2019-08-13T17:19:42Z

The dependency vuetify was updated from 1.5.17 to 2.0.7.

Update to this version instead 🚀

Closes #27

greenkeeper · 2019-08-20T20:16:27Z

The dependency vuetify was updated from 1.5.17 to 2.0.8.

Update to this version instead 🚀

Closes #27

greenkeeper · 2019-08-20T21:10:45Z

The dependency vuetify was updated from 1.5.18 to 2.0.9.

Update to this version instead 🚀

Closes #27

greenkeeper · 2019-08-21T20:13:09Z

The dependency vuetify was updated from 1.5.18 to 2.0.10.

Update to this version instead 🚀

Closes #27

greenkeeper · 2019-08-27T15:35:51Z

The dependency vuetify was updated from 1.5.18 to 2.0.11.

Update to this version instead 🚀

Closes #27

greenkeeper · 2019-09-03T15:56:29Z

The dependency vuetify was updated from 1.5.18 to 2.0.12.

Update to this version instead 🚀

Closes #27

greenkeeper · 2019-09-04T01:11:52Z

The dependency vuetify was updated from 1.5.18 to 2.0.13.

Update to this version instead 🚀

Closes #27

greenkeeper · 2020-03-11T18:09:44Z

The dependency vuetify was updated from 1.5.24 to 2.2.17.

Update to this version instead 🚀

Closes #27

greenkeeper · 2020-03-17T23:29:09Z

The dependency vuetify was updated from 1.5.24 to 2.2.18.

Update to this version instead 🚀

Closes #27

greenkeeper · 2020-03-24T21:24:26Z

The dependency vuetify was updated from 1.5.24 to 2.2.19.

Update to this version instead 🚀

Closes #27

greenkeeper · 2020-03-31T23:56:20Z

The dependency vuetify was updated from 1.5.24 to 2.2.20.

Update to this version instead 🚀

Closes #27

greenkeeper · 2020-04-08T04:36:45Z

The dependency vuetify was updated from 1.5.24 to 2.2.21.

Update to this version instead 🚀

Closes #27

greenkeeper · 2020-04-14T21:36:48Z

The dependency vuetify was updated from 1.5.24 to 2.2.22.

Update to this version instead 🚀

Closes #27

greenkeeper · 2020-04-21T19:05:46Z

The dependency vuetify was updated from 1.5.24 to 2.2.23.

Update to this version instead 🚀

Closes #27

greenkeeper · 2020-04-24T23:51:43Z

The dependency vuetify was updated from 1.5.24 to 2.2.24.

Update to this version instead 🚀

Closes #27

greenkeeper · 2020-04-25T02:50:42Z

The dependency vuetify was updated from 1.5.24 to 2.2.25.

Update to this version instead 🚀

Closes #27

greenkeeper · 2020-04-28T19:21:39Z

The dependency vuetify was updated from 1.5.24 to 2.2.26.

Update to this version instead 🚀

Closes #27

greenkeeper · 2020-05-05T18:39:41Z