Back to Vuetify

July 2025 Update

packages/docs/src/pages/en/blog/july-2025-update.md

4.1.639.0 KB
Original Source
<script setup> import { useTheme } from 'vuetify' import AboutTeamMember from '@/components/about/TeamMember.vue' const theme = useTheme() const teams = useTeamMembersStore() const jacek = computed(() => teams.members.find(member => member.github === 'J-Sek')) const zerologo = computed(() => { return `https://cdn.vuetifyjs.com/docs/images/logos/v0-logo-${theme.current.value.dark ? 'dark' : 'light'}.png` }) </script>

July 2025 Update

This month showcases the power of collaborative development as our team and community work together to enhance Vuetify's ecosystem.

{ height=112 }


🖊️ John Leider • 📅 August 6th, 2025

<PromotedEntry />

New Beginnings

July exemplified what makes Vuetify special: a dedicated team working alongside an engaged community to build something greater than the sum of its parts. From bug fixes to revolutionary new components, from documentation improvements to ecosystem tools—every contribution matters. This month brings exciting advancements across the Vuetify ecosystem, with major strides in collaborative features, component refinements, and enhanced developer experience.

::: success

Cool example of the month: VChatList by Ishan

:::


Table of Contents


Releases

July featured the release of v3.9.0 (Zealot) on July 8th, promoting VTreeview and VTimePicker from labs to the core framework; along with subsequent patches up to v3.9.3 on July 29th, focusing on component stability, bug fixes, and developer experience improvements. View the complete list of changes in the Full Changelog.

Details:

The future of Vuetify

Over the past decade, I've had the unique opportunity to work closely with hundreds of developers and meet thousands more on a project that I love. Through community support and consistent dedication, that opportunity has continued to thrive and support our efforts—I cannot thank everyone enough for your trust over the years. The last time I wrote about the future of Vuetify was back in 2017, when this whole thing was just getting started. We're 8 years, 15 thousand commits, and 45 million downloads later, and I can confidently say that Vuetify has become a staple in the Vue ecosystem; that's pretty cool!

We went through some organizational changes earlier this year after facing funding challenges in 2024. We're now in August, and I personally consider the effort an ongoing success. The new members assimilated quickly and immediately started making strides across all parts of the ecosystem. This new structure has been a game changer, and has finally allowed me to contemplate the future of Vuetify in a way that I haven't been able to in a very long time.

Last month, I revealed some information regarding a new project I've been working on called Vuetify0. It is a meta framework for building Vue UI libraries with the express goal of abstracting the Vuetify core into a set of publicly available composables.

{ height=588 }

  • Vuetify0: Meta framework for building framework agnostic UI libraries
  • Vuetify Paper: Styleless components that are prop configured—no CSS required
  • Vuetify: Marries Vuetify0, Vuetify Paper, and Vuetify's defaults system

I plan to give my first public talk about it at VueConf Toronto later this year, and I'm excited to see what everyone thinks.

In order to have the focus necessary to execute on the above propositions and continue to push Vuetify forward, I'm introducing a new position to the organization: the Framework Czar. Think of it as the Lead Maintainer of the core framework. I will still be involved in the day-to-day operations, but will be less focused on tasks involving the actual management of the vuetifyjs/vuetify repository and more focused on the future of Vuetify as a whole. This includes the Vuetify0 project, Vuetify Paper, and the broader Vuetify ecosystem.

Today I'm excited to announce that Jacek Czarniecki will be taking the torch as the first Framework Czar of Vuetify. He is a long-time member of the Vuetify community, contributing to the framework and helping others with their projects. He officially joined the team last November and has since demonstrated a keen sense of detail and a deep understanding of how to build beautiful UI.

<AboutTeamMember v-if="jacek" v-bind="{ member: jacek }" />

Jacek is a seasoned developer with experience honed in corporate environments and battle-tested through independent projects. He stands out as a true "maker," delivering tangible results while others get bogged down in scheduling meetings about future meetings. We're all very excited to have him in this role, and I look forward to seeing how he shapes the next chapter of the framework.

Thank you once again to everyone who has supported Vuetify over the years. I hope you are as excited as I am about the future of this project and the direction we are heading in. Let us know what you think about the changes in the comments below, or on our Discord.


