I would like to give a special thanks to the individuals have dedicated a lot of their personal time to help the development of this project. @prograhammer and @fontzer were pivotal in today's release and it would not have been possible without their efforts.
The Tides of Change
With this update, you will see large changes throughout the entire library. Buttons has received a complete refactor. While other components have received tweaks, bug fixes and even name changes. Due to the massive amount of changes (183 commits), I will not be detailing the individual commits for bug fixes and changes, but instead, giving some insight to the design decisions and how to update your project.
Developer Insight
As Vuetify has grown in popularity, size and complexity, I have had the pleasure to work with and help numerous developers as we continue to support this framework.
Through these experiences, there has been a few points of confusion that have been recurring. The items prop that appears on many components and the Event Bus. two of the features I created with the intent of making it even simpler to setup components and communicate with them, were the cause of most of developers frustrations.
For some users, the simplicity of the items prop allowed them to do powerful things with only an array. For others, it complicated the ability to perform simple actions like capturing when a modal closed. Individuals were being forced to learn about an arbitrary glue in order to leverage their applications. It was difficult to debug and was ultimately proving to be more of a hamper than helper.
So we went back to the drawing board. The first option we tried was moving to Vuex as a hard dependency. This worked beautifully and really helped reason about the code for debugging in a way that was not possible before. Not soon after we finished the implementation, we stepped back and picked it apart. The event communication between components was limited to a very small subset of components and started to seem like an unneeded addition. Then came complications of creating functionality to allow the new Vuex system to work without a build process.
Not happy with the overall feel of making Vuetify even more opinionated, we challenged ourselves again. Make every component operate with no event management and still function in drop-in html templates, webpack builds and SSR. As the pieces started coming together, the overall feel of being able to control the components began to feel very fluid. All state controlling was moved to v-model, a familiar Vue feature everyone is used to using. This allowed the developer to use the component as normal, or hook in to control the state, or even just watch that state in order to perform an action.
With two of the biggest issues solved, the final problem to tackle was items props. After much deliberation, it was decided to remove them entirely. Vuetify regularly reuses itself in components, often containing multiple layers, ex. (sidebar contains a list, list tiles can contain icons). This led to the need to chain props down for ease of use. A lot of components were artificially inflated in order to support the dual use of slot or items.
Now with the only supported use being the slot of a component, the ability to manipulate any component at any level in the chain is like you would expect it to be. This will cause an increase to the markup that is present in your views, but will ultimately lead to an easier to control application as it grows in complexity.
Moving Forward
I would like to thank everyone who has pressed on through the constant changes and refactors. Your support is extremely important and the main reason we have spent countless hours this release something we are confident in. It is essential to me for this framework to be done right, and sometimes that means scratching out what you've done.
With that being said, this should be the last extreme API changes before release. Only component refactors and name changes should hinder your current projects. I have outlined the prospected changes in upcoming patches in the wiki.
Upgrading from v0.8.7
- Items prop is now gone from all components. Instead you will have to explicitly define the markup in the component slot. The docs have been update and now use 1 to 1 examples. What you see on the page is what is listed in the source.
- Dropdown has been renamed to Menu
- Dropdown directive removed, activator is now a slot located inside the menu
- Dropdown items should instead use
v-listwith list items - Navbar renamed to Toolbar
- Slider renamed to Carousel
- Collapsible renamed to
v-expansion-panel - Collapsible header and body removed. Instead use
v-expansion-panel-content - Modal directive has been removed, activator is now a slot located inside the modal
- Sidebar directive has been removed. If you need to control the state of the sidebar, use v-model.
- Tabs has been simplified,
v-tabs,v-tab-itemandv-tab-content. - Toolbar groups have been removed. If you need this functionality, use a Menu. Example here
- Event bus has been removed, ensure all references are removed as well
- Vuetify init function in main App mounted hook is no longer needed
New Features
- New components,
v-btn-dropdown,v-btn-toggle,v-app-bar. - Menu (dropdown) has been completed refactored
- Button has been completed refactored
- Added
sidebar-under-toolbarprop to Sidebar. This will position a fixed sidebar under the toolbar - Added disabled prop to Pagination
- ID requirements have been removed from Sidebar, Menu and Modal
- Lowered package size to 59kb (drop of 20kb)