Back to Vuetify

March 2026 Update

packages/docs/src/pages/en/blog/march-2026-update.md

4.0.840.6 KB
Original Source
<script setup> import { computed } from 'vue' import { useTheme } from 'vuetify' const theme = useTheme() const mcplogo = computed(() => { return `https://cdn.vuetifyjs.com/docs/images/one/logos/vmcp-logo-${theme.current.value.dark ? 'dark' : 'light'}.png` }) const zerologo = computed(() => { return `https://cdn.vuetifyjs.com/docs/images/one/logos/vzero-logo-${theme.current.value.dark ? 'dark' : 'light'}.png` }) const vuetifylogo = computed(() => { return `https://cdn.vuetifyjs.com/docs/images/one/logos/vuetify-logo-${theme.current.value.dark ? 'dark' : 'light'}.png` }) const clilogo = computed(() => { return `https://cdn.vuetifyjs.com/docs/images/one/logos/vcli-logo-${theme.current.value.dark ? 'dark' : 'light'}.png` }) const eslintpluginlogo = computed(() => { return `https://cdn.vuetifyjs.com/docs/images/one/logos/veslplugin-logo-${theme.current.value.dark ? 'dark' : 'light'}.png` }) const eslintconfiglogo = computed(() => { return `https://cdn.vuetifyjs.com/docs/images/one/logos/veslconfig-logo-${theme.current.value.dark ? 'dark' : 'light'}.png` }) const onelogo = computed(() => { return `https://cdn.vuetifyjs.com/docs/images/one/logos/vone-logo-${theme.current.value.dark ? 'dark' : 'light'}.png` }) const binlogo = computed(() => { return `https://cdn.vuetifyjs.com/docs/images/one/logos/vbin-logo-${theme.current.value.dark ? 'dark' : 'light'}.png` }) const playlogo = computed(() => { return `https://cdn.vuetifyjs.com/docs/images/one/logos/vplay-logo-${theme.current.value.dark ? 'dark' : 'light'}.png` }) </script>

March 2026 Update

Vuetify0 came alive this month. 427 commits, 11 releases, and 7 new headless components pushed v0 to its v0.2.0 milestone. Meanwhile, the core framework shipped 7 releases across v3 and v4, the Nuxt Module reached v1.0.0-beta, the CLI hit 10 releases, and the ESLint plugin gained automated v4 migration rules.

{ height=112 }

🖊️ John Leider • 📅 April 16th, 2026

<PromotedEntry />

Acceleration

720 commits across 17 active repositories and 69 merged PRs made March our most productive month since the v4 launch. With v4 stable, the team's focus shifted to two fronts: polishing the v4 experience through rapid patch releases, and building out Vuetify0's headless composable layer at unprecedented speed. J-Sek delivered 12 merged PRs across the framework and ESLint plugin, including new iconsets, CSS font variables, and v4 migration rules across 4 plugin releases. Andrei Elkin completely overhauled the Nuxt module and pushed the CLI through 10 releases. And the Vuetify → Vuetify0 refactor that began last month is now actively migrating core composables—observer, display, theme, and locale.


Table of Contents


Releases

March was a stabilization sprint for v4 and an acceleration sprint for everything else. Four v4 patches (v4.0.1–v4.0.4) and three v3 backports (v3.12.2–v3.12.4) landed alongside 11 Vuetify0 releases, 10 CLI releases, 7 Nuxt Module releases, and 4 ESLint plugin releases.

Key Improvements

  • CSS font variables — CSS custom properties for font customization (v4.0.1)
  • Icon sets — More UnoCSS-based iconsets + Material Symbols iconset (v4.0.1, v4.0.2)
  • VDataTable — Expose prevPage, nextPage, setPage in bottom slot (v4.0.2)
  • VCommandPalettecloseOnSelect prop and before-select event (v4.0.2 Labs)
  • VProgress — New progress component (v4.0.3 Labs)
  • VVideosrc-object prop for WebRTC and hide-progress-bar prop (v4.0.3 Labs)
  • VFileUpload — Integrated with VInput and split internal logic (v3.12.2/v4.0.1 Labs)
  • VMaskInput — Accept escaped characters in mask patterns (v4.0.3 Labs)

