Back to Vuetify

September 2025 Update

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

4.0.636.2 KB
Original Source
<script setup> import { useTheme } from 'vuetify' const theme = useTheme() const linklogo = computed(() => { return `https://cdn.vuetifyjs.com/docs/images/one/logos/vlink-logo-${theme.current.value.dark ? 'dark' : 'light'}.svg` }) const zerologo = computed(() => { return `https://cdn.vuetifyjs.com/docs/images/one/logos/vzero-logo-${theme.current.value.dark ? 'dark' : 'light'}.svg` }) </script>

September 2025 Update

Welcome to our September update! This month marks significant progress as we assemble the building blocks for Vuetify's next phase. From revolutionary design-to-development workflows with our new Figma UI Kit to foundational v0 composables, September has been about connecting the pieces that will define the future of Vue development.

{ height=112 }

🖊️ John Leider • 📅 October 12th, 2025

<PromotedEntry />

Assembling the Future

I've been heads-down on Vuetify0 composables this month, and it's starting to click. The Figma UI Kit update is great, the framework improvements are solid, but what keeps me up at night is making sure these v0 composables feel right. We're not just building features—we're establishing patterns that thousands of developers will use. Get the abstraction wrong and you've created more problems than you solved. Get it right and complex stuff like permissions and feature flags just works.

Having Jacek take over as Framework Czar has been huge. I can focus on these bigger architectural questions while he keeps the core framework moving forward. The team shipped over 60 bug fixes and features in the month of September, and we're maintaining that pace. Between the Figma Kit, the v0 work, and everything else happening in the ecosystem, things are coming together.

::: success

Cool example of the month: Gradient VProgressLinear by J-Sek

:::


Table of Contents


Releases

September focused on stabilization and quality improvements across the Vuetify 3 series, including iterating to the next minor version with v3.10.0 (Argo). We've addressed numerous bugs, enhanced accessibility, and refined component behaviors to ensure a robust experience for developers and users alike.

Key Improvements

  • A direct VCalendar port from Vuetify 2, bringing back familiar calendar functionalities with modern enhancements.
  • Added support for prefers-reduced-motion to respect user accessibility settings
  • Added multiple new slots for VTreeview and VDataTable for greater customization

View the complete list of changes in the Full Changelog

Details:

Updated Official Figma UI Kit

We're thrilled to announce the release of our updated Vuetify 3 UI Kit for Figma! This comprehensive design system brings Vuetify's Material Design implementation directly to your design workflow, completely free.

What's Included

  • Complete Component Library: Every Vuetify 3 component meticulously recreated in Figma
  • Material Design 3 Foundation: Built on the latest Material Design specifications
  • Design Tokens: Consistent spacing, typography, and color systems
  • Responsive Variants: Components optimized for all screen sizes
  • Dark Mode Support: Full theme switching capabilities
  • Auto-Layout: Modern Figma features for flexible, maintainable designs

Why This Matters

This free UI kit bridges the gap between design and development, ensuring pixel-perfect implementations and faster handoffs. Designers can now work with the exact same components developers use, eliminating interpretation errors and accelerating the design-to-code process.

Pro Version Available

Design faster with 1:1 Vuetify components, production-ready variants and style controls (colors, densities, radius and states) that adapt to any brand. Choose the version that best fits your workflow.

Why PRO

  • ✅ 150+ components with 1:1 names and structure with Vuetify
  • ✅ All variants (elevated, flat, tonal, outlined, text, plain…) and complete states
  • ✅ Advanced foundations: 7 color roles, densities, radius, borders (color/width/opacity)
  • ✅ +4 modes by variables to scale brands and themes
  • ✅ Updates synchronized with the library and direct support

Ideal for:

  • Teams & Startups — Faster delivery, total consistency and less rework
  • Freelancers — Winning proposals and clean handoff with devs
  • Design Systems — Variables, tokens and real theme scalability
  • Dev Teams — 1:1 parity with Vuetify components to implement without friction.

Comparison Table

