Learn about the newest features coming to the next version of the framework. See how the core team approached porting Vuetify from Vue 2 to the Vue 3 composition api. Preview updates to core features such as the new layout system, improved testing methodologies, expanded customization options, updates to css utility classes, and much much more.
Transcript
Intro
Hi, my name is John Leider. I'm the creator and author of Vuetify. And today I wanted to take a little bit of time to talk about Vuetify 3, the next version that will be releasing February of next year. And some of the different items and aspects the team has been working on as we've been moving through Alpha.
Vuetify 3 Updates
[00:42] Some of the biggest updates that we have are in the form of the baseline creation of all of the basic components for the framework. We have lots of new design concepts normalized in their terminology, so that they're more semantic and easier to work with. We have additional interfaces that allow you to interact with the components in more intuitive ways that allow you to have more consistent results. And we've also been working a lot on the actual usability of the various parts of the framework. From making it easier to manipulate and work with custom styling, as well as how that gets implemented into your project. And some of the new browser features that we get to take advantage of, as we move away from the Internet Explorer 11 platform.
Component Updates
Basic Components
[01:52] So some of the changes and improvements that we have coming from components. Stated at the beginning, the basic components for the framework are all complete. These are components that form the foundation for larger implementations. Things like alerts and banners, ratings, as well as around 42 other basic components. From buttons to chips and avatars, that we use to create and build some of the more complex composition components.
We've added a lot of new interfaces for how you can work with these different components, things that simplify the way that you are able to interact and make different design choices and changes within those components. We've also added some additional utility classes to help you, in addition to modifying components based upon their normal prop structures, but also being able to make additional changes through the help of utility classes for texts and color and different transforms and whatnot.
Forms Elements
&
Validation
[03:20] Now one of the things that we've recently got in the framework that the team has been working on is the form elements in our validation systems. We have a new validation system that is now expanded as an available inline provider, as we call them. That allows you to not only implement any type of component or element as a validatable item to an extent, but we've also added new functionality for how you can perform validation, including asynchronous calls. In addition to the already existing Version 2 functionality that's available today.
This validation system is built-in to the new form components, in addition to being available in line, as displayed here on the right. Where we can now take something that was previously hard coded into inputs, and now is something that is flexible and can be used in multiple places. We've also worked a lot on improving the style diversity of input components with a new concept that is in material design called Density. And I'll talk a little bit more about that later. And in addition to a lot of these new features and functionalities, we still have ported over all of the existing Version 2 styling in addition to the new available options for Density, that we've created.
Improved Animations
[05:20] One of the cool things that we've recently implemented was an animation positioning system for how our menus and our dialogues are what we typically call detachable components. How those operate. And one of the new things that we have that is applied to the way that menus and dialogues animate whenever their activator is clicked, is a transform that is based upon the activator's location.
So as you can see in the animation here, whenever we open up the dialogue, as opposed to it being an element that just animates from the center of the screen, we're actually now transforming these detachable elements from their original activator location. To really improve the visual feel of the actual functionality, but also to improve the performance and how smooth it is whenever you're working with these components. So that there is crisp animation, there's no jitteriness. And this is one of my more favorite parts of the new version with all of the way that menus as well work, and how they position on the screen. We have a lot more functionality that allows the user to make some really nice aesthetic designs and decisions within their application, and just giving the user more options overall.
Normalized Concepts
[07:07] We have some normalized concepts, that I like to call semantic customization options, that we've begin to normalize or pull together multiple different design aspects within Vuetify, and tried to put them under a particular category or similar options between multiple components. So that when you're working across the framework, you'll have different components that you're working with, but they'll still be based upon the same kind of interface that you're working with, with multiple different components.
New Style Terminology
And what I mean by that is, we have a new concept called Variants. And what this is, it's a way for us to take some of our mutually designed exclusive properties and functionality within Version 2 and put it behind a naming convention, so that we can reuse this throughout. And actually expand the functionality that is available, for multiple different components.
[08:21] An example being the file available that exist primarily in card-based components are contained, contained text, text, outline or plain. And these different design styles are represented in Version 2, but they're not represented behind any specific naming convention. So what we've done is to homogenize this functionality. We've made it so that it is reusable throughout any card, S component, alerts, sheets, banners, list items. That gives you some additional control over not only the visual aspect of the component, but I stated before homogenizing, making this similar throughout multiple different implementations so that we can have similar and same functionality for multiple components that didn't even have the ability to implement these styles in Version 2.
Density
&
Size
[09:31] One of the other things that we have implemented conceptually is the density from material design. And what density is a declaration of how high or vertically how much a component takes up space-wise. Whereas size is, it modifies components' padding, modifies font size, and in general takes up potentially a larger space on X axis. Whereas density, we're just reducing the height.
So what we've done here is, we've added the ability to combine multiple different aspects of sizing that's available in the framework Version 2 for right now. We have regular sizing for extra small, small, default, large, extra large. With the introduction of density for Version 3, we've taken some components that you may have worked with that had a dense property. That's now been split into two, which are now compact and comfortable. And these are essentially iterations of certain pixels for pixels, to be exact, that reduce in scales. So that a button or an input will maintain the same visual look.
[11:02] However, it will take up physically less vertical space. And then for components that support both size and density, these actually work together. So you can do things such as having an extra-large compact button, if you so choose. And what this does is, it gives a lot more options for the user to be able to build their application so that you don't have to have such blocky design or something that takes up a lot of space on the page. You have the ability now where you can globally change in the framework, all components support density to a more compact style. And these are some of the interesting ways that you can interact with these components, like button and inputs, list item.
Improved Interfaces
[11:59] We've worked a lot on the interfaces for working with components, to give users the ability to solve their problems in different ways. So right now, in Version 2, most of the components that have what I'd like to call textual interface properties, things, as you can see on the slide for properties defining, title, subtitle, text. This exists on some components, but it was never synced in a way that was similar across the framework.
So now you're going to have the ability to customize components in three ways in most situations. We'll have the default approach, which are elements. This is pretty much what Vuetify 2 is now. In some cases, very verbose to get to a specific styling, which is required by the structure. For example, if you want to have the card text styling in a card, you have to have a V-card text component. So what we've done is we've kept that as a baseline, but then we went ahead and said, "Okay, we're going to add some props." We're going to say, you can specify any one of these particular textual interface properties, title, text, subtitle, the ability to set avatars or icons. Commonly used and requested features that usually the user has to manually apply themselves, instead giving a baseline that is not super-flexible in some ways, but is flexible in others. So if you want to just apply some text to a card with a title, you can do that with a prop. Or you can do it with a slot, where it gives you the same markup that you would write normally by default with elements. But also you can make additional changes inside of it.
[14:06] So just giving you some flexibility for how you can approach your problems, and you can actually mix and match these together and come up with a unique design implementation of your own.
Usability Improvements
[14:23] So we have some usability improvements, quality of life changes things that improved not only either the developer experience, but how we interact, how we and other users interact with the framework as a whole, from that perspective.
Version 2, we still use SASS, but we used the import approach towards implementation. We've converted our SASS 4 Vuetify into what are called modules. This is to coincide with new updates to the Vuetify loader and our new vite-plugin, which is available now. And what the purpose of this was is to create a more easy-to-use interface for SASS, but to also resolve issues that we were having with prepend data and polluting the global variables within SASS. It's also given us the ability to do some pretty cool things, like with the new vite-plugin, you can expose the ability to modify any and all styles. Just as you would with Version 2, but anything that's not modified in such actually has a pre-compiled CSS file, specifically for either that component or functionality. That will be used instead of recompiling, which gives drastically faster compilation times. And not only is it considerably faster to work with a Vuetify implementation where you are customizing the variables, and you're customizing SASS that's compiled during dev time.
[16:25] Now, not only is that faster, because for components that aren't being used for variables, we already have that pre-compiled, but also we're hooking into vite. Which has been a lot of the team's focus as of late, for the development process.
We've been able to take advantage of some Evergreen features from browsers, such as Focus Within and CSS variables. Working with a button, for example, now provides different visual cues based upon how your interaction occurs with that element. So if you're clicking on a button, chances are you're aware of the location of that button, and we don't need it to provide an outline whenever we click on it. However, if you are tapping through your application, it's not as obvious whenever a button slightly dims and its opacity.
[17:35] So now we have some new functionality with the advanced browser support, to be able to have a distinct visual display based upon how an element is interacted with.
In regards to the CSS variables, these existed in Version 2, they're now first-class citizens of Version 3. They're used heavily throughout the framework, and are now the baseline for allowing our customization options within the framework to expand that out. And make it not only easier to modify, but giving you more options to change during those modifications.
[18:25] And so right now, the team is heavily working on the Alpha. We have been making really great progress. And as of right now, we are set to deliver Vuetify 3 in February of next year. We really are excited about a lot of the new features that are coming to the framework. And we're really excited for you to get to check it out and take a look. You can check out the Alpha right now. If you go to next.vuetifyjs.com, and you can also follow our releases on the GitHub releases board. Or even communicate and reach out to the dev team on Discord at community.vuetifyjs.com. My name is John Leider, and this has been an update on Vuetify 3. Thank you.
by