View the complete list of changes in the Full Changelog.

Details:


Ecosystem Spotlight: Nuxt Module v1.0.0 Beta { #nuxt-module-beta }

The Vuetify Nuxt Module received a complete overhaul in March—86 commits and 7 releases (v1.0.0-alpha.2 through v1.0.0-beta.2) driven primarily by Andrei Elkin. This is the module's biggest change since its initial release.

What's New { #nuxt-whats-new }

Monorepo Conversion — The module was restructured as a monorepo, with cleaner package boundaries and improved maintainability.

Vuetify 4 Support — Full compatibility with v4's CSS layers and SASS integration. The disableVuetifyStyles option was removed in favor of styles: 'none'.

Experimental SASS Caching — In-memory caching for SASS compilation reduces cold-start times in development.

Revamped Documentation — Documentation was completely overhauled alongside the structural changes.

Beta Stability — With alpha.2 through beta.2 all landing in March, the module is on track for a stable v1.0.0 release.

userquin contributed configuration and documentation improvements.

Details:


Framework Updates

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

March's 31 merged PRs focused on new features for the v4 branch, targeted bug fixes, and the beginning of the Vuetify → v0 migration.

New Features

CSS font variables — CSS custom properties for font-family, font-size, and font-weight, enabling runtime font customization without SASS (v4.0.1, #22666)

Icon sets — Additional UnoCSS-based iconsets shipped in v4.0.1 (#22668), followed by Material Symbols via UnoCSS in v4.0.2 (#22680)

VDataTableprevPage, nextPage, and setPage exposed in the bottom slot for custom pagination controls (v4.0.2, #22681)

VCommandPalettecloseOnSelect prop and before-select event for fine-grained selection control, plus a name fix for the inner component (v4.0.2 Labs, #22634)

VFileUpload — Integrated with VInput and split internal logic for better composability and form integration (v3.12.2/v4.0.1 Labs, #22637)

VProgress — New progress component added to Labs (v4.0.3, #22682)

VVideosrc-object prop for MediaStream/WebRTC playback and hide-progress-bar prop for cleaner embeds (v4.0.3 Labs, #22670, #22636)

Details:

Bug Fixes

ComponentFixVersionPR
VSelectFix screenreader navigation to select optionsv3.12.2 / v4.0.1#22602
VOtpInputHandle deletion via onBeforeinput for mobile compatibilityv4.0.1#22657
VSnackbarOpaque background for transparent variantsv4.0.1#22646
hotkeyDelimiter alias fixes without ambiguityv3.12.3 / v4.0.2#22635
VNumberInputPrevent input changes when readonlyv3.12.3 / v4.0.2#22692
VDataTableRespect disableSort prop for sortable headersv4.0.2#22684
roundedAdd missing md sizev4.0.2#22679
routerReplace deprecated next() for Vue Router v5 compatibilityv3.12.3 / v4.0.2#22643
VTimePickerKeep hour value when changing AM/PMv3.12.3 / v4.0.2
hotkeyResilient sequence parsingv4.0.3#22704
VExpansionPanelsApply rounded only to first and last panel when closedv4.0.3
VTooltipCorrect selector for non-interactive tooltipsv4.0.3
VMaskInputAccept escaped characters in mask patternsv4.0.3 Labs#22727
VFileUploadFix adding/replacing files with dropzone clickv3.12.4 / v4.0.4 Labs#22741
rulesFix type resolution for custom validation rulesv4.0.4 Labs#22701
VSelectPrevent brief error state when clicking a menu itemv4.0.4
VFieldLabel transition on pages with CSS zoomv3.12.4 / v4.0.4

Details:

In Development

Several PRs merged in March are pending their first release, alongside features still in active development:

Merged, Pending Release { #merged-pending-release }

  • rounded: arbitrary values — Accept any valid CSS border-radius value beyond predefined presets (#22721)
  • VProgressLinear split variant — MD3-aligned split variant for buffer/indeterminate states (#22662)
  • VOverlaylocation and origin props reworked to be actually useful (#22720)
  • VCommandPalette viewport strategy — Full-viewport location strategy for command palettes (#22698)
  • SSR — Avoid errors when rendering with latest Vue (#22764)
  • CSS zoom — Coordinate mismatch fix for VColorPicker, ripple, and VCalendar (#22774)

VSparkline Markers and Tooltips

Interactive markers and hover tooltips for data visualization.

VSlider Pill Variant

A new pill variant for VSlider aligned with Material Design 3's rounded slider track design.

VMorphingIcon

Animated icon transitions using SVG path morphing—carrying over from February, now nearing completion.

V0 Migration Core Composables

The Vuetify → Vuetify0 refactor is now migrating core systems. Open PRs cover:

  • Theme — Migrate the entire theme system to v0 (#22765)
  • Locale/RTL — Delegate locale and RTL management to v0 (#22753)
  • Display — Migrate breakpoints to v0's createBreakpoints (#22710)
  • Date — Delegate to v0's createDate runtime (#22768)

Observer composables were already migrated in March.

Details:


Tooling and Migration { #tooling-migration }

Vuetify CLI

<AppFigure :src="clilogo" alt="Vuetify CLI logo" width="200" height="auto" class="mx-auto mt-4" title="Vuetify CLI Logo" />

The CLI continued its rapid iteration with 38 commits and 10 releases (v1.1.0 through v1.2.0-beta.1), driven primarily by Andrei Elkin with template contributions from J-Sek.

Vite 8 Support — Templates updated for Vite 8 compatibility.

Vue Router 5 Migration — Templates migrated from unplugin-vue-router to Vue Router 5.

MCP CLI Integration — A standalone MCP CLI command for setting up the Vuetify MCP server directly from the CLI.

Preset System — Enhanced user presets with improved UX, plus new Nuxt and UnoCSS presets alongside the existing TailwindCSS preset.

TypeScript 6.0 — Template fixes to avoid typechecking errors with TS 6.0.

Dynamic Project Docscreate now generates project-specific documentation.

Details:

ESLint Plugin for Vuetify

<AppFigure :src="eslintpluginlogo" alt="Vuetify ESLint Plugin logo" width="200" height="auto" class="mx-auto mt-4" title="Vuetify ESLint Plugin Logo" />

J-Sek shipped 4 releases (v2.6.0 through v2.7.2) with 20 commits, turning the plugin into a full migration companion for teams moving onto Vuetify 4—or moving Vuetify utilities off onto TailwindCSS and UnoCSS.

Vuetify v4 Rules — A new recommended-v4 preset that detects deprecated v3 patterns and surfaces their v4 replacements. The rules cover deprecated components, props, events, classes, theme color syntax, and import paths, plus a new icon-button-variant rule that ensures icon-only buttons declare a variant to match v4's stricter defaults (#125).

TailwindCSS & UnoCSS Migration Rules — Four new rules for projects adopting utility-first styling. no-elevation-prop, no-rounded-prop, and no-border-prop catch cases where Vuetify presentational props should be dropped in favor of UnoCSS classes (useful when $utilities are disabled), while no-legacy-utilities helps migrate Vuetify's legacy class names to pure TailwindCSS or UnoCSS Wind4 preset equivalents (#126). Follow-up fixes in v2.7.1 added prefixed-class support to no-legacy-utilities, and v2.7.2 taught no-deprecated-typography to handle responsive variants.

Component Standardization — A family of optional custom-deprecated-* rules (components, props, events, slots) lets teams ban specific API shapes from their templates—with auto-fixable string replacements for components (e.g., rewriting <VRow> to <div class="grid grid-cols-12">), replacement props, or custom messages (#127). Useful for enforcing house style in large codebases and for reining in AI-generated anti-patterns. Previously this required patching the plugin's internals.

ESLint 10 Support — Compatibility with the latest ESLint major version, contributed by jssuttles (#124). v2.7.0 also generates proper .d.ts files for TypeScript-based flat configs, and removes VPicker from the deprecated-components list now that it ships in v4 (#119).

Details:

ESLint Config

<AppFigure :src="eslintconfiglogo" alt="Vuetify ESLint Config logo" width="200" height="auto" class="mx-auto mt-4" title="Vuetify ESLint Config Logo" />

The shared ESLint config—used internally across the ecosystem and by teams that want Vuetify's house style out of the box—shipped v4.3.5 and v4.4.0 in March.

tsconfigRootDir option — The TypeScript config now accepts a tsconfigRootDir option so monorepos and custom project layouts can pin type resolution to the right directory without wrestling with ESLint's project-service defaults (v4.3.5).

Logo fix — Matching the ESLint Plugin update, v4.3.5 also corrected the config's logo filename so the new Vuetify-branded logo renders correctly on npm and GitHub.

Details:


Vuetify MCP v0.6.0 and Playground Tools { #vuetify-mcp }

<AppFigure :src="mcplogo" alt="Vuetify MCP logo" width="200" height="auto" class="mx-auto mt-4" title="Vuetify MCP Logo" />

The MCP server released v0.6.0 on March 27th, keeping AI code generation current with the latest v0 APIs. March also saw a significant new feature land in the repository—playground management—pending the next release.

v0.6.0 { #mcp-v060 }

v0 Sync — Composables, components, and exports synced with v0.1.13. Any AI assistant using the MCP server now generates accurate code against the latest v0 API surface, including the new Switch, Slider, Treeview, Splitter, Input, and Button components. (Combobox shipped in v0.2.0 after this sync and will land in the next MCP release.)

Bug Fixes — Corrected composable names and missing exports in v0 documentation; fixed GitHub URL branch references from main to master.

Playground CRUD (Pending Release) { #mcp-playground-crud }

PR#19 merged March 30th adds tools to create, read, update, and list Vuetify Play playgrounds directly from your AI assistant—build and iterate on component demos without leaving your editor. This will ship in the next MCP release.

Setup

Install with the Vuetify CLI:

::: tabs

bash
pnpm dlx @vuetify/cli add mcp
bash
npx @vuetify/cli add mcp
bash
yarn dlx @vuetify/cli add mcp
bash
bunx @vuetify/cli add mcp

:::

Or configure manually:

json
{
  "mcpServers": {
    "vuetify": {
      "url": "https://mcp.vuetifyjs.com/mcp"
    }
  }
}

Details:


Product Updates

Vuetify One

<AppFigure :src="onelogo" alt="Vuetify One logo" width="200" height="auto" class="mx-auto mt-4" title="Vuetify One Logo" />

Henry Aviles shipped a new dashboard for Vuetify One, releasing v0.1.0, v3.1.0, and v3.1.1 in March.

Details:

Vuetify Bin

<AppFigure :src="binlogo" alt="Vuetify Bin logo" width="200" height="auto" class="mx-auto mt-4" title="Vuetify Bin Logo" />

Henry Aviles added markdown preview support—bins can now render markdown content alongside code. The update also includes cursor tracking.

Details:

Vuetify Play

<AppFigure :src="playlogo" alt="Vuetify Play logo" width="200" height="auto" class="mx-auto mt-4" title="Vuetify Play Logo" />

J-Sek fixed a cursor positioning bug that caused edits to jump while typing (#51), and Henry Aviles updated the default visibility behavior.


Vuetify0 Progress Update { #vuetify0-progress }

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

March was Vuetify0's breakout month—427 commits, 17 merged PRs, and 11 releases (v0.1.4 through v0.2.0). The project shipped 7 new headless components, 4 new composables, and significant improvements to the playground and documentation. The v0.2.0 release marks v0's transition from foundational primitives to a comprehensive component library.

New Components

Seven headless components shipped in March, each with a composable layer and compound component pattern:

  • Switch — Toggle switch with Root, Track, and Thumb compound components (#142)
  • Slider — Range slider with Track, Range, and Thumb parts, backed by a dedicated composable (#143)
  • Treeview — Hierarchical tree built on createNested with expand, select, and activate (#144)
  • Splitter — Resizable pane layouts with Root, Panel, and Handle components (#145)
  • Input — Headless form input with validation integration (#162)
  • Button — Headless button with disabled, loading, readonly, and passive states, plus Button.Group for toggle selection (#166)
  • Combobox — Autocomplete-style input with createCombobox composable for filtering and selection (#172)

New Composables

  • useNotifications — Full notification lifecycle management with registry/queue architecture, read/archive/snooze states, and Novu/Knock adapters (#146)
  • useRules — Validation composable with alias-based rules and adapters for Zod and Yup (#140)
  • useRaf — Scope-safe requestAnimationFrame composable with automatic cleanup (#165)
  • createModel — Shared selection state foundation bridging createRegistry, createSelection, and createSlider (#148)

Other Improvements

  • createRegistrymove() method for reordering registered items (#149)
  • useHotkey — Symbol aliases and AST-based hotkey string parser for more reliable parsing (#150, #155)
  • MaybeRef — Accept getters alongside refs for more flexible API signatures (#141)
  • toReactive — Performance refactor for proxy creation (#170)
  • Playground — Version selector and settings modal for easier experimentation (#163)

Coming Next

  • createDataGrid — Data grid composable for advanced table layouts
  • Paper Design System — The Emerald design system foundation for v0's visual layer
  • v0play — Expanding the editor and tutorial system with more examples and guided lessons

::: info

The pace of v0 development has accelerated dramatically. With 7 new components in a single month, v0 is on track to cover the full Vuetify component surface. Core Vuetify composables (theme, locale, display, date) are now being migrated to v0 in parallel—the bridge between today's Vuetify 4 and tomorrow's Vuetify 5.

:::

Details:


March 2026 Changelog

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

Key Improvements:

  • v4.0.1: CSS font variables, additional UnoCSS iconsets, VSnackbar and VSelect a11y fixes
  • v4.0.2: Material Symbols iconset, VDataTable pagination slot, VCommandPalette Labs improvements
  • v4.0.3: VProgress and VVideo Labs components, VMaskInput escaped characters, hotkey and VExpansionPanels fixes
  • v4.0.4: VFileUpload dropzone fix, rules type resolution, VSelect brief error state fix
  • v3.x: bugfix-only releases mirroring the v4 fixes above

Expand this section to see the detailed changelog for March 2026:

<details> <summary>March 2026 Full Changelog</summary>

v3.12.2 (2026-03-04)

:wrench: Bug Fixes

  • VDataTable: improvements for sorting in mobile mode (c3b3278)
  • VDataTable: keep fixed cells opaque when loading (35e1e2c)
  • VSelect: fix screenreader navigation to select options (#22602) (f906336)
  • VTimeline: keep dot border when using numeric dot size (9511bc3)

:test_tube: Labs

  • VFileUpload: hide-browse should hide divider as well
  • VFileUpload: expose controlRef for internal <input />
  • VFileUpload: append instead of replacing files when multiple
  • VFileUpload: integrate VInput & split internal logic (#22637) (251adb0)

v4.0.1 (2026-03-04)

:rocket: Features

:wrench: Bug Fixes

  • theme: put theme stylesheet in body when loaded with unhead (2475a28)
  • VBadge: correct props.dotSize fallback (a71f396)
  • VColorPicker: align sliders with controls (0d1ce90)
  • VDataTable: improvements for sorting in mobile mode (54affe1)
  • VDataTable: keep fixed cells opaque when loading (ddca6ca)
  • VGrid: correct mapping for grid gap x/y (65b4278)
  • VOtpInput: handle deletion via onBeforeinput for mobile compatibility (#22657) (2f8a4f9)
  • VPagination: suppress browser spacing (a6b7b93)
  • VSelect: fix screenreader navigation to select options (#22602) (6c962b7)
  • VSlideGroup: don't read dom attributes in computed() (a51b313)
  • VSlider: reduce affix margins (18af2d2)
  • VSnackbar: opaque background for transparent variants (#22646) (e83fa88)
  • VTimeline: keep dot border when using numeric dot size (6764c95)

:test_tube: Labs

  • VFileUpload: hide-browse should hide divider as well
  • VFileUpload: expose controlRef for internal <input />
  • VFileUpload: append instead of replacing files when multiple
  • VFileUpload: integrate VInput & split internal logic (#22637) (027ab86)

v3.12.3 (2026-03-12)

:wrench: Bug Fixes

  • hotkey: add delimiter aliases without delimiter ambiguity (#22635) (0e6a9c6)
  • router: replace next() deprecated in Vue Router v5 (#22643) (4e93846)
  • VNavigationDrawer: fully clip list item text in rail mode (ab42b13)
  • VNumberInput: prevent input changes when readonly (#22692) (995989c)
  • VSelect/VAutocomplete/VCombobox: let focus leave to other fields (3d33e2f)
  • VTimePicker: keep hour value when changing AM/PM (2c9cb0a)

:test_tube: Labs

  • VAvatarGroup: ❗ change the limit behavior to cover overflow item (5aefdac)

v4.0.2 (2026-03-12)

:rocket: Features

  • icons: add Material Symbols iconset via UnoCSS (#22680) (6c463c1)
  • VDataTable: expose prevPage, nextPage, setPage in bottom slot (#22681) (4d1aa79)

:wrench: Bug Fixes

  • hotkey: add delimiter aliases without delimiter ambiguity (#22635) (a639698)
  • rounded: add missing "md" size (#22679) (47cffdd)
  • router: replace next() deprecated in Vue Router v5 (#22643) (87c4129)
  • VDataTable: respect disableSort prop for sortable header (#22684) (767b0e8)
  • VFileInput: correct VField ref type (41a6063)
  • VGrid: avoid warning about no-gutters being deprecated (5d8ec63)
  • VNavigationDrawer: fully clip list item text in rail mode (6b448cd)
  • VNumberInput: prevent input changes when readonly (#22692) (2b1ed0d)
  • VSelect/VAutocomplete/VCombobox: let focus leave to other fields (51196cf)
  • VTextarea: correct VField ref type (0d689aa)
  • VTimePicker: keep hour value when changing AM/PM (b030df8)

:test_tube: Labs

  • VAvatarGroup: change the limit behavior to cover overflow item (e580ebc)
  • VCommandPalette: add closeOnSelect prop and before-select event (#22634) (d534f79)
  • VCommandPalette: correct name of the inner component (bfed30c)

v4.0.3 (2026-03-19)

:wrench: Bug Fixes

  • hotkey: resilient sequence parsing (#22704) (cae1cea)
  • md2: restore correct global rounding (6d1ef04)
  • VDataTable: reactive items from expanded with return-object (5d7af2c)
  • VExpansionPanels: apply rounded only to the first and last panel when closed (dbc7421)
  • VGrid: restore no-gutters instead of mapping to "compact" (947d7d5)
  • VSkeletonLoader: less jitter when scrolling on slow device (468ba314)
  • VTooltip: correct selector for non-interactive tooltips (15b3cbd)

:test_tube: Labs


v3.12.4 (2026-03-25)

:wrench: Bug Fixes

  • VField: label transition on page with zoom (6246a96)
  • VTimePicker: avoid loading all CSS utilities (884e5dc)

:test_tube: Labs

  • VFileUpload: adding/replacing files with dropzone click (#22741) (86f3568)

v4.0.4 (2026-03-25)

:wrench: Bug Fixes

  • VCol: correct types for offset-* props (1cdd9c4)
  • VField: label transition on page with zoom (1fcad6b)
  • VSelect: prevent brief error state when clicking a menu item (7fec2d4)
  • VTimePicker: avoid loading all CSS utilities (015da52)

:test_tube: Labs

  • rules: type resolution for custom rules (#22701) (053b605)
  • VFileUpload: adding/replacing files with dropzone click (#22741) (eb95c9e)
</details>

What's Next { #whats-next .mt-4 }

April will push forward on both fronts. On the framework side, VSparkline markers and tooltips, VSlider pill variant, and VMorphingIcon are nearing completion. The v0 migration of theme, locale, display, and date composables will continue landing, progressively shifting Vuetify's internals onto v0's headless layer.

On the v0 side, createDataGrid is in active development, and the Paper design system (Emerald) will begin providing v0's first opinionated visual layer. The Nuxt Module is on track for a stable v1.0.0 release, and the ESLint plugin will continue expanding its v4 migration rule coverage.

Vuetify is and always will be free and open source. If your team relies on the framework, consider supporting continued development through Vuetify One or GitHub Sponsors. Every contribution helps us ship features like v0, the Nuxt Module, and migration tooling faster.

Thank you for being part of the Vuetify community. See you in April!


Stay connected with Vuetify updates through our GitHub repository, Discord community, and follow @vuetifyjs for the latest announcements. The best is yet to come!