Vuetify 3: Titan

Rate this content

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.

20 min
21 Oct, 2021


Sign in or register to post your comment.

AI Generated Video Summary

Hi, I'm John Leader, the creator of Viewtify. Viewtify 3 is the upcoming version with new design concepts, improved usability, and compatibility with modern browsers. The framework has added new features like a validation system, style diversity, semantic customization options, and a density concept. Enhanced customization options, improved performance, and advanced browser support with CSS variables are also highlights of Viewtify 3.

1. Introduction to Viewtify 3

Short description:

Hi, I'm John Leader, the creator of Viewtify. I want to talk about Viewtify 3, the upcoming version with new design concepts, improved usability, and compatibility with modern browsers. We have completed the basic components and added new interfaces and utility classes for easier interaction and customization.

Hi, my name is John Leader. I'm the creator and author of Viewtify. And today I wanted to take a little bit of time to talk about Viewtify 3, the next version that will be releasing February of next year. And, uh, some of the different items and aspects the team has been working on as we've been moving through alpha.

Some of the biggest updates that we have are in the form of the baseline creation of all of the basic compute components for the framework are in. We have lots of new design concepts normalized in their, their terminology so that they're more semantic and easier to work with. We have additional interfaces that allow you to, uh, interact with the components and more intuitive ways that allow you to, uh, 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, uh, as we move away from the internet explorer 11 platform.

Okay? 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 that from buttons to chips, 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 text and color and different transforms and whatnot.

2. New Features and Concepts

Short description:

One of the things we've recently added to the framework is a new validation system that allows for inline validation and asynchronous calls. We've also improved the style diversity of input components and implemented an animation positioning system for menus and dialogues. We've introduced semantic customization options and a new concept called variants, which allows for reusable design styles across multiple components. Additionally, we've implemented the density concept from material design, which allows for more control over component size and vertical space.

No. One of the things that we've recently got in the framework that the team has been working on is the form elements and our validation systems. We have a new validation system that is now expanded and it's been added 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 two functionality that's available today.

This validation system is built into the new form components in addition to being available inline, as displayed here on the right, where we can now take something that was previously kind of 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. I'll talk a little bit more about that later.

In addition to a lot of these new features and functionalities, we still have ported over all of the existing version two styling. That's in addition to the new available options for density that we've created. One of the cool things that we've recently implemented were 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 our system is 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 kind of 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.

We have some normalized concepts that I'd like to call semantic customization options that we have began to kind of normalize or pull together multiple different design aspects within beautify and try 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. And kind of 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 design exclusive properties and functionality within version two and kind of put it behind a naming convention so that we can reuse this throughout and actually expand the functionality that is used or available, excuse me, for multiple different components.

An example being the five available that exist primarily in card-based components are contained text, text outline and plane. And in these different design styles are represented in version two, but they're not represented behind any specific naming convention. So what we've kind of 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 give you some additional control over the, not only the, uh, the visual aspect of the component, but, uh, you know, kind of, I stated before, homogenizing making this similar throughout multiple different implementations so that we can, uh, have a similar and same functionality for multiple components that didn't even have the ability to implement these styles in version two.

One of the other things that we have implemented conceptually is, uh, the density from material design and what density is, is a, uh, 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, and general takes up potentially a larger space on X axis, whereas density, we're just kind of reducing the height. So what we've done here is we've, we've added the ability to combine multiple different aspects of sizing that's available in the framework version two for right now, we have, you know, regular sizing for extra small, small, default, large, extra large. With the introduction of density for version three, we've taken the, some components that you may have worked with that had a, a dense property. It's now been kind of split into two, which those are now compact and comfortable. And these are essentially iterations of a certain pixels, four pixels to be exact, that reduces in scales so that a button or an input will maintain the same visual look. 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 is, it takes up a lot of space on the page.

3. Enhanced Customization and Improved Performance

Short description:

The framework now allows global changes to all components to support a more compact style. Users can interact with components in different ways, including buttons and input list items. Customization options have been improved, providing flexibility through textual interface properties and the ability to mix and match different design implementations. The new VITE plugin and conversion to modules in Vuetify have resolved issues with pre-pinned data and global variables in SAS, resulting in faster compilation times. Integration with Vite has allowed for the utilization of evergreen features like Focus Within and CSS variables, enhancing the user experience with visual cues in interactive elements.

The ability now where you can globally change in the framework, all components of 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.

We've worked a lot on the interfaces. We're 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 the components in three ways in most situations.

We'll have the default approach, which are elements. This is pretty much what Beautify 2 is now. In some cases, it's 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 vCardText 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 know, you can specify any one of these particular textual interface properties titled text, subtitle, the ability to set avatars or icons common, commonly used in requested features that usually the user kind of 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 title, you can do that with a prop, or you could do it with a slot or it gives you the same markup that you would right. Normally by default with elements, but also you can make additional changes inside of it. So just kind of 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 and design implementation of your own.

So we have some usability improvements, quality of life changes, things that improve 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 two, we used a, we still use SAS, but we used the import approach towards implementation. We've converted our SAS for 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 SAS, but to also resolve issues that we were having with pre-pinned data and polluting the global variables within SAS. 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. This is how you would with version 2, but anything that's not modified and 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 view-to-file implementation where you are customizing the variables and you're customizing SASS that's compiled during dev time. 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 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.

4. Advanced Browser Support and CSS Variables

Short description:

With the advanced browser support in Viewtify 3, elements can now have a distinct visual display based on their interaction with CSS variables. These variables, which were present in version two, are now first-class citizens in version three. They are extensively used throughout the framework and serve as the foundation for expanding customization options, making it easier to modify and providing more choices during modifications.

However, if you are tabbing through your application, it may, it's not as obvious whenever a button slightly dims in its opacity. 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 two, they're now first class citizens of version three. They're used heavily throughout the framework and are now a kind of 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 and during those modifications.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!

Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.
For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.
Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.
Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem
IDE of choice (Inellij or VSC) installed
Nodejs + NPM

Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.

JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.
Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.
With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.
Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
VSCode setup and an empty Vite + Vue project.

Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
- Intro 3D 
- Intro WebGL
- ThreeJS
- Why TresJS
- Installation or Stackblitz setup 
- Core Basics
- Setting up the Canvas
- Scene
- Camera
- Adding an object
- Geometries
- Arguments
- Props
- Slots
- The Loop
- UseRenderLoop composable
- Before and After rendering callbacks
- Basic Animations
- Materials
- Basic Material
- Normal Material
- Toon Material
- Lambert Material
- Standard and Physical Material
- Metalness, roughness 
- Lights
- AmbientLight
- DirectionalLight
- PointLights
- Shadows
- Textures
- Loading textures with useTextures
- Tips and tricks
- Misc
- Orbit Controls
- Loading models with Cientos
- Debugging your scene
- Performance
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.
Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level
NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.