FeaturePROFREE
FoundationsIncludes complete Material Design ColorsDoes not include MD color palette
ThemesLight / Dark (+ extra modes by variables)Light / Dark
Color RolesDefault, Primary, Secondary, Custom, Error, Warning, Info, SuccessDefault, Primary, Secondary, Custom, Error, Warning, Info, Success
StatesEnabled, Disabled, Active/Focus, HoverEnabled, Disabled
SizesDefault, Small, X/Small, Large, X/LargeDefault, Small, Large
DensityDefault, Comfortable, CompactOnly Default
Border ColorCurrent + Primary, Secondary, Error, Warning, Info, SuccessOnly Current
Border Widthdefault, 0, xs (thin), sm, md, lg, xldefault, 0
Border Opacitydefault, 0, 25, 50, 75, 100Not available
Border Radiusdefault, square, xs, sm, md, lg, xl, pill, circledefault, square, pill, circle
Error StateFull supportBasic inputs
OthersIndividual color control in VFieldNo individual control
ComponentsAll componentsMissing components
VariantsAll variantsOnly elevated • flat • outlined
Variants in InputsAll variantsOnly filled • outlined
Updates & SupportSynchronized with library + supportNot guaranteed • no support
Modes by variables4+ modes4 or less

Details:

September Webinar Recap: Performance Crisis

Thank you to everyone who joined our September performance optimization webinar. We had an engaging Q&A session with the community discussing bundle size reduction strategies. Some highlights and key takeaways:

Never miss another event by joining our Discord Community and following us on X!.

Next Event: v0 Live Coding with John

Wednesday, October 29th: Join John for an exclusive live coding session where he'll build a complete application using Vuetify0 from scratch!

What to Expect

  • Real-time Development: Watch as John tackles real-world challenges
  • Composables in Action: See how usePermissions, useFeatures, and other v0 composables work together
  • Architecture Decisions: Learn the reasoning behind v0's design patterns
  • Live Q&A: Get your questions answered as we code
  • Early Access Insights: First detailed look at v0's developer experience

This will be a true live demo, so expect some surprises and spontaneous problem-solving. Whether you're a seasoned Vue developer or just curious about v0, this session will provide valuable insights into building modern applications with v0 composables.

Details:

Vuetify0: Composables Taking Shape

<AppFigure :src="zerologo" alt="Vuetify0 logo" width="200" height="auto" class="mx-auto" title="Vuetify0 Logo" />

September saw intensive development on v0's composable foundation. The team has been deep in the codebase, introducing critical composables and ensuring code quality across the board.

New Composables This Month

  • usePermissions: A composable for managing RBAC permissions:
ts
import { createApp } from 'vue'
import { createPermissionsPlugin } from '@vuetify/0'

const app = createApp()

app.use(
  createPermissionsPlugin({
    permissions: {
      super: [
        ['create', 'Post'],
        ['read', 'Post'],
        ['update', 'Post'],
        ['delete', 'Post'],
        ['use', 'Dev'],
      ],
      editor: [
        ['create', 'Post'],
        ['read', 'Post'],
        ['update', 'Post']
      ],
    },
  })
)

app.mount('#app')
html
<script lang="ts" setup>
  import { usePermissions } from '@vuetify/0'
  import { useAuth } from 'your-auth-provider'

  const { user } = useAuth()
  const { can } = usePermissions()
</script>

<template>
  <div v-if="can(user.role, 'create', 'Post')">
    <button>Create Post</button>
  </div>

  <div v-if="can(user.role, 'delete', 'Post')">
    <button>Delete Post</button>
  </div>
</template>
  • useFeatures: A composable for managing available features and feature flags w/ variants support.
ts
import { createApp } from 'vue'
import { createFeaturesPlugin } from '@vuetify/0'

const app = createApp()

app.use(
  createFeaturesPlugin({
    features: {
      comments: true,
      dev: false,
      search: {
        $value: true,
        $variation: 'v2',
        $description: 'The new and improved search experience',
      },
    },
  })
)

app.mount('#app')
html
<script lang="ts" setup>
  import { useFeatures } from '@vuetify/0'

  const features = useFeatures()
  const dev = features.get('dev')!
  const search = features.get('search')!
