Vuetify 4.0 Released for Vue.js
Vuetify, a popular Material Design component framework for Vue.js, has launched version 4.0. The major release includes performance improvements, updated design tokens, and new accessibility features. The framework provides a customizable foundation for building SaaS applications, dashboards, and other user interfaces within the Vue ecosystem.
Vuetify's major 4.0 release fully embraces modern CSS, most notably by integrating CSS Cascade Layers. This architectural shift allows developers to override framework styles with their own custom CSS without resorting to high-specificity selectors or the `!important` flag, a long-standing pain point. The five top-level layers ensure custom styles are predictably applied. The update completes the framework's transition to Material Design 3 (MD3). This includes aligning typography and a streamlined elevation system, which has been reduced from 25 levels to a more manageable six for a cleaner visual hierarchy. The default theme now respects the user's operating system preference ("system" theme), which can prevent the common flicker of a light theme loading before switching to dark on server-side rendered applications. The project's founder, John Leider, began the open-source framework in 2016, which has since grown into a business, Vuetify, LLC, that he reported was earning $300K/year in 2021. The project is MIT licensed and primarily funded through community donations, sponsorships, and enterprise support. Under the hood, several core components like VBtn have reverted from CSS Grid back to Flexbox to resolve issues with gap control and improve rendering consistency. Additionally, the responsive grid system has been overhauled, and default breakpoint sizes have been adjusted to better align with modern devices.