"Decoding Vuetify Migrations" Webinar Recap{ #webinar-recap}

Last week we hosted our monthly webinar, this time focusing on Vuetify 2 to 3 migrations. We had a fantastic turnout and talked with the community about the most common migration issues, how to approach them, and the tools available to help. We answered questions about the migration process, shared tips and tricks, and provided insights into the most common pitfalls developers face when upgrading their projects.

Below are a few key points we noticed most users struggled with during the migration process:

ESLint Plugin

The Vuetify ESLint plugin is a powerful tool that helps developers identify and fix Vuetify-specific issues in their code. It provides rules for common migration issues, such as deprecated components, incorrect prop usage, and more. The plugin is designed to be used during your upgrade process and will drastically reduce the time it takes to migrate your project.

bash
pnpm install eslint-plugin-vuetify --save-dev
js
// eslint.config.js
import vue from 'eslint-plugin-vue'
import vuetify from 'eslint-plugin-vuetify'

export default [
  ...vue.configs['flat/base'],
  ...vuetify.configs['flat/base'],
]

For more information on how to set up and use this plugin, check out the vuetifyjs/eslint-plugin-vuetify repository.

Theme Changes

The most common migration issue we see? Theme configuration. V3's theme system is more powerful but requires a different approach:

js
// V2 Approach (Won't work in V3)
theme: {
  themes: {
    light: {
      primary: '#1976D2',
    },
  },
}

// V3 Approach (Correct)
theme: {
  themes: {
    light: {
      colors: {  // Note the 'colors' wrapper!
        primary: '#1976D2',
      },
    },
  },
}

We are looking forward to our next webinar this month. Make sure to sign up, and if you have suggestions for topics, let us know in the comments or on our Discord.

Ecosystem Spotlight: Vuetify Bin

Every month, we highlight one tool from the Vuetify ecosystem. This month, we're featuring Vuetify Bin—our answer to sharing and debugging Vuetify code snippets.

What is Vuetify Bin?

Vuetify Bin is our official pastebin/gist alternative for saving and managing snippets of code. Since code is compressed into the URL, you can easily bookmark and share your snippets with others—free forever.

{ height=300 }

::: info If you're part of the Vuetify One subscription, you can save your snippets with a unique URL. More Info :::

Framework Updates

We've made significant progress on several key components and features this month. The team merged 95 pull requests in July alone, primarily focusing on component enhancements, bug fixes, and developer experience improvements. Key highlights include:

VCommandPalette has moved from concept to reality. This keyboard-first navigation component brings the power of command palettes (think VS Code or Raycast) to web applications. Early prototypes show seamless integration with Vuetify's existing keyboard navigation, making power-user features accessible to all developers.

<video width="100%" height="auto" loop controls> <source src="https://cdn.vuetifyjs.com/docs/images/blog/july-2025-update/vcommand-palette.mp4" type="video/mp4"></source> </video>

VEditor reached a significant milestone with the completion of heading formatting (h1-h6) and substantial progress on alignment controls. This rich text editor is becoming the go-to solution for content management within Vuetify applications.

<video width="100%" height="auto" loop controls> <source src="https://cdn.vuetifyjs.com/docs/images/blog/july-2025-update/veditor.m4v" type="video/mp4"></source> </video>

VVideo officially entered Labs with the release of v3.9.3. This component provides a flexible and powerful way to embed videos in Vuetify applications, supporting various formats and configurations.

<video width="100%" height="auto" loop controls> <source src="https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/vvideo.mp4" type="video/mp4"></source> </video>

Details:

July 2025 Changelog

The following section provides an overview of the changes made in July 2025, including new features, bug fixes, and enhancements across the Vuetify framework.

Key Improvements:

  • VProgressLinear #21744: Added chunk separation capability for creating segmented progress indicators—perfect for multi-step forms and wizards (Merged July 15)
  • VDatePicker #21760: Restored the accidentally removed first-day-of-year prop after community feedback (Draft as of July 24)
  • VMaskInput #21719: Fixed validation value handling, ensuring masks work correctly with form validation
  • VField #21706: Enhanced label accessibility for improved screen reader support
  • VDateInput #21684: Added proper TypeScript definitions to the displayFormat function
  • Input components #21703: Fixed aria-describedby attributes when using hide-details

Expand this section to see the detailed changelog for July 2025.

<details >

🏅 Component promotions

The following components have been promoted to the core framework from labs:

:rocket: Features

:wrench: Bug Fixes

:microscope: Code Refactoring

  • layout: consoleWarn instead of error for missing layout items (34b53f1)
  • theme: add internal methods for testing tailwind integration (abfdb77)

:test_tube: Labs

</details>

What's Next

Next month promises to be an exciting one as we continue building momentum from July's achievements. Here's what's on the horizon:

Community Roadmap Voting

Over the next few weeks, we'll be launching our community voting system where you can directly influence Vuetify's development priorities. This democratic approach ensures that the features you need most get the attention they deserve.

Vuetify0 Alpha Release

We're targeting late August for the first alpha release of Vuetify0. This milestone will include:

  • Core composable abstractions
  • Initial documentation and examples

Labs Component Stabilization

August is dedicated to refining our Labs components based on community feedback:

  • VCommandPalette: Finalizing keyboard navigation patterns
  • VEditor: Completing table and list formatting features
  • VCalendar: Addressing performance optimizations and accessibility improvements
  • VMaskInput: Expanding validation integration

Thank you for your continued support, feedback, and contributions that make all of this possible! See you next month.


Stay connected with Vuetify updates through our GitHub repository, Discord community, and upcoming webinar series announcements.