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.
- No. Variants only apply from the designation of $vuetify.theme.dark being
- 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?
- 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-chip
s 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-item
s 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
💯 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 are listed under the New Components & Features section.
Developer notes: Developer notes: New Components
Framework
.v-application
Grid & Helper classes
.pr-n4
applies margin-right: -16px
.pa-md-6
, .justify-lg-center
, .order-sm-first
, .float-lg-right
etc
.flex-grow-1
and .flex-shrink-0
instead of .grow
/.shrink
.ps-md-6
, '.me-1' (s
stands for start
, e
stands for end
), .text-start
etc
.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
Typography
.subtitle-1
.subtitle-2
.overline
Vetur Support
Alerts
Badges
BottomNavigation
BottomNavigation
Breadcrumbs
Calendars
Cards
Carousels
Checkboxes
Chips
router-link
v-avatar
flush along edges
Comboboxes
Data Tables
Date Pickers
Dividers
Dialogs
Expansion Panels
Form Inputs
Icons
Images
Inputs
Lists
v-list
v-list-item
width and rounds the corners
v-list-group
v-list-item-title
Menus
Navigation Drawers
Parallaxes
Progress Linear
Ratings
Selects
v-autocomplete
, v-combobox
and v-overflow-btn
all benefit from a11y updates
Sheets
Sliders
Sparklines
Tabs
Text Fields
v-select
, v-textarea
, v-file-input
, v-autocomplete
and v-combobox
all benefit from the updated style properties
Textareas
Timelines
TimePickers
Toolbars
Treeviews
v-treeview
selects nodes. There are two modes available: leaf and independent
Windows
Individual Releases
Below are the changes from beta.9 to release:
🔧 Bug Fixes
🔁 Code Refactoring
🚀 Features
◀ Reverts
⚠ BREAKING CHANGES
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.- The upgraded grid does not have documentation
- Can view on API Explorer
- 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.