</script>

<template>
  <button @click="dev.toggle()">Toggle Dev</button>

  <input
    v-if="dev.value && features.variation('search') === 'v2'"
    placeholder="Search v2"
  />

  <input v-else placeholder="Search v1" />
</template>
  • useTimeline: A composable for sequence management with undo/redo support.
html
<script lang="ts" setup>
  import { useTimeline } from '@vuetify/0'

  const timeline = useTimeline({ size: 5 })

  timeline.register({ id: 1, value: 'foo' })
  timeline.register({ id: 2, value: 'bar' })
  timeline.register({ id: 3, value: 'baz' })

  console.log(timeline.size) // 3

  timeline.undo()
  timeline.undo()

  console.log(timeline.values()) // ['foo']

  timeline.redo()

  console.log(timeline.values()) // ['foo', 'bar']
</script>

::: info

See all available composables on the Vuetify0 documentation site.

:::

Details:

Framework & Security Updates

With all the buzz around security vulnerabilities in the NPM ecosystem, we've prioritized enhancing our build and publishing processes to ensure the highest level of security for our users.

Build System Modernization

This month brought significant improvements to our build infrastructure in Vuetify and across the ecosystem. Key updates include:

  • Vite 7 Support: Full migration completed with improved build performance
  • Vue-TSC 3: Updated TypeScript tooling for better type checking
  • Trusted Publishing: Enhanced security for all package releases with the pnpm's minimumReleaseAge setting
  • TSGO: Replaced our TSC usage with TSGO for faster builds and better DX

Details:

<AppFigure :src="linklogo" alt="Vuetify Link logo" width="200" height="auto" class="mx-auto" title="Vuetify Link Logo" />

Vuetify Link is a new service that simplifies the process of creating and managing custom short links for your projects. The initial idea came from the need to share Vuetify Bins/Playgrounds/Studios without necessarily wanting to save them to your dashboard. Since these services all compress their data into the URL, it can often times be very long and cumbersome to share. It also enables us to continue to bolster the value proposition for Vuetify One subscribers with advanced options while making the core functionality of creating shortlinks free for everyone.

Key Features

  • Custom Slugs: Create memorable and branded short links
  • Link Management: Edit, delete, and track your links from a simple dashboard
  • Analytics: Monitor link performance with detailed statistics
  • Free & Pro Plans: Basic link shortening is free, with advanced features available for Vuetify One subscribers

We anticipate launching this new service this month! Stay tuned for the official release announcement with all the details.

September 2025 Changelog

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

Key Improvements:

  • Introduced spaced prop for VBtn to enhance button spacing options.
  • Added truncate-length prop to VFileInput for better filename management.
  • Implemented stick-to-target prop in VOverlay for improved overlay positioning.
  • Enhanced accessibility with aria-controls and aria-expanded in VSelects.
  • Re-converted VCalendar based off of Vuetify 2 implementation.

Expand this section to see the detailed changelog for September 2025:

<details>

:rocket: Features

:wrench: Bug Fixes

:test_tube: Labs

:arrows_counterclockwise: Reverts

  • Revert "fix(VSelect): use selected text instead of value (#21902)" (95dea2c), closes #22006
  • Revert "fix(VBtn, VChip): correct link active state after navigation cancellation (#21651)" (ab28070), closes #22072 #22065
  • Revert "fix(VCombobox): filter matching items when opening first time" (44002f6), closes #22077
</details>

The Pieces Come Together{ .mt-4 }

This month has been busy. We shipped a complete Figma UI Kit update, built out critical composables for v0, hardened our build infrastructure, and continued the steady march of bug fixes and improvements across the framework. Each piece matters, but what matters more is how they fit together—designers working from the same components developers implement, composables that solve real auth and feature flag problems, tools that make sharing work easier.

October brings our v0 live coding webinar where I'll build something real and show you what these composables actually look like in practice. We'll keep stabilizing Labs components and working through the community roadmap. As always, thanks for the bug reports, PRs, and Discord help. See you next month.


The Vuetify Team