{"owner":"vuetifyjs","repo":"vuetify","hasSkills":true,"totalSkillsCount":259,"totalTokensCount":464672,"categories":["anthropic-skill","root-instruction","claude-rule","plugin-manifest"],"hasMcp":false,"mcpConfig":null,"found":[".claude/rules/code-readability.md",".claude/rules/components.md",".claude/rules/composables.md",".claude/rules/sass.md",".claude/rules/utilities.md",".claude/skills/playground/SKILL.md",".claude/skills/tests/SKILL.md","AGENTS.md","CLAUDE.md","packages/README.md","packages/docs/package.json","packages/docs/src/data/301.json","packages/docs/src/data/metadata.json","packages/docs/src/data/nav.json","packages/docs/src/data/new-in.json","packages/docs/src/data/page-to-api.json","packages/docs/src/data/team.json","packages/docs/src/pages/en/about/code-of-conduct.md","packages/docs/src/pages/en/about/incidents/2026-06-nyven-infostealer.md","packages/docs/src/pages/en/about/licensing.md","packages/docs/src/pages/en/about/meet-the-team.md","packages/docs/src/pages/en/about/security-disclosure.md","packages/docs/src/pages/en/api/[name].md","packages/docs/src/pages/en/api/use-hotkey.md","packages/docs/src/pages/en/blog/announcing-vuetify-3.8.md","packages/docs/src/pages/en/blog/announcing-vuetify-4.3.md","packages/docs/src/pages/en/blog/announcing-vuetify0-alpha.md","packages/docs/src/pages/en/blog/announcing-vuetify0-beta.md","packages/docs/src/pages/en/blog/announcing-vuetify0-rc.md","packages/docs/src/pages/en/blog/announcing-vuetify0-v1.md","packages/docs/src/pages/en/blog/april-2025-update.md","packages/docs/src/pages/en/blog/april-2026-update.md","packages/docs/src/pages/en/blog/august-2025-update.md","packages/docs/src/pages/en/blog/august-2026-update.md","packages/docs/src/pages/en/blog/building-a-basic-nuxt-application-with-vuetify.md","packages/docs/src/pages/en/blog/building-with-nuxt-and-unocss.md","packages/docs/src/pages/en/blog/building-with-vite-and-tailwindcss.md","packages/docs/src/pages/en/blog/december-2025-update.md","packages/docs/src/pages/en/blog/february-2026-update.md","packages/docs/src/pages/en/blog/index.md","packages/docs/src/pages/en/blog/january-2026-update.md","packages/docs/src/pages/en/blog/july-2025-update.md","packages/docs/src/pages/en/blog/july-2026-update.md","packages/docs/src/pages/en/blog/june-2025-update.md","packages/docs/src/pages/en/blog/june-2026-update.md","packages/docs/src/pages/en/blog/march-2026-update.md","packages/docs/src/pages/en/blog/may-2025-update.md","packages/docs/src/pages/en/blog/may-2026-update.md","packages/docs/src/pages/en/blog/november-2025-update.md","packages/docs/src/pages/en/blog/october-2025-update.md","packages/docs/src/pages/en/blog/september-2025-update.md","packages/docs/src/pages/en/blog/september-2026-update.md","packages/docs/src/pages/en/blog/state-of-the-union-2024-post-mortem.md","packages/docs/src/pages/en/blog/state-of-the-union-2024.md","packages/docs/src/pages/en/blog/vuetify-herodevs-partnership.md","packages/docs/src/pages/en/components/alerts.md","packages/docs/src/pages/en/components/all.md","packages/docs/src/pages/en/components/app-bars.md","packages/docs/src/pages/en/components/application.md","packages/docs/src/pages/en/components/aspect-ratios.md","packages/docs/src/pages/en/components/audio-players.md","packages/docs/src/pages/en/components/autocompletes.md","packages/docs/src/pages/en/components/avatar-groups.md","packages/docs/src/pages/en/components/avatars.md","packages/docs/src/pages/en/components/badges.md","packages/docs/src/pages/en/components/banners.md","packages/docs/src/pages/en/components/bottom-navigation.md","packages/docs/src/pages/en/components/bottom-sheets.md","packages/docs/src/pages/en/components/breadcrumbs.md","packages/docs/src/pages/en/components/button-groups.md","packages/docs/src/pages/en/components/buttons.md","packages/docs/src/pages/en/components/calendars.md","packages/docs/src/pages/en/components/cards.md","packages/docs/src/pages/en/components/carousels.md","packages/docs/src/pages/en/components/checkboxes.md","packages/docs/src/pages/en/components/chip-groups.md","packages/docs/src/pages/en/components/chips.md","packages/docs/src/pages/en/components/color-inputs.md","packages/docs/src/pages/en/components/color-pickers.md","packages/docs/src/pages/en/components/combobox.md","packages/docs/src/pages/en/components/command-palettes.md","packages/docs/src/pages/en/components/confirm-edit.md","packages/docs/src/pages/en/components/data-iterators.md","packages/docs/src/pages/en/components/data-tables/basics.md","packages/docs/src/pages/en/components/data-tables/data-and-display.md","packages/docs/src/pages/en/components/data-tables/introduction.md","packages/docs/src/pages/en/components/data-tables/server-side-tables.md","packages/docs/src/pages/en/components/data-tables/virtual-tables.md","packages/docs/src/pages/en/components/date-inputs.md","packages/docs/src/pages/en/components/date-pickers-month.md","packages/docs/src/pages/en/components/date-pickers.md","packages/docs/src/pages/en/components/date-range-pickers.md","packages/docs/src/pages/en/components/defaults-providers.md","packages/docs/src/pages/en/components/dialogs.md","packages/docs/src/pages/en/components/dividers.md","packages/docs/src/pages/en/components/empty-states.md","packages/docs/src/pages/en/components/expansion-panels.md","packages/docs/src/pages/en/components/explorer/[...name].md","packages/docs/src/pages/en/components/file-inputs.md","packages/docs/src/pages/en/components/file-upload.md","packages/docs/src/pages/en/components/floating-action-buttons.md","packages/docs/src/pages/en/components/footers.md","packages/docs/src/pages/en/components/forms.md","packages/docs/src/pages/en/components/grids.md","packages/docs/src/pages/en/components/heatmaps.md","packages/docs/src/pages/en/components/highlights.md","packages/docs/src/pages/en/components/hotkeys.md","packages/docs/src/pages/en/components/hover.md","packages/docs/src/pages/en/components/icon-buttons.md","packages/docs/src/pages/en/components/icons.md","packages/docs/src/pages/en/components/images.md","packages/docs/src/pages/en/components/infinite-carousels.md","packages/docs/src/pages/en/components/infinite-scroller.md","packages/docs/src/pages/en/components/inputs.md","packages/docs/src/pages/en/components/item-groups.md","packages/docs/src/pages/en/components/lazy.md","packages/docs/src/pages/en/components/lists.md","packages/docs/src/pages/en/components/loading-indicators.md","packages/docs/src/pages/en/components/locale-providers.md","packages/docs/src/pages/en/components/mask-inputs.md","packages/docs/src/pages/en/components/menus.md","packages/docs/src/pages/en/components/month-pickers.md","packages/docs/src/pages/en/components/navigation-drawers.md","packages/docs/src/pages/en/components/no-ssr.md","packages/docs/src/pages/en/components/number-inputs.md","packages/docs/src/pages/en/components/otp-input.md","packages/docs/src/pages/en/components/overlays.md","packages/docs/src/pages/en/components/paginations.md","packages/docs/src/pages/en/components/parallax.md","packages/docs/src/pages/en/components/pie-charts.md","packages/docs/src/pages/en/components/progress-circular.md","packages/docs/src/pages/en/components/progress-linear.md","packages/docs/src/pages/en/components/progress.md","packages/docs/src/pages/en/components/pull-to-refresh.md","packages/docs/src/pages/en/components/radio-buttons.md","packages/docs/src/pages/en/components/range-sliders.md","packages/docs/src/pages/en/components/ratings.md","packages/docs/src/pages/en/components/selects.md","packages/docs/src/pages/en/components/sheets.md","packages/docs/src/pages/en/components/skeleton-loaders.md","packages/docs/src/pages/en/components/slide-groups.md","packages/docs/src/pages/en/components/sliders.md","packages/docs/src/pages/en/components/snackbar-queue.md","packages/docs/src/pages/en/components/snackbars.md","packages/docs/src/pages/en/components/sparklines.md","packages/docs/src/pages/en/components/speed-dials.md","packages/docs/src/pages/en/components/split-buttons.md","packages/docs/src/pages/en/components/steppers.md","packages/docs/src/pages/en/components/switches.md","packages/docs/src/pages/en/components/system-bars.md","packages/docs/src/pages/en/components/tables.md","packages/docs/src/pages/en/components/tabs.md","packages/docs/src/pages/en/components/text-fields.md","packages/docs/src/pages/en/components/textareas.md","packages/docs/src/pages/en/components/theme-providers.md","packages/docs/src/pages/en/components/time-inputs.md","packages/docs/src/pages/en/components/time-pickers.md","packages/docs/src/pages/en/components/timelines.md","packages/docs/src/pages/en/components/toolbars.md","packages/docs/src/pages/en/components/tooltips.md","packages/docs/src/pages/en/components/treeview.md","packages/docs/src/pages/en/components/vertical-steppers.md","packages/docs/src/pages/en/components/videos.md","packages/docs/src/pages/en/components/virtual-scroller.md","packages/docs/src/pages/en/components/windows.md","packages/docs/src/pages/en/concepts/density-and-sizing.md","packages/docs/src/pages/en/concepts/items.md","packages/docs/src/pages/en/concepts/routing.md","packages/docs/src/pages/en/concepts/v-model.md","packages/docs/src/pages/en/concepts/variants.md","packages/docs/src/pages/en/directives/click-outside.md","packages/docs/src/pages/en/directives/intersect.md","packages/docs/src/pages/en/directives/mutate.md","packages/docs/src/pages/en/directives/resize.md","packages/docs/src/pages/en/directives/ripple.md","packages/docs/src/pages/en/directives/scroll.md","packages/docs/src/pages/en/directives/tooltip.md","packages/docs/src/pages/en/directives/touch-hold.md","packages/docs/src/pages/en/directives/touch.md","packages/docs/src/pages/en/features/accessibility.md","packages/docs/src/pages/en/features/aliasing.md","packages/docs/src/pages/en/features/application-layout.md","packages/docs/src/pages/en/features/blueprints.md","packages/docs/src/pages/en/features/css-utilities/overview.md","packages/docs/src/pages/en/features/css-utilities/tailwindcss.md","packages/docs/src/pages/en/features/css-utilities/unocss-tailwind-preset.md","packages/docs/src/pages/en/features/css-utilities/unocss-vuetify-preset.md","packages/docs/src/pages/en/features/dates.md","packages/docs/src/pages/en/features/display-and-platform.md","packages/docs/src/pages/en/features/global-configuration.md","packages/docs/src/pages/en/features/hotkey.md","packages/docs/src/pages/en/features/icon-fonts.md","packages/docs/src/pages/en/features/internationalization.md","packages/docs/src/pages/en/features/md3-button-sizes.md","packages/docs/src/pages/en/features/rules.md","packages/docs/src/pages/en/features/sass-variables.md","packages/docs/src/pages/en/features/scrolling.md","packages/docs/src/pages/en/features/theme.md","packages/docs/src/pages/en/features/treeshaking.md","packages/docs/src/pages/en/getting-started/browser-support.md","packages/docs/src/pages/en/getting-started/contributing.md","packages/docs/src/pages/en/getting-started/elevation-migration.md","packages/docs/src/pages/en/getting-started/frequently-asked-questions.md","packages/docs/src/pages/en/getting-started/grid-legacy-mode.md","packages/docs/src/pages/en/getting-started/installation.md","packages/docs/src/pages/en/getting-started/mcp.md","packages/docs/src/pages/en/getting-started/release-notes.md","packages/docs/src/pages/en/getting-started/typography-migration.md","packages/docs/src/pages/en/getting-started/unit-testing.md","packages/docs/src/pages/en/getting-started/unused-sass-variables.md","packages/docs/src/pages/en/getting-started/upgrade-guide.md","packages/docs/src/pages/en/getting-started/wireframes.md","packages/docs/src/pages/en/index.md","packages/docs/src/pages/en/introduction/enterprise-support.md","packages/docs/src/pages/en/introduction/long-term-support.md","packages/docs/src/pages/en/introduction/roadmap.md","packages/docs/src/pages/en/introduction/sponsors-and-backers.md","packages/docs/src/pages/en/introduction/why-vuetify.md","packages/docs/src/pages/en/labs/introduction.md","packages/docs/src/pages/en/legal/mcp-privacy.md","packages/docs/src/pages/en/one.md","packages/docs/src/pages/en/resources/brand-kit.md","packages/docs/src/pages/en/resources/jobs-for-vue.md","packages/docs/src/pages/en/resources/made-with-vuetify.md","packages/docs/src/pages/en/resources/search-engine.md","packages/docs/src/pages/en/resources/themes.md","packages/docs/src/pages/en/resources/ui-kits.md","packages/docs/src/pages/en/sponsor.md","packages/docs/src/pages/en/styles/border-radius.md","packages/docs/src/pages/en/styles/borders.md","packages/docs/src/pages/en/styles/colors.md","packages/docs/src/pages/en/styles/content.md","packages/docs/src/pages/en/styles/css-reset.md","packages/docs/src/pages/en/styles/cursor.md","packages/docs/src/pages/en/styles/display.md","packages/docs/src/pages/en/styles/elevation.md","packages/docs/src/pages/en/styles/entry-points.md","packages/docs/src/pages/en/styles/flex.md","packages/docs/src/pages/en/styles/float.md","packages/docs/src/pages/en/styles/layers.md","packages/docs/src/pages/en/styles/opacity.md","packages/docs/src/pages/en/styles/overflow.md","packages/docs/src/pages/en/styles/position.md","packages/docs/src/pages/en/styles/sizing.md","packages/docs/src/pages/en/styles/spacing.md","packages/docs/src/pages/en/styles/text-and-typography.md","packages/docs/src/pages/en/styles/transitions.md","packages/docs/src/pages/en/user/dashboard.md","packages/docs/src/pages/en/wireframes/baseline.md","packages/docs/src/pages/en/wireframes/constrained.md","packages/docs/src/pages/en/wireframes/discord.md","packages/docs/src/pages/en/wireframes/extended-toolbar.md","packages/docs/src/pages/en/wireframes/inbox.md","packages/docs/src/pages/en/wireframes/side-navigation.md","packages/docs/src/pages/en/wireframes/steam.md","packages/docs/src/pages/en/wireframes/system-bar.md","packages/docs/src/pages/en/wireframes/three-column.md","packages/docs/tsconfig.json","packages/vuetify/README.md"],"skills":{".claude/rules/code-readability.md":"---\npaths: ['packages/vuetify/src/**']\n---\n\n# Code Readability\n\nRun `pnpm lint:fix` first (in `packages/vuetify`), then review your own diff against this list. Anything ESLint enforces is not repeated here. Only touch lines the change needs — no drive-by renames, reordering or reformatting.\n\n## Comments\n\nDefault to none. Most AI-written comments narrate what the next line does and get deleted in review.\n\nWrite one only when the reason can't be read from the code: a browser quirk, an ordering constraint, a footgun that bites if someone \"simplifies\" it. One line, plain wording.\n\nNever:\n\n- restate the code (`// set open to false`)\n- narrate intent or history (`// fixed the bug where…`, `// new approach`)\n- link or reference issues (`// see #12345`, GitHub URLs) — that belongs in the commit message\n- add JSDoc to internal functions\n\nImport group headers (`// Components`, `// Composables`, `// Utilities`, `// Types`) are the file convention — keep them.\n\n## Naming\n\nNo abbreviations in variables, params or functions:\n\n```ts\n// ❌\nconst idx = items.indexOf(item)\nconst opts = { ...defaults, ...options }\nfunction handleKeydown (e: KeyboardEvent) {}\n\n// ✅\nconst index = items.indexOf(item)\nconst merged = { ...defaults, ...options }\nfunction onKeydown (e: KeyboardEvent) {}\n```\n\nShort lambda params are fine: `items.map(v => v.value)`, `(a, b) => a - b`. Established names stay too: `e` for events, `vm`, the `El` suffix for element refs (`activatorEl`, `contentEl`). Older code in `util` still has `val`/`cb`/`obj` — don't copy it.\n\nPrefer single words when context makes them unambiguous: `open` over `isMenuOpen` inside VMenu. `on` for handlers, never `handle`.\n\n## Functions\n\nFunction declarations over `const` arrows in `setup` and modules:\n\n```ts\n// ❌\nconst toggle = () => { … }\n\n// ✅\nfunction toggle () { … }\n```\n\n## Abstractions\n\n- No helper for a single call site — inline it\n- Grep `src/util` and `src/composables` before writing a new helper\n- No wrapper that only renames or forwards arguments\n- Derive instead of syncing: a `toRef`/`computed` over a `watch` that writes into another ref\n",".claude/rules/components.md":"---\npaths: ['packages/vuetify/src/components/**', 'packages/vuetify/src/labs/**']\n---\n\n# Components\n\n## Direction\n\nThe `.tsx` file holds markup, coordination and light logic. Heavy logic (data shaping, selection rules, calculations) goes into local composables next to the component, and later moves to `@vuetify/v0`. Logic in a plain function is testable without mounting. Follow this for new components and when a change grows an existing component's `setup`.\n\n## Anatomy\n\n```\ncomponents/VExample/\n├── VExample.tsx\n├── VExample.sass\n├── _variables.scss\n├── example.ts # local composable: useExample(props)\n├── index.ts\n└── __tests__/\n```\n\nSub-components (`VExampleItem`, `VExampleGroup`) live in the same folder and share its `index.ts`. Local composables are not exported from `index.ts`.\n\n## Skeleton\n\n```tsx\nexport const makeVExampleProps = propsFactory({\n label: String,\n modelValue: Boolean,\n items: {\n type: Array as PropType,\n default: () => ([]),\n },\n\n ...makeComponentProps(),\n ...makeTagProps(),\n ...makeThemeProps(),\n}, 'VExample')\n\nexport const VExample = genericComponent()({\n name: 'VExample',\n\n props: makeVExampleProps(),\n\n emits: {\n 'update:modelValue': (value: boolean) => true,\n },\n\n setup (props, { slots }) {\n const { themeClasses } = provideTheme(props)\n const model = useProxiedModel(props, 'modelValue')\n\n useRender(() => (\n \n { slots.default?.() ?? props.label }\n \n ))\n\n return {}\n },\n})\n```\n\n- `genericComponent` applies global and `VDefaultsProvider` defaults — don't call `useDefaults` in a component\n- `useProxiedModel` for every v-model, controlled or not\n- Prop type assertions go inline: `type: X as PropType<…>`\n- No utility classes (`d-flex`, `ma-2`, `text-center`) in component markup — users can disable or override utilities. Style through the component's own `.sass`\n\n## Passing props down\n\nComposables and children need the reactive source, not a snapshot. An unwrapped value is read once in `setup` and never updates.\n\n```ts\n// ❌ reads once\nuseTextColor(props.color)\nprovideDefaults({ VExampleItem: { color: props.color } })\n\n// ✅\nuseTextColor(() => props.color)\nuseDensity(props)\nprovideDefaults({ VExampleItem: { color: toRef(() => props.color) } })\n```\n\nForward props to a wrapped component with its `filterProps`:\n\n```tsx\nconst fieldProps = VExampleField.filterProps(props)\n// …\n\n```\n\n## Parent ↔ child\n\n- `provide`/`inject` with an exported `Symbol.for('vuetify:v-example-group')` key, never a string\n- Selection between parent and items: `useGroup` / `useGroupItem` before building anything new\n- Pushing props to nested components: `provideDefaults` or ``\n\n## Adding a prop\n\n- `packages/docs/src/data/new-in.json` — add `\"propName\": \"\"` under the component (`props`, `slots`, `events` or `exposed`)\n- `packages/api-generator/src/locale/en/VExample.json` — description. Props from a shared composable go in that composable's file (`border.json`, `elevation.json`). Don't restate the default, the API table already shows it\n- Docs example when the prop needs one: `packages/docs/src/examples/v-example/prop-.vue`, referenced from the page with `\" />`\n\n## Adding a component\n\nNew components start in labs.\n\n- `src/labs/VExample/` with the anatomy above\n- `src/labs/VExample/index.ts` — **components only**. Re-exporting composables, utils or types from a component barrel breaks api-generator\n- `src/labs/components.ts` — `export * from './VExample'`\n- New translation keys in **every** `src/locale/*.ts` — recent commits ship real translations, not English copies\n- `packages/api-generator/src/locale/en/VExample.json`\n- Docs:\n - page in `packages/docs/src/pages/en/components/`\n - examples in `packages/docs/src/examples/v-example/`: `usage.vue`, `prop-*`, `slot-*`, `event-*`, `misc-*`\n - `packages/docs/src/data/nav.json`\n - `packages/docs/src/data/page-to-api.json`\n - list it in `packages/docs/src/pages/en/labs/introduction.md`\n",".claude/rules/composables.md":"---\npaths: ['packages/vuetify/src/composables/**']\n---\n\n# Shared Composables\n\nShared composables are used by many components — a signature or reactivity slip spreads everywhere. Component-specific logic belongs in a local composable next to the component (see `components.md`).\n\n## Reuse first\n\nGrep `src/composables` and `src/util` before adding one. `@vuetify/v0` enters through `src/util/v0.ts`: import from `@/util`, and add new v0 exports to that file instead of importing `@vuetify/v0` at call sites.\n\n## Prop-driven shape\n\nMost composables. Props factory plus a `use` function taking `props` and the component name:\n\n```ts\n// Utilities\nimport { computed } from 'vue'\nimport { getCurrentInstanceName, propsFactory } from '@/util'\n\n// Types\nexport interface ExampleProps {\n example?: boolean | string\n}\n\n// Composables\nexport const makeExampleProps = propsFactory({\n example: [Boolean, String],\n}, 'example')\n\nexport function useExample (\n props: ExampleProps,\n name = getCurrentInstanceName(),\n) {\n const exampleClasses = computed(() => props.example ? `${name}--example` : [])\n\n return { exampleClasses }\n}\n```\n\n- Take `props` or `MaybeRefOrGetter`, read with `toValue` inside `computed`/`toRef`. Never destructure props in the signature\n- Return a plain object of refs, never `reactive`. Prefix names with the composable (`exampleClasses`, `exampleStyles`) — components destructure several side by side\n- Modifier classes follow `${name}--x`\n\n## Plugin shape\n\nGlobal services (display, theme, locale). `createExample(options)` is called from `framework.ts`, provided under an `InjectionKey`, and `useExample()` injects it:\n\n```ts\nexport const ExampleSymbol: InjectionKey = Symbol.for('vuetify:example')\n\nexport function useExample () {\n const example = inject(ExampleSymbol)\n\n if (!example) throw new Error('[Vuetify] Could not find example injection')\n\n return example\n}\n```\n\n## Instance, scope, SSR\n\n- `getCurrentInstance('useExample')` from `@/util` when the composable needs the vm — the name ends up in the error\n- `useToggleScope(source, fn)` for effects that should only exist while something is active\n- Remove listeners and observers in `onScopeDispose`\n- Guard browser APIs with `IN_BROWSER` / `SUPPORTS_*` from `@/util/globals`\n\n## Public API\n\n- `composables/index.ts` is public — exports there are documented by api-generator\n- Internal code imports `@/composables/example`, never the barrel\n- New exposed members of a public composable go in `packages/docs/src/data/new-in.json`\n- Changing the return shape or arguments of a public composable is breaking — `next` branch\n- Props coming from a shared composable are described once in `packages/api-generator/src/locale/en/example.json`, not in each component's file\n\n## Tests\n\nUnit project: `composables/__tests__/example.spec.ts`. See the `tests` skill.\n",".claude/rules/sass.md":"---\npaths: ['packages/vuetify/src/**/*.sass', 'packages/vuetify/src/**/*.scss']\n---\n\n# Styles\n\nNo stylelint — nothing below is enforced mechanically.\n\n## Files\n\n- `VExample.sass` — rules, inside `@include tools.layer('components')` so users override without fighting specificity\n- `_variables.scss` — `$example-*: … !default`\n\n## Values\n\n- Anything a user may want to tune gets a `$example-*` variable\n- Values that change at runtime or cascade into children are custom properties (`--v-example-*`)\n- Colors from `rgb(var(--v-theme-*))`, never literals\n- Shared tokens from `settings.$*` (rounded, typography, border, easing)\n\n## Tools before hand-rolling\n\n`tools.states`, `rounded`, `elevation`, `density`, `border`, `variant`, `typography`, `absolute`. Grep an existing component using the mixin before inventing a variant of it.\n\n## RTL\n\nLogical properties first (`margin-inline-start`, `inset-inline-end`, `padding-inline`). `tools.rtl` / `tools.ltr` only for what logical properties can't express — transforms, icon flips, gradients.\n\n## Forced colors\n\nBackgrounds, shadows and overlays disappear in forced-colors mode. Anything relying on them to be visible (surfaces, selected/active states, focus, progress fills, dividers drawn with background) needs a fallback:\n\n```sass\n@media (forced-colors: active)\n .v-example\n &:not(&--variant-text, &--variant-plain)\n border: thin solid\n\n &:focus-visible\n outline: 2px solid\n outline-offset: 2px\n```\n\nPrefer `currentColor` / plain `solid`; system colors (`Highlight`, `Canvas`) only when state must be distinguishable.\n\n## Motion\n\nTransitions and animations that move or resize need `@media (prefers-reduced-motion: reduce)` handling.\n\n`transition` followed by `transition-*` in the same rule is merged into one shorthand by newest Vite. The source looks fine in review while the shipped CSS differs. Use only longhands or only the shorthand:\n\n```sass\n// ❌\ntransition: .2s settings.$standard-easing\ntransition-property: width, height\n\n// ✅ longhands only\ntransition-property: width, height\ntransition-duration: .2s\ntransition-timing-function: settings.$standard-easing\n\n// ✅ full shorthand\ntransition: width .2s settings.$standard-easing, height .2s settings.$standard-easing\n```\n\nExisting files still use the two-line form — don't copy it.\n\n## Direction\n\nKeep CSS per visual variant minimal. Prefer toggling a custom property over another block of generated modifier classes — future design systems drop MD-only CSS.\n\n## Hand-off\n\nYou can't see the result. After a style change, tell the dev what to check in the Playground instead of claiming it looks right:\n\n- affected variants, densities, sizes\n- dark theme and RTL\n- forced colors: DevTools → Rendering → Emulate CSS media feature `forced-colors: active`\n- reduced motion, when transitions changed\n",".claude/rules/utilities.md":"---\npaths: ['packages/vuetify/src/util/**']\n---\n\n# Utilities\n\n`@/util` is imported by nearly every component — a changed signature or semantics ripples everywhere.\n\n## Before adding\n\nGrep `helpers.ts`, `dom.ts` and `v0.ts` first. Most requests already exist: `wrapInArray`, `pick` / `omit`, `mergeDeep`, `debounce`, `clamp`, `focusableChildren`, `getActiveElement` (Shadow DOM-safe — use it instead of `document.activeElement`).\n\n## Where things go\n\n- Framework plumbing (`propsFactory`, `defineComponent`, `useRender`, `getCurrentInstance`) — its own file\n- Generic helpers — `helpers.ts`\n- DOM helpers — `dom.ts`\n- Environment flags — `globals.ts` (`IN_BROWSER`, `SUPPORTS_*`)\n- A new file needs `export *` in `util/index.ts`\n\n## v0 first\n\n- Type guards (`isString`, `isNullOrUndefined`, …) come from `v0.ts` — no raw `typeof x === 'string'` or `x == null`\n- A new framework-agnostic helper is a v0 candidate — mention it to the dev instead of growing `helpers.ts`\n- When core adopts a v0 helper: add it to `v0.ts`, rename on export if it would shadow common local names (`range as createRange`), delete the core copy\n\n## Changing an existing helper\n\nGrep call sites first. Don't change behavior under an existing name — add a new function or update every caller in the same change.\n\n## Console\n\n- Debugging: raw `console.*` is fine, even preferred — lint flags leftovers before they can merge\n- Messages shipped to app developers: `consoleWarn`, `consoleError`, `deprecate`, `breaking`, `removed`\n\n## Tests\n\n`util/__tests__/`, unit project by default. Browser project only for layout or DOM measurement.\n",".claude/skills/playground/SKILL.md":"---\nname: playground\ndescription: Use when working with packages/vuetify/dev/Playground.vue\n---\n\n# Playground\n\n`packages/vuetify/dev/Playground.vue` (gitignored). `pnpm install` creates it from `Playground.template.vue` when missing; `pnpm dev` from the repo root serves it at localhost:8090.\n\nGoals, in order:\n\n1. Hands-on reproduction for the human authoring the change\n2. A demo the author copy-pastes into the PR description for reviewers — keep it brief, no lengthy descriptions, it usually helps to resemble a realistic use case\n\n## Ownership\n\nDo not overwrite Playground content unless explicitly asked. The human is a co-author and may have pasted an old use case to focus on. When asked to change it, keep what the request doesn't touch.\n\nThese guidelines exist so AI edits look like what a human would write and expect.\n\n## Setup\n\n- No build step — `@/` resolves to `src`, changes to components, composables, sass and utilities hot-reload\n- All components are auto-registered, labs included\n- Other files in `dev/` are tracked but fair game when the reproduction needs them: `dev/vuetify.js` (createVuetify options), `dev/vuetify/{defaults,locale,icons,date}.js`\n\n## Shape\n\n```vue\n\n\n\n```\n\n- Block order: template → script → style\n- Dark theme, `v-container`; `max-width=\"600\"` for smaller components\n- Avoid `v-row` / `v-col` as general layout — devs debug in split screen, so it wraps anyway. Stack with `d-flex flex-column ga-4`\n- Cover neighbouring combinations (variant, density, disabled/readonly, RTL), not just the reported case. Label each case with a short `` line, not prose\n- Deterministic local data, no fetches\n\n## Running\n\nOnly when asked, or when the scope of changes needs a visual check.\n\nThe vite process often gets stuck holding port 8090. Before starting:\n\n```bash\nlsof -ti :8090 | xargs -r kill\npnpm dev\n```\n\nRTL / locale checks — fresh Chrome profile with a forced locale (`ar`, `he`, `fa` are RTL):\n\n```bash\nLANGUAGE=ar-EG google-chrome --lang=ar-EG --user-data-dir=/tmp/chrome-ar-EG \\\n --no-first-run --no-default-browser-check http://localhost:8090/\n```\n\nSame thing as a VS Code task (`.vscode/` is gitignored, add it locally):\n\n```json\n{\n \"type\": \"shell\",\n \"label\": \"Open Playground in Chrome (locale)\",\n \"command\": \"LANGUAGE=${input:locale} google-chrome --lang=${input:locale} --user-data-dir=/tmp/chrome-${input:locale} --no-first-run --no-default-browser-check http://localhost:8090/\",\n \"problemMatcher\": []\n}\n```\n\n```json\n\"inputs\": [{\n \"id\": \"locale\",\n \"type\": \"pickString\",\n \"description\": \"Browser locale (ar/he/fa are RTL)\",\n \"options\": [\"ar-EG\", \"ar\", \"el-GR\", \"he\", \"fa\", \"en-US\", \"de\", \"ja\", \"ko-KR\", \"zh-MO\"],\n \"default\": \"ar-EG\"\n}]\n```\n",".claude/skills/tests/SKILL.md":"---\nname: tests\ndescription: Use when writing, fixing or debugging tests in packages/vuetify (unit or browser specs, flaky tests, screenshot stories).\n---\n\n# Tests\n\n## When\n\nWrite tests unless the change is trivial — the bar for trivial is higher than in most projects. A bug fix gets a test that fails without the fix: write it first, see it red, then fix.\n\n## Where\n\nColocated in `__tests__/` next to the source.\n\n| File | Project | For |\n| -------------------- | ------------------------------- | ---------------------------------------------------------- |\n| `*.spec.ts(x)` | `unit` (jsdom) | pure logic: composables, util, local composables |\n| `*.spec.browser.tsx` | `browser` (Playwright Chromium) | anything with layout, focus, keyboard, overlays, scrolling |\n\nPrefer extracting logic into a local composable and unit-testing it over mounting a component for a calculation.\n\n## Running\n\nIn `packages/vuetify`:\n\n```bash\npnpm test # both projects\npnpm test --project browser\npnpm test:open # headed browser with devtools, bails on first failure\n```\n\n## Writing\n\n- Vitest globals (`describe`, `it`, `expect`, `vi`) are auto-imported\n- Helpers from `@test`: `render`, `screen`, `userEvent`, `page`, `commands`, `wait*`, `click`, `waitForClickable`, `scroll`\n- Assert what users observe: roles, ARIA attributes, text, emitted events, focus. Classes only when they are public API (`v-btn--active`)\n- Test names describe behavior: `it('should close on Escape')`\n- No comments referencing issues or URLs — older specs have them, don't copy\n\n## Console\n\nAny unexpected `console.warn` / `console.error` fails the test. Assert expected ones:\n\n```ts\nexpect(\"is not a valid value\").toHaveBeenTipped(); // console.warn — consoleWarn/consoleError/deprecate go through Vue's warn\nexpect(\"…\").toHaveBeenWarned(); // console.error\n```\n\n## Stability\n\nFlaky tests get fixed in follow-up commits regularly — avoid the usual causes:\n\n- `expect.poll(() => …)` or `waitForClickable` instead of fixed `await wait(100)`\n- Focus or clipboard work runs parallel with other tests — take the lock before focusing:\n\n ```ts\n const lock = await commands.getLock();\n input.focus();\n await userEvent.paste();\n await commands.releaseLock(lock);\n ```\n\n- Opening submenus with arrow keys is racy — press the key again until focus lands\n- Reduced motion is on by default; `commands.setReduceMotionDisabled()` when a transition matters, re-enable in `afterEach`\n\n## Screenshots\n\nVisual stories use `showcase({ stories, props, component })` with `gridOn(rows, columns, render)`, captured by Vizzly (`pnpm tdd`, then `pnpm test:screen`). Add them only for visual changes; never commit updated baselines unless asked.\n","AGENTS.md":"# Vuetify\n\nVuetify 4 component framework. Ships Material Design as the default look, but is meant to fit non-material design systems too. `@vuetify/v0` (headless primitives) has been a direct dependency since 4.2.0 and gets adopted gradually. The next major builds fully on it to split design systems out and stop shipping CSS for every visual variant.\n\nThis file and `.claude/` help AI tooling tuned for fast output deliver results closer to what maintainers expect, and lower the barrier for contributions.\n\nMonorepo:\n\n- `packages/vuetify` — the `vuetify` npm package\n- `packages/api-generator` — builds API data (props, events, slots, descriptions) for docs\n- `packages/docs` — documentation site\n\nContributor guide: `packages/docs/src/pages/en/getting-started/contributing.md`\nSupported browsers: `packages/docs/src/pages/en/getting-started/browser-support.md`\n\n## Branches\n\n| Base | For | Docs |\n|----------|-------------------------------------------------------|--------------------|\n| `master` | safe bug fixes, docs | vuetifyjs.com |\n| `dev` | new props/features, fixes that risk visual regression | dev.vuetifyjs.com |\n| `next` | breaking changes | next.vuetifyjs.com |\n\n## Commands\n\n```bash\npnpm dev # root: playground at localhost:8090\npnpm dev docs # root: docs at localhost:8095\n\n# in packages/vuetify\npnpm test # single file or folder\npnpm lint:fix # tsgo typecheck + eslint --fix\n```\n\n## Workflow\n\n1. Reproduce in `packages/vuetify/dev/Playground.vue` — see `.claude/skills/playground/SKILL.md`\n2. Change code, observe the impact in the playground\n3. Write tests unless the change is trivial. The bar for trivial is higher than in most projects — see `.claude/skills/tests/SKILL.md`\n4. Lint, fix, refactor — see `.claude/rules/code-readability.md`\n5. Consider a11y and i18n/RTL. They are usually the implementation's concern; leaving them to framework users is the rare exception\n\n## Principles\n\n- `shallowRef` / `toRef` by default; `ref` / `computed` only when the cost is justified\n- When passing props down to composables or children, usually pass the reactive source (getter or `toRef`), not the unwrapped value — see `.claude/rules/components.md`\n- Less is more, until it isn't. A minimal patch that fixes the reported case often breaks or ignores neighbouring prop combinations. Extend the playground to cover those combinations before calling it done\n\n## Rules\n\nPath-scoped rules in `.claude/rules/`. Claude Code loads them automatically; other tools should read the ones matching the touched paths:\n\n| Rule | Paths |\n|-----------------------|-----------------------------------------------------|\n| `components.md` | `packages/vuetify/src/components/**`, `src/labs/**` |\n| `composables.md` | `packages/vuetify/src/composables/**` |\n| `sass.md` | `packages/vuetify/src/**/*.{sass,scss}` |\n| `utilities.md` | `packages/vuetify/src/util/**` |\n| `code-readability.md` | `packages/vuetify/src/**` |\n\n## Review rubric\n\nEach item is a real finding when a diff violates it. Details in the rule named at the end.\n\n- Comments that narrate code, or reference issues/URLs — `code-readability.md`\n- Abbreviated names outside short lambdas (`idx`, `opts`, `handleX`) — `code-readability.md`\n- Props passed down unwrapped instead of as getter / `toRef` — `components.md`\n- Utility classes in component markup — `components.md`\n- Non-component exports from a component `index.ts` (breaks api-generator) — `components.md`\n- New prop without `new-in.json` entry or api-generator description — `components.md`\n- Changed arguments or return shape of a public composable outside `next` — `composables.md`\n- Raw `typeof` / `== null` checks instead of `@/util` guards — `utilities.md`\n- Hardcoded tunable values instead of `!default` variables, styles outside `tools.layer`, physical `left`/`right` where logical properties work — `sass.md`\n- Surfaces or states invisible in forced-colors mode — `sass.md`\n- `transition` followed by `transition-*` in one rule — `sass.md`\n- Missing tests for a non-trivial change; fixed `wait(ms)` where polling works\n- Base branch not matching the change type (see Branches)\n\nNot findings: legacy patterns in lines the diff doesn't touch, and a11y/RTL gaps the PR explicitly scopes out.\n","CLAUDE.md":"@AGENTS.md\n","packages/README.md":"","packages/docs/package.json":"{\n \"name\": \"vuetifyjs.com\",\n \"type\": \"module\",\n \"description\": \"A Vue.js project\",\n \"private\": true,\n \"author\": \"John Leider \",\n \"version\": \"4.3.0\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/vuetifyjs/vuetify.git\",\n \"directory\": \"packages/docs\"\n },\n \"scripts\": {\n \"dev\": \"vite --force\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\",\n \"preview-https\": \"HTTPS=true vite preview\",\n \"lint\": \"concurrently 'vue-tsc --noEmit --pretty' 'pnpm lint:md' 'node ../../scripts/eslint.js src --concurrency 4' -n 'tsc,md,eslint' --kill-others-on-fail -gr\",\n \"lint:fix\": \"pnpm fix:md && node ../../scripts/eslint.js src --concurrency 4 --fix\",\n \"lint:md\": \"markdownlint --config .markdownlintrc --rules build/markdownlint-rules/meta-length.cjs src/pages/en\",\n \"fix:md\": \"markdownlint --config .markdownlintrc --rules build/markdownlint-rules/meta-length.cjs src/pages/en --fix\"\n },\n \"dependencies\": {\n \"@cosmicjs/sdk\": \"catalog:\",\n \"@sentry/vue\": \"catalog:\",\n \"@vue/compiler-dom\": \"catalog:\",\n \"@vuelidate/core\": \"catalog:\",\n \"@vuelidate/validators\": \"catalog:\",\n \"@vuetify/one\": \"catalog:\",\n \"algoliasearch\": \"catalog:\",\n \"fflate\": \"catalog:\",\n \"isomorphic-fetch\": \"catalog:\",\n \"markdown-it-multimd-table\": \"catalog:\",\n \"pinia\": \"catalog:\",\n \"prism-theme-vars\": \"catalog:\",\n \"prismjs\": \"catalog:\",\n \"roboto-fontface\": \"catalog:\",\n \"swetrix\": \"catalog:\",\n \"vee-validate\": \"catalog:\",\n \"vue\": \"catalog:\",\n \"vue-i18n\": \"catalog:\",\n \"vue-instantsearch\": \"catalog:\",\n \"vue-router\": \"catalog:\",\n \"vuetify\": \"workspace:*\"\n },\n \"devDependencies\": {\n \"@babel/generator\": \"catalog:\",\n \"@babel/types\": \"catalog:\",\n \"@emailjs/browser\": \"catalog:\",\n \"@intlify/unplugin-vue-i18n\": \"catalog:\",\n \"@mdi/js\": \"catalog:\",\n \"@mdi/svg\": \"catalog:\",\n \"@octokit/openapi-types\": \"catalog:\",\n \"@resvg/resvg-js\": \"catalog:\",\n \"@types/babel__generator\": \"catalog:\",\n \"@types/markdown-it\": \"catalog:\",\n \"@types/markdown-it-container\": \"catalog:\",\n \"@types/prismjs\": \"catalog:\",\n \"@vitejs/plugin-basic-ssl\": \"catalog:\",\n \"@vue/compiler-sfc\": \"catalog:\",\n \"@vuetify/api-generator\": \"workspace:*\",\n \"@yankeeinlondon/builder-api\": \"catalog:\",\n \"ajv\": \"catalog:\",\n \"algoliasearch-helper\": \"catalog:\",\n \"async-es\": \"catalog:\",\n \"date-fns\": \"catalog:\",\n \"eslint\": \"catalog:\",\n \"eslint-formatter-codeframe\": \"catalog:\",\n \"front-matter\": \"catalog:\",\n \"markdown-it\": \"catalog:\",\n \"markdown-it-anchor\": \"catalog:\",\n \"markdown-it-attrs\": \"catalog:\",\n \"markdown-it-container\": \"catalog:\",\n \"markdown-it-emoji\": \"catalog:\",\n \"markdown-it-header-sections\": \"catalog:\",\n \"markdown-it-link-attributes\": \"catalog:\",\n \"markdown-it-prism\": \"catalog:\",\n \"markdownlint-cli\": \"catalog:\",\n \"satori\": \"catalog:\",\n \"unplugin-auto-import\": \"catalog:\",\n \"unplugin-fonts\": \"catalog:\",\n \"unplugin-vue-components\": \"catalog:\",\n \"vite-plugin-md\": \"catalog:\",\n \"vite-plugin-pages\": \"catalog:\",\n \"vite-plugin-pwa\": \"catalog:\",\n \"vite-plugin-vue-layouts\": \"catalog:\",\n \"vite-plugin-vuetify\": \"catalog:\",\n \"vue-tsc\": \"catalog:\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n","packages/docs/src/data/301.json":"{\n \"components/dropdowns\": \"/components/menus\",\n \"quick-start\": \"/getting-started/installation\",\n \"vuetify/quick-start\": \"/getting-started/installation\",\n \"getting-started/quick-start/\": \"/getting-started/installation\",\n \"motion\": \"/styles/transitions\",\n \"components/sidebars\": \"/components/navigation-drawers\",\n \"components/v-navigation-drawer\": \"/components/navigation-drawers\",\n \"components/collapsible\": \"/components/expansion-panels\",\n \"components/navbars\": \"/components/toolbars\",\n \"components/toasts\": \"/components/snackbars\",\n \"components/carousel\": \"/components/carousels\",\n \"components/datatables\": \"/components/data-tables/basics\",\n \"components/expansion-panel\": \"/components/expansion-panels\",\n \"components/footer\": \"/components/footers\",\n \"directives/badges\": \"/components/badges\",\n \"vuetify/why-vuetify\": \"/getting-started/why-vuetify\",\n \"vuetify/frequently-asked-questions\": \"/getting-started/frequently-asked-questions\",\n \"vuetify/sponsors-and-backers\": \"/introduction/sponsors-and-backers\",\n \"getting-started/releases-and-migrations/\": \"/getting-started/upgrade-guide\",\n \"vuetify/releases-and-migrations\": \"/getting-started/upgrade-guide\",\n \"vuetify/contributing\": \"/getting-started/contributing\",\n \"vuetify/roadmap\": \"/getting-started/roadmap\",\n \"vuetify/a-la-carte\": \"/features/treeshaking\",\n \"getting-started/a-la-carte\": \"/features/treeshaking\",\n \"guides/a-la-carte\": \"/features/treeshaking\",\n \"customization/a-la-carte\": \"/features/treeshaking\",\n \"pre-made-themes\": \"/resources/themes\",\n \"layout/pre-made-themes\": \"/resources/themes\",\n \"themes/premium\": \"/resources/themes\",\n \"layout/grid\": \"/components/grids\",\n \"layout/pre-defined\": \"/getting-started/wireframes\",\n \"getting-started/pre-made-layouts\": \"/getting-started/wireframes\",\n \"layout/breakpoints\": \"/features/display-and-platform\",\n \"layout/aspect-ratios\": \"/components/aspect-ratios\",\n \"layout/spacing\": \"/styles/spacing\",\n \"layout/alignment\": \"/styles/alignment\",\n \"layout/display\": \"/styles/display\",\n \"layout/elevation\": \"/styles/elevation\",\n \"style/colors\": \"/styles/colors\",\n \"style/theme\": \"/customization/theme\",\n \"style/typography\": \"/styles/text-and-typography\",\n \"styles/typography\": \"/styles/text-and-typography\",\n \"styles/text\": \"/styles/text-and-typography\",\n \"style/content\": \"/styles/content\",\n \"motion/scroll\": \"/customization/scrolling\",\n \"styles/scroll\": \"/customization/scrolling\",\n \"motion/transitions\": \"/styles/transitions\",\n \"components/form\": \"/components/forms\",\n \"components/selection-controls\": \"/components/checkboxes\",\n \"components/slide-toggles\": \"/components/switches\",\n \"components/buttons-and-indicators\": \"/components/buttons\",\n \"framework/pre-defined\": \"/getting-started/pre-made-layouts\",\n \"framework/pre-made\": \"/getting-started/pre-made-layouts\",\n \"framework/pre-defined-layouts\": \"/getting-started/pre-made-layouts\",\n \"components/data-iterator\": \"/components/data-iterators\",\n \"framework/a-la-carte\": \"/customization/a-la-carte\",\n \"framework/grid\": \"/components/grids\",\n \"framework/application\": \"/components/application\",\n \"framework/breakpoints\": \"/features/display-and-platform\",\n \"framework/icons\": \"/customization/icons\",\n \"framework/i18n\": \"/customization/internationalization\",\n \"framework/theme\": \"/customization/theme\",\n \"framework/scroll\": \"/customization/scrolling\",\n \"framework/aspect-ratios\": \"/components/aspect-ratios\",\n \"framework/pre-made-layouts\": \"/getting-started/pre-made-layouts\",\n \"framework/colors\": \"/styles/colors\",\n \"framework/content\": \"/styles/content\",\n \"framework/typography\": \"/styles/typography\",\n \"framework/display\": \"/styles/display\",\n \"framework/elevation\": \"/styles/elevation\",\n \"framework/spacing\": \"/styles/spacing\",\n \"styles/alignment\": \"/styles/text\",\n \"framework/text-alignment\": \"/styles/text-and-typography\",\n \"styles/text-alignment\": \"/styles/text-and-typography\",\n \"framework/transitions\": \"/styles/transitions\",\n \"customizing/sandbox\": \"/customization/sandbox\",\n \"customizing/a-la-carte\": \"/customization/a-la-carte\",\n \"customizing/breakpoints\": \"/features/display-and-platform\",\n \"customizing/theme\": \"/customization/theme\",\n \"customizing/icons\": \"/customization/icons\",\n \"customizing/i18n\": \"/customization/internationalization\",\n \"getting-started/why-vuetify\": \"/introduction/why-vuetify\",\n \"getting-started/meet-the-team\": \"/about/meet-the-team\",\n \"getting-started/sponsors-and-backers\": \"/introduction/sponsors-and-backers\",\n \"getting-started/roadmap\": \"/introduction/roadmap\",\n \"getting-started/long-term-support\": \"/introduction/long-term-support\",\n \"getting-started/consulting-and-support\": \"/introduction/enterprise-support\",\n \"getting-started/support/enterprise\": \"/introduction/enterprise-support\",\n \"components/textarea\": \"/components/textareas\",\n \"components/virtual-scrollers\": \"/components/virtual-scroller\",\n \"directives/resizing\": \"/directives/resize\",\n \"directives/ripples\": \"/directives/ripple\",\n \"directives/scrolling\": \"/directives/scroll\",\n \"directives/touch-support\": \"/directives/touch\",\n \"introduction/frequently-asked-questions\": \"/getting-started/frequently-asked-questions\",\n \"professional-support/consulting\": \"/introduction/enterprise-support\",\n \"professional-support/enterprise\": \"/introduction/enterprise-support\",\n \"introduction/support\": \"/introduction/enterprise-support\",\n \"introduction/enterprise\": \"/introduction/enterprise-support\",\n \"introduction/consulting\": \"/introduction/enterprise-support\",\n \"customization/accessibility\": \"/features/accessibility\",\n \"customization/rtl\": \"/features/bidirectionality\",\n \"features/rtl\": \"/features/bidirectionality\",\n \"features/breakpoints\": \"/features/display-and-platform\",\n \"features/bidirectionality\": \"/features/internationalization\",\n \"customization/bidirectionality\": \"/features/bidirectionality\",\n \"customization/breakpoints\": \"/features/display-and-platform\",\n \"customization/global-config\": \"/features/global-config\",\n \"customization/scrolling\": \"/features/scrolling\",\n \"customization/icons\": \"/features/icon-fonts\",\n \"customization/internationalization\": \"/features/internationalization\",\n \"customization/presets\": \"/features/presets\",\n \"customization/sass-variables\": \"/features/sass-variables\",\n \"customization/theme\": \"/features/theme\",\n \"about/sponsors-and-backers\": \"/introduction/sponsors-and-backers\",\n \"components/simple-tables\": \"/components/tables\",\n \"components/data-tables\": \"/components/data-tables/basics\",\n \"components/date-pickers-month\": \"/introduction/roadmap\",\n \"components/server-side-data-tables\": \"/components/data-tables/server-side-tables\",\n \"components/virtual-data-tables\": \"/components/data-tables/virtual-tables\",\n \"api/v-click-outside\": \"/api/v-click-outside-directive\",\n \"api/v-intersect\": \"/api/v-intersect-directive\",\n \"api/v-mutate\": \"/api/v-mutate-directive\",\n \"api/v-resize\": \"/api/v-resize-directive\",\n \"api/v-ripple\": \"/api/v-ripple-directive\",\n \"api/v-scroll\": \"/api/v-scroll-directive\",\n \"api/v-touch\": \"/api/v-touch-directive\"\n}\n","packages/docs/src/data/metadata.json":"{\n \"title\": \"Vuetify — A Vue Component Framework\",\n \"description\": \"Vuetify is a no design skills required UI Component Framework for Vue. It provides you with all of the tools necessary to create beautiful content rich web applications.\",\n \"keywords\": \"vue, material design components, vue components, material design components, vuetify, vuetify, component framework\"\n}\n","packages/docs/src/data/nav.json":"[\n {\n \"title\": \"introduction\",\n \"inactiveIcon\": \"mdi-script-text-outline\",\n \"activeIcon\": \"mdi-script-text\",\n \"items\": [\n \"why-vuetify\",\n \"long-term-support\",\n \"roadmap\",\n \"sponsors-and-backers\",\n { \"divider\": true },\n { \"subheader\": \"professional-support\" },\n \"enterprise-support\"\n ]\n },\n {\n \"title\": \"getting-started\",\n \"inactiveIcon\": \"mdi-speedometer-medium\",\n \"activeIcon\": \"mdi-speedometer\",\n \"items\": [\n \"installation\",\n \"mcp\",\n \"frequently-asked-questions\",\n \"wireframes\",\n \"unit-testing\",\n \"browser-support\",\n \"upgrade-guide\",\n \"release-notes\",\n \"contributing\"\n ]\n },\n {\n \"title\": \"features\",\n \"inactiveIcon\": \"mdi-image-edit-outline\",\n \"activeIcon\": \"mdi-image-edit\",\n \"items\": [\n \"accessibility\",\n \"aliasing\",\n \"application-layout\",\n \"blueprints\",\n {\n \"title\": \"css-utilities\",\n \"subfolder\": \"features\",\n \"activeIcon\": \"\",\n \"inactiveIcon\": \"\",\n \"items\": [\n \"overview\",\n \"unocss-vuetify-preset\",\n \"unocss-tailwind-preset\",\n \"tailwindcss\"\n ]\n },\n \"dates\",\n \"display-and-platform\",\n \"global-configuration\",\n \"hotkey\",\n \"icon-fonts\",\n \"internationalization\",\n \"md3-button-sizes\",\n \"rules\",\n \"scrolling\",\n \"sass-variables\",\n \"theme\",\n \"treeshaking\"\n ]\n },\n {\n \"title\": \"styles\",\n \"inactiveIcon\": \"mdi-palette-outline\",\n \"activeIcon\": \"mdi-palette\",\n \"items\": [\n \"entry-points\",\n \"css-reset\",\n \"layers\",\n \"transitions\",\n \"colors\",\n { \"divider\": true },\n {\n \"subheader\": \"utility-classes\"\n },\n \"borders\",\n \"border-radius\",\n \"content\",\n \"cursor\",\n \"display\",\n \"elevation\",\n \"flex\",\n \"float\",\n \"opacity\",\n \"overflow\",\n \"position\",\n \"sizing\",\n \"spacing\",\n \"text-and-typography\"\n ]\n },\n {\n \"title\": \"concepts\",\n \"inactiveIcon\": \"mdi-puzzle-outline\",\n \"activeIcon\": \"mdi-puzzle\",\n \"items\": [\n \"density-and-sizing\",\n \"items\",\n \"routing\",\n \"v-model\",\n \"variants\"\n ]\n },\n {\n \"title\": \"components\",\n \"inactiveIcon\": \"mdi-view-dashboard-outline\",\n \"activeIcon\": \"mdi-view-dashboard\",\n \"items\": [\n \"all\",\n {\n \"title\": \"explorer\",\n \"routeMatch\": \"explorer/:name(.*)\",\n \"routePath\": \"explorer\",\n \"subtitle\": \"browse-components\"\n },\n \"application\",\n { \"divider\": true },\n { \"subheader\": \"containment\" },\n \"bottom-sheets\",\n \"buttons\",\n \"icon-buttons\",\n \"cards\",\n \"chips\",\n \"dialogs\",\n \"dividers\",\n \"expansion-panels\",\n \"lists\",\n \"menus\",\n \"overlays\",\n \"sheets\",\n \"toolbars\",\n \"tooltips\",\n { \"divider\": true },\n { \"subheader\": \"navigation\" },\n \"app-bars\",\n \"bottom-navigation\",\n \"breadcrumbs\",\n \"floating-action-buttons\",\n \"footers\",\n \"navigation-drawers\",\n \"paginations\",\n \"speed-dials\",\n \"system-bars\",\n \"tabs\",\n { \"divider\": true },\n { \"subheader\": \"form-inputs-and-controls\" },\n \"autocompletes\",\n \"checkboxes\",\n \"color-inputs\",\n \"combobox\",\n \"date-inputs\",\n \"file-inputs\",\n \"file-upload\",\n \"forms\",\n \"inputs\",\n \"number-inputs\",\n \"otp-input\",\n \"radio-buttons\",\n \"range-sliders\",\n \"selects\",\n \"sliders\",\n \"switches\",\n \"text-fields\",\n \"textareas\",\n { \"divider\": true },\n { \"subheader\": \"data-and-display\" },\n \"calendars\",\n \"confirm-edit\",\n \"data-iterators\",\n {\n \"title\": \"data-tables\",\n \"subfolder\": \"components\",\n \"activeIcon\": \"\",\n \"inactiveIcon\": \"\",\n \"items\": [\n \"introduction\",\n { \"subheader\": \"guide\" },\n \"basics\",\n \"data-and-display\",\n { \"subheader\": \"types\" },\n \"server-side-tables\",\n \"virtual-tables\"\n ]\n },\n \"highlights\",\n \"hotkeys\",\n \"sparklines\",\n \"infinite-scroller\",\n \"tables\",\n \"treeview\",\n \"virtual-scroller\",\n { \"divider\": true },\n { \"subheader\": \"grids\" },\n \"grids\",\n { \"divider\": true },\n { \"subheader\": \"selection\" },\n \"button-groups\",\n \"carousels\",\n \"chip-groups\",\n \"item-groups\",\n \"slide-groups\",\n \"steppers\",\n \"vertical-steppers\",\n \"windows\",\n { \"divider\": true },\n { \"subheader\": \"feedback\" },\n \"alerts\",\n \"badges\",\n \"banners\",\n \"empty-states\",\n \"hover\",\n \"progress\",\n \"progress-circular\",\n \"progress-linear\",\n \"ratings\",\n \"skeleton-loaders\",\n \"snackbars\",\n \"snackbar-queue\",\n \"timelines\",\n { \"divider\": true },\n { \"subheader\": \"images-and-icons\" },\n \"aspect-ratios\",\n \"avatars\",\n \"avatar-groups\",\n \"icons\",\n \"images\",\n \"parallax\",\n { \"divider\": true },\n { \"subheader\": \"pickers\" },\n \"color-pickers\",\n \"date-pickers\",\n \"time-pickers\",\n { \"divider\": true },\n { \"subheader\": \"providers\" },\n \"defaults-providers\",\n \"locale-providers\",\n \"theme-providers\",\n { \"divider\": true },\n { \"subheader\": \"miscellaneous\" },\n \"lazy\",\n \"no-ssr\",\n \"pull-to-refresh\"\n ]\n },\n {\n \"title\": \"api\",\n \"inactiveIcon\": \"mdi-flask-empty-outline\",\n \"activeIcon\": \"mdi-flask-outline\",\n \"items\": [\n \"hotkey\"\n ]\n },\n {\n \"title\": \"directives\",\n \"inactiveIcon\": \"mdi-function\",\n \"activeIcon\": \"mdi-function\",\n \"items\": [\n \"click-outside\",\n \"intersect\",\n \"mutate\",\n \"resize\",\n \"ripple\",\n \"scroll\",\n \"tooltip\",\n \"touch\",\n \"touch-hold\"\n ]\n },\n {\n \"title\": \"labs\",\n \"inactiveIcon\": \"mdi-beaker-outline\",\n \"activeIcon\": \"mdi-beaker\",\n \"items\": [\n \"introduction\",\n {\n \"title\": \"audio-players\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"command-palettes\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"date-range-pickers\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"heatmaps\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"infinite-carousels\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"loading-indicators\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"mask-inputs\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"month-pickers\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"pie-charts\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"split-buttons\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"time-inputs\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"videos\",\n \"subfolder\": \"components\"\n }\n ]\n },\n {\n \"title\": \"resources\",\n \"inactiveIcon\": \"mdi-human-male-board\",\n \"activeIcon\": \"mdi-human-male-board\",\n \"items\": [\n \"brand-kit\",\n \"jobs-for-vue\",\n \"made-with-vuetify\",\n \"themes\",\n { \"divider\": true },\n { \"subheader\": \"guides\" },\n \"search-engine\",\n \"ui-kits\"\n ]\n },\n {\n \"title\": \"about\",\n \"inactiveIcon\": \"$vuetify-outline\",\n \"activeIcon\": \"$vuetify\",\n \"items\": [\n \"code-of-conduct\",\n \"licensing\",\n \"meet-the-team\",\n \"security-disclosure\"\n ]\n }\n]\n","packages/docs/src/data/new-in.json":"{\n \"useTheme\": {\n \"exposed\": {\n \"change\": \"3.9.0\",\n \"toggle\": \"3.9.0\",\n \"cycle\": \"3.9.0\"\n }\n },\n \"VAlert\": {\n \"props\": {\n \"timeout\": \"4.3.0\",\n \"timer\": \"4.3.0\",\n \"transition\": \"4.3.0\"\n }\n },\n \"VAppBar\": {\n \"props\": {\n \"scrollBehavior\": \"3.2.0\"\n }\n },\n \"VAutocomplete\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"autocomplete\": \"3.10.0\",\n \"autoSelectFirst\": \"3.3.0\",\n \"clearOnSelect\": \"3.5.0\",\n \"closeOnInputClick\": \"4.2.0\",\n \"filteredOrder\": \"4.3.0\",\n \"form\": \"4.2.0\",\n \"listProps\": \"3.5.0\",\n \"menuElevation\": \"4.0.0\",\n \"openOnFocus\": \"4.2.0\"\n },\n \"slots\": {\n \"menu-header\": \"3.12.0\",\n \"menu-footer\": \"3.12.0\"\n },\n \"events\": {\n \"item:added\": \"4.2.0\",\n \"item:removed\": \"4.2.0\"\n },\n \"examples\": {\n \"slot-menu-footer\": \"3.12.0\",\n \"misc-new-tab\": \"3.3.0\",\n \"prop-filtered-order\": \"4.3.0\",\n \"prop-ignore-accents\": \"4.2.0\"\n }\n },\n \"VAvatar\": {\n \"props\": {\n \"text\": \"3.4.0\",\n \"border\": \"3.7.0\",\n \"badge\": \"4.0.0\"\n },\n \"slots\": {\n \"badge\": \"4.0.0\"\n },\n \"examples\": {\n \"prop-badge\": \"4.0.0\"\n }\n },\n \"VBadge\": {\n \"props\": {\n \"dotSize\": \"4.0.0\"\n }\n },\n \"VBanner\": {\n \"props\": {\n \"bgColor\": \"3.4.0\"\n }\n },\n \"VBottomSheet\": {\n \"props\": {\n \"contextMenu\": \"4.3.0\"\n }\n },\n \"VBreadcrumbsItem\": {\n \"props\": {\n \"width\": \"3.11.0\",\n \"maxWidth\": \"3.11.0\"\n }\n },\n \"VBtn\": {\n \"props\": {\n \"text\": \"3.2.0\",\n \"slim\": \"3.4.0\",\n \"readonly\": \"3.6.0\",\n \"activeColor\": \"3.7.0\",\n \"spaced\": \"3.10.0\"\n },\n \"examples\": {\n \"prop-spaced\": \"3.10.0\",\n \"misc-readonly\": \"3.6.0\"\n }\n },\n \"VBtnGroup\": {\n \"props\": {\n \"connected\": \"4.3.0\",\n \"size\": \"4.2.0\"\n }\n },\n \"VCarousel\": {\n \"props\": {\n \"crossfade\": \"3.10.0\",\n \"transitionDuration\": \"3.10.0\",\n \"pauseOnHover\": \"4.3.0\"\n },\n \"examples\": {\n \"misc-vertical\": \"3.9.0\",\n \"prop-custom-transition\": \"3.10.0\"\n }\n },\n \"VCalendar\": {\n \"props\": {\n \"format\": \"4.1.0\",\n \"intervalHighlight\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-hour24\": \"4.1.0\"\n }\n },\n \"VCheckbox\": {\n \"props\": {\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VCheckboxBtn\": {\n \"props\": {\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VChip\": {\n \"props\": {\n \"baseColor\": \"3.8.0\"\n }\n },\n \"VChipGroup\": {\n \"props\": {\n \"scrollToActive\": \"3.10.6\"\n }\n },\n \"VColorInput\": {\n \"props\": {\n \"openOnFocus\": \"4.2.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"reset\": \"4.3.0\",\n \"resetValidation\": \"4.3.0\",\n \"validate\": \"4.3.0\",\n \"isValid\": \"4.3.0\",\n \"errorMessages\": \"4.3.0\"\n }\n },\n \"VColorPicker\": {\n \"props\": {\n \"hideEyeDropper\": \"3.10.0\",\n \"eyeDropperIcon\": \"3.10.0\",\n \"hideTitle\": \"3.10.0\",\n \"hideInputLabels\": \"4.1.0\"\n }\n },\n \"VCombobox\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"alwaysFilter\": \"3.10.4\",\n \"autocomplete\": \"3.10.0\",\n \"clearOnSelect\": \"3.5.0\",\n \"closeOnInputClick\": \"4.2.0\",\n \"filteredOrder\": \"4.3.0\",\n \"form\": \"4.2.0\",\n \"listProps\": \"3.5.0\",\n \"menuElevation\": \"4.0.0\",\n \"openOnFocus\": \"4.2.0\",\n \"trimValues\": \"4.2.0\"\n },\n \"slots\": {\n \"menu-header\": \"3.12.0\",\n \"menu-footer\": \"3.12.0\"\n },\n \"events\": {\n \"item:added\": \"4.2.0\",\n \"item:removed\": \"4.2.0\",\n \"item:created\": \"4.2.0\"\n },\n \"examples\": {\n \"slot-menu-header\": \"3.12.0\"\n }\n },\n \"VConfirmEdit\": {\n \"props\": {\n \"hideActions\": \"3.8.0\"\n }\n },\n \"VDateInput\": {\n \"props\": {\n \"openOnFocus\": \"4.2.0\"\n }\n },\n \"VDatePicker\": {\n \"props\": {\n \"events\": \"3.11.0\",\n \"eventColor\": \"3.11.0\",\n \"controlHeight\": \"3.8.0\",\n \"controlVariant\": \"3.11.0\",\n \"firstDayOfYear\": \"3.10.0\",\n \"headerColor\": \"3.8.0\",\n \"headerDateFormat\": \"3.11.0\",\n \"hideTitle\": \"3.10.0\",\n \"landscape\": \"3.11.0\",\n \"landscapeHeaderWidth\": \"3.11.0\",\n \"noAutoNavigation\": \"4.1.0\",\n \"noMonthPicker\": \"3.11.0\",\n \"wheel\": \"4.3.0\"\n },\n \"slots\": {\n \"controls\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-landscape\": \"3.11.0\",\n \"prop-events\": \"3.11.0\",\n \"slots-controls\": \"3.11.0\"\n }\n },\n \"VDataIterator\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"groupKey\": \"4.1.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-grouping\": \"4.1.0\"\n }\n },\n \"VDataTable\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"collapseIcon\": \"3.10.0\",\n \"expandIcon\": \"3.10.0\",\n \"expandStrategy\": \"4.1.0\",\n \"expandTransition\": \"4.1.0\",\n \"gridlines\": \"4.1.0\",\n \"groupCollapseIcon\": \"3.10.0\",\n \"groupExpandIcon\": \"3.10.0\",\n \"groupKey\": \"4.1.0\",\n \"headerProps\": \"3.5.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\",\n \"pageBy\": \"3.12.0\",\n \"showFirstLastPage\": \"4.1.0\",\n \"sortIcon\": \"3.12.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\",\n \"expanded\": \"4.1.0\",\n \"group-summary\": \"3.10.0\"\n },\n \"examples\": {\n \"prop-grouping\": \"4.1.0\",\n \"prop-sort-icon\": \"3.12.0\",\n \"slot-expanded\": \"4.1.0\",\n \"slot-group-summary\": \"3.10.0\"\n }\n },\n \"VDataTableServer\": {\n \"props\": {\n \"collapseIcon\": \"3.10.0\",\n \"expandIcon\": \"3.10.0\",\n \"expandStrategy\": \"4.1.0\",\n \"expandTransition\": \"4.1.0\",\n \"gridlines\": \"4.1.0\",\n \"groupCollapseIcon\": \"3.10.0\",\n \"groupExpandIcon\": \"3.10.0\",\n \"groupKey\": \"4.1.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\",\n \"pageBy\": \"3.12.0\",\n \"showFirstLastPage\": \"4.1.0\",\n \"sortIcon\": \"3.12.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\",\n \"expanded\": \"4.1.0\",\n \"group-summary\": \"3.10.0\"\n }\n },\n \"VDataTableVirtual\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"collapseIcon\": \"3.10.0\",\n \"expandIcon\": \"3.10.0\",\n \"expandStrategy\": \"4.1.0\",\n \"expandTransition\": \"4.1.0\",\n \"gridlines\": \"4.1.0\",\n \"groupCollapseIcon\": \"3.10.0\",\n \"groupExpandIcon\": \"3.10.0\",\n \"groupKey\": \"4.1.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\",\n \"sortIcon\": \"3.12.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\",\n \"expanded\": \"4.1.0\",\n \"group-summary\": \"3.10.0\"\n }\n },\n \"VDialog\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"contextMenu\": \"4.3.0\",\n \"retainFocus\": \"3.11.0\",\n \"stickToTarget\": \"3.10.0\",\n \"viewportMargin\": \"3.11.0\"\n }\n },\n \"VDivider\": {\n \"props\": {\n \"gradient\": \"3.11.0\",\n \"contentOffset\": \"3.11.0\",\n \"variant\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-gradient\": \"3.11.0\"\n }\n },\n \"VExpansionPanels\": {\n \"props\": {\n \"static\": \"3.4.0\",\n \"gap\": \"4.1.0\",\n \"hover\": \"4.1.0\",\n \"noDivider\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-rounded-gap\": \"4.1.0\"\n }\n },\n \"VExpansionPanelTitle\": {\n \"props\": {\n \"hover\": \"4.1.0\"\n }\n },\n \"VField\": {\n \"props\": {\n \"iconColor\": \"3.8.0\",\n \"glow\": \"3.8.0\"\n }\n },\n \"VFileInput\": {\n \"props\": {\n \"filterByType\": \"3.10.0\",\n \"truncateLength\": \"3.10.0\"\n }\n },\n \"VFileUpload\": {\n \"props\": {\n \"filterByType\": \"3.10.0\",\n \"loading\": \"4.1.0\"\n },\n \"slots\": {\n \"loader\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-loading\": \"4.1.0\"\n }\n },\n \"VIcon\": {\n \"props\": {\n \"opacity\": \"3.8.0\"\n }\n },\n \"VIconBtn\": {\n \"props\": {\n \"widthVariant\": \"4.3.0\"\n }\n },\n \"VImg\": {\n \"props\": {\n \"position\": \"3.4.0\",\n \"draggable\": \"3.4.0\",\n \"referrerpolicy\": \"3.4.0\",\n \"crossorigin\": \"3.4.0\",\n \"absolute\": \"3.7.0\",\n \"imageClass\": \"3.12.0\"\n },\n \"examples\": {\n \"prop-image-class\": \"3.12.0\"\n }\n },\n \"VInput\": {\n \"props\": {\n \"detailsActive\": \"4.2.0\",\n \"iconColor\": \"3.8.0\",\n \"glow\": \"3.8.0\"\n }\n },\n \"VList\": {\n \"props\": {\n \"indent\": \"3.11.0\",\n \"itemsRegistration\": \"3.11.0\",\n \"prependGap\": \"3.11.0\"\n },\n \"exposed\": {\n \"activeDescendant\": \"4.3.0\"\n }\n },\n \"VListItem\": {\n \"props\": {\n \"baseColor\": \"3.3.0\",\n \"prependGap\": \"3.11.0\",\n \"slim\": \"3.4.0\"\n }\n },\n \"VMenu\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"contextMenu\": \"4.3.0\",\n \"openOnArrow\": \"4.2.0\",\n \"retainFocus\": \"3.11.0\",\n \"stickToTarget\": \"3.10.0\",\n \"submenu\": \"3.7.0\",\n \"viewportMargin\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-context-menu\": \"4.3.0\",\n \"prop-submenu\": \"3.7.0\"\n }\n },\n \"VNavigationDrawer\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"retainFocus\": \"3.11.0\",\n \"persistent\": \"3.6.0\"\n }\n },\n \"VNumberInput\": {\n \"props\": {\n \"autocomplete\": \"3.10.0\",\n \"grouping\": \"4.1.0\",\n \"groupSeparator\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-grouping\": \"4.1.0\"\n }\n },\n \"VOtpInput\": {\n \"props\": {\n \"density\": \"3.12.0\",\n \"masked\": \"3.12.0\",\n \"merged\": \"4.1.0\",\n \"pattern\": \"4.1.0\"\n },\n \"slots\": {\n \"divider\": \"4.1.0\"\n },\n \"examples\": {\n \"misc-custom-layout\": \"4.1.0\",\n \"prop-merged\": \"4.1.0\",\n \"prop-pattern\": \"4.1.0\",\n \"slot-divider\": \"4.1.0\"\n }\n },\n \"VOverlay\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"contextMenu\": \"4.3.0\",\n \"retainFocus\": \"3.11.0\",\n \"stickToTarget\": \"3.10.0\",\n \"viewportMargin\": \"3.11.0\"\n }\n },\n \"VPicker\": {\n \"props\": {\n \"hideTitle\": \"3.10.0\"\n }\n },\n \"VProgress\": {\n \"examples\": {\n \"misc-loading-indicator\": \"4.3.0\"\n }\n },\n \"VProgressCircular\": {\n \"props\": {\n \"reveal\": \"3.12.0\",\n \"rounded\": \"3.11.0\",\n \"shape\": \"4.3.0\",\n \"transition\": \"4.2.0\",\n \"variant\": \"4.3.0\"\n },\n \"examples\": {\n \"prop-reveal\": \"3.12.0\",\n \"prop-transition\": \"4.2.0\"\n }\n },\n \"VProgressLinear\": {\n \"props\": {\n \"chunkCount\": \"3.10.0\",\n \"chunkGap\": \"3.10.0\",\n \"chunkWidth\": \"3.10.0\",\n \"reveal\": \"4.2.0\",\n \"shape\": \"4.3.0\",\n \"stopIndicator\": \"4.3.0\",\n \"transition\": \"4.2.0\",\n \"variant\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-chunks\": \"3.10.0\",\n \"prop-transition\": \"4.2.0\"\n }\n },\n \"VRadio\": {\n \"props\": {\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VRadioGroup\": {\n \"events\": {\n \"update:focused\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VRangeSlider\": {\n \"examples\": {\n \"prop-value-format\": \"4.3.0\"\n },\n \"props\": {\n \"endThumbAriaLabel\": \"4.3.0\",\n \"size\": \"4.3.0\",\n \"startThumbAriaLabel\": \"4.3.0\",\n \"thumbGap\": \"4.3.0\",\n \"valueFormat\": \"4.3.0\",\n \"variant\": \"4.3.0\"\n }\n },\n \"VRating\": {\n \"props\": {\n \"iconSize\": \"4.3.0\"\n }\n },\n \"VRow\": {\n \"props\": {\n \"gapSm\": \"4.3.0\",\n \"gapMd\": \"4.3.0\",\n \"gapLg\": \"4.3.0\",\n \"gapXl\": \"4.3.0\",\n \"gapXxl\": \"4.3.0\",\n \"size\": \"4.0.0\"\n }\n },\n \"VSelect\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"autocomplete\": \"3.10.0\",\n \"form\": \"4.2.0\",\n \"listProps\": \"3.5.0\",\n \"menuElevation\": \"4.0.0\",\n \"noAutoScroll\": \"3.9.0\",\n \"openOnFocus\": \"4.2.0\"\n },\n \"slots\": {\n \"menu-header\": \"3.12.0\",\n \"menu-footer\": \"3.12.0\"\n },\n \"events\": {\n \"item:added\": \"4.2.0\",\n \"item:removed\": \"4.2.0\"\n },\n \"examples\": {\n \"prop-list-props\": \"3.5.0\",\n \"slot-menu-header-and-footer\": \"3.12.0\"\n }\n },\n \"VSelectionControl\": {\n \"props\": {\n \"indeterminate\": \"4.1.0\",\n \"indeterminateIcon\": \"4.1.0\",\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\"\n }\n },\n \"VSelectionControlGroup\": {\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\"\n }\n },\n \"VSkeletonLoader\": {\n \"props\": {\n \"types\": \"4.2.0\"\n },\n \"examples\": {\n \"prop-types\": \"4.2.0\"\n }\n },\n \"VSlider\": {\n \"examples\": {\n \"prop-value-format\": \"4.3.0\"\n },\n \"events\": {\n \"start\": \"3.2.0\",\n \"end\": \"3.2.0\"\n },\n \"props\": {\n \"appendInnerIcon\": \"4.3.0\",\n \"centered\": \"4.3.0\",\n \"prependInnerIcon\": \"4.3.0\",\n \"size\": \"4.3.0\",\n \"thumbGap\": \"4.3.0\",\n \"valueFormat\": \"4.3.0\",\n \"variant\": \"4.3.0\"\n },\n \"slots\": {\n \"append-inner\": \"4.3.0\",\n \"prepend-inner\": \"4.3.0\"\n }\n },\n \"VSlideGroup\": {\n \"props\": {\n \"contentClass\": \"3.9.0\",\n \"gap\": \"4.3.0\",\n \"padding\": \"4.3.0\",\n \"scrollDistance\": \"4.2.0\",\n \"scrollSnap\": \"4.2.0\",\n \"scrollToActive\": \"3.10.6\"\n },\n \"events\": {\n \"edge\": \"4.2.0\"\n },\n \"exposed\": {\n \"hasOverflow\": \"4.2.0\",\n \"slide\": \"4.2.0\"\n },\n \"examples\": {\n \"misc-image-slider\": \"4.3.0\"\n }\n },\n \"VSnackbar\": {\n \"props\": {\n \"loading\": \"4.0.0\",\n \"prependAvatar\": \"4.0.0\",\n \"prependIcon\": \"4.0.0\",\n \"reverseTimer\": \"4.0.0\",\n \"timer\": \"3.4.0\",\n \"timerColor\": \"4.0.0\",\n \"text\": \"3.4.0\"\n },\n \"slots\": {\n \"header\": \"4.0.0\",\n \"prepend\": \"4.0.0\"\n },\n \"examples\": {\n \"prop-prepend-icon\": \"4.0.0\",\n \"prop-prepend-avatar\": \"4.0.0\",\n \"prop-loading\": \"4.0.0\",\n \"prop-timer-position\": \"4.0.0\",\n \"slot-header\": \"4.0.0\",\n \"slot-prepend\": \"4.0.0\"\n }\n },\n \"VSnackbarQueue\": {\n \"props\": {\n \"closable\": \"4.0.0\",\n \"closeText\": \"4.0.0\",\n \"gap\": \"4.0.0\",\n \"totalVisible\": \"4.0.0\"\n },\n \"examples\": {\n \"misc-promise\": \"4.0.0\",\n \"prop-total-visible\": \"3.11.0\",\n \"prop-transition\": \"4.0.0\"\n }\n },\n \"VSpeedDial\": {\n \"props\": {\n \"contextMenu\": \"4.3.0\"\n }\n },\n \"VSparkline\": {\n \"props\": {\n \"animation\": \"4.1.0\",\n \"autoDraw\": \"4.1.0\",\n \"inset\": \"4.1.0\",\n \"interactive\": \"4.1.0\",\n \"markerSize\": \"4.1.0\",\n \"markerStroke\": \"4.1.0\",\n \"showMarkers\": \"4.1.0\",\n \"smoothMode\": \"4.1.0\",\n \"tooltip\": \"4.1.0\"\n },\n \"events\": {\n \"update:currentIndex\": \"4.1.0\"\n },\n \"examples\": {\n \"misc-interactive\": \"4.1.0\",\n \"prop-animation\": \"4.1.0\",\n \"prop-inset\": \"4.1.0\",\n \"prop-smooth-mode\": \"4.1.0\"\n }\n },\n \"VStepper\": {\n \"props\": {\n \"itemProps\": \"3.11.0\"\n }\n },\n \"VSwitch\": {\n \"props\": {\n \"size\": \"4.1.0\",\n \"thumbColor\": \"4.1.0\",\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"thumb\": \"3.5.0\",\n \"track-false\": \"3.5.0\",\n \"track-true\": \"3.5.0\",\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VTab\": {\n \"props\": {\n \"inset\": \"3.11.2\",\n \"text\": \"3.2.0\",\n \"spaced\": \"3.10.0\",\n \"sliderTransition\": \"3.11.0\",\n \"sliderTransitionDuration\": \"3.11.0\",\n \"sliderVariant\": \"4.3.0\"\n }\n },\n \"VTable\": {\n \"props\": {\n \"gridlines\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\"\n }\n },\n \"VTabs\": {\n \"props\": {\n \"inset\": \"3.11.0\",\n \"insetPadding\": \"3.11.0\",\n \"insetRadius\": \"3.11.0\",\n \"spaced\": \"3.10.0\",\n \"sliderTransition\": \"3.11.0\",\n \"sliderTransitionDuration\": \"3.11.0\",\n \"sliderVariant\": \"4.3.0\"\n },\n \"slots\": {\n \"next\": \"3.11.0\",\n \"prev\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-slider-transition\": \"3.11.0\",\n \"prop-spaced\": \"3.10.0\"\n }\n },\n \"VTextarea\": {\n \"props\": {\n \"maxHeight\": \"3.11.0\"\n }\n },\n \"VTextField\": {\n \"props\": {\n \"autocomplete\": \"3.10.0\"\n }\n },\n \"VTimePicker\": {\n \"props\": {\n \"density\": \"3.11.0\",\n \"hideTitle\": \"3.10.0\",\n \"period\": \"3.10.0\",\n \"variant\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-scrollable\": \"4.3.0\"\n }\n },\n \"VTreeview\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"hideActions\": \"3.9.0\",\n \"hideNoData\": \"3.10.0\",\n \"noDataText\": \"3.10.0\",\n \"separateRoots\": \"3.9.0\",\n \"indentLines\": \"3.9.0\",\n \"indentLinesColor\": \"3.12.0\",\n \"indentLinesOpacity\": \"3.12.0\",\n \"itemsRegistration\": \"3.11.0\"\n },\n \"slots\": {\n \"header\": \"3.10.0\",\n \"footer\": \"3.11.0\",\n \"no-data\": \"3.11.0\",\n \"toggle\": \"3.10.0\"\n },\n \"examples\": {\n \"prop-items-registration\": \"3.11.0\",\n \"slot-no-data\": \"3.11.0\",\n \"slot-toggle\": \"3.10.0\"\n }\n },\n \"VTreeviewItem\": {\n \"props\": {\n \"hideActions\": \"3.9.0\",\n \"indentLines\": \"3.9.0\"\n },\n \"slots\": {\n \"toggle\": \"3.10.0\"\n }\n },\n \"VToolbar\": {\n \"props\": {\n \"collapsePosition\": \"3.11.0\",\n \"location\": \"3.12.0\"\n },\n \"examples\": {\n \"prop-location\": \"3.12.0\"\n }\n },\n \"VTooltip\": {\n \"props\": {\n \"eager\": \"3.2.0\",\n \"interactive\": \"3.8.0\",\n \"stickToTarget\": \"3.10.0\",\n \"viewportMargin\": \"3.11.0\",\n \"persistent\": \"3.11.3\"\n },\n \"examples\": {\n \"prop-interactive\": \"3.8.0\"\n }\n },\n \"VVirtualScroll\": {\n \"props\": {\n \"itemKey\": \"3.8.0\"\n }\n },\n \"VWindow\": {\n \"props\": {\n \"crossfade\": \"3.10.0\",\n \"transitionDuration\": \"3.10.0\",\n \"wheel\": \"4.3.0\"\n }\n }\n}\n","packages/docs/src/data/page-to-api.json":"{\n \"components/alerts\": [\"VAlert\", \"VAlertTitle\"],\n \"components/app-bars\": [\n \"VAppBar\",\n \"VAppBarNavIcon\",\n \"VAppBarTitle\"\n ],\n \"components/application\": [\n \"VApp\",\n \"VLayout\",\n \"VLayoutItem\",\n \"VMain\"\n ],\n \"components/aspect-ratios\": [\"VResponsive\"],\n \"components/audio-players\": [\"VAudio\", \"VAudioControls\", \"VAudioWaveform\", \"VMediaProgressBar\", \"VMediaVolume\"],\n \"components/autocompletes\": [\"VAutocomplete\"],\n \"components/avatars\": [\"VAvatar\"],\n \"components/avatar-groups\": [\"VAvatarGroup\"],\n \"components/badges\": [\"VBadge\"],\n \"components/banners\": [\n \"VBanner\",\n \"VBannerActions\",\n \"VBannerText\"\n ],\n \"components/bottom-navigation\": [\"VBottomNavigation\"],\n \"components/bottom-sheets\": [\"VBottomSheet\"],\n \"components/breadcrumbs\": [\n \"VBreadcrumbs\",\n \"VBreadcrumbsDivider\",\n \"VBreadcrumbsItem\"\n ],\n \"components/button-groups\": [\n \"VBtn\",\n \"VBtnGroup\",\n \"VBtnToggle\"\n ],\n \"components/buttons\": [\n \"VBtn\",\n \"VBtnGroup\",\n \"VBtnToggle\"\n ],\n \"components/calendars\": [\n \"VCalendar\",\n \"VCalendarDay\",\n \"VCalendarHeader\",\n \"VCalendarInterval\",\n \"VCalendarIntervalEvent\",\n \"VCalendarMonthDay\"\n ],\n \"components/cards\": [\n \"VCard\",\n \"VCardActions\",\n \"VCardItem\",\n \"VCardSubtitle\",\n \"VCardText\",\n \"VCardTitle\"\n ],\n \"components/carousels\": [\"VCarousel\", \"VCarouselItem\"],\n \"components/checkboxes\": [\"VCheckbox\", \"VCheckboxBtn\"],\n \"components/chip-groups\": [\"VChip\", \"VChipGroup\"],\n \"components/chips\": [\"VChip\", \"VChipGroup\"],\n \"components/color-inputs\": [\"VColorInput\", \"VColorPicker\"],\n \"components/color-pickers\": [\"VColorPicker\"],\n \"components/combobox\": [\"VCombobox\"],\n \"components/command-palettes\": [\"VCommandPalette\", \"VCommandPaletteItem\"],\n \"components/confirm-edit\": [\"VConfirmEdit\"],\n \"components/data-iterators\": [\"VDataIterator\"],\n \"components/date-inputs\": [\"VDateInput\", \"VDatePicker\"],\n \"components/date-pickers-month\": [\"VDatePicker\"],\n \"components/date-pickers\": [\"VDatePicker\", \"VDateInput\"],\n \"components/date-range-pickers\": [\"VDateRangePicker\"],\n \"components/defaults-providers\": [\"VDefaultsProvider\"],\n \"components/data-tables\": [\n \"VDataTable\",\n \"VDataTableFooter\",\n \"VDataTableRow\",\n \"VDataTableRows\",\n \"VDataTableServer\",\n \"VDataTableVirtual\"\n ],\n \"components/data-tables/server-side-tables\": [\n \"VDataTableServer\"\n ],\n \"components/data-tables/virtual-tables\": [\n \"VDataTableVirtual\"\n ],\n \"components/dialogs\": [\"VDialog\", \"VOverlay\"],\n \"components/dividers\": [\"VDivider\"],\n \"components/empty-states\": [\"VEmptyState\"],\n \"components/expansion-panels\": [\n \"VExpansionPanel\",\n \"VExpansionPanels\",\n \"VExpansionPanelText\",\n \"VExpansionPanelTitle\"\n ],\n \"components/file-inputs\": [\"VFileInput\"],\n \"components/file-upload\": [\"VFileUpload\"],\n \"components/floating-action-buttons\": [\"VFab\"],\n \"components/footers\": [\"VFooter\"],\n \"components/forms\": [\"VForm\"],\n \"components/grids\": [\"VCol\", \"VContainer\", \"VRow\", \"VSpacer\"],\n \"components/heatmaps\": [\"VHeatmap\", \"VHeatmapCell\", \"VHeatmapLegend\", \"VHeatmapLegendCell\"],\n \"components/highlights\": [\"VHighlight\"],\n \"components/hotkeys\": [\"VHotkey\"],\n \"components/hover\": [\"VHover\"],\n \"components/icon-buttons\": [\"VIconBtn\"],\n \"components/icons\": [\"VIcon\"],\n \"components/images\": [\"VImg\"],\n \"components/infinite-carousels\": [\"VInfiniteCarousel\"],\n \"components/loading-indicators\": [\"VLoadingIndicator\"],\n \"components/infinite-scroller\": [\"VInfiniteScroll\"],\n \"components/inputs\": [\"VInput\"],\n \"components/item-groups\": [\"VItem\", \"VItemGroup\"],\n \"components/lazy\": [\"VLazy\"],\n \"components/lists\": [\n \"VList\",\n \"VListGroup\",\n \"VListItem\",\n \"VListItemAction\",\n \"VListItemMedia\",\n \"VListItemSubtitle\",\n \"VListItemTitle\",\n \"VListSubheader\",\n \"VListImg\"\n ],\n \"components/locale-providers\": [\"VLocaleProvider\"],\n \"components/mask-inputs\": [\"VMaskInput\"],\n \"components/menus\": [\"VMenu\"],\n \"components/navigation-drawers\": [\"VNavigationDrawer\"],\n \"components/no-ssr\": [\"VNoSsr\"],\n \"components/month-pickers\": [\"VMonthPicker\"],\n \"components/number-inputs\": [\"VNumberInput\"],\n \"components/otp-input\": [\"VOtpInput\", \"VOtpField\", \"VOtpGroup\", \"VOtpSeparator\"],\n \"components/overlays\": [\"VOverlay\"],\n \"components/paginations\": [\"VPagination\"],\n \"components/parallax\": [\"VParallax\"],\n \"components/pie-charts\": [\"VPie\", \"VPieSegment\", \"VPieTooltip\"],\n \"components/progress\": [\"VProgress\"],\n \"components/progress-circular\": [\"VProgressCircular\"],\n \"components/progress-linear\": [\"VProgressLinear\"],\n \"components/pull-to-refresh\": [\"VPullToRefresh\"],\n \"components/radio-buttons\": [\"VRadio\", \"VRadioGroup\"],\n \"components/range-sliders\": [\"VRangeSlider\", \"VSlider\"],\n \"components/ratings\": [\"VRating\"],\n \"components/selects\": [\"VSelect\"],\n \"components/sheets\": [\"VSheet\"],\n \"components/skeleton-loaders\": [\"VSkeletonLoader\"],\n \"components/slide-groups\": [\"VSlideGroup\", \"VSlideGroupItem\"],\n \"components/sliders\": [\"VRangeSlider\", \"VSlider\"],\n \"components/snackbar-queue\": [\"VSnackbarQueue\", \"VSnackbar\"],\n \"components/snackbars\": [\"VSnackbar\"],\n \"components/sparklines\": [\"VSparkline\", \"VSparklineTooltip\"],\n \"components/speed-dials\": [\"VSpeedDial\"],\n \"components/split-buttons\": [\"VSplitBtn\"],\n \"components/steppers\": [\n \"VStepper\",\n \"VStepperHeader\",\n \"VStepperItem\",\n \"VStepperWindow\",\n \"VStepperWindowItem\"\n ],\n \"components/switches\": [\"VSwitch\"],\n \"components/system-bars\": [\"VSystemBar\"],\n \"components/tables\": [\"VTable\"],\n \"components/tabs\": [\"VTabs\", \"VTab\"],\n \"components/text-fields\": [\"VTextField\"],\n \"components/textareas\": [\"VTextarea\"],\n \"components/theme-providers\": [\"VThemeProvider\"],\n \"components/time-pickers\": [\"VTimePicker\"],\n \"components/time-inputs\": [\"VTimeInput\", \"VTimePicker\"],\n \"components/timelines\": [\"VTimeline\", \"VTimelineItem\"],\n \"components/toolbars\": [\"VToolbar\", \"VToolbarItems\", \"VToolbarTitle\"],\n \"components/tooltips\": [\"VTooltip\"],\n \"components/treeview\": [\n \"VTreeview\",\n \"VTreeviewItem\",\n \"VTreeviewChildren\",\n \"VTreeviewGroup\"\n ],\n \"components/vertical-steppers\": [\"VStepperVertical\", \"VStepperVerticalActions\", \"VStepperVerticalItem\"],\n \"components/videos\": [\"VVideo\", \"VVideoControls\", \"VMediaProgressBar\", \"VMediaVolume\"],\n \"components/virtual-scroller\": [\"VVirtualScroll\"],\n \"components/windows\": [\"VWindow\", \"VWindowItem\"],\n \"directives/click-outside\": [\"v-click-outside\"],\n \"directives/intersect\": [\"v-intersect\"],\n \"directives/mutate\": [\"v-mutate\"],\n \"directives/resize\": [\"v-resize\"],\n \"directives/ripple\": [\"v-ripple\"],\n \"directives/scroll\": [\"v-scroll\"],\n \"directives/touch\": [\"v-touch\"],\n \"directives/touch-hold\": [\"v-touch-hold\"],\n \"directives/tooltip\": [\"v-tooltip\"],\n \"features/dates\": [\"useDate\"],\n \"features/display-and-platform\": [\"useDisplay\"],\n \"features/hotkey\": [\"useHotkey\"],\n \"features/scrolling\": [\"useGoTo\"],\n \"features/global-configuration\": [\"VDefaultsProvider\"],\n \"features/internationalization\": [\"useLocale\", \"VLocaleProvider\"],\n \"features/theme\": [\"useTheme\", \"VThemeProvider\"],\n \"styles/transitions\": [\n \"VDialogBottomTransition\",\n \"VDialogTopTransition\",\n \"VDialogTransition\",\n \"VExpandTransition\",\n \"VExpandXTransition\",\n \"VFabTransition\",\n \"VFadeTransition\",\n \"VScaleTransition\",\n \"VScrollXTransition\",\n \"VScrollXReverseTransition\",\n \"VScrollYTransition\",\n \"VScrollYReverseTransition\",\n \"VSlideXTransition\",\n \"VSlideXReverseTransition\",\n \"VSlideYTransition\",\n \"VSlideYReverseTransition\"\n ]\n}\n","packages/docs/src/data/team.json":"{\n \"johnleider\": {\n \"discord\": \"johnleider\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/johnleider)\",\n \"[Paypal](https://paypal.me/vuetify)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"john-leider-626183a2\",\n \"location\": \"Keller, TX, USA\",\n \"name\": \"John Leider\",\n \"team\": \"company\",\n \"twitter\": \"zeroskillz\",\n \"work\": \"Engineer @ Vuetify\",\n \"joined\": \"Jun 2016\"\n },\n \"heatherleider\": {\n \"discord\": \"heatherleider\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Keller, TX, USA\",\n \"name\": \"Heather Leider\",\n \"team\": \"company\",\n \"twitter\": \"grneyedgrl01\",\n \"work\": \"COO @ Vuetify\",\n \"joined\": \"Nov 2019\"\n },\n \"KaelWD\": {\n \"discord\": \"kaelwd\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\",\n \"[vuetify-loader](https://github.com/vuetifyjs/vuetify-loader)\",\n \"[eslint-plugin-vuetify](https://github.com/vuetifyjs/eslint-plugin-vuetify)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/kaelwd)\",\n \"[Patreon](https://patreon.com/kaelwd)\",\n \"[Open Collective](https://opencollective.com/vuetify)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Melbourne, Australia\",\n \"name\": \"Kael Watts-Deuchar\",\n \"team\": \"core\",\n \"joined\": \"Oct 2017\"\n },\n \"nekosaur\": {\n \"discord\": \".nekosaur\",\n \"languages\": [\n \"Swedish\",\n \"English\"\n ],\n \"location\": \"Malmö, Sweden\",\n \"name\": \"Albert Kaaman\",\n \"team\": \"legends\",\n \"joined\": \"Jun 2017\"\n },\n \"MajesticPotatoe\": {\n \"discord\": \"majesticpotatoe\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\",\n \"[vuetifyjs/docs](https://github.com/vuetifyjs/vuetify/tree/master/packages/docs)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/majesticpotatoe)\",\n \"[Open Collective](https://opencollective.com/vuetify)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"andrew-henry-01049830\",\n \"location\": \"Rochester, NY, USA\",\n \"name\": \"Andrew Henry\",\n \"team\": \"core\",\n \"twitter\": \"SeeMWhyK\",\n \"joined\": \"Dec 2018\"\n },\n \"blalan05\": {\n \"discord\": \"blalan05\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"blalan05\",\n \"location\": \"Wisconsin, USA\",\n \"name\": \"Blaine Landowski\",\n \"team\": \"core\",\n \"work\": \"CEO at Foundational Technologies LLC\",\n \"joined\": \"Feb 2021\"\n },\n \"userquin\": {\n \"discord\": \"userquin\",\n \"focus\": [\n \"[vuetifyjs/create](https://github.com/vuetifyjs/create)\",\n \"[Nuxt](https://github.com/userquin/vuetify-nuxt-module)\"\n ],\n \"languages\": [\n \"Spanish\",\n \"English\"\n ],\n \"location\": \"Madrid, Spain\",\n \"name\": \"Joaquín Sánchez\",\n \"twitter\": \"userquin\",\n \"team\": \"core\",\n \"joined\": \"Mar 2024\"\n },\n \"MatthewAry\": {\n \"discord\": \"bitshift_\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Spokane, WA, USA\",\n \"name\": \"Matthew Ary\",\n \"twitter\": \"MatthewAry\",\n \"linkedin\": \"matthewary\",\n \"work\": \"Director of Product Development at Symplsoft Inc.\",\n \"team\": \"core\",\n \"joined\": \"May 2024\"\n },\n \"J-Sek\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/j-sek.png\",\n \"discord\": \"jacek#1420\",\n \"focus\": [\n \"[vuetifyjs/vuetify](https://github.com/vuetifyjs/vuetify)\"\n ],\n \"languages\": [\n \"Polish\",\n \"English\"\n ],\n \"location\": \"Gdańsk, Poland\",\n \"name\": \"Jacek Czarniecki\",\n \"team\": \"core\",\n \"joined\": \"Nov 2024\"\n },\n \"Spatlani\": {\n \"name\": \"Shubham Patlani\",\n \"team\": \"core\",\n \"discord\": \"spatlani\",\n \"focus\": [\"[vuetifyjs/*](https://github.com/vuetifyjs)\"],\n \"languages\": [\"English\", \"Hindi\", \"Punjabi\"],\n \"linkedin\": \"spatlani\",\n \"github\": \"spatlani\",\n \"avatar\": \"https://avatars.githubusercontent.com/u/11574195\",\n \"location\": \"Delhi, India\",\n \"joined\": \"March 2025\"\n },\n \"Haviles04\": {\n \"name\": \"Henry Aviles\",\n \"team\": \"core\",\n \"discord\": \"hankthetank4\",\n \"linkedin\": \"henry-aviles\",\n \"focus\": [\"[One](https://github.com/vuetifyjs/one)\"],\n \"languages\": [\"English\"],\n \"joined\": \"March 2025\",\n \"location\": \"Huntington, NY, USA\"\n },\n \"ikushum\": {\n \"name\": \"Ishan Subedi\",\n \"team\": \"core\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"Nepali\",\n \"English\"\n ],\n \"discord\": \"ikushum\",\n \"linkedin\": \"ikushum\",\n \"joined\": \"March 2025\",\n \"location\": \"Kathmandu, Nepal\",\n \"avatar\": \"https://avatars.githubusercontent.com/u/17315781\"\n },\n \"AndreyYolkin\": {\n \"name\": \"Andrei Elkin\",\n \"team\": \"core\",\n \"discord\": \"yol_kin\",\n \"focus\": [\n \"[vuetifyjs/create](https://github.com/vuetifyjs/create)\",\n \"[vuetify-loader](https://github.com/vuetifyjs/vuetify-loader)\",\n \"[Nuxt](https://github.com/vuetifyjs/nuxt-module)\"\n ],\n \"languages\": [\n \"Polish\",\n \"English\",\n \"Russian\"\n ],\n \"location\": \"Kraków, Poland\",\n \"linkedin\": \"yolkin\",\n \"joined\": \"March 2025\"\n },\n \"jcjp\": {\n \"name\": \"JC Puno\",\n \"team\": \"core\",\n \"discord\": \"psi#8085\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\",\n \"[Nuxt](https://github.com/userquin/vuetify-nuxt-module)\"\n ],\n \"languages\": [\n \"Tagalog / Filipino\",\n \"English\"\n ],\n \"location\": \"Manila, Philipines\",\n \"joined\": \"March 2025\"\n },\n \"oumoussa98\": {\n \"name\": \"Abdelouahed Oumoussa\",\n \"team\": \"core\",\n \"discord\": \"oumoussa\",\n \"twitter\": \"oumoussa_\",\n \"github\": \"oumoussa98\",\n \"linkedin\": \"aoumoussa\",\n \"avatar\": \"https://gravatar.com/avatar/7d1a8ba680ab9d49bd9cdaeff05d0e76\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"Arabic\",\n \"English\"\n ],\n \"joined\": \"March 2025\",\n \"location\": \"Casablanca, Morocco\"\n },\n \"yuwu9145\": {\n \"discord\": \"yuwu9145\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\",\n \"Chinese(Mandarin)\"\n ],\n \"location\": \"Melbourne, Australia\",\n \"name\": \"Yuchao Wu\",\n \"team\": \"legends\",\n \"joined\": \"Mar 2023\"\n },\n \"kieuminhcanh\": {\n \"discord\": \"kieuminhcanh\",\n \"focus\": [\n \"[vuetifyjs/studio](https://github.com/vuetifyjs/studio)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/kieuminhcanh)\",\n \"[Patreon](https://patreon.com/kieuminhcanh)\",\n \"[Open Collective](https://opencollective.com/vuetify)\"\n ],\n \"languages\": [\n \"English\",\n \"Vietnamese\"\n ],\n \"location\": \"California, US\",\n \"name\": \"Ken Kieu\",\n \"team\": \"legends\",\n \"twitter\": \"kieuminhcanh\",\n \"joined\": \"April 2024\"\n },\n \"jacekkarczmarczyk\": {\n \"discord\": \"jacek#3542\",\n \"languages\": [\n \"Polish\",\n \"English\"\n ],\n \"location\": \"Warsaw, Poland\",\n \"name\": \"Jacek Karczmarczyk\",\n \"team\": \"legends\"\n },\n \"chewy94\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/chewy94.jpg\",\n \"discord\": \"Sean Kimball#0001\",\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"sean-kimball-b50922126\",\n \"location\": \"Goodyear, Arizona, USA\",\n \"name\": \"Sean Kimball\",\n \"team\": \"legends\"\n },\n \"bdeo\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/bdeo.jpg\",\n \"discord\": \"brandondeo#0001\",\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"brandondeo\",\n \"location\": \"Philadelphia, PA, USA\",\n \"name\": \"Brandon Deo\",\n \"team\": \"legends\"\n },\n \"ElijahKotyluk\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/ElijahKotyluk.jpg\",\n \"discord\": \"edk#4363\",\n \"languages\": [\n \"English\"\n ],\n \"location\": \"USA\",\n \"name\": \"Elijah Kotyluk\",\n \"team\": \"legends\"\n },\n \"santiagoaloi\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/santiagoaloi.jpg\",\n \"discord\": \"lannnister\",\n \"languages\": [\n \"Swedish\",\n \"English\",\n \"Spanish\"\n ],\n \"linkedin\": \"santiagoaloi\",\n \"location\": \"Stockholm, Sweden\",\n \"name\": \"Santiago Aloi\",\n \"team\": \"legends\",\n \"joined\": \"Feb 2023\"\n },\n \"yooneskh\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/yooneskh.png\",\n \"discord\": \"YoonesKh#7826\",\n \"languages\": [\n \"English\",\n \"Persian\"\n ],\n \"twitter\": \"yooneskh\",\n \"linkedin\": \"yooneskh \",\n \"location\": \"Iran\",\n \"name\": \"Yoones Khoshghadam\",\n \"team\": \"legends\",\n \"joined\": \"January 2023\"\n },\n \"elvinagarcia\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/elvinagarcia.png\",\n \"discord\": \"elvinagarcia\",\n \"focus\": [\n \"Design/Animations\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Virginia, USA\",\n \"name\": \"Elvina Garcia\",\n \"team\": \"legends\",\n \"joined\": \"Feb 2023\"\n }\n}\n","packages/docs/src/pages/en/about/code-of-conduct.md":"---\nmeta:\n title: Code of conduct\n description: Vuetify provides a safe, inclusive, and judgment free community for developers from all walks of life!\n keywords: vuetify code of conduct, vuetify coc, community conduct\n---\n\n# Code of conduct\n\nFor questions or concerns regarding our *Code of Conduct*, please reach out to us at [support@vuetifyjs.com](mailto:support@vuetifyjs.com).\n\n\n\n\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@vuetifyjs.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant](https://contributor-covenant.org), version 1.4, available at [https://contributor-covenant.org/version/1/4](https://contributor-covenant.org/version/1/4/)\n","packages/docs/src/pages/en/about/incidents/2026-06-nyven-infostealer.md":"---\nmeta:\n nav: Discord takeover (June 2026)\n title: 'Incident report: Discord takeover (June 2026)'\n description: An infostealer on a maintainer's machine led to the takeover of the Vuetify Discord account. No Vuetify packages, releases, or user data were affected.\n keywords: vuetify security incident, infostealer, discord account takeover, extortion, incident report, nyven\nrelated:\n - /about/security-disclosure/\n - /introduction/enterprise-support/\n - /introduction/long-term-support/\n---\n\n# Incident report June 2026\n\nThis page documents the June 2026 security incident affecting Vuetify's Discord support account.\n\n\n\n::: info\n**TLDR:** On 2026-06-03, a Vuetify maintainer's personal machine was compromised by a commodity infostealer after a social-engineering lure. The attacker used credentials harvested from the browser to take over the Vuetify Discord support account, added 2FA to lock the owner out, and sent an extortion demand, which was refused. No Vuetify package, source, release, CI pipeline, or user data was affected. The Discord account was recovered on 2026-06-10, but the original community server was deleted and cannot be restored; the community now lives on a replacement server — see [Where to find us now](#where-to-find-us-now).\n:::\n\n## Summary { #summary }\n\nOn 2026-06-03, a Vuetify maintainer ran an unsigned installer that was a packaged infostealer. It harvested the credentials, cookies, and autofill data saved in the browser and exfiltrated them.\n\nThe attacker used those credentials to take over the Vuetify Discord support account. After taking control, the attacker added 2FA to lock the owner out and sent an extortion demand under threat to leak and sell the data. The demand was refused and no payment was made.\n\nThe compromise was limited to one personal machine and the accounts reachable from it. No part of Vuetify's software supply chain was affected.\n\n## What was and was not affected { #scope }\n\n| Asset | Status |\n| - | - |\n| **npm packages & releases** | **Not affected.** No package was modified, tampered with, or published. |\n| **Source & GitHub org** | **Not affected.** No repository, branch, tag, or release was altered. |\n| **CI/CD & infrastructure** | **Not affected.** |\n| **User data & databases** | **Not affected.** |\n| **Google Workspace** | **Not breached.** The `vuetifyjs.com` account was auto-suspended by Google as a precaution; the password was reset and control retained. |\n| **Discord support account** | **Recovered (2026-06-10).** The attacker added 2FA after taking it over; the account was later recovered, but the original community server was deleted and cannot be restored, per Discord support. |\n| **Browser-stored secrets** | **Exposed.** Saved credentials, cookies, and autofill on the affected machine are treated as compromised and have been rotated or removed pending an internal audit. |\n| **Developer tokens & keys** | **Treated as exposed.** Tokens on the host, including those with npm/GitHub access, have been rotated or removed and their sessions revoked, pending an internal audit. No evidence any were used against project infrastructure. |\n\nCredentials and tokens on the machine that could reach npm or GitHub have been rotated or removed pending an internal audit. Vuetify's release pipeline already enforces several layers of protection, including OIDC-based trusted publishing to npm and mandatory two-factor authentication, which limit what any single stolen credential can do. There is no sign any were used against Vuetify's packages, repositories, or releases, and all areas of the ecosystem are being actively monitored for suspicious activity. No action is required of users.\n\n## Timeline { #timeline }\n\nAll times are UTC on 2026-06-03 unless noted. Approximate times are marked with `~`.\n\n| Time (UTC) | Event | Detail |\n| - | - | - |\n| `~17:00` | Installer downloaded | The unsigned installer was downloaded from the throwaway site. |\n| `17:06` | Malware executed | The installer was run; the infostealer harvested browser-stored credentials and cookies and exfiltrated them. |\n| `17:08` | Host isolated | The machine was disconnected from the network. |\n| `17:16` | Extortion email received | The attacker emailed claiming to hold the stolen passwords, cookies, and autofill data. |\n| `17:25` | Refused to engage | The attacker's contact was declined. |\n| `~17:46–17:58` | Discord account takeover | The attacker used the stolen credentials to seize the Vuetify support account and added 2FA to lock the owner out. |\n| `18:06` | Email/GitHub secured | Email and GitHub passwords were changed and all sessions forced to re-authenticate. |\n| `18:10` | OAuth revoked | Third-party OAuth grants were revoked and active sessions cut. |\n| `18:25` | Payment demanded | The attacker demanded payment under threat to leak and sell the data; no payment was made. |\n| `2026-06-04` | Discord recovery blocked | Self-service recovery failed because of the attacker-added 2FA; a recovery case was opened with Discord. |\n| `2026-06-05` | Replacement server opened | A new Vuetify Discord server was opened as the verified home for the community. |\n| `2026-06-10` | Account recovered; server lost | The support account was recovered. Discord support confirmed the original server was deleted and cannot be restored. |\n\n## Root cause { #root-cause }\n\nThe maintainer was led to a throwaway website and ran an unsigned installer that was malware. Because credentials were stored in the browser, a single execution exposed the full set at once.\n\n## Discord outcome { #discord-recovery }\n\nThe Vuetify Discord support account has been recovered. The original community server, however, was deleted, and Discord support has confirmed there is no ability to restore it — the loss of the server, its channels, and its message history is permanent.\n\nA replacement server was opened while recovery was pending and is now the official home of the Vuetify community on Discord. The verified invite is in [Where to find us now](#where-to-find-us-now).\n\nThe exfiltration channel and the attacker's delivery infrastructure have been reported to the relevant platforms.\n\n## Where to find us now { #where-to-find-us-now }\n\n::: warning\nThe original server is permanently gone. We have started rebuilding and you can request an invite by going to [https://community.vuetifyjs.com](https://community.vuetifyjs.com).\n\nIf any other server, or any direct message, claims to be us and asks for money, credentials, or 2FA codes, it is not us.\n:::\n\nChanges to the official channels will be posted here and on [vuetifyjs.com](https://vuetifyjs.com), the [GitHub organization](https://github.com/vuetifyjs), and [@vuetifyjs on X](https://x.com/vuetifyjs).\n\n## For security researchers and organizations { #coordinated-disclosure }\n\nA complete evidence package has been preserved: forensic artifacts, the full set of indicators of compromise, and the malware sample. Security vendors, researchers, CERT/CSIRTs, and platform trust-and-safety teams that can action it can request it at [security@vuetifyjs.com](mailto:security@vuetifyjs.com?subject=INCIDENT) (subject: INCIDENT).\n\nA subset of indicators is published below; the complete set is available on request.\n\n### Indicators (public subset) { #indicators }\n\n- Malware family: a commodity \"Nyven\" infostealer (Electron dropper delivering an obfuscated Java credential grabber).\n- Delivery: an unsigned installer (`NyvenSetupV1.exe`) downloaded from a throwaway `*.pages.dev` site (`nyvanbeta.pages.dev`).\n- Behavior: harvests browser-stored credentials, cookies, and autofill data and exfiltrates them over a Discord channel.\n\nFull indicators (file hashes, exfiltration channel identifiers, and build metadata) are withheld here to avoid interfering with platform recovery, and are shared with vetted parties on request.\n\n## Contact { #contact }\n\nQuestions about this incident, or related information, can be sent to [security@vuetifyjs.com](mailto:security@vuetifyjs.com?subject=INCIDENT)\n\n---\n\n### Updates { #updates }\n\nDated entries are added here rather than editing the report above.\n\n| Date | Update |\n| - | - |\n| 2026-06-05 | Initial publication. |\n| 2026-06-10 | The Discord support account has been recovered. Discord support confirmed the original server was deleted and cannot be restored; the replacement server is now active at [https://community.vuetifyjs.com](https://community.vuetifyjs.com). |\n","packages/docs/src/pages/en/about/licensing.md":"---\nmeta:\n nav: Licensing\n title: Licensing\n description: Vuetify is available under the MIT License — understand your freedoms to use, modify, and distribute it, and how community contributions are licensed.\n keywords: MIT License, open source, Vuetify license, free software\nrelated:\n - /introduction/why-vuetify/\n - /getting-started/contributing/\n - /introduction/enterprise-support/\n---\n\n# Licensing\n\nThis document provides comprehensive details about the licensing of the Vuetify framework.\n\n\n\n\n\n## Overview\n\nVuetify is an open-source project that is free to use. It is licensed under the [MIT License](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md), one of the most permissive and flexible open source licenses available.\n\n## What is the MIT License?\n\nThe MIT License is one of the most widely used licenses in the open-source community, known for its simplicity and permissiveness. This license grants users significant freedom in how they use, modify, and distribute software. Here are its key features and what they mean for Vuetify users:\n\n- **Freedom to Use**: The MIT License allows you to use Vuetify for any purpose - whether it's a private hobby project, a high-scale commercial application, or a public service. This level of freedom ensures that Vuetify is accessible to everyone, regardless of their project's nature or scale.\n- **Freedom to Modify**: Flexibility is at the core of Vuetify, and the MIT License extends this principle. You have the freedom to tweak, customize, and modify Vuetify to suit your project's unique requirements. This feature is particularly beneficial for developers looking to tailor their UI/UX without constraints.\n- **Freedom to Distribute**: The license not only allows you to use and modify Vuetify but also to distribute your version of it. Whether you're distributing your Vuetify-based project openly or commercially, the MIT License supports your endeavors. This aspect is crucial for fostering a culture of sharing and innovation in the developer community.\n- **No Warranty**: Please note that Vuetify is provided \"as is\", without any warranty of any kind. This is a standard clause in open-source licenses, emphasizing that users should test and evaluate the software in their specific contexts. While there's no formal warranty, the Vuetify team is committed to delivering a high-quality, robust framework, continuously working to improve its reliability and functionality.\n\nThe MIT License's simplicity and breadth make it an ideal choice for Vuetify, aligning with our commitment to open-source values and community-driven development.\n\n## Why MIT License for Vuetify?\n\nChoosing the MIT License for Vuetify was a deliberate decision to align with our core values of openness, simplicity, and community collaboration. Here’s why this license is the perfect fit for Vuetify:\n\n- **Simplicity and Permissiveness**: The MIT License is renowned for its simplicity and clarity. It doesn't impose complex restrictions, making it straightforward for developers to use Vuetify in various projects. Whether you're building a small personal project or a large-scale commercial application, the MIT License keeps things simple and unrestricted.\n- **Broad Compatibility**: One of Vuetify's strengths is its compatibility with a wide range of other tools and libraries. The MIT License is known for its broad compatibility with other open-source licenses. This compatibility makes it easier for developers to integrate Vuetify with other software, fostering a more vibrant and versatile ecosystem.\n- **Encourages Open Source Contribution**: Vuetify thrives on community contributions. The permissive nature of the MIT License encourages developers from around the world to contribute to Vuetify, enhancing its features and functionality. This collaborative spirit has been pivotal in shaping Vuetify into the robust and versatile framework it is today.\n\nBy adopting the MIT License, Vuetify remains committed to promoting innovation, collaboration, and freedom in software development. We believe this approach not only benefits Vuetify but also the broader open-source community.\n\n## Using Vuetify in Your Projects\n\nYou are free to use Vuetify in your projects, be it personal, commercial, or for educational purposes. The flexibility of the MIT License allows for a wide range of applications. When redistributing Vuetify or derivative works, the only requirement is to include the original copyright and license notice in any copy of the software/source code.\n\nTo get inspired or see what's possible with Vuetify, check out [Awesome Vuetify](https://github.com/vuetifyjs/awesome-vuetify), a curated list of awesome Vuetify resources, libraries, and tools. Additionally, explore the [Made With Vuetify](/resources/made-with-vuetify/) page to see a showcase of applications and projects built using Vuetify. These resources can provide you with ideas and examples of how Vuetify can enhance your projects.\n\n## Contributions to Vuetify\n\nContributions to Vuetify are also subject to the MIT License. By contributing to the Vuetify project, you agree that your contributions will be licensed under the MIT License. See our [Contributing](/getting-started/contributing/) page for more details.\n\n## Questions and Comments\n\nIf you have any questions or comments about our licensing policy, or if you need clarification on legal aspects of using Vuetify in your projects, please [contact us](mailto:hello@vuetifyjs.com).\n\n## Legal Disclaimer\n\nThe information provided on this page is for general informational purposes only and is not intended as legal advice. For specific legal questions regarding the use of Vuetify, please consult with a qualified attorney.\n","packages/docs/src/pages/en/about/meet-the-team.md":"---\nmeta:\n title: Meet the team\n description: Meet the team responsible for building Vuetify. These are the core individuals who drive the vision of the framework.\n keywords: vuetify dev team, vuetify core team\nrelated:\n - /introduction/enterprise-support/\n - /introduction/long-term-support/\n - /introduction/roadmap/\n---\n\n# Meet the team\n\nVuetify is _not_ a one person show. We have a very active and engaged team that is **constantly striving** to bring developers a better experience. Keep in mind the below is not an exhaustive list of all the individuals that help make Vuetify great.\n\n\n\n\n\n## Company\n\nVuetify (the framework) is [MIT Licensed](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md) and [Open Source](https://opensource.com/resources/what-open-source). You can support the ongoing development of Vuetify by sponsoring the project on [GitHub](https://github.com/sponsors/johnleider).\n\n\n\n## Core Team\n\nThe core development team are Open Source developers that help guide the direction of Vuetify and its ecosystem.\n\n\n\n\n\n## Legends\n\nLegends are inactive members of the core team. They have contributed a significant amount of time and effort to the project and are recognized for their contributions.\n\n\n","packages/docs/src/pages/en/about/security-disclosure.md":"---\nmeta:\n nav: Security disclosure\n title: Security disclosure procedures\n description: This document outlines security procedures and general policies for the Vuetify project.\n keywords: security, security vulnerability, disclosure policy, security disclosure\nrelated:\n - /introduction/enterprise-support/\n - /getting-started/contributing/\n - /introduction/long-term-support/\n---\n\n# Security disclosure procedures\n\nThis document outlines security procedures and general policies for the Vuetify project.\n\n\n\n\n\n## Incidents\n\nIn the interest of transparency, confirmed security incidents that affect Vuetify or its community are logged here, each linking to a full public report.\n\n| Date | Incident | Severity | Status | Report |\n| - | - | - | - | - |\n| 2026-06-03 | Maintainer endpoint compromise → Discord account takeover & extortion | High | Contained — Discord recovery ongoing | [Read the report](/about/incidents/2026-06-nyven-infostealer/) |\n\n::: warning\nThe Vuetify Discord support account was taken over in the June 2026 incident and has not yet been recovered. Until it is restored, the only verified home for our community on Discord is **[vtfy.link/discord-fallback](https://vtfy.link/discord-fallback)**. Anyone using the old server — or a DM — to ask you for money, credentials, or 2FA codes is not us.\n:::\n\n## Reporting a Bug\n\nThe Vuetify team and community take all security bugs in Vuetify seriously. We appreciate your efforts and responsible disclosure and will make every effort to acknowledge your contributions.\n\nTo report a security issue, email [security@vuetifyjs.com](mailto:security@vuetifyjs.com?subject=SECURITY) and include the word **\\\"SECURITY\\\"** in the subject line.\n\nThe Vuetify team will send a response indicating the next steps in handling your report. After the initial reply to your report, the security team will keep you informed of the progress towards a fix and full announcement, and may ask for additional information or guidance.\n\nReport security bugs in third-party modules to the person or team maintaining the module.\n\n## Disclosure Policy\n\nWhen the security team receives a security bug report, they will assign it to a primary handler. This person will coordinate the fix and release process, involving the following steps:\n\n- Confirm the problem and determine the affected versions.\n- Audit code to find any potential similar problems.\n- Prepare fixes for all releases still under maintenance.These fixes will be released as fast as possible to npm.\n\n## Comments on this Policy\n\nIf you have suggestions on how this process could be improved please submit a pull request using the [issue creator](https://issues.vuetifyjs.com).\n","packages/docs/src/pages/en/api/[name].md":"---\nlayout: blank\nmeta:\n title: API\n description: API documentation\n keywords: api, vuetify\n---\n\n\n\n\n\n# {{ name }} API\n\n\n\n\n\n\n\n\n\n\n","packages/docs/src/pages/en/api/use-hotkey.md":"---\nmeta:\n title: useHotkey API\n description: API documentation for the useHotkey composable\n keywords: useHotkey, hotkey, keyboard shortcuts, composable, api\n---\n\n\n\n# useHotkey API\n\nHandle keyboard shortcuts within your application using the **useHotkey** composable.\n\n\n\n\n\n\n\n\n\n## Function Signature\n\n```typescript\nfunction useHotkey(\n keys: MaybeRef,\n callback: (e: KeyboardEvent) => void,\n options?: HotkeyOptions\n): () => void\n```\n\n## Parameters\n\n
\n \n \n \n \n \n Name\n Type\n Default\n Description\n \n \n \n \n \n keys\n \n \n MaybeRef<string | undefined>\n \n \n required\n \n \n

The key combination string or reactive reference to a key combination. Supports modifiers (ctrl, cmd, alt, shift, meta) and key sequences separated by dashes. Changes to reactive refs are automatically applied.

\n \n \n \n \n callback\n \n \n (e: KeyboardEvent) => void\n \n \n required\n \n \n

Function to execute when the hotkey is triggered. Receives the KeyboardEvent as a parameter.

\n \n \n \n \n options\n \n \n HotkeyOptions\n \n \n {}\n \n \n

Optional configuration object to customize hotkey behavior. All options support reactive refs and will update automatically when changed.

\n \n \n \n \n \n
\n\n## Options\n\n
\n \n \n \n \n \n Name\n Type\n Default\n Description\n \n \n \n \n \n event\n \n \n MaybeRef<'keydown' | 'keyup'>\n \n \n 'keydown'\n \n \n

The keyboard event type to listen for. Can be reactive - changing this will automatically re-register the event listener.

\n \n \n \n \n inputs\n \n \n MaybeRef<boolean>\n \n \n false\n \n \n

Whether to trigger hotkeys when input elements (input, textarea, contenteditable) are focused. When false, hotkeys are disabled in input contexts. Changes to reactive refs take effect immediately.

\n \n \n \n \n preventDefault\n \n \n MaybeRef<boolean>\n \n \n true\n \n \n

Whether to call preventDefault() on the keyboard event when the hotkey matches. Can be reactive to dynamically control event prevention.

\n \n \n \n \n sequenceTimeout\n \n \n MaybeRef<number>\n \n \n 1000\n \n \n

Timeout in milliseconds for key sequences. If the next key in a sequence isn't pressed within this time, the sequence resets. Changes to reactive refs apply to new sequences.

\n \n \n \n \n \n
\n\n## Return Value\n\n
\n \n \n \n \n \n Type\n Description\n \n \n \n \n \n () => void\n \n \n

Cleanup function that removes the keyboard event listener. Automatically called when the component unmounts if used within a Vue component setup context.

\n \n \n \n \n \n
\n","packages/docs/src/pages/en/blog/announcing-vuetify-3.8.md":"---\nlayout: blog\nmeta:\n title: Announcing Vuetify v3.8\n description: Vuetify v3.8 is here! Discover the latest features, improvements, and bug fixes in this minor release, including new components and form input enhancements.\n keywords: Vuetify v3.8, VNumberInput, VSnackbarQueue, VDataTable, VTooltip, VDateInput, useRules, VIconBtn\n---\n\n# Announcing Vuetify v3.8\n\n---\n\n🖊️ John Leider • 📅 April 8th, 2025\n\n\n\n---\n\n## Introduction\n\nToday we are excited to announce the release of Vuetify v3.8 \"Andromeda\"!\n\nThis minor release contains no breaking changes and is packed with new features, improvements, and bug fixes. This blog post will highlight some of the most notable changes—for a full list of changes and new features, please see [the full changelog](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.0).\n\n---\n\n- [Form input improvements](#form-input-improvements)\n - [Multi-word search highlight](#multi-word-search-highlight)\n - [Input icon states](#input-icon-states)\n- [New components](#new-components)\n - [VNumberInput](#vnumberinput)\n - [VSnackbarQueue](#vsnackbarqueue)\n- [Other updates](#other-updates)\n - [VDataTable selection](#vdatatable-selection)\n - [VTooltip interactive](#vtooltip-interactive)\n- [Labs](#labs)\n - [VDateInput](#vdateinput)\n - [useRules composable](#userules-composable)\n - [VIconBtn](#viconbtn)\n\n## Form input improvements\n\nIn v3.8, we have made several improvements to form controls, including new styling options and additional components. These changes are designed to give you more control over the look and feel of inputs.\n\n### Multi-word search highlight\n\nSearch terms that match multiple words in the item text will now be highlighted in VAutocomplete and VCombobox. This enhancement makes it easier for users to see how their search terms match available options, improving the overall search experience.\n\n**Before:**\n![Image of Autocomplete with single word highlighting](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/autocomplete-before.png \"Single-word highlighting\"){ height=300 }\n\n**After:**\n![Image of Autocomplete with multi word highlighting](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/autocomplete-after.png \"Multi-word highlighting\"){ height=300 }\n\n**Details:** [PR#16462](https://github.com/vuetifyjs/vuetify/pull/16462)\n\n### Input icon states\n\nIn earlier versions of Vuetify, focused inputs would add color to their icons. This is now possible using the new **icon-color** and **glow** props. The former allows you to set the default color of the icon, when combined with the latter, the icon will change color when the input is focused.\n\n![Gif of input icon states](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/icon-color-glow-prop.gif \"Input icon states\"){ height=300 }\n\nThis is perfect for drawing attention to active inputs or creating dynamic, responsive forms.\n\n**Details:** [PR#21076](https://github.com/vuetifyjs/vuetify/pull/21076)\n\n## New components\n\nBoth VNumberInput and VSnackbarQueue have been promoted from labs to the core framework. They offer a clean experience and are easy to use.\n\n### VNumberInput\n\nThe [v-number-input](https://vuetifyjs.com/components/number-inputs/) component has moved from Labs to the Core framework in v3.8. It's intended to be a replacement for the standard `` and supports all of the standard Vuetify input variant props.\n\n![Gif of the NumberInput component](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/number-input.gif \"VNumberInput component\"){ height=300 }\n\n**Details:**\n\n- [Documentation](https://vuetifyjs.com/components/number-inputs/)\n- [PR#18162](https://github.com/vuetifyjs/vuetify/pull/18162)\n\n### VSnackbarQueue\n\nThe [v-snackbar-queue](https://vuetifyjs.com/components/snackbar-queue/) component has moved from Labs to the Core framework in v3.8. This component makes it easy to create a queue of snackbars that can be displayed one after the other.\n\nSetting up a queue of snackbars is as simple as creating a store that holds the queue and passing it to the VSnackbarQueue component.\n\n```ts { resource=\"src/stores/queue.ts\" }\nimport { defineStore } from 'pinia'\nimport { Ref } from 'vue'\n\nexport type Snackbar = Record\n\nexport interface SnackbarQueueState {\n queue: Ref\n show: (text: Snackbar | string) => void\n}\n\nexport const useQueueStore = defineStore('Queue', () => {\n const queue = ref([])\n\n function show (text: Snackbar) {\n const record = typeof text === 'string' ? { text } : text\n\n queue.value.push(record)\n }\n\n return {\n queue,\n show,\n } as SnackbarQueueState\n})\n```\n\n```html { resource=\"src/App/AppSnackbarQueue.vue\"}\n\n\n\n```\n\nQueue items support all [v-snackbar](https://vuetifyjs.com/components/snackbars/) props, including **timeout** and **color**.\n\n**Details:**\n\n- [Documentation](https://vuetifyjs.com/components/snackbar-queue/)\n- [PR#19629](https://github.com/vuetifyjs/vuetify/pull/19629)\n\n## Other updates\n\nSome other small updates in v3.8 involve quality of life improvements to existing components such as VDataTable and VTooltip.\n\n### VDataTable selection\n\nIn v3.8, when using the **show-select** property and VDataTable, you can hold the shift key when making a selection to select a range of items.\n\n![Gif of VDataTable selection](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/data-table-select.gif \"v-data-table selection\"){ height=500 }\n\n**Details:** [Commit c9a2a22](https://github.com/vuetifyjs/vuetify/commit/c9a2a2269b0492cc3cd0b757888be9ddd96316ba)\n\n### VTooltip interactive\n\nv3.8 introduces the **interactive** property to the [v-tooltip](https://vuetifyjs.com/components/tooltips/) component. When enabled, this allows users to interact with and select text within the tooltip.\n\n![Gif of v-tooltip interactive](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/tooltip-interactive.gif \"v-tooltip interactive\"){ height=300 }\n\n**Details:** [Commit 1599512](https://github.com/vuetifyjs/vuetify/commit/159951278e9a27309d4d1eb633b426c770989584)\n\n## Labs\n\nThe latest version of Vuetify also includes a number of updates to existing Labs components, including the new VIconBtn. In addition, we're also bringing a new composable for testing named **useRules**.\n\n### VDateInput\n\nThe [v-date-input](https://vuetifyjs.com/components/date-inputs) component received multiple quality of life improvements, including:\n\n- Now has actions hidden by default, reducing screen clutter\n- Improved inputmode usage on mobile\n- Normalized control button sizes giving the component a more consistent look\n\n![Image of v-date-input](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/date-input-enhancements.png \"v-date-input component\"){ height=300 }\n\nThis component is getting close to being ready for production, keep an eye out for it in the next release!\n\n### useRules composable\n\nThe useRules composable is a new way to propagate shared rules through your application with full localization support. After following the [Installation Guide](https://vuetifyjs.com/features/rules/#installation), you can use the composable in your components.\n\n```html\n\n\n\n```\n\nRules also support localization, allowing text strings to change based upon the injected locale. This applies globally, as well as inline:\n\n```html\n\n```\n\nThis simplifies managing validation rules across your app, ensuring consistency and easing localization.\n\n### VIconBtn\n\n[v-icon-btn](https://vuetifyjs.com/components/icon-buttons/) is a new component in testing that's intended to bridge the gap between VBtn and VIcon. Its size is meant to be more intentional and is ideal for compact UI patterns like toolbars, icon-only lists, or action grids.\n\n![Gif of v-icon-btn](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/icon-btn.gif \"v-icon-btn component\"){ height=300 }\n\nWe're also experimenting with a new way of mapping sizes, moving the configuration from SCSS to props.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nimport { createVuetify } from 'vuetify'\n\nexport default createVuetify({\n defaults: {\n VIconBtn: {\n sizes: [\n ['x-small', 16],\n ['small', 20],\n ['medium', 24],\n ['large', 28],\n ['x-large', 32],\n ],\n iconSizes: [\n ['x-small', 10],\n ['small', 12],\n ['medium', 14],\n ['large', 16],\n ['x-large', 18],\n ],\n size: 'small',\n }\n }\n})\n```\n\nMoving to a system like this also opens up the ability to configure your own sizing names:\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\n{\n VIconBtn: {\n sizes: [\n ['xs', 16],\n ['sm', 20],\n ['md', 24],\n ['lg', 28],\n ['xl', 32],\n ['2xl', 36],\n ],\n iconSizes: [\n ['xs', 10],\n ['sm', 12],\n ['md', 14],\n ['lg', 16],\n ['xl', 18],\n ['2xl', 20],\n ],\n size: 'xl',\n }\n}\n```\n\nThis is still in testing so please give us your feedback by dropping a line on our [Discord](https://community.vuetifyjs.com/)\n\n**Details:** [PR#21114](https://github.com/vuetifyjs/vuetify/pull/21114)\n\n---\n\nFor a complete list of all the changes and features in v3.8, please see the [full changelog](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.0).\n","packages/docs/src/pages/en/blog/announcing-vuetify-4.3.md":"---\nlayout: blog\nmeta:\n title: Announcing Vuetify v4.3\n description: Vuetify v4.3 \"Paladin\" brings data table and form controls, new labs components, right-click menus, opt-in MD Expressive styles and a steadier SSR layout.\n keywords: Vuetify v4.3, Vuetify Paladin, VDataTable, VAutocomplete, VMenu, context-menu, Material Design Expressive, VBtn, VSlider, VTabs, VSlideGroup, SSR, v-touch-hold, Vuetify0\n---\n\n# Announcing Vuetify v4.3\n\n---\n\n🖊️ John Leider • 📅 October 20th, 2026\n\n\n\n![Hero image for Vuetify v4.3](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/hero.png \"Vuetify v4.3 Paladin hero image\"){ height=112 }\n\n---\n\n## Introduction\n\nVuetify v4.3 is a minor release with no breaking changes.\n\nIt adds more control over filtering and selection in data tables and forms, a batch of new labs components, right-click menus for VMenu, and opt-in Material Design Expressive styles for 7 components. It also includes new options for carousels and slide groups, and a more stable layout for SSR apps.\n\nThis post covers the highlights. For everything else, see [the full changelog](https://github.com/vuetifyjs/vuetify/releases/tag/v4.3.0).\n\n---\n\n- [Data tables & forms](#data-tables-forms)\n- [Labs preview](#labs-preview)\n- [VMenu context-menu](#vmenu-context-menu)\n- [7 components aligned with Material Design Expressive](#7-components-aligned-with-material-design-expressive)\n - [Button sizes](#button-sizes)\n - [Progress](#progress)\n - [Sliders](#sliders)\n - [Tabs](#tabs)\n- [Carousel alternatives](#carousel-alternatives)\n - [VSlideGroup padding and gap](#vslidegroup-padding-and-gap)\n - [VCarousel pause-on-hover](#vcarousel-pause-on-hover)\n - [Wheel navigation](#wheel-navigation)\n - [VInfiniteCarousel](#vinfinitecarousel)\n- [Stable layout & SSR](#stable-layout-ssr)\n- [Under the hood](#under-the-hood)\n- [v-touch-hold](#v-touch-hold)\n- [Promoted from labs](#promoted-from-labs)\n\n## Data tables & forms\n\nMore control over how lists filter and how rows select.\n\n### Filtered order\n\n`VAutocomplete` and `VCombobox` have a **filtered-order** prop for controlling the order of items after filtering.\n\n**Details:** [PR#23282](https://github.com/vuetifyjs/vuetify/pull/23282)\n\n### Filtered select strategy\n\n`VDataTable` adds a **filtered** select strategy, so select all applies to the rows that match the current filter.\n\n**Details:** [041bb72](https://github.com/vuetifyjs/vuetify/commit/041bb7269d228e97f9dda210362d149a4d0ff709), closes [#22867](https://github.com/vuetifyjs/vuetify/issues/22867)\n\n### Row state in row-props\n\n`isSelected` and `isExpanded` are now passed to **row-props**, and selected and expanded rows are marked with data attributes, so you can style them without extra bookkeeping.\n\n**Details:** [PR#23238](https://github.com/vuetifyjs/vuetify/pull/23238), [1b4a6b4](https://github.com/vuetifyjs/vuetify/commit/1b4a6b430340a5dc32a441b3ba281ae1d874a711), closes [#17670](https://github.com/vuetifyjs/vuetify/issues/17670)\n\n### Descriptions on selection controls\n\nCheckboxes, radios and switches can show a description through the new **description** prop and slot on `VSelectionControl`.\n\n**Details:** [3e734be](https://github.com/vuetifyjs/vuetify/commit/3e734be3d6e9141237f1b57dd32a1010f5a4f7b8), closes [#21773](https://github.com/vuetifyjs/vuetify/issues/21773)\n\n![Image of v-checkbox and v-switch with descriptions](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/selection-control-descriptions.png \"Selection control descriptions\"){ height=150 }\n\n### Smaller form updates\n\n- `VDateInput` shows a localized format hint ([PR#23173](https://github.com/vuetifyjs/vuetify/pull/23173))\n- `VTextarea` keeps native undo history when **auto-grow** is on ([PR#23279](https://github.com/vuetifyjs/vuetify/pull/23279))\n\n## Labs preview\n\nThese are new in labs. You can try them today, but the API may still change before they move to core, so pin your version if you use them in production.\n\n![Image of v-split-btn](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/labs-split-btn.png \"v-split-btn component\"){ height=250 }\n\n![Image of v-time-input](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/labs-time-input.png \"v-time-input component\"){ height=120 }\n\n![Image of v-loading-indicator](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/labs-loading-indicator.png \"v-loading-indicator component\"){ height=120 }\n\n- `VAudio` ([Docs](/components/audio-players/), [PR#23227](https://github.com/vuetifyjs/vuetify/pull/23227))\n- `VSplitBtn` ([Docs](/components/split-buttons/), [PR#23267](https://github.com/vuetifyjs/vuetify/pull/23267))\n- `VTimeInput` ([Docs](/components/time-inputs/), [PR#23141](https://github.com/vuetifyjs/vuetify/pull/23141))\n- `VLoadingIndicator` ([Docs](/components/loading-indicators/), [c5ce339](https://github.com/vuetifyjs/vuetify/commit/c5ce3396e1c3e51c6925aab8f3a63365f7acc42a))\n\n`VVideo` also picked up an **actions** prop and an overhauled progress bar and volume control ([PR#23241](https://github.com/vuetifyjs/vuetify/pull/23241)).\n\nTry them out and let us know what you think on [Discord](https://community.vuetifyjs.com/).\n\n## VMenu context-menu\n\n[v-menu](https://vuetifyjs.com/components/menus/) can now open on right click with the new **context-menu** prop.\n\n![Image of v-menu opened with right click](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/menu-contextmenu.png \"v-menu context menu\"){ height=300 }\n\n```html\n\n```\n\n**Details:** [PR#23196](https://github.com/vuetifyjs/vuetify/pull/23196), closes [#9235](https://github.com/vuetifyjs/vuetify/issues/9235)\n\n## 7 components aligned with Material Design Expressive\n\n`VBtn`, `VIconBtn`, `VBtnGroup`, `VProgressLinear`, `VProgressCircular`, `VSlider` and `VTabs` have new options that follow Material Design Expressive. They are regular props you can use with any blueprint. The `md3` blueprint now turns on the new progress look (split variant, rounded bar, stop indicator) and the primary tab slider by default.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nimport { createVuetify } from 'vuetify'\nimport { md3 } from 'vuetify/blueprints'\n\nexport default createVuetify({\n blueprint: md3,\n})\n```\n\n::: info\nThe `md3` blueprint will make `VSlider` use the pill variant by default in an upcoming patch.\n:::\n\n### Button sizes\n\n`VBtn`, `VIconBtn` and `VBtnGroup` support the Expressive sizes, plus the radius animation on press. There's a new guide that walks through it: [MD3 button sizes](https://vuetifyjs.com/features/md3-button-sizes/).\n\n![Image of MD3 button sizes](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/md3-buttons.png \"MD3 button sizes\")\n\n**Details:** [PR#23253](https://github.com/vuetifyjs/vuetify/pull/23253)\n\n### Progress\n\n[v-progress-linear](https://vuetifyjs.com/components/progress-linear/) and [v-progress-circular](https://vuetifyjs.com/components/progress-circular/) add a split variant, a stop indicator, a rounded bar and a wavy track.\n\n![Image of MD3 progress variants](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/md3-progress.png \"MD3 progress variants\")\n\n**Details:** [PR#23276](https://github.com/vuetifyjs/vuetify/pull/23276)\n\n### Sliders\n\n[v-slider](https://vuetifyjs.com/components/sliders/) has a new **pill** variant and a **centered** prop for values that start from the middle.\n\n```html\n\n\n\n```\n\n![Image of v-slider pill variant](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/md3-sliders.png \"v-slider pill variant\")\n\n**Details:** [PR#22699](https://github.com/vuetifyjs/vuetify/pull/22699), [PR#23277](https://github.com/vuetifyjs/vuetify/pull/23277)\n\n### Tabs\n\n`VTab` gets a **slider-variant** prop for the primary tab indicator style.\n\n\n\n**Details:** [PR#23181](https://github.com/vuetifyjs/vuetify/pull/23181)\n\n## Carousel alternatives\n\nSpacing props for `VSlideGroup`, pausing and wheel navigation for `VCarousel`, and a new looping carousel in labs.\n\n### VSlideGroup padding and gap\n\n[v-slide-group](https://vuetifyjs.com/components/slide-groups/) has **padding** and **gap** props, so you can space items without custom CSS. VTabs and VChipGroup are built on VSlideGroup, so they get these too.\n\n**Example:** [Image slider](https://vuetifyjs.com/components/slide-groups/#image-slider)\n\n**Details:** [PR#23184](https://github.com/vuetifyjs/vuetify/pull/23184), closes [#11972](https://github.com/vuetifyjs/vuetify/issues/11972)\n\n### VCarousel pause-on-hover\n\nThe new **pause-on-hover** prop pauses a cycling carousel while the pointer is over it. Keyboard focus inside the carousel now pauses it too, with or without the prop.\n\n```html\n\n```\n\n**Details:** [e835b88](https://github.com/vuetifyjs/vuetify/commit/e835b885a181052f830f75e80cb716764e634da6), closes [#10544](https://github.com/vuetifyjs/vuetify/issues/10544)\n\n### Wheel navigation\n\n`VWindow` and `VCarousel` support mouse wheel navigation, and the wrap animation is now correct when using arrows or touch.\n\n**Details:** [PR#22906](https://github.com/vuetifyjs/vuetify/pull/22906)\n\n### VInfiniteCarousel\n\n`VInfiniteCarousel` is new in labs, for content that loops continuously. Unlike most marquee implementations, it is fully navigable with arrow keys: focus moves between focusable items and scrolls them into view, otherwise the arrows shift the content. The motion runs on the Web Animations API rather than pure CSS, and keeps its position when paused, reversed or scrubbed with drag and wheel.\n\n**Docs:** [v-infinite-carousel](https://vuetifyjs.com/components/infinite-carousels/)\n\n**Details:** [PR#23116](https://github.com/vuetifyjs/vuetify/pull/23116)\n\n## Stable layout & SSR\n\nLayout item sizes and offsets now render before mount, so SSR apps keep a stable layout on load instead of shifting once the app hydrates.\n\n**Details:** [PR#23250](https://github.com/vuetifyjs/vuetify/pull/23250)\n\nA few other layout updates:\n\n- `VRow` has responsive gap props ([PR#23246](https://github.com/vuetifyjs/vuetify/pull/23246))\n- New `vuetify/styles/layers` entry point with only the default `@layer` order declaration ([ed2dbea](https://github.com/vuetifyjs/vuetify/commit/ed2dbeaa96c944052e85e7bf9678f8b8da9956a3))\n- `VNavigationDrawer` has a **modal** prop and `v-model:expanded` ([PR#23182](https://github.com/vuetifyjs/vuetify/pull/23182))\n\n## Under the hood\n\nWe've started porting core framework features over to use Vuetify0 under the hood. The first pieces are the display, locale, RTL and observer composables ([PR#23210](https://github.com/vuetifyjs/vuetify/pull/23210), [PR#23220](https://github.com/vuetifyjs/vuetify/pull/23220)). You shouldn't notice anything in your app. More of the framework will follow in upcoming releases.\n\n## v-touch-hold\n\n`v-touch-hold` is a new directive for long-press interactions on mobile and other touch devices.\n\n**Details:** [PR#23269](https://github.com/vuetifyjs/vuetify/pull/23269), closes [#5322](https://github.com/vuetifyjs/vuetify/issues/5322)\n\n## Promoted from labs\n\n[v-avatar-group](https://vuetifyjs.com/components/avatar-groups/), [v-highlight](https://vuetifyjs.com/components/highlights/) and [v-progress](https://vuetifyjs.com/components/progress/) graduated from labs to core, so update any `vuetify/labs` imports.\n\n---\n\n::: warning\n\n**Vuetify needs your support.** Open Collective is how we fund the team that builds releases like this one. If your team relies on Vuetify, point your organization at [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider).\n\n:::\n\nFor a complete list of all the changes and features in v4.3, please see the [full changelog](https://github.com/vuetifyjs/vuetify/releases/tag/v4.3.0).\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://community.vuetifyjs.com), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements.*\n","packages/docs/src/pages/en/blog/announcing-vuetify0-alpha.md":"---\nlayout: blog\nmeta:\n title: Announcing the Vuetify0 Alpha\n description: The Vuetify0 alpha is here — a headless Vue framework with 46 components, 63 composables, first-class AI integration, 100% TypeScript, and zero styles.\n keywords: Vuetify0 alpha, headless Vue, Vue component library, AI-native framework, TypeScript components, Vuetify MCP\n---\n\n\n\n# Announcing the Vuetify0 Alpha\n\n**The foundation of the next generation of Vuetify is here.** Vuetify0 is a headless Vue framework — 100% TypeScript, zero styles, built from the ground up to power custom UI libraries, design systems, and the Vuetify ecosystem itself. Today we're releasing the first public alpha.\n\n🖊️ John Leider • 📅 April 7th, 2026\n\n\n\n---\n\n\n\n## What is Vuetify0?\n\nVuetify0 is not a component library — it's a **meta-framework for building component libraries**. Every component is a standard Vue SFC using the latest macros (`defineModel`, `defineSlots`, generics). Every composable is a pure TypeScript function. Nothing ships with styles, opinions about your CSS framework, or assumptions about your design language.\n\nThe primitives handle the hard parts — accessibility, keyboard navigation, focus management, state coordination, form validation — so you can focus on what makes your library yours: the design.\n\n```html { resource=\"src/components/MyButton.vue\" }\n\n\n\n\n\n```\n\nYou bring the styles. Vuetify0 brings everything else.\n\n---\n\n## What's in the Alpha\n\nThe alpha ships with **46 components** and **63 composables** across three maturity levels:\n\n| Maturity | Components | Composables | What it means |\n|----------|-----------|-------------|---------------|\n| **Stable** | 0 | 6 | API locked, production-ready |\n| **Preview** | 34 | 54 | Implemented, API may change |\n| **Draft** | 13 | 3 | Planned or in early development |\n\n::: success\nSee the full breakdown on the [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix) — every component and composable with its current stability level.\n:::\n\n**Components** span six categories — every one headless, accessible, and keyboard-navigable out of the box:\n\n- **Forms** — [Input](https://0.vuetifyjs.com/components/forms/input), [Select](https://0.vuetifyjs.com/components/forms/select), [Combobox](https://0.vuetifyjs.com/components/forms/combobox), [Checkbox](https://0.vuetifyjs.com/components/forms/checkbox), [Radio](https://0.vuetifyjs.com/components/forms/radio), [Switch](https://0.vuetifyjs.com/components/forms/switch), [Slider](https://0.vuetifyjs.com/components/forms/slider), [Rating](https://0.vuetifyjs.com/components/forms/rating)\n- **Disclosure** — [Dialog](https://0.vuetifyjs.com/components/disclosure/dialog), [Popover](https://0.vuetifyjs.com/components/disclosure/popover), [Tabs](https://0.vuetifyjs.com/components/disclosure/tabs), [Collapsible](https://0.vuetifyjs.com/components/disclosure/collapsible), [ExpansionPanel](https://0.vuetifyjs.com/components/disclosure/expansion-panel), [Treeview](https://0.vuetifyjs.com/components/disclosure/treeview)\n- **Navigation** — [Breadcrumbs](https://0.vuetifyjs.com/components/semantic/breadcrumbs), [Pagination](https://0.vuetifyjs.com/components/semantic/pagination)\n- **Layout** — [Splitter](https://0.vuetifyjs.com/components/semantic/splitter)\n- **Feedback** — [Snackbar](https://0.vuetifyjs.com/components/semantic/snackbar)\n- **Primitives** — [Atom](https://0.vuetifyjs.com/components/primitives/atom), [Portal](https://0.vuetifyjs.com/components/primitives/portal), [Presence](https://0.vuetifyjs.com/components/primitives/presence)\n\n[Browse all components](https://0.vuetifyjs.com/components).\n\n**Composables** go even deeper:\n\n- **Selection** — [single](https://0.vuetifyjs.com/composables/selection/create-single), [multi](https://0.vuetifyjs.com/composables/selection/create-group), [grouped](https://0.vuetifyjs.com/composables/selection/create-selection), [stepped](https://0.vuetifyjs.com/composables/selection/create-step), [nested](https://0.vuetifyjs.com/composables/selection/create-nested)\n- **Data** — [filtering](https://0.vuetifyjs.com/composables/data/create-filter), [pagination](https://0.vuetifyjs.com/composables/data/create-pagination), [virtual scrolling](https://0.vuetifyjs.com/composables/data/create-virtual), [data tables](https://0.vuetifyjs.com/composables/data/create-data-table)\n- **Forms** — [validation](https://0.vuetifyjs.com/composables/forms/create-validation) with Standard Schema support, [form coordination](https://0.vuetifyjs.com/composables/forms/create-form), [rules engine](https://0.vuetifyjs.com/composables/plugins/use-rules)\n- **Plugins** — [theme](https://0.vuetifyjs.com/composables/plugins/use-theme), [locale](https://0.vuetifyjs.com/composables/plugins/use-locale), [breakpoints](https://0.vuetifyjs.com/composables/plugins/use-breakpoints), [features](https://0.vuetifyjs.com/composables/plugins/use-features), [permissions](https://0.vuetifyjs.com/composables/plugins/use-permissions), [logger](https://0.vuetifyjs.com/composables/plugins/use-logger), [storage](https://0.vuetifyjs.com/composables/plugins/use-storage), [notifications](https://0.vuetifyjs.com/composables/plugins/use-notifications)\n- **Browser** — [observers](https://0.vuetifyjs.com/composables/system/use-resize-observer), [event listeners](https://0.vuetifyjs.com/composables/system/use-event-listener), [hotkeys](https://0.vuetifyjs.com/composables/system/use-hotkey), [media queries](https://0.vuetifyjs.com/composables/system/use-media-query)\n\n---\n\n## Built for AI\n\n\n\nVuetify0 is the first Vue framework designed from day one to be consumed by AI agents.\n\nEvery documentation page includes **Ask AI** — ask a question about any component or composable and get an answer grounded in the actual source code and API reference. The docs ship with `llms.txt` and `llms-full.txt` files for direct LLM consumption, plus `SKILL.md` files that let AI agents discover and use Vuetify0 capabilities automatically.\n\nThe [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) connects your IDE to the full documentation and API surface. Use it with Claude, Cursor, Copilot, or any MCP-compatible tool to get context-aware assistance while you build.\n\n::: info\n**Try Vuetify0 with Claude.** Our [Vuetify MCP guide](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp#claude-code) walks you through connecting Vuetify MCP to your development environment.\n:::\n\n---\n\n## Progressive Enhancement\n\nVuetify0's plugin system follows a simple principle: **only take what you use**. Every plugin is optional and tree-shakeable. A minimal setup might use nothing at all — just import components and composables directly. As your needs grow, add plugins:\n\n```ts\nimport { createApp } from 'vue'\nimport {\n createBreakpointsPlugin,\n createThemePlugin,\n createLocalePlugin,\n createStoragePlugin,\n} from '@vuetify/v0'\n\nconst app = createApp(App)\n\n// Add only what you need\napp.use(createThemePlugin({ default: 'light', themes: { light, dark } }))\napp.use(createBreakpointsPlugin())\napp.use(createLocalePlugin({ default: 'en', messages: { en, es } }))\napp.use(createStoragePlugin())\n```\n\nAvailable plugins include `useTheme`, `useLocale`, `useBreakpoints`, `useFeatures`, `usePermissions`, `useLogger`, `useStorage`, `useNotifications`, `useRules`, `useRtl`, and `useStack`. Each one follows the same pattern: install the plugin to provide app-wide context, or use the `create*` factory for scoped instances in component subtrees. [Browse all composables](https://0.vuetifyjs.com/composables).\n\n---\n\n## Adapter-Based Architecture\n\nMost plugins accept **adapters** — swappable implementations that let you plug in the tools you already use. Vuetify0 ships with sensible defaults, but you're never locked in.\n\n```ts { resource=\"src/plugins/vuetify0.ts\" }\nimport { createLocalePlugin } from '@vuetify/v0'\nimport { VueI18nLocaleAdapter } from '@vuetify/v0/locale/adapters/vue-i18n'\nimport { createI18n } from 'vue-i18n'\n\nconst i18n = createI18n({ locale: 'en', messages: { en, es } })\n\napp.use(\n createLocalePlugin({\n adapter: new VueI18nLocaleAdapter({ i18n }),\n })\n)\n```\n\nThe adapter pattern extends across the framework:\n\n| Plugin | Default | Third-party adapters |\n|--------|---------|---------------------|\n| Logger | Console | Pino, Consola |\n| Locale | Built-in | VueI18n |\n| Date | Built-in | Custom (implement DateAdapter) |\n| Features | Built-in | LaunchDarkly, Flagsmith, PostHog |\n| Notifications | Built-in | Knock, Novu |\n| Validation | Built-in | Standard Schema (Zod, Valibot, ArkType) |\n| Storage | localStorage | sessionStorage, memory |\n| Theme | CSS variables | Unhead (SSR) |\n\nWrite your own adapter by implementing a single interface. The framework handles the rest.\n\n---\n\n## Performance\n\nPerformance was a priority from the start, not an afterthought. Every composable is independently importable and tree-shakeable. There is no runtime CSS — your bundle includes exactly the JavaScript you use and nothing else.\n\nComponents use lazy mounting (`usePresence`, `useLazy`) so dialogs, popovers, and menus don't render their content until they're opened. Observer composables (`useResizeObserver`, `useIntersectionObserver`, `useMutationObserver`) clean up automatically on scope disposal.\n\nThe registry system — the foundation of every stateful composable — uses cached iterations and batched mutations to minimize reactive overhead. Performance-critical paths include benchmarks (`*.bench.ts`) tracked across releases.\n\n::: info\n**Want the numbers?** Check out our [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) for detailed performance testing guidelines and results.\n:::\n\n---\n\n## Documentation\n\nThe documentation at [0.vuetifyjs.com](https://0.vuetifyjs.com) is designed to be the most complete documentation experience available.\n\n- **Live examples** on every component and composable page with full source code\n- **Auto-generated API reference** extracted directly from TypeScript source — always accurate, never stale\n- **Ask AI** on every page — ask questions grounded in the actual docs and source\n- **Skill-based filtering** — pages are tagged beginner, intermediate, or advanced so you see content matched to your experience\n- **Personalized documentation** — the [Vuetify CLI](https://github.com/vuetifyjs/cli) generates docs context tailored to your project's installed plugins and components\n\n---\n\n## Ecosystem\n\nVuetify0 works with the tools the Vuetify community already uses:\n\n- **[Vuetify CLI](https://github.com/vuetifyjs/cli)** — Scaffold new projects, generate components, and get personalized documentation based on your project setup\n- **[Vuetify Play](https://vtfy.link/vuetify0-play)** — Try components and composables in the browser without installing anything\n- **[Vuetify0 Play](https://v0play.vuetifyjs.com)** (beta) — Vuetify Play built entirely with Vuetify0\n- **[Vuetify MCP](https://mcp.vuetifyjs.com)** — Connect your IDE to the full Vuetify0 API surface for context-aware AI assistance\n\n---\n\n## Road to v1\n\nToday's alpha is the first milestone on the path to a stable release:\n\n- **Alpha** (April 7, 2026) — Open for feedback, APIs mostly stable, expect minor breaking changes\n- **Beta** (June 2026) — API freeze, stability and performance focus\n- **v1.0** (July 2026) — Stable release\n\nSee the full [roadmap](https://0.vuetifyjs.com/roadmap) for milestone details and timelines.\n\n\n\nAfter v1, the next chapter is **[Vuetify Paper](https://github.com/vuetifyjs/0/tree/master/packages/paper)**: complete design systems built on Vuetify0. Paper design systems recreate popular design languages as ready-to-use component libraries powered by v0's headless primitives. We're starting with two original design systems, **Emerald** and **Onyx**, with recreations of well-known design systems to follow.\n\nVuetify0 is the result of over a decade of building component frameworks and learning what works. It's already being integrated into the core Vuetify framework, quietly powering the next generation from the inside out. The alpha is live. [Go break things](https://0.vuetifyjs.com/introduction/getting-started).\n\n::: info\n**Considering building with Vuetify0?** We'd love to hear about your use case. [Get in touch](https://vuetifyjs.com/introduction/enterprise-support/) about enterprise support and consulting.\n:::\n\n---\n\n## Let's Build Something\n\nEnough about what Vuetify0 *can* do — let's see it in action. We're going to build **DevKey**, a developer API dashboard, as a reusable UI library. Three pages, ten components, one composite component that ties it all together.\n\nBy the end, you'll have a publishable package that any Vue app can install and use. The full source is on GitHub: [vuetifyjs/devkey](https://github.com/vuetifyjs/devkey).\n\n> This guide uses plain CSS for styling. Vuetify0 works great with [UnoCSS, Tailwind, or any CSS approach](https://0.vuetifyjs.com/guide/fundamentals/styling) you prefer.\n\n### Project Setup\n\nFirst, install the alpha:\n\n::: tabs\n\n```bash [pnpm]\npnpm add @vuetify/v0\n```\n\n```bash [npm]\nnpm install @vuetify/v0\n```\n\n```bash [yarn]\nyarn add @vuetify/v0\n```\n\n```bash [bun]\nbun add @vuetify/v0\n```\n\n:::\n\nThen create a plugin file that registers the v0 plugins we'll use throughout the project:\n\n```ts { resource=\"src/plugins/devkey.ts\" }\nimport {\n createBreakpointsPlugin,\n createPermissionsPlugin,\n createRulesPlugin,\n} from '@vuetify/v0'\nimport type { App } from 'vue'\n\nexport default function devkey (app: App) {\n app.use(\n createPermissionsPlugin({\n permissions: {\n admin: [['manage', '*']],\n developer: [['read', 'keys'], ['create', 'keys']],\n viewer: [['read', 'keys']],\n },\n })\n )\n\n app.use(\n createRulesPlugin({\n aliases: {\n required: v => !!v || 'Required',\n email: v => /.+@.+\\..+/.test(String(v)) || 'Invalid email',\n },\n })\n )\n\n app.use(createBreakpointsPlugin())\n}\n```\n\nThe theme is configured separately in its own plugin file, using the `V0StyleSheetThemeAdapter` to generate CSS custom properties with a `v0-theme` prefix:\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nimport { createThemePlugin, V0StyleSheetThemeAdapter } from '@vuetify/v0'\n\nexport default createThemePlugin({\n default: 'dark',\n target: 'html',\n adapter: new V0StyleSheetThemeAdapter({ prefix: 'v0-theme' }),\n themes: {\n dark: {\n dark: true,\n colors: {\n 'primary': '#818cf8',\n 'secondary': '#fbbf24',\n 'error': '#f87171',\n 'info': '#38bdf8',\n 'success': '#4ade80',\n 'warning': '#fb923c',\n 'background': '#18181b',\n 'surface': '#1f1f23',\n 'surface-tint': '#2a2a2a',\n 'surface-variant': '#1e1e1e',\n 'text': '#f1f5f9',\n 'muted': '#94a3b8',\n 'border': '#2e2e32',\n 'divider': '#404040',\n 'on-primary': '#1a1a1a',\n 'on-secondary': '#1a1a1a',\n 'on-error': '#1a1a1a',\n 'on-info': '#1a1a1a',\n 'on-success': '#1a1a1a',\n 'on-warning': '#1a1a1a',\n 'on-background': '#e0e0e0',\n 'on-surface': '#e0e0e0',\n 'on-surface-variant': '#a0a0a0',\n },\n },\n },\n})\n```\n\nAnd wire it into your app entry:\n\n```ts { resource=\"src/main.ts\" }\nimport { createApp } from 'vue'\nimport devkey from './plugins/devkey'\nimport vuetify from './plugins/vuetify'\nimport App from './App.vue'\n\nconst app = createApp(App)\ndevkey(app)\napp.use(vuetify)\napp.mount('#app')\n```\n\nFour plugins across two files, each doing one job: `createPermissionsPlugin` sets up RBAC so we can gate dashboard actions by role, `createRulesPlugin` registers validation rule aliases so our form fields can use `'required'` and `'email'` by name, `createThemePlugin` with `V0StyleSheetThemeAdapter` provides DevKey's color tokens as CSS variables (`var(--v0-theme-primary)`, `var(--v0-theme-on-primary)`, etc.), and `createBreakpointsPlugin` gives us reactive viewport detection for the responsive dashboard layout.\n\nHere's what we're building:\n\n**Components:**\n\n| Component | Wraps | Description |\n|-----------|-------|-------------|\n| `DkButton` | [Button](https://0.vuetifyjs.com/components/actions/button) | Styled button with variants |\n| `DkInput` | [Input](https://0.vuetifyjs.com/components/forms/input) | Form field with label and errors |\n| `DkCard` | [Atom](https://0.vuetifyjs.com/components/primitives/atom) | Content container |\n| `DkToggle` | [Single](https://0.vuetifyjs.com/components/providers/single) | Option switcher |\n| `DkTabs` | [Tabs](https://0.vuetifyjs.com/components/disclosure/tabs) | Tab navigation |\n| `DkTable` | [createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table) | Filterable, paginated table |\n| `DkCollapsible` | [Collapsible](https://0.vuetifyjs.com/components/disclosure/collapsible) | Expandable section |\n| `DkLayout` | [useBreakpoints](https://0.vuetifyjs.com/composables/plugins/use-breakpoints) | Responsive shell |\n| `DkCommandPalette` | [Dialog](https://0.vuetifyjs.com/components/disclosure/dialog) + [Input](https://0.vuetifyjs.com/components/forms/input) + [createFilter](https://0.vuetifyjs.com/composables/data/create-filter) + [useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey) + [useVirtualFocus](https://0.vuetifyjs.com/composables/system/use-virtual-focus) | `Cmd+K` search overlay with keyboard navigation |\n\n**Plugins:**\n\n| Plugin | Purpose |\n|--------|---------|\n| [createThemePlugin](https://0.vuetifyjs.com/composables/plugins/use-theme) | Dark theme with V0StyleSheetThemeAdapter for CSS custom properties |\n| [createBreakpointsPlugin](https://0.vuetifyjs.com/composables/plugins/use-breakpoints) | Reactive viewport detection for responsive layout |\n| [createPermissionsPlugin](https://0.vuetifyjs.com/composables/plugins/use-permissions) | RBAC to gate dashboard actions by role |\n| [createRulesPlugin](https://0.vuetifyjs.com/composables/plugins/use-rules) | Built-in validation rules (required, email, minLength) |\n\n---\n\n## Part 1: Landing Page\n\nThe landing page introduces two core patterns in v0:\n\n- **[Button](https://0.vuetifyjs.com/components/actions/button)** uses a compound component pattern — `Button.Root` handles state (loading, disabled, ARIA), `Button.Content` and `Button.Loading` swap visibility automatically. You style the root, v0 handles the behavior.\n- **[Single](https://0.vuetifyjs.com/components/providers/single)** manages single-selection state. `Single.Root` provides the context, `Single.Item` exposes `isSelected` and `toggle` — perfect for our pricing interval toggle. No state management code needed.\n\nBoth patterns show up everywhere in v0: compound components for structure, provider components for state. Once you learn one, you know them all. We'll build `DkButton`, `DkCard`, `DkToggle`, and `DkLayout`.\n\n![DevKey Landing Page](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/landing.png \"DevKey Landing Page\")\n\n### DkButton\n\nOur first component wraps Vuetify0's [Button](https://0.vuetifyjs.com/components/actions/button) with DevKey's visual style. Button uses a compound component pattern — `Button.Root` handles all the state (loading, disabled, selected, ARIA), and we style on top:\n\n```html { resource=\"src/components/DkButton.vue\" }\n\n\n\n\n\n```\n\nNotice what we *didn't* write: loading state management, disabled coordination, toggle group support, or grace period timing. `Button.Root` handles all of that — we just pass `loading` and `disabled` props through. `Button.Content` renders when the button isn't loading, and `Button.Loading` renders when it is — with an absolutely positioned spinner overlay and `[data-loading]` disabling pointer events. We just add our styles on top.\n\n### DkToggle — Pricing Interval Switcher\n\nThe pricing section needs a toggle between monthly and yearly. We use [Single](https://0.vuetifyjs.com/components/providers/single) for single-selection state — `Single.Root` provides the context, and `Single.Item` exposes `isSelected` and `toggle` for each option:\n\n```html { resource=\"src/components/DkToggle.vue\" }\n\n\n\n\n\n```\n\nThe `mandatory` prop on `Single.Root` ensures something is always selected. The `isSelected` and `toggle` slot props from `Single.Item` give us everything we need to render the active state and handle clicks. Zero state management code in our component.\n\n---\n\n## Part 2: Login Page\n\nThe login page is where Vuetify0's form system shines. Three composables work together here:\n\n- **[Form](https://0.vuetifyjs.com/components/forms/form)** coordinates validation across all fields. When the form submits, it validates every registered input and reports whether the form is valid.\n- **[Input](https://0.vuetifyjs.com/components/forms/input)** handles individual field state — value binding, validation errors, ARIA attributes, dirty/pristine tracking — through a compound component pattern (`Input.Root`, `Input.Control`, `Input.Description`, `Input.Error`).\n- **[createRulesPlugin](https://0.vuetifyjs.com/composables/plugins/use-rules)** provides named rule aliases. In our plugin setup we registered `'required'` and `'email'` — now any `Input.Root` with `:rules=\"['required', 'email']\"` resolves those aliases automatically. You can mix aliases with inline functions for custom validation.\n\nWe'll build `DkInput` — a styled wrapper around Input — and assemble the login page.\n\n![DevKey Login Page](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/login.png \"DevKey Login Page\")\n\n### DkInput\n\nWrapping Vuetify0's [Input](https://0.vuetifyjs.com/components/forms/input) compound component. `Input.Root` handles validation, ARIA attributes, and field state. `Input.Control` renders the native ``. `Input.Description` and `Input.Error` are automatically wired to `aria-describedby` and `aria-errormessage`:\n\n```html { resource=\"src/components/DkInput.vue\" }\n\n\n\n\n\n```\n\n### Login Page Assembly\n\nNow we compose the login page using Vuetify0's [Form](https://0.vuetifyjs.com/components/forms/form) component. Form coordinates all child validations automatically — the `submit` slot prop is a function that validates every registered field and returns a boolean. We pass it to our `onSubmit` handler via `@click=\"onSubmit(submit)\"`, which manages the loading state with a try/finally pattern. The `:rules` prop on `DkInput` accepts both string aliases (`'required'`, `'email'`) from the [rules plugin](https://0.vuetifyjs.com/composables/plugins/use-rules) and inline functions:\n\n```html { resource=\"src/pages/LoginPage.vue\" }\n\n\n\n\n\n```\n\n---\n\n## Part 3: Dashboard\n\nThis is where v0 really shows its depth. The dashboard composes more primitives than the previous two pages combined, and demonstrates how they stay out of each other's way:\n\n- **[createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table)** handles the API key list — filtering, pagination, and column definitions in a single composable. We wire a search input to its `search()` method and let it manage the data pipeline.\n- **[useBreakpoints](https://0.vuetifyjs.com/composables/plugins/use-breakpoints)** powers the responsive layout — sidebar visible on desktop, hidden on mobile — through the plugin we registered earlier.\n- **The command palette** is the showcase piece: five v0 primitives ([Dialog](https://0.vuetifyjs.com/components/disclosure/dialog), [Input](https://0.vuetifyjs.com/components/forms/input), [createFilter](https://0.vuetifyjs.com/composables/data/create-filter), [useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey), [useVirtualFocus](https://0.vuetifyjs.com/composables/system/use-virtual-focus)) composed into a single interaction.\n\n![DevKey Dashboard](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/dashboard.png \"DevKey Dashboard\")\n\n### DkTable — API Key Management\n\nThe API key table uses [createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table), which composes filtering, pagination, and sorting into a single reactive state:\n\n```html { resource=\"src/components/DkTable.vue\" }\n\n\n\n\n\n```\n\nThe `createDataTable` composable handles all the data wrangling — filtering rows by the search query, computing page counts, slicing the visible rows — while our component handles only the rendering.\n\n### DkCommandPalette — The Showcase\n\nThis is the component that shows what composing Vuetify0 primitives really looks like. A `Cmd+K` command palette that combines five v0 primitives into a single, polished interaction:\n\n- [Dialog](https://0.vuetifyjs.com/components/disclosure/dialog) — modal overlay with focus trapping\n- [Input](https://0.vuetifyjs.com/components/forms/input) — search field with ARIA\n- [createFilter](https://0.vuetifyjs.com/composables/data/create-filter) — live filtering\n- [useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey) — `Cmd+K` activation\n- [useVirtualFocus](https://0.vuetifyjs.com/composables/system/use-virtual-focus) — keyboard navigation with `scrollIntoView`\n\n```html { resource=\"src/components/DkCommandPalette.vue\" }\n\n\n\n\n\n```\n\nThat's roughly 100 lines of template and script for a fully functional command palette with keyboard navigation, live filtering, grouped results, and a hotkey trigger. Five Vuetify0 primitives, each doing one thing well, composed into something greater than the sum of its parts.\n\n\n\n![DevKey Command Palette](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/command-palette.png \"DevKey Command Palette\")\n\n---\n\n## Ship It\n\nThe full DevKey source is on GitHub: [vuetifyjs/devkey](https://github.com/vuetifyjs/devkey). Clone it, run `pnpm dev`, and you have a working app.\n\nTo deploy to production, build the project and preview it locally:\n\n::: tabs\n\n```bash [pnpm]\npnpm build\nnpx http-server dist\n```\n\n```bash [npm]\nnpm run build\nnpx http-server dist\n```\n\n```bash [yarn]\nyarn build\nnpx http-server dist\n```\n\n```bash [bun]\nbun run build\nbunx http-server dist\n```\n\n:::\n\nThe `dist/` directory contains everything you need. Deploy it anywhere that serves static files — Vercel, Netlify, Cloudflare Pages, or your own server. The entire app, including all Vuetify0 primitives, builds to **~235 kB JS** (84 kB gzipped).\n\n::: info\n**Want to package your components as a reusable library?** We'll cover publishing and consuming a v0-based component library in an upcoming blog post. In the meantime, the [Building Frameworks](https://0.vuetifyjs.com/guide/fundamentals/building-frameworks) guide walks through using v0 as a dependency for your own library.\n:::\n\n---\n\n## FAQ\n\n### How is Vuetify0 different from Reka UI or other headless libraries?\n\nMost headless libraries give you components. v0 gives you both the components *and* the underlying composables used to build them — so when a component doesn't fit your exact need, you're not stuck. The plugin system is also distinct: framework-level features like theme, locale, permissions, and notifications ship with fallbacks, so any component works standalone without requiring the full plugin to be installed. And v0 is built from a decade of Vuetify production experience by the same team — not a port of a React library.\n\n### Is this only for teams building design systems?\n\nNo. Import a `Select` and stop there — you don't need the plugin system, the composables, or any of it. The advanced layer is there when you need it, invisible when you don't.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They don't conflict. You can start adopting v0 components and composables in a Vuetify 4 project today. The migration path to future Vuetify versions is expected to require trivial changes at most.\n\n### Do I have to use all the plugins?\n\nNo. Every plugin is optional and tree-shakeable. A component import is just an import — no required setup. Add plugins as your needs grow.\n\n### Is the alpha API stable enough to build on?\n\nMostly, yes. We ship ~5,000 unit tests and over 300 benchmark scenarios across the framework. The alpha label reflects completeness, not instability — expect minor breaking changes until beta, but nothing requiring rewrites.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\nThe alpha is open for feedback. File issues, ask questions in Discord, or just build something and tell us about it. This is the foundation — help us shape it.\n\n::: info\n**Try Vuetify0 with Claude.** Connect the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/ai-tools) to get AI-assisted development with full access to the v0 docs and API reference.\n:::\n\n---\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Follow us on [Twitter](https://twitter.com/vuetifyjs), join the conversation on [Discord](https://community.vuetifyjs.com), and star us on [GitHub](https://github.com/vuetifyjs/0).*\n","packages/docs/src/pages/en/blog/announcing-vuetify0-beta.md":"---\nlayout: blog\nmeta:\n title: Announcing the Vuetify0 Beta\n description: Vuetify0 hits beta and freezes its public API — 49 components, 68 composables, a headless drag-and-drop family, and the testing work leading to v1.\n keywords: Vuetify0 beta, headless Vue, API freeze, Vue drag and drop, createSortable, createKanban, TypeScript components, Vuetify0 v1\n---\n\n\n\n# Announcing the Vuetify0 Beta\n\nVuetify0 has reached beta. The main change from the alpha is that the public API is now frozen: the existing composables and components keep their current names and signatures, and we don't expect them to change before v1. Work from here is focused on stability, documentation, and edge cases.\n\n🖊️ John Leider • 📅 June 2nd, 2026\n\n\n\n---\n\n\n\n## What beta means\n\nThe alpha, released in April, came with the caveat that APIs were mostly stable but could still shift between releases. Beta removes that caveat for the existing surface. From here to v1.0:\n\n- Existing composables and components keep their names, signatures, and behavior. A breaking change would only happen if a critical issue required one, and it would be documented in the release notes.\n- Development shifts toward edge cases, documentation, accessibility, and performance rather than new API.\n- v0 is the headless layer being built into Vuetify itself. Freezing it gives that migration a fixed target to build against.\n\n---\n\n## Where things stand\n\nSince the [alpha](/blog/announcing-vuetify0-alpha/) in April, the totals went from 46 components and 63 composables to **49 components and 68 composables**. The maturity mix also changed: at alpha, three composables and thirteen components were still marked draft. Now no composables are in draft, and ten components remain there.\n\n| Maturity | Components | Composables | What it means |\n|----------|-----------|-------------|---------------|\n| **Stable** | 0 | 6 | In use across releases, no planned breaking changes |\n| **Preview** | 39 | 62 | Feature-complete and documented |\n| **Draft** | 10 | 0 | Experimental or planned for a future release |\n\n::: info\nThe full list is on the [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix), with the current level for every component and composable.\n:::\n\nThe preview label describes how long a primitive has been in use, not whether its API is settled. With the freeze, the existing preview surface is not expected to change before v1.\n\n---\n\n## Drag and drop\n\nThe largest addition since the alpha is a group of three composables for drag-and-drop. Like the rest of v0, they handle state and behavior only, with no markup or styling.\n\n- **[useDragDrop](https://0.vuetifyjs.com/composables/system/use-drag-drop)** ([#225](https://github.com/vuetifyjs/0/pull/225)) — the base primitive: a pointer and keyboard input adapter that owns two registries (draggables and drop zones) and the active-drag state.\n- **[createSortable](https://0.vuetifyjs.com/composables/data/create-sortable)** ([#231](https://github.com/vuetifyjs/0/pull/231)) — ordered-list state, with `move`, `swap`, and `reorder` mutations and a typed `move:ticket` event. It has no DOM or input handling of its own, so it can be driven from buttons, gestures, or server updates.\n- **[createKanban](https://0.vuetifyjs.com/composables/data/create-kanban)** ([#234](https://github.com/vuetifyjs/0/pull/234)) — two levels of `createSortable` (columns and their items) plus a `transfer` method for moving items between columns.\n\nBecause `createSortable` is state only, a pair of buttons can drive it without any drag handling:\n\n```ts\nimport { createSortable } from '@vuetify/v0'\nimport type { SortableTicketInput } from '@vuetify/v0'\n\ninterface TaskTicket extends SortableTicketInput {\n value: { id: number, label: string }\n}\n\nconst sortable = createSortable()\n\nconst [a, b, c] = sortable.onboard([\n { value: { id: 1, label: 'Cut alpha' } },\n { value: { id: 2, label: 'Ship docs' } },\n { value: { id: 3, label: 'Tweet' } },\n])\n\nsortable.move(a.id, 2) // move a ticket to a new index\nsortable.swap(a.id, b.id) // swap two tickets\nsortable.reorder([b.id, a.id, c.id]) // apply a full permutation\n```\n\nThe same state rendered as a list — this is the example from the documentation:\n\n```html { resource=\"src/components/ReorderList.vue\" }\n\n\n\n```\n\n`useDragDrop` adds pointer and keyboard dragging on top, calling the same `move`, `swap`, and `reorder` methods.\n\n---\n\n## Other additions\n\nOther primitives added since the alpha:\n\n- **[createOtp](https://0.vuetifyjs.com/composables/forms/create-otp)** ([#238](https://github.com/vuetifyjs/0/pull/238)) — state and focus management for one-time-code and verification inputs.\n- **[Overflow](https://0.vuetifyjs.com/components/semantic/overflow)** ([#220](https://github.com/vuetifyjs/0/pull/220)) — a container that detects overflow and exposes scroll state to its children.\n- **useDelay** — debounce and delayed-execution timing.\n- **[toHighlight](https://0.vuetifyjs.com/composables/transformers/to-highlight)** ([#222](https://github.com/vuetifyjs/0/pull/222)) — a transformer that marks matched substrings, for search results and filters.\n\n`createRegistry`, which the stateful composables build on, also gained a bulk `reorder` primitive and an `offboard` that returns removed entries. The latter is what `createKanban` uses to move items between columns.\n\n---\n\n## Testing and performance\n\nCurrent numbers:\n\n- 5,700+ unit tests across 142 spec files.\n- 98.7% average test coverage across the 105 primitives with recorded metrics.\n- 12 benchmark suites covering performance-sensitive paths such as `createDataTable`, `createFilter`, and the registry core. `createSortable`'s reorder was rewritten to use the registry's bulk operation rather than a per-item loop.\n- 100% TypeScript and no runtime CSS. The package ships no styles, and exports are annotated so bundlers can drop unused composables.\n\n::: info\nThe [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) documents the methodology and per-primitive results.\n:::\n\nOne change since the alpha: `useTheme`, `useLocale`, and `useFeatures` use a reactive registry by default ([#210](https://github.com/vuetifyjs/0/pull/210)), so switching a theme or feature flag updates consumers without extra setup. The convention is [documented](https://0.vuetifyjs.com/guide/fundamentals/reactivity) for plugin authors.\n\n---\n\n## AI tooling\n\n\n\nAs in the alpha, each documentation page has an Ask AI option, the docs publish `llms.txt` and `llms-full.txt`, and the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) connects an editor to the API reference. The MCP data is synced to the beta.\n\n::: info\nThe [Vuetify MCP guide](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp#claude-code) covers connecting it to an editor.\n:::\n\n---\n\n## Road to v1\n\nThe beta is the second of three milestones:\n\n- **Alpha** (April 7, 2026) — open for feedback, APIs mostly stable\n- **Beta** (June 2, 2026) — API freeze; stability, documentation, and edge cases\n- **v1.0** (July 2026) — milestone-driven; ships when the milestones are met\n\nSee the [roadmap](https://0.vuetifyjs.com/roadmap) for details.\n\n---\n\n## FAQ\n\n### What changes at beta?\n\nThe public API stops changing. During alpha, names and signatures could change between releases; from beta to v1.0 they don't, unless a critical fix requires it. The stable, preview, and draft labels still indicate how long each primitive has been in use.\n\n### Can I use the beta in production?\n\nCode written against the beta API should keep working through v1, since the API is frozen. The remaining work is hardening and documentation.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They don't conflict, and v0 is already used inside Vuetify's internals. The path to future Vuetify versions is expected to need minimal changes.\n\n### Will there be breaking changes between beta and v1?\n\nNone are planned. If a critical bug or accessibility issue requires one, it will be noted in the release notes.\n\n### Do I have to use the whole framework?\n\nNo. You can import a single component or composable on its own. The plugins and other layers are optional.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Documentation is at [0.vuetifyjs.com](https://0.vuetifyjs.com); source is on [GitHub](https://github.com/vuetifyjs/0).*\n","packages/docs/src/pages/en/blog/announcing-vuetify0-rc.md":"---\nlayout: blog\nmeta:\n title: Announcing the Vuetify0 Release Candidate\n description: Vuetify0 reaches release candidate. The API freeze held through five beta releases and 60 fixes — 50 components, 71 composables, and the last stretch to v1.\n keywords: Vuetify0 RC, release candidate, headless Vue, API freeze, accessibility, WCAG, useReducedMotion, Vuetify0 v1\n---\n\n\n\n# Announcing the Vuetify0 Release Candidate\n\nVuetify0 has reached release candidate. The API freeze announced at [beta](/blog/announcing-vuetify0-beta/) held through six beta releases: nothing was renamed, nothing was removed, and the only additions were additive — a reduced-motion plugin and an accessibility helper on the locale system. From here to v1.0, the work is final testing and documentation. No new features.\n\n🖊️ John Leider • 📅 July 2nd, 2026\n\n\n\n---\n\n\n\n## Table of Contents\n\n- [What a release candidate means](#what-a-release-candidate-means)\n- [Where things stand](#where-things-stand)\n- [A month of hardening](#a-month-of-hardening)\n- [Accessible by default](#accessible-by-default)\n- [Testing and benchmarks](#testing-and-benchmarks)\n- [A reference implementation](#a-reference-implementation)\n- [Documentation](#documentation)\n- [AI tooling](#ai-tooling)\n- [Road to v1](#road-to-v1)\n- [FAQ](#faq)\n\n---\n\n## What a release candidate means\n\nThe beta froze the public API and promised that existing composables and components would keep their names, signatures, and behavior. A month and six releases later, that promise held — and it is now enforced mechanically: a repository check fails any pull request that changes the public surface ([#409](https://github.com/vuetifyjs/0/pull/409)).\n\nThe release candidate narrows scope further. Between now and v1.0:\n\n- **No breaking changes and no new features.** The beta still accepted additive changes; the RC does not. The single exception is a critical security vulnerability that cannot be fixed any other way — and it would be documented in the release notes.\n- **The time goes to testing.** Exercising the frozen surface against edge cases, accessibility passes, and security testing on top of the hardening the betas already shipped.\n- **Documentation and feedback.** The rest of the effort is documentation, and the RC window is the last chance for feedback to catch a problem before the API locks in for the whole 1.x line. An API that fights you, a doc that misleads, a behavior that surprises — report it at [issues.vuetifyjs.com](https://issues.vuetifyjs.com) or on [Discord](https://community.vuetifyjs.com).\n- **v1.0 is milestone-driven**, targeted for Q3 2026. Barring release-blocking discoveries, the RC is what v1.0 ships as — it releases when the milestones are met, not on a date.\n\nAfter v1.0, the surface is governed by semver: breaking changes only in major releases.\n\n---\n\n## Where things stand\n\nAt the beta announcement the totals were 49 components and 68 composables. Beta.0 itself shipped the [Tooltip](https://0.vuetifyjs.com/components/disclosure/tooltip) component with its [useTooltip](https://0.vuetifyjs.com/composables/plugins/use-tooltip) plugin and [createDataGrid](https://0.vuetifyjs.com/composables/data/create-data-grid); the freeze window added [useReducedMotion](https://0.vuetifyjs.com/composables/plugins/use-reduced-motion) in beta.2. The RC surface is **50 components, 71 composables, and 24 utilities**.\n\nThe RC also promotes the v1 stable set ([#470](https://github.com/vuetifyjs/0/pull/470)): the selection family — `createModel`, `createSelection`, `createSingle`, `createStep`, `createGroup`, `createNested` — plus `createRegistry` and the `useTheme`, `useStorage`, and `useBreakpoints` plugins are now API-locked for 1.0. They join the already-stable foundation and observer composables, bringing the stable surface to 16 composables and 17 utilities.\n\n| Maturity | Components | Composables | Utilities | What it means |\n|----------|-----------|-------------|-----------|---------------|\n| **Stable** | 0 | 16 | 17 | In use across releases, no planned breaking changes |\n| **Preview** | 40 | 55 | 7 | Feature-complete and documented |\n| **Draft** | 10 | 0 | 0 | Experimental or planned for a future release |\n\n::: info\nThe full list is on the [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix), with the current level for every component and composable.\n:::\n\nThe ten draft components — DatePicker, DateRangePicker, TimePicker, Otp, Alert, DataGrid, DataTable, Kanban, Virtualizer, and Tour — are experimental and sit outside the frozen surface. They are not committed to v1 and promote individually when ready.\n\n---\n\n## A month of hardening\n\nThe beta cycle ran on a weekly cadence — five follow-up releases between June 9 and the RC cut — and produced 184 commits: 60 fixes, 5 performance rewrites, and 66 documentation commits. The fixes cluster into a few themes:\n\n- **Security and input hardening** — composables were hardened against prototype pollution, CSS injection, and unbounded allocation ([#271](https://github.com/vuetifyjs/0/pull/271)); theme adapters now validate their CSS prefix ([#440](https://github.com/vuetifyjs/0/pull/440)) and popover anchor names are coerced to a safe charset ([#416](https://github.com/vuetifyjs/0/pull/416)).\n- **Overlays and the top layer** — a native modal `` paints above all z-index, so overlays teleported to `body` rendered underneath it. Snackbar and Portal can now teleport into the topmost open modal instead ([#397](https://github.com/vuetifyjs/0/pull/397)), and non-modal overlays no longer count toward stack blocking or scrim state ([#354](https://github.com/vuetifyjs/0/pull/354), [#352](https://github.com/vuetifyjs/0/pull/352)).\n- **SSR and adapter lifecycle** — CSP nonces are applied to server-rendered theme styles ([#441](https://github.com/vuetifyjs/0/pull/441)), adopted stylesheets are removed on dispose ([#424](https://github.com/vuetifyjs/0/pull/424)), and plugins defer factory work to install time so unused plugins no longer allocate resources ([#343](https://github.com/vuetifyjs/0/pull/343)).\n- **Selection and registry contracts** — disabled items can no longer slip in through the v-model sync path ([#426](https://github.com/vuetifyjs/0/pull/426)) or be toggled off ([#311](https://github.com/vuetifyjs/0/pull/311)), circular tree references are guarded ([#316](https://github.com/vuetifyjs/0/pull/316)), and registry cache consistency was tightened ([#331](https://github.com/vuetifyjs/0/pull/331)).\n- **Forms edge cases** — submitting a form with a field id of `0` ([#288](https://github.com/vuetifyjs/0/pull/288)), invalidating in-flight async validation ([#294](https://github.com/vuetifyjs/0/pull/294)), and committing parsed NumberField values before the reactivity round-trip completes ([#371](https://github.com/vuetifyjs/0/pull/371)).\n- **Renderless mode** — the element and handler contracts are now exposed through slot attributes across dialogs, form controls, Scrim, and Snackbar ([#327](https://github.com/vuetifyjs/0/pull/327)), so the consumer-owned-DOM path carries the same guarantees as the rendered one.\n\nPerformance work landed alongside: registry reordering moved from a Map rebuild to an order-array splice with windowed reindexing ([#273](https://github.com/vuetifyjs/0/pull/273)), proxy registry snapshots rebuild lazily on read ([#280](https://github.com/vuetifyjs/0/pull/280)), `createDataTable` replaced its reactive row registry with an event-driven version signal ([#328](https://github.com/vuetifyjs/0/pull/328)), and Overflow visibility checks dropped from O(n²) to O(n) per resize ([#417](https://github.com/vuetifyjs/0/pull/417)).\n\n---\n\n## Accessible by default\n\nThe largest user-facing change of the cycle is invisible until you turn on a screen reader. Every v0 component now ships a built-in English aria label through the locale system's new `ti` method ([#372](https://github.com/vuetifyjs/0/pull/372)) — \"translate if exists\" — which returns the translation or `undefined` instead of echoing the key:\n\n```ts\nconst label = locale.ti('Button.label') ?? 'Button'\n```\n\nApps with no locale plugin get meaningful accessible names (WCAG 4.1.2) with zero locale strings bundled into the runtime. The canonical English catalog is exposed as an optional `@vuetify/v0/locale/messages/en` export for seeding translations.\n\nThe RC audit of the project's [PHILOSOPHY](https://github.com/vuetifyjs/0/blob/master/packages/0/PHILOSOPHY.md) document surfaced two more attribute-compliance bugs, fixed in the same pass ([#451](https://github.com/vuetifyjs/0/pull/451)): ExpansionPanel emitted `data-selected=\"false\"` instead of dropping the attribute, and Slider and Rating dropped `aria-disabled` entirely when enabled instead of emitting a concrete boolean for assistive tech.\n\nBeta.2 also added the [useReducedMotion](https://0.vuetifyjs.com/composables/plugins/use-reduced-motion) plugin ([#278](https://github.com/vuetifyjs/0/pull/278)) — a three-way `system` / `always` / `never` mode over `prefers-reduced-motion`, with a reactive flag and a body data attribute for CSS-only consumers:\n\n```ts\nimport { useReducedMotion } from '@vuetify/v0'\n\nconst motion = useReducedMotion()\n\nmotion.isReduced.value // should motion be minimized right now?\nmotion.select('always') // force reduce\nmotion.select('system') // follow the OS setting\n```\n\n---\n\n## Testing and benchmarks\n\nCurrent numbers:\n\n- 6,338 passing unit tests across 159 test files.\n- 97.8% average test coverage across the 113 primitives with recorded metrics; 78 of them sit at 100%.\n- 13 benchmark suites with 399 recorded cases. Benchmark history is now regenerated on every release against a fixed apparatus ([#394](https://github.com/vuetifyjs/0/pull/394), [#422](https://github.com/vuetifyjs/0/pull/422)), so regressions show up as history, not anecdotes.\n- 100% TypeScript and no runtime CSS. The package ships no styles, and exports are annotated so bundlers can drop unused composables.\n\n::: info\nThe [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) documents the methodology and per-primitive results.\n:::\n\n---\n\n## A reference implementation\n\nNumbers describe the surface; [DevKey](https://devkey.vuetifyjs.com) shows it in use. The developer API dashboard from the [alpha tutorial](/blog/announcing-vuetify0-alpha/) is maintained as the reference v0 implementation and is updated in lockstep with releases — including this RC. Its command palette is a good picture of how the primitives compose: a `Dialog`, an `Input`, `createFilter`, `useHotkey`, and `useVirtualFocus` in one component (condensed from the source):\n\n```html { resource=\"src/components/DkCommandPalette.vue\" }\n\n```\n\nNo positioning math, no key-event switch statements, no filter re-implementation — the component is mostly wiring. The full source is at [vuetifyjs/devkey](https://github.com/vuetifyjs/devkey), and the [integration guide](https://0.vuetifyjs.com/guide/integration/devkey) walks through the architecture.\n\n---\n\n## Documentation\n\nThe 61 documentation commits were mostly one push: a full audit of the guide pages. Component and composable pages were normalized to one structure ([#392](https://github.com/vuetifyjs/0/pull/392)), FAQ sections homogenized ([#395](https://github.com/vuetifyjs/0/pull/395)), examples converted to multi-file copy-paste blocks ([#382](https://github.com/vuetifyjs/0/pull/382)), and stale data corrected across the board ([#458](https://github.com/vuetifyjs/0/pull/458), [#461](https://github.com/vuetifyjs/0/pull/461)).\n\nNew pages landed for [testing](https://0.vuetifyjs.com/guide/tooling/testing) ([#283](https://github.com/vuetifyjs/0/pull/283)) and a [core terminology glossary](https://0.vuetifyjs.com/guide/essentials/glossary) ([#410](https://github.com/vuetifyjs/0/pull/410)). The release pipeline moved to [Changesets](https://github.com/changesets/changesets) ([#365](https://github.com/vuetifyjs/0/pull/365)), and the docs now derive feature counts directly from the maturity manifest instead of hand-maintained numbers ([#378](https://github.com/vuetifyjs/0/pull/378)).\n\nFor learning the framework, [Vuetify0 Skillz](https://0.vuetifyjs.com/skillz) — interactive, hands-on tutorials built into the docs, itself in beta — now counts three guided tours: Using the Docs, Using Search, and Using Examples, the newest landing alongside the RC ([#459](https://github.com/vuetifyjs/0/pull/459)) to walk through live examples, the Playground, and multi-file recipes. Every page is also tagged Beginner, Intermediate, or Advanced, and the [skill filter](https://0.vuetifyjs.com/guide/essentials/using-the-docs#skill-levels-learning-tracks) trims the navigation to the levels you choose.\n\n---\n\n## AI tooling\n\n\n\nAs before, each documentation page has an Ask AI option, the docs publish `llms.txt` and `llms-full.txt`, and the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) connects an editor to the API reference. The MCP data is synced to the RC.\n\n::: info\nThe [Vuetify MCP guide](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp#claude-code) covers connecting it to an editor.\n:::\n\n---\n\n## Road to v1\n\nThe release candidate is the last milestone before v1.0:\n\n- **Alpha** (April 7, 2026) — open for feedback, APIs mostly stable\n- **Beta** (June 2, 2026) — API freeze; stability, documentation, and edge cases\n- **RC** (July 2, 2026) — final testing and documentation; no new features\n- **v1.0** (Q3 2026) — milestone-driven; ships when the milestones are met\n\nSee the [roadmap](https://0.vuetifyjs.com/roadmap) for details.\n\n---\n\n## FAQ\n\n### What changes at RC?\n\nScope, not API. The beta froze names and signatures but still accepted additive features; the RC accepts none. Between now and v1.0 only release-blocking fixes and documentation land — the focus is testing, security review, and feedback. New features resume after v1.\n\n### Can I use the RC in production?\n\nCode written against the beta API ran through six beta releases and the RC without changes, and the same guarantee carries to v1: the surface is frozen and the freeze is enforced by a repository check on every pull request.\n\n### Will the draft components ship in v1?\n\nThe ten draft components are experimental and outside the frozen surface, and each is already plotted on the public [milestones](https://github.com/vuetifyjs/0/milestones): table components in v1.1, product tours in v1.2, virtualized lists, Kanban, and OTP input in v1.3, then time and date pickers in v1.4 and v1.5. Each promotes when it meets the bar.\n\n### Will there be breaking changes between RC and v1?\n\nNone are planned. The only thing that could force one is a critical security vulnerability with no other fix, and it would be documented in the release notes.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They don't conflict, and you can adopt v0 primitives inside a Vuetify 4 app today. Meanwhile, Vuetify 5's internals are being refactored to use v0 directly — the frozen surface is the foundation that work builds on.\n\n### How do I report a problem or contribute?\n\nBug reports go through [issues.vuetifyjs.com](https://issues.vuetifyjs.com) — issues opened outside the generator are closed automatically. The [contributing guide](https://0.vuetifyjs.com/introduction/contributing) covers local setup and conventions, and [Discord](https://community.vuetifyjs.com) is the place to discuss before you build.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Report an issue** — [issues.vuetifyjs.com](https://issues.vuetifyjs.com)\n- **Contributing** — [Contributing guide](https://0.vuetifyjs.com/introduction/contributing)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Documentation is at [0.vuetifyjs.com](https://0.vuetifyjs.com); source is on [GitHub](https://github.com/vuetifyjs/0).*\n","packages/docs/src/pages/en/blog/announcing-vuetify0-v1.md":"---\nlayout: blog\nmeta:\n title: Announcing Vuetify0 1.0\n description: Vuetify0 1.0 — a headless meta-framework for Vue 3. Its foundation is now locked under semver — the logic layer plus a stable component spine.\n keywords: Vuetify0 1.0, Vuetify0 v1, headless Vue, meta-framework, composables, WAI-ARIA, semver\n---\n\n\n\n# Announcing Vuetify0 1.0\n\nI've built Vuetify0 — the framework, its documentation, and everything surrounding it — with one express intent: to take everything I've learned over a decade of building Vuetify and pour it into something that will stand the test of time. The principles and the underlying functionality that drive v0 weren't invented for this release; they were honed over ten years of Vuetify, tested against real applications, and only then extracted into a foundation you can build on directly.\n\nVuetify0 is 1.0. The release candidate held — the frozen surface shipped through the validation window without a breaking change — and the package is now `@vuetify/v0`, no tag required. For most projects, 1.0 is the signal that a library is safe to build on. For a framework whose job is to build other frameworks, it means something more precise: the contracts are locked.\n\n🖊️ John Leider • 📅 July 22nd, 2026\n\n\n\n---\n\n\n\n## Table of Contents\n\n- [What 1.0 means](#what-1-0-means)\n- [What Vuetify0 is](#what-vuetify0-is)\n- [Headless, accessible by default](#headless-accessible-by-default)\n- [The whole logic layer](#the-whole-logic-layer)\n- [Where it sits in the stack](#where-it-sits-in-the-stack)\n- [Logic without components](#logic-without-components)\n- [Proven, not promised](#proven-not-promised)\n- [The road to v1.x](#the-road-to-v1-x)\n- [Get started](#get-started)\n- [FAQ](#faq)\n\n---\n\n## What 1.0 means { #what-1-0-means }\n\nI want to be precise about what shipped, because it is easy to read \"1.0\" as \"every component is finished.\" Not all of them are — and for a meta-framework, that is by design.\n\nVuetify0 is a headless meta-framework — a logic layer you build UI libraries *on top of*. Its value is not a catalog of buttons; it is the guarantee that the primitives underneath your buttons will not move. So 1.0 is a promise about the foundation:\n\n- **The stable set is locked under semver.** Nineteen composables, seventeen utilities, and thirteen components — the selection family, the registry, the foundation and observer primitives, the `useTheme`, `useStorage`, and `useBreakpoints` plugins, and the structural spine the rest of the library is built from (Tabs, Checkbox, Radio, Switch, the providers, and more) — carry a no-breaking-changes guarantee for the entire 1.x line. Breaking changes wait for a major.\n- **The freeze is enforced mechanically.** A repository check fails any pull request that alters the public surface. The guarantee is not a promise in a blog post; it is CI.\n- **The rest of the components promote individually.** Beyond that stable spine, the remaining components are `preview` and graduate onto the frozen foundation one at a time, each on its own milestone rather than gated behind a single number. Stabilizing the engine and its load-bearing components first is exactly the right order for a meta-framework — everything downstream inherits that stability.\n\nIf you have used Vuetify at any point in the last decade, you have relied on this logic without seeing it — selection, registries, focus management, theming. 1.0 is that logic, extracted, hardened, and frozen, so you can build on it directly.\n\n![The Vuetify0 maturity matrix — 49 stable primitives across 15 categories at 1.0](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-v1/maturity-matrix-dark.png \"The Vuetify0 maturity matrix\"){ width=100% }\n\n::: info\nThe [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix) lists the current level for every component, composable, and utility.\n:::\n\n---\n\n## What Vuetify0 is\n\nIf this is your first time hearing about it: **Vuetify0 (v0) is a headless meta-framework for Vue 3.** Logic only, zero styling. You do not install v0 to get a button — you install it to *build* the button your design system paints.\n\nThat distinction is the whole point. Most component libraries hand you finished, opinionated UI and ask you to fight the defaults when they do not fit. Most headless libraries hand you a dozen primitives and leave the rest to you. v0 aims at the layer underneath both: the complete state, accessibility, and behavior of a UI library, exposed as composables and unstyled compound components, with nothing rendered until you say so.\n\nThe acid test v0 holds itself to: strip every stylesheet from the page, and the components still work — still manage focus, still enforce selection rules, still announce their state to a screen reader. If styling is load-bearing, it is not headless.\n\nThere is no plugin to register and nothing is global. Everything is a tree-shakeable import:\n\n```ts\nimport { createSelection, useBreakpoints } from '@vuetify/v0'\nimport { Tabs, Dialog } from '@vuetify/v0/components'\n```\n\n---\n\n## Headless, accessible by default\n\nHeadless is not an excuse to ship less. Every v0 component is WAI-ARIA correct out of the box, SSR-safe by default, and exposes each piece of its state as a `data-*` attribute so a stylesheet — or a design system — can react to it without touching the logic.\n\nAccessibility does not wait for a locale plugin, either. Every component ships a built-in English aria label through the locale system's `ti` method — \"translate if exists\" — which returns a translation when one is registered and falls back to the inline default otherwise:\n\n```ts\nconst label = locale.ti('Button.label') ?? 'Button'\n```\n\nAn app with no i18n configured still gets meaningful accessible names (WCAG 4.1.2), with zero locale strings bundled into the runtime. Add a locale plugin later and the same components localize with no code change. That is the pattern throughout v0: correct defaults for the beginner, full control for the framework author.\n\nThe release cycle closed with a dedicated accessibility pass — carousel autoplay that pauses on focus (WCAG 2.2.2), `aria-current` on tree items, explicit group labels on sliders and splitters, and more — so the guarantee holds in the details, not just the headline.\n\n---\n\n## The whole logic layer\n\nThe number that matters is not how many buttons v0 draws — it is how much of the hard logic you never have to write again. At 1.0, v0 ships **40 components, 71 composables, and 24 utilities** across fifteen categories, with ten more components already scheduled through v1.5.\n\nBefore you write custom logic, the odds are v0 already has the primitive:\n\n| You need | Reach for |\n|----------|-----------|\n| Single, multi, grouped, or nested selection | `createSingle`, `createSelection`, `createGroup`, `createNested` |\n| Wizard / carousel / step tracking | `createStep` |\n| Form validation with async + dirty tracking | `createForm`, `createValidation` |\n| Autocomplete / combobox | `createCombobox` |\n| Paginated, virtualized, sortable, filterable data | `createPagination`, `createVirtual`, `createSortable`, `createFilter`, `createDataTable` |\n| Floating UI — popover, tooltip, menu | `usePopover` |\n| Roving tabindex / virtual focus | `useRovingFocus`, `useVirtualFocus` |\n| Breakpoints, theme, RTL, locale, storage | `useBreakpoints`, `useTheme`, `useRtl`, `useLocale`, `useStorage` |\n\nThis is where \"meta-framework\" stops being marketing. The goal is breadth no point-solution can match — the selection, forms, data, and system primitives that every serious UI library re-implements, written once, tested once, and shared. See how that stacks up against a typical headless library in [Beyond a Component Library](https://0.vuetifyjs.com/introduction/why-vuetify0#beyond-a-component-library).\n\n---\n\n## Where it sits in the stack\n\nv0 is the bottom of a three-layer stack, and each layer only depends on the one below it:\n\n- **Vuetify0** — headless logic (this release)\n- **Design systems** — Material, and the in-development Emerald, Helix, and Onyx — each a *complete framework* with its own visual language, built directly on the v0 primitives\n- **Vuetify** — orchestration and the defaults system that ties it together\n\nThe clearest proof that the foundation is solid is that we are rebuilding on it ourselves. Vuetify's own internals are being refactored to consume v0 directly — the frozen 1.0 surface is exactly what that work stands on. A decade of Vuetify — 41k+ GitHub stars, millions of monthly downloads, MIT-licensed with nothing gated behind a paid tier — is being rebuilt from this layer up.\n\n---\n\n## Logic without components\n\nThe fastest way to understand v0 is to use a composable with nothing rendered. `createSelection` is a complete multi-selection engine — mandatory rules, batch operations, enrollment — and it does not care whether you ever draw a list:\n\n```ts\nimport { createSelection } from '@vuetify/v0'\n\nconst selection = createSelection({ mandatory: true })\n\nconst home = selection.register({ value: 'home' })\nconst search = selection.register({ value: 'search' })\n\nhome.select() // ticket self-method — select this item\nhome.isSelected.value // -> true\nselection.selectedIds // -> reactive Set of selected ids\nselection.selectedValues.value // -> reactive Set { 'home' }\n```\n\nWhen you *do* want UI, the same logic backs a headless compound component. The root owns state; the sub-components read it through context — no prop-drilling between siblings:\n\n```html\n\n\n\n```\n\nBoth examples run live in the docs — [createSelection](https://0.vuetifyjs.com/composables/selection/create-selection) and [Tabs](https://0.vuetifyjs.com/components/disclosure/tabs) — and every example on the site is a multi-file, copy-paste recipe you can open in the playground.\n\nWhere it gets interesting is at application scale. [DevKey](https://devkey.vuetifyjs.com), a developer API dashboard, is the reference implementation — maintained in lockstep with every release. Its dashboard is almost entirely wiring: a `Tabs` view over a data layer that is `useStorage` and nothing more, driving the components that render it.\n\n![The DevKey dashboard — API-key management built on Vuetify0](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-v1/devkey-dashboard.png \"DevKey — the Vuetify0 reference implementation\"){ width=100% }\n\nThe code behind that view is mostly this:\n\n```html\n\n\n\n```\n\nThe stable spine here — `Tabs` and the `useStorage`-backed data layer — is exactly what 1.0 freezes. The components it orchestrates (`DkTable`, the create-key dialog, the command palette) are built on preview primitives today; the data-table components promote to stable in v1.1, and the rest follow across the 1.x line. The wiring above doesn't change when they do. Build it yourself with the [DevKey integration guide](https://0.vuetifyjs.com/guide/integration/devkey).\n\n---\n\n## Proven, not promised\n\nThe 1.x guarantee is only worth as much as the testing behind it. Heading into 1.0:\n\n- **6,200+ passing unit tests** across the primitives, with average coverage above 98% and 80 of them at 100%.\n- **16 benchmark suites** regenerated on every release against a fixed apparatus, so regressions surface as history rather than anecdotes — `mergeDeep`, for instance, clears 1.7M+ ops/sec on a shallow merge, and a recent rewrite cut large-grid sort time by roughly 28×. The [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) documents the methodology and per-primitive results.\n- **A dedicated security pass** hardened the composables against prototype pollution and CSS injection, and validated theme, locale, and feature-flag inputs against safe charsets.\n- **100% TypeScript, zero runtime CSS.** The package ships no styles, and exports are annotated so bundlers drop anything you do not import.\n\nv0 is also built to be understood by the tools people now build with: every documentation page has an Ask AI option, the docs publish `llms.txt` and `llms-full.txt`, and the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) wires the full API reference into your editor.\n\n---\n\n## The road to v1.x { #the-road-to-v1-x }\n\n1.0 locks the engine. Everything on the roadmap from here is components promoting onto that stable foundation — and because the logic already shipped and is already frozen, each one is assembly over a proven primitive, not a rewrite. The milestones are public:\n\n- **v1.1** — DataTable and DataGrid components over the shipped `createDataTable` and `createDataGrid`, plus the Alert component\n- **v1.2** — Tour, a headless primitive for guided product tours and feature discovery\n- **v1.3** — Virtualizer, Kanban, and Otp over the shipped `createVirtual`, `createKanban`, and `createOtp`\n- **v1.4** — TimePicker, headless and accessible time selection\n- **v1.5** — DatePicker and DateRangePicker for single dates and ranges\n\nBeyond the components, the first design systems — Emerald and Onyx — come next, and the whole surface is authored for forward-compatibility with Vue Vapor. Track it on the [roadmap](https://0.vuetifyjs.com/roadmap) and the [milestones](https://github.com/vuetifyjs/0/milestones).\n\n---\n\n## Get started\n\n```bash\npnpm install @vuetify/v0\n```\n\nNo plugin to register, nothing global. Import what you need:\n\n```ts\nimport { createSelection } from '@vuetify/v0'\nimport { Dialog } from '@vuetify/v0/components'\n```\n\nThe [getting-started guide](https://0.vuetifyjs.com/introduction/getting-started) covers setup, and [Vuetify0 Skillz](https://0.vuetifyjs.com/skillz) walks through the docs, search, and examples interactively.\n\n---\n\n## FAQ\n\n### Does 1.0 mean the components are stable?\n\nThe spine is. Thirteen components — the structural and selection primitives the rest of the library builds on, like Tabs, Checkbox, Radio, and Switch — are stable and semver-locked at 1.0, alongside nineteen composables and seventeen utilities. The remaining components are `preview` and promote individually as they meet the bar. For a meta-framework, the engine and its load-bearing components are what must not move first; everything downstream inherits that stability.\n\n### Can I use it in production?\n\nYes. Code written against the beta API ran through six beta releases, the release candidate, and into 1.0 without changes, and the surface freeze is enforced by CI on every pull request. The stable set will not break under you within 1.x.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They do not conflict, and you can adopt v0 primitives inside a Vuetify 4 app today. Vuetify's own internals are being refactored to consume v0 directly.\n\n### When do the draft components ship?\n\nEach is plotted on the public [milestones](https://github.com/vuetifyjs/0/milestones): table components in v1.1, tours in v1.2, virtualized lists, Kanban, and OTP in v1.3, then time and date pickers in v1.4 and v1.5. Each promotes when it is ready.\n\n### How do I report a problem or contribute?\n\nBug reports go through [issues.vuetifyjs.com](https://issues.vuetifyjs.com). The [contributing guide](https://0.vuetifyjs.com/introduction/contributing) covers local setup, and [Discord](https://community.vuetifyjs.com) is the place to discuss before you build.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Report an issue** — [issues.vuetifyjs.com](https://issues.vuetifyjs.com)\n- **Contributing** — [Contributing guide](https://0.vuetifyjs.com/introduction/contributing)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Documentation is at [0.vuetifyjs.com](https://0.vuetifyjs.com); source is on [GitHub](https://github.com/vuetifyjs/0).*\n","packages/docs/src/pages/en/blog/april-2025-update.md":"---\nlayout: blog\nmeta:\n title: April 2025 Update\n description: April delivered tangible progress on MCP, the new theming engine, component refinements, docs, ESLint v4, and tooling across the Vuetify ecosystem.\n keywords: Vuetify April 2025, Model Context Protocol, Vuetify theming, ESLint flat config, Vuetify Playground, Tailwind integration\n---\n\n# April 2025 Update\n\nThis month is packed full of exciting updates and progress across the Vuetify ecosystem.\n\n---\n\n🖊️ John Leider • 📅 May 1st, 2025\n\n\n\n---\n\n## Building Momentum\n\nApril was a month of execution. Multiple long-standing features landed, foundational work for future flexibility accelerated, and we’re seeing clearer paths emerge around how Vuetify can scale—technically, visually, and in terms of contributor access.\n\nFrom labs promotions like VNumberInput and VSnackbarQueue, to the start of public-facing infrastructure like @vuetify/mcp, the team is pushing forward on all fronts. This kind of momentum is what sets up big things for the summer and fall—especially as we close in on shipping the new theming engine and continue to clean up performance bottlenecks.\n\n::: success\n\nCool example of the month: [VScrollSelect](https://play.vuetifyjs.com/playgrounds/CS5a9g) by [J-Sek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n- [Building Momentum](#building-momentum)\n - [Releases](#releases)\n - [MCP soon](#mcp-soon)\n - [Theming evolved](#theming-evolved)\n - [Performance improvements](#performance-improvements)\n- [Ecosystem updates](#ecosystem-updates)\n - [DX Efforts](#dx-efforts)\n - [Unvuetify](#unvuetify)\n - [Vuetify One teams](#vuetify-one-teams)\n - [Vuetify Play](#vuetify-play)\n - [Vuetify Issues](#vuetify-issues)\n- [The Road Ahead](#the-road-ahead)\n\n### Releases\n\nThe month of April saw the release of \"Andromeda\", the latest version of Vuetify, which includes a host of new features, improvements, and bug fixes. Most notably, [VNumberInput](https://vuetifyjs.com/components/number-inputs/) and [VSnackbarQueue](https://vuetifyjs.com/components/snackbar-queue/) were promoted from Labs to the Core framework! We've also followed up with several patch releases to address bugs and improve stability.\n\n![Hero image for andromeda release notes](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/andromeda-release-banner.png \"Andromeda release notes hero image\"){ height=150}\n\n**Details:**\n\n- [v3.8.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.0)\n- [v3.8.1](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.1)\n- [v3.8.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.2)\n- [v3.8.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.3)\n\n### MCP soon\n\nOne of the most exciting developments underway is the creation of [MCP: Model Context Protocol](https://modelcontextprotocol.io/introduction) and our efforts to provide LLMs with the most up to date framework information using it. The **@vuetify/mcp** package represents our attempt to improve how developers interact with Vuetify through AI and LLM-powered tools.\n\n![Image of outdated LLM response showing Vuetify 2](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/outdated-llm-responses.png \"Outdated LLM response\"){ height=500 }\n\nToday, developers often receive outdated or inaccurate help from AI chatbots because these models aren't trained on Vuetify’s latest updates and new innovations we're building. MCP is our answer to that problem.\n\nWe want to ensure developers have access to contextually accurate, up-to-date, and deeply integrated Vuetify tools, documentation, snippets and much more right when they need it.\n\n![Image of VSCode in Agent mode](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/vuetify-mcp.png \"VSCode agent querying vuetify-mcp\"){ height=550 }\n\nThis initiative won't just improve AI responses—it will fundamentally change how accessible and powerful Vuetify development can be.\n\nMCP is a major step towards empowering our community even further and we look forward to making the package public soon (like very soon).\n\n**Details:** [@vuetify/mcp](https://github.com/vuetifyjs/mcp)\n\n### Theming evolved\n\nAlongside MCP, another major focus has been Vuetify’s theming system. Our goal is to enable full customization of Vuetify — allowing developers to use any UI library, support long-awaited Material Design 3, and adapt the framework effortlessly to a wide variety of design systems. This includes things such as:\n\n- First party Tailwind integration.\n- Support for unstyled mode that includes only the necessary styles for components to function.\n- New and improved ways of interacting with the theme system.\n\nThe work happening right now is a foundational step toward that vision. We're targeting an October reveal for this theming overhaul and will be teasing more about it in the months ahead. Here's a small preview of the new theming API in action:\n\n```html\n\n\n\n```\n\nThese changes focus on expanding Vuetify’s flexibility, making it an even more powerful tool for projects of every scale and style.\n\n**Details:**\n\n- [PR#21244](https://github.com/vuetifyjs/vuetify/pull/21244)\n- [PR#21224](https://github.com/vuetifyjs/vuetify/pull/21224)\n- [Commit 3190331](https://github.com/vuetifyjs/vuetify/commit/3190331e70f42b7fdf4d7ee04f662b15eefde026)\n- [Commit abfdb77](https://github.com/vuetifyjs/vuetify/commit/abfdb777e0e00d4a1798f52d7e4c118e7409fcb9)\n\n### Performance improvements\n\nThis month, we focused on performance improvements across the board, including saving a bunch of overhead associated with computed caching and call frequency.\n\nFor those anticipating the release of [VTreeview](https://vuetifyjs.com/components/treeview), there has been movement on an [upstream](https://github.com/vuejs/babel-plugin-jsx/issues/712) issue that was bottlenecking performance. Once released, we will be able to wrap up the component and move it to the Core framework 🎉.\n\n**Details:**\n\n- [PR#21167](https://github.com/vuetifyjs/vuetify/pull/21167)\n- [Commit 8d798e3](https://github.com/vuetifyjs/vuetify/commit/8d798e36baf86f04eebf2828be0cffa0dc31053a)\n- [vue-macros#942](https://github.com/vue-macros/vue-macros/pull/942)\n\n## Ecosystem updates\n\nFrom the release of team subscriptions for Vuetify One, to major rewrites of tools like Vuetify Create and the modernized Vuetify Issues site, April was about refining the developer experience across the board. New tooling like @unvuetify is pushing boundaries with Nuxt and auto-import support, and MCP continues to bridge the gap between AI and accurate Vuetify usage.\n\n### DX efforts\n\nA major focus has been making Vuetify more accessible to developers at all levels.\n\n- **MCP**: Coding companion that provides contextually accurate, up-to-date, and deeply integrated Vuetify tools, documentation, snippets and much more right when you need it.\n- **Vuetify Create**: Multiple updates with improvements and planning for 3.0 representing a total rewrite of our project scaffolding tool.\n- **Labs Components**: Added auto-import support by default for labs components.\n- **Internationalization**: Expansion of translations including Spanish additions to the documentation.\n- **Modern ESLint Configuration**: Complete rewrite of our ESLint configuration with a functional approach, being rolled out across all repositories.\n\n**Details:**\n\n- [create/releases](https://github.com/vuetifyjs/create/releases)\n- [ESLint configuration](https://github.com/vuetifyjs/eslint-config-vuetify)\n- [Commit 98ef110](https://github.com/vuetifyjs/vuetify-loader/commit/98ef1106fb3875a5079d309986de61e12cd5683d)\n\n### Unvuetify\n\nThe motivation behind @unvuetify is simple: existing plugins aren’t keeping up with the evolving capabilities of Vue and Nuxt. Features like lazy hydration, auto-importing, and tree shaking are either missing or cumbersome in older tools.\n\nThis monorepo isn’t a hard replacement — you can still use vite-plugin-vuetify or webpack-plugin-vuetify if they suit your needs. But if you're working with Nuxt 3, Vue 3.5, or want more flexibility and performance, @unvuetify is built for you.\n\nCreated [@unvuetify](https://github.com/userquin/unvuetify-monorepo) repository to enable:\n\n- Vue Lazy Hydration support: ready to use Vue Lazy Hydration with Vuetify components and Nuxt 3/4.\n- Extensible: allow prefixing Vuetify components, directives and composables with Vuetify prefix.\n- VSCode directives suggestions.\n- Nuxt 3/4 utilities: drop a simple Nuxt module and it will auto-import all Vuetify components, directives and composables for you.\n- and more...\n\n**Details:**\n\n- [@unvuetify/shared](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/shared): utilities to resolve Vuetify components and directives\n- [@unvuetify/unimport-presets](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/unimport-presets): presets to auto-import Vuetify composables and directives\n- [@unvuetify/unplugin-vue-components-resolvers](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/unplugin-vue-components-resolvers): resolvers to auto-import Vuetify components and directives\n- [@unvuetify/vite-styles-plugin](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/styles-plugin): Vite plugin to load Vuetify sass/scss styles with Nuxt 3 SSR support\n- [@unvuetify/nuxt-utils](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/nuxt-utils): utilities to configure Vuetify composables, directives, components and styles in your Nuxt 3 application\n\n### Vuetify One teams\n\nWe have recently updated Vuetify One to support teams, which allows you to invite up to 25 members to collaborate on your Vuetify projects. This update is designed to share subscription benefits across your team.\n\n![Image of Vuetify One teams subscription panel](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/one-teams.png \"Vuetify One teams subscription panel\"){ height=400 }\n\nSubscribe by logging into Vuetify One (top right) and clicking on **Subscriptions**. If you have any issues or questions, please reach out to us on [Discord](https://community.vuetifyjs.com).\n\n**Details:** [PR#15](https://github.com/vuetifyjs/one/pull/15)\n\n### Vuetify Play\n\nOf the many changes coming to [Vuetify Play](https://play.vuetifyjs.com/), one of the longest requested features is finally here: **router support**! This means you can now create and share Vuetify Play projects that include Vue Router, allowing for more complex and interactive examples.\n\n![Image of Vuetify Play with router support](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/play-router.png \"Vuetify Play with router support\"){ height=250 }\n\nWe are also in the process of updating the entire Vuetify Play interface to be more intuitive and user-friendly. This includes a new design, improved navigation, and better organization of examples and components. We look forward to sharing more details in the coming months.\n\n**Details:**\n\n- [PR#7](https://github.com/vuetifyjs/play/pull/7)\n- [Commit 0e89a33](https://github.com/vuetifyjs/play/commit/0e89a334f241d440987908a456c205bed53e96d6)\n\n### Vuetify Issues\n\nWe are wrapping up the new [Vuetify Issue Generator](https://issues.vuetifyjs.com/), which will replace the current system (still on Vuetify v1.5!).\n\n\n\nThe new interface is faster, clearer, and built with Vuetify 3 from the ground up.\n\n## The Road Ahead\n\nMay is all about delivery. MCP will ship publicly, and early previews of the new theming system will start rolling out with documentation and migration guides. We're also beginning to lay the foundation for Vuetify 4. The focus is simple: ship real features, reduce friction, and keep moving fast.\n\nMore to come next month—stay tuned.\n","packages/docs/src/pages/en/blog/april-2026-update.md":"---\nlayout: blog\nmeta:\n title: April 2026 Update\n description: April shipped the Vuetify0 v1.0.0 public alpha — 46 headless components, 63 composables — plus 3 Vuetify patches, MCP v0.7.0, and ESLint 10 support.\n keywords: Vuetify April 2026, Vuetify0 v1.0.0 alpha, VTooltip cursor, VVideo controls, VNumberInput grouping, MCP playground tools, useTheme reactive\n---\n\n\n\n# April 2026 Update\n\n**Vuetify0 went public this month.** On April 7, v0 published its first 1.0 alpha alongside a [public announcement](/blog/announcing-vuetify0-alpha/) — 46 components, 63 composables, and a complete picture of where v0 fits in the next-generation stack. Two more alphas followed in the same month, the framework shipped three patches, and the MCP server gained playground and link tools.\n\n![Hero image for April update](https://cdn.vuetifyjs.com/docs/images/blog/april-2026-update/april-hero.png \"April hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 May 4th, 2026\n\n\n\n---\n\n## Going public\n\nApril was the alpha launch. **847 commits** across 14 active repositories, **52 merged PRs**, and **14 releases**, with [Vuetify0 v1.0.0-alpha.0](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.0) (April 7) at the center of it all. v0 alone shipped **756 commits** across four releases — v0.2.1, v1.0.0-alpha.0, v1.0.0-alpha.1, and v1.0.0-alpha.2 — culminating with reactive-by-default theming and locale, and with new headless Carousel, Image, NumberField, and Progress components. On the framework side, [J-Sek](https://github.com/J-Sek) drove most of April's 13 merged PRs alongside contributions from [userquin](https://github.com/userquin), [joatansampaio](https://github.com/joatansampaio), [12rambau](https://github.com/12rambau), [mueller-jens](https://github.com/mueller-jens), and [AriPerkkio](https://github.com/AriPerkkio). And the [Vuetify → Vuetify0 migration](https://vuetifyjs.com/blog/march-2026-update/) crossed its first finish line, with `display` now delegating to v0's `createBreakpoints`.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Spotlight: Vuetify0 Alpha](#vuetify0-alpha)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Vuetify MCP v0.7.0](#vuetify-mcp)\n* [Tooling Updates](#tooling-updates)\n* [Snips v2.0.0](#snips-v2)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [Product Updates](#product-updates)\n* [April 2026 Changelog](#april-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nApril shipped **14 releases across 6 repositories**. The framework patched twice (v4.0.5, v4.0.6) on the v4 line and once (v3.12.5) on the v3 line. v0 published four — including its first **v1.0.0-alpha.0** on April 7. The MCP server hit **v0.7.0**, ESLint Config landed four (**v4.5.0** through **v4.6.2**) including ESLint 10 support, the UnoCSS preset shipped **v0.3.0**, and the codemods CLI shipped **v1.0.6**.\n\n\n\n### Key Improvements\n\n* **[Vuetify0 v1.0.0-alpha.0](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.0)** — public alpha with 46 components and 63 composables ([announcement](/blog/announcing-vuetify0-alpha/))\n* **[VTooltip](/components/tooltips/)** — `target=\"cursor\"` now works for hoverable tooltips (pending v4.0.7)\n* **[VVideo](/components/videos/)** — Standalone `VVideoControls` component and progress bar shown by default (v4.0.6 Labs)\n* **[VPagination](/components/paginations/) / [VDataTableFooter](/components/data-tables/basics/)** — Ability to hide the last page (pending v4.0.7)\n* **[VNumberInput](/components/number-inputs/)** — `grouping` prop for thousands separator (pending v4.0.7)\n* **[VExpansionPanels](/components/expansion-panels/)** — Additional customization props (pending v4.0.7)\n* **display** — Migrated to v0's `createBreakpoints` (pending v4.0.7)\n* **[Vuetify MCP v0.7.0](https://github.com/vuetifyjs/mcp/releases/tag/v0.7.0)** — Playground and link CRUD tools\n\nView the complete list of changes in the [Full Changelog](#april-2026-changelog).\n\n**Details:**\n\n* [v4.0.6](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.6)\n* [v4.0.5](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.5)\n* [v3.12.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.5)\n* [Vuetify0 v1.0.0-alpha.2](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.2)\n* [Vuetify0 v1.0.0-alpha.1](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.1)\n* [Vuetify0 v1.0.0-alpha.0](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.0)\n\n---\n\n## Spotlight: Vuetify0 Alpha { #vuetify0-alpha }\n\n\n\n
\n\nAfter almost two years of building, **Vuetify0 published its first 1.0 alpha on April 7**. The release ships **46 components** and **63 composables** of headless Vue primitives — 100% TypeScript, zero styles, and built from the ground up to power custom UI libraries, design systems, and the Vuetify ecosystem itself.\n\nThe alpha was [announced in a dedicated post](/blog/announcing-vuetify0-alpha/) the same day, covering what v0 is, who it's for, what it ships with, and how it fits into the stack underneath the upcoming **Vuetify 5**, design systems built on Paper, and the existing **Vuetify 4** framework.\n\n**Maturity at alpha:**\n\n| Maturity | Components | Composables | What it means |\n|----------|------------|-------------|----------------------------|\n| Stable | 0 | 6 | API locked, production-ready |\n| Preview | 34 | 54 | Implemented, API may change |\n| Draft | 13 | 3 | Planned or in early development |\n\n**What followed:** Two more alpha releases shipped in the same month. **v1.0.0-alpha.1** (April 21) added the headless **Carousel** and **Image** components plus security-audit fixes across foundational composables. **v1.0.0-alpha.2** (April 28) made `useTheme`, `useLocale`, and `useFeatures` reactive-by-default, widened `SplitterPanel` size props, and codified the [reactive-default convention](https://0.vuetifyjs.com/guide/fundamentals/reactivity/) for plugins.\n\n**Details:**\n\n* [Announcing the Vuetify0 Alpha](/blog/announcing-vuetify0-alpha/)\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v1.0.0-alpha.2 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.2)\n* [v1.0.0-alpha.1 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.1)\n* [v1.0.0-alpha.0 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.0)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nApril merged **13 PRs** across the framework, with most landing after v4.0.6 and pending the next release. The headline pattern: feature work picked back up after March's stabilization sprint, with new props on existing components and a first cross-cut from v0 into Vuetify 4 mainline.\n\n### New Features\n\n**[VTooltip](/components/tooltips/)** — `target=\"cursor\"` now works for hoverable tooltips, anchoring the tooltip to the pointer position while still allowing the user to mouse onto the tooltip itself ([#22728](https://github.com/vuetifyjs/vuetify/pull/22728)).\n\n**[VExpansionPanels](/components/expansion-panels/)** — Additional customization props for finer control over the panel surface and transitions ([#22723](https://github.com/vuetifyjs/vuetify/pull/22723)).\n\n**[VPagination](/components/paginations/) and [VDataTableFooter](/components/data-tables/basics/)** — Ability to hide the last page in pagination controls, contributed by [userquin](https://github.com/userquin) ([#22788](https://github.com/vuetifyjs/vuetify/pull/22788)).\n\n**[VNumberInput](/components/number-inputs/)** — New `grouping` prop adds locale-aware thousands separators to numeric input ([#22134](https://github.com/vuetifyjs/vuetify/pull/22134)).\n\n**[VVideo](/components/videos/)** — Three Labs improvements landed in v4.0.6: `VVideoControls` is now usable as a standalone component, the progress bar is shown by default, and a fix prevents the volume tooltip from obstructing the slider.\n\n**display → v0** — The first internal Vuetify composable migrated to its v0 equivalent. The `display` plugin now delegates breakpoint management to v0's `createBreakpoints` ([#22710](https://github.com/vuetifyjs/vuetify/pull/22710)). This is the first cross-cut from v0 into Vuetify 4 mainline — the bridge between today's framework and tomorrow's headless layer.\n\n**Details:**\n\n* [VTooltip cursor target PR#22728](https://github.com/vuetifyjs/vuetify/pull/22728)\n* [VExpansionPanels customization PR#22723](https://github.com/vuetifyjs/vuetify/pull/22723)\n* [VPagination/VDataTableFooter hide-last-page PR#22788](https://github.com/vuetifyjs/vuetify/pull/22788)\n* [VNumberInput grouping PR#22134](https://github.com/vuetifyjs/vuetify/pull/22134)\n* [display → v0 createBreakpoints PR#22710](https://github.com/vuetifyjs/vuetify/pull/22710)\n\n### Bug Fixes\n\n| Component | Fix | Version | PR |\n|-----------|-----|---------|----|\n| **useActivator** | Avoid closing a hovered menu when its tooltip hides | v3.12.5 / v4.0.5 | — |\n| **SSR** | Avoid errors when rendering with the latest Vue | v4.0.5 | [#22764](https://github.com/vuetifyjs/vuetify/pull/22764) |\n| **types** | Support `noUncheckedSideEffectImports` | v4.0.5 | [#22766](https://github.com/vuetifyjs/vuetify/issues/22766) |\n| **VSnackbar** | Avoid blocking navigation | v4.0.5 | — |\n| **VPie** | Shrink hovered slices back on `mouseleave` | v4.0.5 Labs | — |\n| **VBadge** | Do not accept clicks within disabled elements | v4.0.6 | — |\n| **VField** | Pass color to `icon-color` when `glow` prop is true | v4.0.6 | [#21547](https://github.com/vuetifyjs/vuetify/pull/21547) |\n| **VOtpInput** | Remove stray semicolon from sass file | v4.0.6 | — |\n| **VSelectionControl** | `readonly` should not suppress `focus-visible` | v4.0.6 | [#22527](https://github.com/vuetifyjs/vuetify/pull/22527) |\n| **VVideo** | Avoid tooltip obstructing volume slider | v4.0.6 Labs | — |\n| **VSnackbarQueue** | Avoid stale z-index | v4.0.7 | [#22796](https://github.com/vuetifyjs/vuetify/pull/22796) |\n| **VField** | Correct baseline alignment | v4.0.7 | [#22812](https://github.com/vuetifyjs/vuetify/pull/22812) |\n| **VCheckbox** | Align indeterminate opacity and color with MD3 | v4.0.7 | [#22804](https://github.com/vuetifyjs/vuetify/pull/22804) |\n| **VProgressLinear** | Correct calculation for filled chunks | v4.0.7 | — |\n| **VBtnToggle** | Correct background when active | v4.0.7 | — |\n| **VList** | Invisibly focus first element after open | v4.0.7 | — |\n| **VSelects** | Merge `menuProps.contentClass` correctly | v4.0.7 | — |\n\n**Details:**\n\n* [VSelectionControl focus-visible PR#22527](https://github.com/vuetifyjs/vuetify/pull/22527)\n* [VField glow color PR#21547](https://github.com/vuetifyjs/vuetify/pull/21547)\n* [VSnackbarQueue z-index PR#22796](https://github.com/vuetifyjs/vuetify/pull/22796)\n* [VField baseline PR#22812](https://github.com/vuetifyjs/vuetify/pull/22812)\n* [VCheckbox MD3 alignment PR#22804](https://github.com/vuetifyjs/vuetify/pull/22804)\n\n### In Development\n\nA handful of significant features moved forward in April but remain open as the month closed:\n\n#### VHighlight\n\n[J-Sek](https://github.com/J-Sek) opened [#22817](https://github.com/vuetifyjs/vuetify/pull/22817) for **VHighlight**, a new component for highlighting matches in text — useful for search results, filtering, and command palettes. A complementary `toHighlight` utility is also being added in v0 ([#222](https://github.com/vuetifyjs/0/pull/222)).\n\n#### VSparkline Markers and Tooltips\n\n[#22748](https://github.com/vuetifyjs/vuetify/pull/22748) — Interactive markers and hover tooltips for the data visualization component, carrying over from March.\n\n#### VSlider Pill Variant\n\n[#22699](https://github.com/vuetifyjs/vuetify/pull/22699) — A `pill` variant for VSlider aligned with Material Design 3's rounded slider track design.\n\n#### Solar Iconset\n\n[#22706](https://github.com/vuetifyjs/vuetify/pull/22706) — Adding the Solar iconset via UnoCSS, expanding the icon options shipped through the iconify ecosystem.\n\n#### VOverlay GPU Compositing\n\n[#22800](https://github.com/vuetifyjs/vuetify/pull/22800) — Promote `VOverlay` to a GPU compositing layer to prevent flicker on WebKit, contributed by [e1berd](https://github.com/e1berd).\n\n#### Continued v0 Migration\n\nThe Vuetify → Vuetify0 refactor continues with the remaining core systems open for review:\n\n* **Theme** — Migrate the entire theme system to v0 ([#22765](https://github.com/vuetifyjs/vuetify/pull/22765))\n* **Locale/RTL** — Delegate locale and RTL management to v0 ([#22753](https://github.com/vuetifyjs/vuetify/pull/22753))\n* **Date** — Delegate to v0's `createDate` runtime ([#22768](https://github.com/vuetifyjs/vuetify/pull/22768))\n\nThe display migration ([#22710](https://github.com/vuetifyjs/vuetify/pull/22710)) merged in April and is the first of these to land.\n\n**Details:**\n\n* [VHighlight PR#22817](https://github.com/vuetifyjs/vuetify/pull/22817)\n* [VSparkline markers PR#22748](https://github.com/vuetifyjs/vuetify/pull/22748)\n* [VSlider pill PR#22699](https://github.com/vuetifyjs/vuetify/pull/22699)\n* [Solar iconset PR#22706](https://github.com/vuetifyjs/vuetify/pull/22706)\n* [VOverlay GPU compositing PR#22800](https://github.com/vuetifyjs/vuetify/pull/22800)\n* [Theme migration PR#22765](https://github.com/vuetifyjs/vuetify/pull/22765)\n* [Locale/RTL migration PR#22753](https://github.com/vuetifyjs/vuetify/pull/22753)\n* [Date migration PR#22768](https://github.com/vuetifyjs/vuetify/pull/22768)\n\n---\n\n## Vuetify MCP v0.7.0 { #vuetify-mcp }\n\n\n\n
\n\nThe MCP server released **v0.7.0** on April 28, shipping the [playground CRUD tools](/blog/march-2026-update/#mcp-playground-crud) that merged in late March alongside a new set of link tools.\n\n### What's New { #mcp-whats-new }\n\n**Playground CRUD** — 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 ([PR#19](https://github.com/vuetifyjs/mcp/pull/19)).\n\n**Link Tools** — A new set of tools for managing short links via [vtfy.link](https://vtfy.link). Generate, list, and update branded short URLs from inside the editor — useful for sharing playground demos, doc references, and AI-generated examples in support threads ([PR#20](https://github.com/vuetifyjs/mcp/pull/20)).\n\n**v0 Alpha Sync** — Composables, components, and exports synced for `v1.0.0-alpha.0`, so any AI assistant using the MCP server now generates accurate code against the latest v0 alpha API surface.\n\n### Setup\n\nInstall with the Vuetify CLI:\n\n::: tabs\n\n```bash [pnpm]\npnpm dlx @vuetify/cli add mcp\n```\n\n```bash [npm]\nnpx @vuetify/cli add mcp\n```\n\n```bash [yarn]\nyarn dlx @vuetify/cli add mcp\n```\n\n```bash [bun]\nbunx @vuetify/cli add mcp\n```\n\n:::\n\nOr configure manually:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [v0.7.0 Release](https://github.com/vuetifyjs/mcp/releases/tag/v0.7.0)\n* [Link Tools PR#20](https://github.com/vuetifyjs/mcp/pull/20)\n* [Playground CRUD PR#19](https://github.com/vuetifyjs/mcp/pull/19)\n\n---\n\n## Tooling Updates { #tooling-updates }\n\n### ESLint Config\n\n\n\n
\n\nThe shared ESLint config — used internally across the ecosystem and by teams that want Vuetify's house style out of the box — shipped **four releases** in April.\n\n**v4.5.0** — Added support for **ESLint 10**, matching the ecosystem-wide bump that began in March's eslint-plugin-vuetify v2.7.0 release.\n\n**v4.6.0** — Introduces a new Vue rule that **enforces blank lines between multiline sibling tags**, surfacing inconsistent template formatting that the autoformatter would otherwise leave alone.\n\n**v4.6.1, v4.6.2** — Refinement releases. v4.6.1 switched the new rule to use the `:multi-line` pseudo-class so single-line siblings aren't required to have separators, and v4.6.2 bumped dependencies.\n\n**Details:**\n\n* [ESLint Config GitHub Repository](https://github.com/vuetifyjs/eslint-config-vuetify)\n* [v4.6.2](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.6.2)\n* [v4.6.0](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.6.0)\n* [v4.5.0](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.5.0)\n\n### UnoCSS Preset\n\nThe UnoCSS preset shipped **v0.3.0** on April 23, addressing two issues from teams adopting the v4 + UnoCSS stack:\n\n* **Drop grid styles** — The grid utility variants no longer ship from the preset, since v4's CSS layers and UnoCSS Wind4 cover the same ground without conflicts ([#14](https://github.com/vuetifyjs/unocss-preset-vuetify/pull/14)).\n* **Breakpoint variant scoping** — Breakpoint variants now apply only to the rules owned by the preset, preventing accidental side effects on user rules ([#17](https://github.com/vuetifyjs/unocss-preset-vuetify/pull/17)).\n\nBoth fixes were authored by [J-Sek](https://github.com/J-Sek), and the preset is now the recommended companion for [Vuetify 4 + UnoCSS](https://vuetifyjs.com/blog/building-with-nuxt-and-unocss/) projects.\n\n**Details:**\n\n* [UnoCSS Preset GitHub Repository](https://github.com/vuetifyjs/unocss-preset-vuetify)\n* [v0.3.0 Release](https://github.com/vuetifyjs/unocss-preset-vuetify/releases/tag/v0.3.0)\n\n### Vuetify Codemods\n\nThe migration codemod CLI shipped **v1.0.6** on April 28 with a single but impactful fix: typography migrations now **preserve original font sizes** rather than mapping every legacy class to MD3 defaults. This addresses a regression in the v3-to-v4 migration tooling that surfaced as teams ran the codemod against larger codebases.\n\n**Details:**\n\n* [Vuetify Codemods GitHub Repository](https://github.com/vuetifyjs/vuetify-codemods)\n* [v1.0.6](https://github.com/vuetifyjs/vuetify-codemods/releases/tag/v1.0.6)\n\n---\n\n## Snips v2.0.0 { #snips-v2 }\n\n\n\n
\n\n**[Vuetify Snips](https://snips.vuetifyjs.com/)** shipped **v2.0.0** on April 23, completing its **Vuetify 3 → 4 migration**. Snips is now running on the v4 stack alongside the rest of the property line.\n\n::: success\n\n**Save 40% on Snips v4** — use code `SNIPS40` at checkout to celebrate the v4 release.\n\n:::\n\n**Details:**\n\n* [Vuetify Snips](https://snips.vuetifyjs.com/)\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\nApril was Vuetify0's most productive month yet — **756 commits**, **25 merged PRs**, and **4 releases** culminating in the public alpha. Beyond the alpha launch itself, the headline shifts were a wave of new components, a foundational change in plugin reactivity, and a security-audit pass across the core composables.\n\n\n\n### New Components\n\nSix new headless components were merged into v0 during April, each with a composable layer and compound component pattern:\n\n* **[Carousel](https://0.vuetifyjs.com/components/semantic/carousel/)** — Swipeable slide container with horizontal and vertical orientations, shift+wheel discrete navigation, and auto-mirrored scroll padding ([#190](https://github.com/vuetifyjs/0/pull/190), in v1.0.0-alpha.1)\n* **[Image](https://0.vuetifyjs.com/components/semantic/image/)** — Headless image component with lazy-loading and a dedicated `useImage` composable ([#191](https://github.com/vuetifyjs/0/pull/191), in v1.0.0-alpha.1)\n* **[NumberField](https://0.vuetifyjs.com/components/forms/number-field/)** — Numeric input with stepper, min/max, and locale-aware grouping ([#183](https://github.com/vuetifyjs/0/pull/183), in v0.2.1)\n* **[Progress](https://0.vuetifyjs.com/components/semantic/progress/)** — Progress indicator with indeterminate, determinate, and buffer states ([#180](https://github.com/vuetifyjs/0/pull/180), in v0.2.1)\n* **[Toggle](https://0.vuetifyjs.com/components/actions/toggle/)** — Dual-mode toggle button with group support (in v0.2.1)\n* **[Overflow](https://0.vuetifyjs.com/components/semantic/overflow/)** — Container that detects overflow and exposes scroll state to children ([#220](https://github.com/vuetifyjs/0/pull/220), pending v1.0.0-alpha.3)\n\nPlus **[AlertDialog](https://0.vuetifyjs.com/components/disclosure/alert-dialog/)**, **[Collapsible](https://0.vuetifyjs.com/components/disclosure/collapsible/)**, **[Portal](https://0.vuetifyjs.com/components/primitives/portal/)**, and **[Presence](https://0.vuetifyjs.com/components/primitives/presence/)** all landed alongside the alpha in v0.2.1.\n\n### New Composables\n\n* **[createNumeric](https://0.vuetifyjs.com/composables/forms/create-numeric/) / [createInput](https://0.vuetifyjs.com/composables/forms/create-input/)** — Foundational input composables that NumberField, Slider, and other form primitives now build on ([#181](https://github.com/vuetifyjs/0/pull/181))\n* **[useImage](https://0.vuetifyjs.com/composables/system/use-image/)** — Image loading state, srcset, and intersection-based lazy loading ([#191](https://github.com/vuetifyjs/0/pull/191))\n* **[createRating](https://0.vuetifyjs.com/composables/forms/create-rating/)** — Rating composable with compound component pattern\n* **[usePresence](https://0.vuetifyjs.com/composables/system/use-presence/)** — Mount/unmount lifecycle helper for transitions\n\n### Reactive-Default Plugins\n\nThe biggest architectural change of the month: **`useTheme`, `useLocale`, and `useFeatures` now use a reactive registry by default** ([#210](https://github.com/vuetifyjs/0/pull/210), [#211](https://github.com/vuetifyjs/0/pull/211)). This eliminates the workarounds previously needed to keep theme colors and feature flags reactive after switching, and the convention is now [codified in the docs](https://0.vuetifyjs.com/guide/fundamentals/reactivity/) for all plugin authors ([#213](https://github.com/vuetifyjs/0/pull/213)).\n\nA companion fix in `createRegistry` skips the `values`/`keys`/`entries` cache when the registry is reactive, so consumers get fresh reads every access ([#209](https://github.com/vuetifyjs/0/pull/209)).\n\n### Security and Performance\n\n* **Security audit** — Foundational composables received a sweep of security-audit fixes ([30cc5e1](https://github.com/vuetifyjs/0/commit/30cc5e1118187c412d416d1ef2c6c7c2d73349f2)), including `useTheme` sanitizing theme names and color values in CSS generation.\n* **Tree-shaking** — Module-level allocations annotated with `/* @__PURE__ */` and exports marked with `/* #__NO_SIDE_EFFECTS__ */` so bundlers can eliminate unused composables more aggressively.\n* **Test infrastructure** — Test coverage raised to **97.2%**, vitest pool switched to vmThreads, and tsdown + web-types generation now run in parallel.\n\n```html { resource=\"src/components/Gallery.vue\" }\n\n\n\n```\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n### Coming Next in v0\n\n* **[useDragDrop](https://github.com/vuetifyjs/0/pull/225)** — Headless drag-and-drop primitive\n* **[Tooltip](https://github.com/vuetifyjs/0/pull/226)** — Headless tooltip with region coordination\n* **[Tour](https://github.com/vuetifyjs/0/pull/178)** — Tour component and `useTour` composable for product walkthroughs\n* **[createDataGrid](https://github.com/vuetifyjs/0/pull/174)** — Data grid composable for advanced table layouts\n* **[Emerald Paper Design System](https://github.com/vuetifyjs/0/pull/167)** — Phase 0 of the first commercial design system built on Paper\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v1.0.0-alpha.2 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.2)\n* [Carousel PR#190](https://github.com/vuetifyjs/0/pull/190)\n* [Image PR#191](https://github.com/vuetifyjs/0/pull/191)\n* [Overflow PR#220](https://github.com/vuetifyjs/0/pull/220)\n* [NumberField PR#183](https://github.com/vuetifyjs/0/pull/183)\n* [Reactive-default useTheme PR#210](https://github.com/vuetifyjs/0/pull/210)\n* [Reactive-default useLocale/useFeatures PR#211](https://github.com/vuetifyjs/0/pull/211)\n\n---\n\n## Product Updates { #product-updates }\n\n### DevKey\n\n\n\n
\n\n**[DevKey](https://github.com/vuetifyjs/devkey)** is a small Vuetify0 demo project — the same reference app used as the [implementation walkthrough in the alpha announcement](/blog/announcing-vuetify0-alpha/). It's not a real product; the public repo exists so anyone learning v0 can read along and see how the headless primitives compose into a credible-looking app shell.\n\nApril brought a brand pass to make the demo presentable: a Coolify deploy workflow, a Geist-based wordmark, a `DkLogo` component, an asset-generation script for favicons and og images, and branded landing, login, and dashboard pages.\n\n![DevKey demo](https://cdn.vuetifyjs.com/docs/images/blog/april-2026-update/devkey.png \"DevKey — Vuetify0 demo project\")\n\n**Details:**\n\n* [DevKey GitHub Repository](https://github.com/vuetifyjs/devkey)\n* [Implementation walkthrough (in the alpha announcement)](/blog/announcing-vuetify0-alpha/)\n\n### Vuetify One\n\n\n\n
\n\n**[Vuetify One](https://one.vuetifyjs.com/)** received a **v4.0.6 update** alongside two CSS layer ordering fixes that resolved a class of issues where utility classes were being overridden by the framework reset. The same fix pattern was applied across **issues** (the issue triage app) earlier in the month, completing the v4 migration cleanup that began in February.\n\n---\n\n## April 2026 Changelog { #april-2026-changelog }\n\nThe following section provides an overview of the changes made in April 2026, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* v3.12.5 / v4.0.5: SSR compatibility with the latest Vue, useActivator menu/tooltip fix, VSnackbar navigation fix, VPie hover Labs fix\n* v4.0.6: VBadge clicks within disabled, VField glow icon-color, VSelectionControl focus-visible, VVideo standalone controls and progress-bar default\n* Pending v4.0.7: VTooltip cursor target, VExpansionPanels customization, VPagination/VDataTableFooter hide-last-page, VNumberInput grouping, VField baseline, VCheckbox MD3 alignment, display → v0 migration\n\n**Expand** this section to see the detailed changelog for April 2026:\n\n
\nApril 2026 Full Changelog\n\n### v3.12.5 (2026-04-02)\n\n**:wrench: Bug Fixes**\n\n* **useActivator:** avoid closing hovered menu when tooltip hides ([71d657b](https://github.com/vuetifyjs/vuetify/commit/71d657b))\n\n---\n\n### v4.0.5 (2026-04-02)\n\n**:wrench: Bug Fixes**\n\n* **SSR:** avoid errors when rendering with latest Vue ([#22764](https://github.com/vuetifyjs/vuetify/issues/22764)) ([ecbe030](https://github.com/vuetifyjs/vuetify/commit/ecbe030)), closes [#22762](https://github.com/vuetifyjs/vuetify/issues/22762)\n* **types:** support noUncheckedSideEffectImports ([2098fb1](https://github.com/vuetifyjs/vuetify/commit/2098fb1)), closes [#22766](https://github.com/vuetifyjs/vuetify/issues/22766)\n* **useActivator:** avoid closing hovered menu when tooltip hides ([131e659](https://github.com/vuetifyjs/vuetify/commit/131e659)), closes [#22759](https://github.com/vuetifyjs/vuetify/issues/22759)\n* **VSnackbar:** avoid blocking navigation ([143ceaa](https://github.com/vuetifyjs/vuetify/commit/143ceaa)), closes [#18283](https://github.com/vuetifyjs/vuetify/issues/18283)\n\n**:test_tube: Labs**\n\n* **VPie:** shrink back hovered slices on mouseleave ([1893748](https://github.com/vuetifyjs/vuetify/commit/1893748))\n\n---\n\n### v4.0.6 (2026-04-22)\n\n**:wrench: Bug Fixes**\n\n* **VBadge:** do not accept clicks within disabled elements ([996cd6e](https://github.com/vuetifyjs/vuetify/commit/996cd6e)), closes [#22172](https://github.com/vuetifyjs/vuetify/issues/22172)\n* **VField:** pass color to icon-color if glow prop is true ([#21547](https://github.com/vuetifyjs/vuetify/issues/21547)) ([10125b7](https://github.com/vuetifyjs/vuetify/commit/10125b7)), closes [#21388](https://github.com/vuetifyjs/vuetify/issues/21388)\n* **VOtpInput:** remove semicolon from sass file ([bf53f9e](https://github.com/vuetifyjs/vuetify/commit/bf53f9e)), closes [#22798](https://github.com/vuetifyjs/vuetify/issues/22798)\n* **VSelectionControl:** readonly should not suppress focus-visible ([#22527](https://github.com/vuetifyjs/vuetify/issues/22527)) ([ce234a8](https://github.com/vuetifyjs/vuetify/commit/ce234a8)), closes [#22513](https://github.com/vuetifyjs/vuetify/issues/22513)\n\n**:test_tube: Labs**\n\n* **VVideo:** avoid tooltip obstructing volume slider ([add2a7e](https://github.com/vuetifyjs/vuetify/commit/add2a7e))\n* **VVideo:** support VVideoControls as standalone component ([aaf9cf5](https://github.com/vuetifyjs/vuetify/commit/aaf9cf5)), closes [#22529](https://github.com/vuetifyjs/vuetify/issues/22529)\n* **VVideo:** show progress bar by default ([1be0091](https://github.com/vuetifyjs/vuetify/commit/1be0091))\n\n
\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nMay continues on three fronts. **Vuetify4** has a queue of merged PRs awaiting v4.0.7 — VTooltip cursor target, VExpansionPanels customization, VPagination/VDataTableFooter hide-last-page, VNumberInput grouping, the display → v0 migration, and a stack of fixes from J-Sek. **Vuetify0** has v1.0.0-alpha.3 work in flight, including useDragDrop, the headless Tooltip, the Tour component, createDataGrid, and the first phase of the **Emerald Paper Design System**. And the **theme**, **locale**, and **date** v0 migrations all have open PRs in vuetify ready to follow display through to merge.\n\n* The [Vuetify0 alpha](/blog/announcing-vuetify0-alpha/) is live — try it in a new project or via [v0play](https://v0play.vuetifyjs.com)\n* The [Vuetify MCP server](https://github.com/vuetifyjs/mcp) now ships playground and link tools for [Vuetify One](/one/) subscribers — manage demos and short links from your editor\n\n::: error\n\n**Vuetify needs your support.** OpenCollective funds are exhausted and we're currently unable to compensate contributors for ongoing work on the framework and ecosystem tools. If your team relies on Vuetify, please consider sponsoring us via [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution keeps Vuetify shipping.\n\n:::\n\nVuetify is and always will be free and open source. If your team builds on the framework, the v0 alpha, the MCP, the CLI, the Nuxt module, the ESLint plugin, or any of the design systems coming behind them, your support directly funds continued development. [Vuetify One](https://one.vuetifyjs.com/) and [GitHub Sponsors](https://github.com/sponsors/johnleider) are the most direct ways to help.\n\nThank you for being part of the Vuetify community. See you in May!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/august-2025-update.md":"---\nlayout: blog\nmeta:\n title: August 2025 Update\n description: August prepares the Vuetify0 pre-alpha, launches the redesigned issues page, and continues delivering powerful components and improvements.\n keywords: Vuetify August 2025, Vuetify0, v0 pre-alpha, VEditor, issues page redesign, theming webinar, performance optimization\n---\n\n# August 2025 Update\n\nWelcome to our August update! This month marks a pivotal moment in Vuetify's evolution as we prepare to release the pre-alpha of Vuetify0, launch our redesigned issues page, and continue delivering powerful components and improvements.\n\n![Hero image for August update](https://cdn.vuetifyjs.com/docs/images/blog/august-2025-update/august-hero.png \"August hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 September 9th, 2025\n\n\n\n---\n\n## From Zero\n\nVuetify0 reached pre-alpha status this month, delivering the first public release of our meta-framework for UI library development. The release includes foundational composables for registration and selection, plus core plugins for breakpoints, hydration, locale management, storage, and theming. These framework-agnostic tools represent the extracted intelligence that powers Vuetify, now available as standalone packages for any development environment.\n\nEcosystem improvements continued throughout August with significant team-community collaboration driving advances in foundational architecture, component refinements, and developer experience enhancements. The 87 pull requests merged this month reflect ongoing contributions that strengthen not just Vuetify0, but the entire ecosystem. This pre-alpha milestone sets the foundation for broader adoption while maintaining our commitment to developer productivity and framework flexibility.\n\n::: success\n\nCool example of the month: [VVideo Card](https://play.vuetifyjs.com/playgrounds/-10f7g) by [Vuetify](https://github.com/vuetifyjs)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n* [\"Mastering Vuetify Theming\" Webinar Recap](#mastering-vuetify-theming-webinar-recap)\n* [Vuetify0 in Pre-Alpha](#vuetify0-in-pre-alpha)\n* [Framework Updates](#framework-updates)\n* [Ecosystem Spotlight: Vuetify Issues](#ecosystem-spotlight-vuetify-issues)\n* [Free Premium Themes](#free-premium-themes)\n* [Building the Future](#building-the-future)\n\n---\n\n## Releases\n\nAugust focused on general component stability and bug fixes. View the complete list of changes in the [Full Changelog](#august-2025-changelog).\n\n**Details:**\n\n* [v3.9.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.4)\n* [v3.9.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.5)\n* [v3.9.6](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.6)\n\n## \"Mastering Vuetify Theming\" Webinar Recap { #mastering-vuetify-theming-webinar-recap }\n\nOn August 27th, we hosted our second community webinar: **\"Mastering Vuetify's Theming Engine\"**. Following the success of July's migration webinar, this session dove deep into one of Vuetify's most powerful features.\n\n### What We Covered\n\n* **Theme Architecture**: Understanding how Vuetify's theming system works under the hood\n* **Custom Theme Creation**: Step-by-step guide to building professional themes\n* **Dynamic Theming**: Implementing runtime theme switching and user preferences\n* **Performance Optimization**: Best practices for theme efficiency\n* **Advanced Techniques**: CSS variables, theme inheritance, and component-specific theming\n\n### Community Response\n\nThe turnout exceeded our expectations, with developers from around the world joining to level up their theming skills. The Q&A session revealed common challenges that we're already addressing in our documentation and tooling improvements.\n\n### Recording\n\nWe have the event recorded and are working on what the process looks like to bring it to you. More than likely will end up on our [YouTube Channel](https://www.youtube.com/@vuetifyjs), make sure to subscribe if you haven't already.\n\n### Upcoming Webinar: \"Performance Crisis\"\n\nBased on your feedback, our September webinar will tackle one of the most requested topics: **\"Performance Crisis: Slash Your Bundle Size\"**. This session will show you how to dramatically reduce your Vuetify application's footprint through:\n\n* Advanced tree-shaking techniques\n* Component lazy loading strategies\n* Build optimization configurations\n* Real-world case studies with measurable results\n\n![Webinar highlights](https://cdn.vuetifyjs.com/docs/images/blog/august-2025-update/webinar.png \"Performance Crisis Webinar\"){ height=135 }\n\n**Details:**\n\n* Tuesday, September 30th at 9:00 AM CST\n* [Performance Crisis Sign-up](https://discord.gg/vuetify-340160225338195969?event=1414654608541749308)\n\n## Vuetify0 in Pre-Alpha\n\nIf you missed my initial mentions of it, [Vuetify0](https://0.vuetifyjs.com/) is a **meta framework** for building UI libraries. We've distilled the core of Vuetify into a collection of highly optimized, framework-agnostic composables. This means the power that drives Vuetify—its layout system, theming engine, localization setup, and component logic—will be available as a standalone package.\n\n**Modern Development Experience**: Built from the ground up for Vue 3, TypeScript, and modern build tools, v0 embraces the latest web platform features while maintaining broad compatibility.\n\n### What to Expect in the Pre-Alpha\n\nThe initial Vuetify0 release will focus on the foundational pillars of the framework. Some pages are still receiving their initial content so please pardon our dust. Here's what you'll be able to explore:\n\n**Composables:**\n\n* **Foundational** composables are the backbone of Vuetify0 and are the basic building blocks for creating a UI library.\n* **Registration** composables are the foundational pieces for selection and tokenization.\n* **Selection** composables serve as the core logic for managing selectable items, including single and multiple selection modes.\n* **Plugins**: [Breakpoints](https://0.vuetifyjs.com/composables/plugin/use-breakpoints), [Hydration](https://0.vuetifyjs.com/composables/plugin/use-hydration), [Locale](https://0.vuetifyjs.com/composables/plugin/use-locale), [Storage](https://0.vuetifyjs.com/composables/plugin/use-storage), and [Theme](https://0.vuetifyjs.com/composables/plugin/use-theme) plugins to manage global application state.\n\n::: info\n\nIf you're wondering how Vuetify0 will affect you as a Vuetify user, the short answer is: it won't—at least not immediately.\n\n:::\n\nThe long-term plan is to incrementally integrate Vuetify0 composables into Vuetify over time, starting with new components and gradually refactoring existing ones. This approach allows us to enhance the framework's architecture without disrupting your current projects. If you're wondering how Vuetify0 will affect you as a Vuetify user, the short answer is: it won't—at least not immediately. What it *will* do is open the door for new libraries and tools to be built on the same fundamentals that drive Vuetify. Allowing developers to opt into the Vuetify ecosystem without having to commit to \"Big Vuetify\" as we've started calling it internally.\n\n**Details:**\n\n* [Vuetify0 Composables](https://0.vuetifyjs.com/composables)\n* [v0.0.2 Release Notes](https://github.com/vuetifyjs/0/releases/tag/v0.0.2)\n* [Discussion on Discord](https://discord.gg/vK6T89eNP7)\n\n## Framework Updates\n\nWe've made significant progress on several key components and features this month. The team merged **87 pull requests** in August alone, primarily focusing on component enhancements, bug fixes, and developer experience improvements.\n\n### VEditor: Final Testing, Coming Soon\n\nVEditor is in the final stages of testing and will be available soon. This rich text editor brings professional content editing capabilities to Vuetify applications, including:\n\n![VEditor showcase](https://cdn.vuetifyjs.com/docs/images/blog/august-2025-update/veditor.png \"VEditor rich text formatting features\"){ height=135 }\n\n* **Rich Text Formatting:** Comprehensive formatting options like bold, italic, underline, strikethrough, code blocks, heading levels (H1-H6), subscript, superscript, and blockquotes\n* **Customizable Toolbar:** Choose which formatting options to display, hide the toolbar completely, or configure it dynamically at runtime with Material Design Icons\n* **Form Integration:** Full v-model support with Vuetify's validation system, including rules for required content, character limits, and seamless v-form compatibility\n* **Flexible Styling:** Configurable height, multiple variants (outlined, solo, underlined), responsive design, and full Vuetify theme integration\n* **Advanced Features:** Clearable content functionality, proper focus management, accessibility support with ARIA labels, and cross-browser contentEditable implementation\n\n**Details:**\n\n* [VEditor PR#21653](https://github.com/vuetifyjs/vuetify/pull/21653)\n\n## Ecosystem Spotlight: Vuetify Issues { #ecosystem-spotlight-vuetify-issues }\n\nThe redesigned issues experience is now live at [issues.vuetifyjs.com](https://issues.vuetifyjs.com). This release focused on migrating the app from Vuetify v1.5 to v3 for a modern, consistent UI and better developer ergonomics. We also integrated Vuetify One to enable future enhancements—like special labels for subscribers—to streamline triage and improve visibility.\n\n\n\n::: info\n\nThe previous issues page was originally built with Vuetify v1.5 in 2018\n\n:::\n\n**Details:**\n\n* [New Issues Page](https://issues.vuetifyjs.com)\n* [Contributing Guide](https://vuetifyjs.com/about/contributing/)\n* [Community Discord](https://community.vuetifyjs.com)\n\n## Free Premium Themes\n\nAll Vuetify‑made themes—designed, built, and maintained by the Vuetify team—are now free for **personal** use. Enjoy polished, production‑ready starting points to learn best practices, explore ideas, and accelerate side projects without licensing friction.\n\n### Now Available for Free\n\nThis move reflects our commitment to lowering barriers to entry and helping developers create beautiful applications faster. Visit the [Vuetify Store](https://store.vuetifyjs.com) to explore the expanded free collection.\n\n![Vuetify Store showcase](https://cdn.vuetifyjs.com/docs/images/blog/august-2025-update/store.png \"Free premium themes now available\"){ height=600 }\n\n**Details:**\n\n* [Crypto Coin Theme](https://store.vuetifyjs.com/products/crypto-coin-theme)\n* [Flairo Theme Pro](https://store.vuetifyjs.com/products/flairo-theme-pro)\n* [Vuetify 3 Nebula UI Kit](https://store.vuetifyjs.com/products/vuetify-3-nebula-ui-kit)\n* [Zero Theme Pro](https://store.vuetifyjs.com/products/zero-theme-pro)\n* [Made by Vuetify Bundle](https://store.vuetifyjs.com/products/made-by-vuetify-bundle)\n\n## August 2025 Changelog\n\nThe following section provides an overview of the changes made in August 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* Accessibility and high-contrast: forced-colors fixes in VBtn/VCard, ARIA labels in VColorPicker, role added to VTextField input\n* Smarter selection UX: VSelect fixes placeholder overlap and shows selected text\n* More reliable date picking: VDatePicker prioritizes allowed months/years and fixes year scroll/focus\n* Tables/inputs polish: VDataTable row/stripe fixes, VNumberInput focus/icons, VField clear, menu/tooltip reposition\n* Labs upgrades: VVideo aspect-ratio and visuals, VPie touch segments, VColorInput pip/focus, VIconBtn icon-color\n\n**Expand** this section to see the detailed changelog for August 2025:\n\n
\n\n### :wrench: Bug Fixes\n\n* **validation:** return aliases when called without arguments ([#21868](https://github.com/vuetifyjs/vuetify/issues/21868)) ([64a82d4](https://github.com/vuetifyjs/vuetify/commit/64a82d4776d22628db5d3a55fc070ce2463eb602)), closes [#21477](https://github.com/vuetifyjs/vuetify/issues/21477)\n* **VAlert:** restore unit-less support in Sass variable for title line-height ([#21843](https://github.com/vuetifyjs/vuetify/issues/21843)) ([8c1778a](https://github.com/vuetifyjs/vuetify/commit/8c1778a26a08d9d663681d83d6dd9160e3cb5c74)), closes [#21841](https://github.com/vuetifyjs/vuetify/issues/21841)\n* **VBtn:** render border in forced-colors mode ([#21848](https://github.com/vuetifyjs/vuetify/issues/21848)) ([25af169](https://github.com/vuetifyjs/vuetify/commit/25af169ae03c28bc6472f00347edaeaefb73aeb3))\n* **VCard:** hide progress border in forced-colors mode ([#21836](https://github.com/vuetifyjs/vuetify/issues/21836)) ([4335576](https://github.com/vuetifyjs/vuetify/commit/43355769444e256eed6111d23b75d7dc2838a093)), closes [#21835](https://github.com/vuetifyjs/vuetify/issues/21835)\n* **VColorPicker:** aria labels for main controls ([#21839](https://github.com/vuetifyjs/vuetify/issues/21839)) ([e2ab73a](https://github.com/vuetifyjs/vuetify/commit/e2ab73a7aafb1c443ad30b28134e41b4662c27fe)), closes [#21834](https://github.com/vuetifyjs/vuetify/issues/21834)\n* **VColorPicker:** keep canvas visible when width is not px ([22b828f](https://github.com/vuetifyjs/vuetify/commit/22b828f5cc625adeeb206e20746154dd79f33e0c))\n* **VColorPicker:** prevent sass nested deprecation warning ([8083db9](https://github.com/vuetifyjs/vuetify/commit/8083db971f7fe51151241447f90a4cd14cff32be)), closes [#21909](https://github.com/vuetifyjs/vuetify/issues/21909)\n* **VDataTable:** correct row height when with show-select and compact ([#21829](https://github.com/vuetifyjs/vuetify/issues/21829)) ([29b3bb0](https://github.com/vuetifyjs/vuetify/commit/29b3bb0b3363e8c295cf16286ed500e8ae269e98)), closes [#21767](https://github.com/vuetifyjs/vuetify/issues/21767)\n* **VDataTable:** missing stripes on fixed columns ([#21715](https://github.com/vuetifyjs/vuetify/issues/21715)) ([739a6c9](https://github.com/vuetifyjs/vuetify/commit/739a6c9aa8ac6064d7484e1e40dbf111d2ab75c5))\n* **VDatePicker:** prioritize allowed-months and allowed-years ([#21916](https://github.com/vuetifyjs/vuetify/issues/21916)) ([810645c](https://github.com/vuetifyjs/vuetify/commit/810645c5c37aeeb3aec1a575763c5e836b7bb8b6)), closes [#21911](https://github.com/vuetifyjs/vuetify/issues/21911)\n* **VDatePickerYears:** fix scroll/focus of selected year ([#21951](https://github.com/vuetifyjs/vuetify/issues/21951)) ([b531dbf](https://github.com/vuetifyjs/vuetify/commit/b531dbfa1ae6e08dddea41f965912b8cf60a55ce)), closes [#21950](https://github.com/vuetifyjs/vuetify/issues/21950)\n* **VField:** avoid duplicated emits on clear ([#21865](https://github.com/vuetifyjs/vuetify/issues/21865)) ([a97f103](https://github.com/vuetifyjs/vuetify/commit/a97f10306bd32e739c4cd52f4939e2b6d3b648d1)), closes [#21417](https://github.com/vuetifyjs/vuetify/issues/21417)\n* **VMenu, VTooltip:** apply scroll-strategy reposition for horizontal overflow ([#21309](https://github.com/vuetifyjs/vuetify/issues/21309)) ([bd48658](https://github.com/vuetifyjs/vuetify/commit/bd486588ae665014abe9a2af09bee12868e8574f)), closes [#20625](https://github.com/vuetifyjs/vuetify/issues/20625)\n* **VNumberInput:** consistent color of control icons ([#21936](https://github.com/vuetifyjs/vuetify/issues/21936)) ([6a50b44](https://github.com/vuetifyjs/vuetify/commit/6a50b44bf48b11f975c52c78074f99f52e34ab10)), closes [#21931](https://github.com/vuetifyjs/vuetify/issues/21931)\n* **VNumberInput:** keep focus when incrementing in the list ([#21824](https://github.com/vuetifyjs/vuetify/issues/21824)) ([d6b3384](https://github.com/vuetifyjs/vuetify/commit/d6b338465a1c55fa72838c668276dcc9855b4f54)), closes [#17083](https://github.com/vuetifyjs/vuetify/issues/17083)\n* **VOtpInput:** support composing character with IME ([42e15a3](https://github.com/vuetifyjs/vuetify/commit/42e15a349c1de7721c754d9aee2b437144b1a89b)), closes [#21918](https://github.com/vuetifyjs/vuetify/issues/21918)\n* **VOverlay:** don't use content element as scroll parent ([06c4c91](https://github.com/vuetifyjs/vuetify/commit/06c4c91f94d18af53041961f2c9fb0cc7e364cb2))\n* **VSelect:** select placeholder overlap ([#21923](https://github.com/vuetifyjs/vuetify/issues/21923)) ([5c06ba7](https://github.com/vuetifyjs/vuetify/commit/5c06ba7bd76bca370320433e7a0f058362d6028f)), closes [#21922](https://github.com/vuetifyjs/vuetify/issues/21922)\n* **VSelect:** use selected text instead of value ([#21902](https://github.com/vuetifyjs/vuetify/issues/21902)) ([d0ef001](https://github.com/vuetifyjs/vuetify/commit/d0ef0016adf8517620ce14c5e1e50e800195fb95)), closes [#21097](https://github.com/vuetifyjs/vuetify/issues/21097)\n* **VSlider:** avoid thumb label wedge gap ([#21847](https://github.com/vuetifyjs/vuetify/issues/21847)) ([059e578](https://github.com/vuetifyjs/vuetify/commit/059e578e21f376bf1059c59fbf72eb278664ed93))\n* **VSparkline:** accept a single number ([#21944](https://github.com/vuetifyjs/vuetify/issues/21944)) ([d7b0e34](https://github.com/vuetifyjs/vuetify/commit/d7b0e34e9d717ce96c898875c4e480ab89d81eea)), closes [#19697](https://github.com/vuetifyjs/vuetify/issues/19697)\n* **VStepper:** align title and subtitle to the avatar ([12735e6](https://github.com/vuetifyjs/vuetify/commit/12735e6797e1c482db74fd7615af7b484e282614)), closes [#21884](https://github.com/vuetifyjs/vuetify/issues/21884)\n* **VStepper:** correct cursor for readonly item ([aeb6f4d](https://github.com/vuetifyjs/vuetify/commit/aeb6f4d70291ebb5c907ebe86490bb622f2929ea)), closes [#21867](https://github.com/vuetifyjs/vuetify/issues/21867)\n* **VStepper:** keep correct alignment with alt-labels ([1a0a9e6](https://github.com/vuetifyjs/vuetify/commit/1a0a9e6f19d776fe104caaae4c659a3f6d3d3e55))\n* **VTextField:** assign role to input element ([#21903](https://github.com/vuetifyjs/vuetify/issues/21903)) ([d77285f](https://github.com/vuetifyjs/vuetify/commit/d77285fcae70522dfafbc66c775f72b03684bb38)), closes [#18125](https://github.com/vuetifyjs/vuetify/issues/18125)\n* **VTreeview:** allow expanding disabled nodes ([ed4d8cf](https://github.com/vuetifyjs/vuetify/commit/ed4d8cfb06079a231064dbc6ebedb05d3ad6ef06)), closes [#21075](https://github.com/vuetifyjs/vuetify/issues/21075) [#21116](https://github.com/vuetifyjs/vuetify/issues/21116)\n* **VWindow:** correctly reveal vertical arrows on hover ([521ba7b](https://github.com/vuetifyjs/vuetify/commit/521ba7b7a5749f495b13face6fabca7b971e56bf))\n\n### :microscope: Code Refactoring\n\n* **VDataTable:** avoid Array.toReversed() ([3894f98](https://github.com/vuetifyjs/vuetify/commit/3894f98c333abaad63fc2a651ae558ffbb75d620))\n\n### :test_tube: Labs\n\n* **VColorInput:** pip customization ([#21820](https://github.com/vuetifyjs/vuetify/issues/21820)) ([db389d5](https://github.com/vuetifyjs/vuetify/commit/db389d5bb0386eccb00302c0b3134f39c201a35a))\n* **VColorInput:** allow inner fields focus using mouse ([7657d52](https://github.com/vuetifyjs/vuetify/commit/7657d522ba5604ce53fad877e84033f7bf5ad960)), closes [#21897](https://github.com/vuetifyjs/vuetify/issues/21897)\n* **VIconBtn:** correctly apply `icon-color` ([b2ece2c](https://github.com/vuetifyjs/vuetify/commit/b2ece2c033ec8cc097f644cda912bb915d1df84e)), closes [#21930](https://github.com/vuetifyjs/vuetify/issues/21930)\n* **VPie:** support touch for segment interaction ([#21871](https://github.com/vuetifyjs/vuetify/issues/21871)) ([93f4218](https://github.com/vuetifyjs/vuetify/commit/93f421848601fe6f24e32395a7810c41790f92cf))\n* **VVideo:** prefer `max-width`, default to 100% ([22d5dd5](https://github.com/vuetifyjs/vuetify/commit/22d5dd5e5814c9aea59a5d4778c2d4ea6c3c9ba6))\n* **VVideo:** add `aspect-ratio` prop ([83e67d1](https://github.com/vuetifyjs/vuetify/commit/83e67d137b2659535da355ac23d9a24d8345537b))\n* **VVideo:** correct default track color with pills ([e98919d](https://github.com/vuetifyjs/vuetify/commit/e98919d0c3ec9ed128bc58fe5678b1821f7f5478))\n* **VVideo:** correct color customization ([13da3e1](https://github.com/vuetifyjs/vuetify/commit/13da3e1b33b7dfee1d506c4d47782ab47a3f7f6c))\n* **VVideo:** correctly move elevation to pills ([3df9494](https://github.com/vuetifyjs/vuetify/commit/3df9494480b80f091bef6e0f1e65066dbe4b5642))\n* **VVideo:** hide overlays for background variant ([466dc6f](https://github.com/vuetifyjs/vuetify/commit/466dc6fb87acf5a0e6e2d67f9196eaf3f6705e9f))\n\n
\n\n## Building the Future{ .mt-4 }\n\nAugust is about laying the foundation to begin integrating Vuetify0 into Vuetify. The pre‑alpha work is shaping the path for incremental adoption of Zero‑powered primitives across the framework.\n\nIn parallel, the ecosystem continues to be polished and expanded:\n\n* VEditor is nearing release with robust formatting and form integration.\n* VVideo and related media features are progressing.\n* Improvements to performance, theming, docs, and the redesigned issues experience are landing steadily.\n\nThanks for the feedback and contributions—these foundations will turn into practical wins shipping over the next few releases.\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/eXubxyJ), and upcoming webinar series announcements.*\n","packages/docs/src/pages/en/blog/august-2026-update.md":"---\nlayout: blog\nmeta:\n title: August 2026 Update\n description: This August team delivered Vuetify 4.2 beta, which made @vuetify/v0 a runtime dependency of the framework.\n keywords: Vuetify August 2026, Vuetify 4.2, @vuetify/v0, open-on-focus, Sass variables, Vuetify0 1.2, Emerald, Vuetify MCP\n---\n\n\n\n# August 2026 Update\n\n**August was about v4.2.** The features and fixes have been steadily merged to `dev` branch eventually shipped as [v4.2.0-beta.0](/getting-started/release-notes/?version=v4.2.0-beta.0) on August 27 and as stable [v4.2.0](/getting-started/release-notes/?version=v4.2.0) week after. The v4.1 line got five additional patches along the way, and v3.13 got its first two LTS patches. Most notable change: starting with 4.2, `vuetify` depends on `@vuetify/v0` at runtime.\n\n![Hero image for August update](https://cdn.vuetifyjs.com/docs/images/blog/august-2026-update/august-hero.png \"August hero image\"){ height=112 }\n\n🖊️ Jacek Czarniecki • 📅 September 14th, 2026\n\n\n\n---\n\n## August in numbers\n\n**33 merged PRs** in the framework repo, **16 features and 47 fixes** (unique commits) and **8 releases**. Open issues went from 351 to 286: 96 closed, and 31 new opened. [Vuetify0](https://0.vuetifyjs.com/) merged 163 PRs (33 features, 42 fixes, 62 for docs) and shipped 5 releases, headlined by v1.2.0.\n\n---\n\n## Table of Contents\n\n* [Key Improvements](#key-improvements)\n* [Spotlight: Vuetify 4.2](#vuetify-4-2)\n * [Before you upgrade](#before-you-upgrade)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [Tooling Updates](#ecosystem-tooling)\n* [What's Next](#whats-next)\n\n---\n\n## Key Improvements\n\n**In Vuetify 4.2** ([beta](/getting-started/release-notes/?version=v4.2.0-beta.0) on August 27, [stable](/getting-started/release-notes/?version=v4.2.0) on September 2):\n\n* **[VSelect / VAutocomplete / VCombobox](/components/selects/)** — `open-on-focus`, persistent menus, `close-on-input-click`, and keyboard navigation that no longer breaks in long lists ([#23126](https://github.com/vuetifyjs/vuetify/pull/23126), [#23008](https://github.com/vuetifyjs/vuetify/pull/23008), [#23023](https://github.com/vuetifyjs/vuetify/pull/23023), [#23031](https://github.com/vuetifyjs/vuetify/pull/23031))\n* **Defaults** — nested defaults can change the sizes and variants components hardcode on their inner controls ([#23108](https://github.com/vuetifyjs/vuetify/pull/23108))\n* **[VDateInput](/components/date-inputs/)** — separators are inserted as user types ([#23052](https://github.com/vuetifyjs/vuetify/pull/23052))\n* **[VSlideGroup](/components/slide-groups/)** — `scroll-snap`, `scroll-distance`, an `edge` event and an exposed `slide()` for programmatic control\n* **Sass** — 125 variables that had no effect are gone in v4.2.0, and those might make your CI red if you did define them ([#23136](https://github.com/vuetifyjs/vuetify/issues/23136))\n\n**Beyond Vuetify core:**\n\n* **[Vuetify0 1.2](https://0.vuetifyjs.com/releases/?version=v1.2.0)** — headless DataTable, DataGrid and Alert, plus a floating-ui adapter for browsers without CSS anchor positioning ([#825](https://github.com/vuetifyjs/0/pull/825), [#826](https://github.com/vuetifyjs/0/pull/826), [#823](https://github.com/vuetifyjs/0/pull/823), [#917](https://github.com/vuetifyjs/0/pull/917))\n* **[Emerald](https://0.vuetifyjs.com/systems/emerald)** — first public release of the styled design system on v0, with a [live demo](https://0.vuetifyjs.com/demo/emerald/) and a [Figma UI kit](https://store.vuetifyjs.com/products/official-emerald-ui-kit-for-figma)\n* **[Bulma](https://0.vuetifyjs.com/systems/bulma)** — Vue behavior for the `bulma.css` you already load ([#760](https://github.com/vuetifyjs/0/pull/760))\n* **Vuetify MCP** — hosted server works without an account at `https://mcp.vuetifyjs.com/mcp`, and v0.11.0 adds a v2 → v3 upgrade toolkit ([#41](https://github.com/vuetifyjs/mcp/pull/41), [#43](https://github.com/vuetifyjs/mcp/pull/43))\n* **[v0 playground](https://v0play.vuetifyjs.com)** — saves playgrounds to Vuetify One and switches Vuetify versions, nightly included ([#817](https://github.com/vuetifyjs/0/pull/817), [#836](https://github.com/vuetifyjs/0/pull/836))\n\n**Details:**\n\n* Vuetify v4.2: [v4.2.0](/getting-started/release-notes/?version=v4.2.0) · [v4.2.0-beta.0](/getting-started/release-notes/?version=v4.2.0-beta.0)\n* Vuetify v4.1: [v4.1.12](/getting-started/release-notes/?version=v4.1.12) · [v4.1.11](/getting-started/release-notes/?version=v4.1.11) · [v4.1.10](/getting-started/release-notes/?version=v4.1.10) · [v4.1.9](/getting-started/release-notes/?version=v4.1.9) · [v4.1.8](/getting-started/release-notes/?version=v4.1.8)\n* Vuetify v3 LTS: [v3.13.2](/getting-started/release-notes/?version=v3.13.2) · [v3.13.1](/getting-started/release-notes/?version=v3.13.1)\n* Vuetify0: [v1.2.0](https://0.vuetifyjs.com/releases/?version=v1.2.0) · [v1.1.0](https://0.vuetifyjs.com/releases/?version=v1.1.0) · [v1.0.5](https://0.vuetifyjs.com/releases/?version=v1.0.5) · [v1.0.4](https://0.vuetifyjs.com/releases/?version=v1.0.4) · [v1.0.3](https://0.vuetifyjs.com/releases/?version=v1.0.3)\n\n---\n\n## Spotlight: Vuetify 4.2 { #vuetify-4-2 }\n\n\n\n
\n\n[v4.2.0](/getting-started/release-notes/?version=v4.2.0) is the second minor of the v4 line. It collects everything merged to `dev` branch since June. That includes the work covered in the [July update](/blog/july-2026-update/): multi-selection events, `VSkeletonLoader` types, `size` on VBtnGroup, VTreeview keyboard navigation and a11y improvements to name a few. It adds the features [below](#new-features), and [`validation rules`](/features/rules/) are finally out of Labs.\n\n### Before you upgrade\n\nThree changes that aren't new props.\n\n**`@vuetify/v0` is now a dependency.** Before 4.2, `vuetify` did not require any direct dependencies. v4.2.0 depends on `@vuetify/v0@^1.2.1` but for now, the surface is limited to safe and simple utilities (`isString`, `isObject`, …), `range` and the `toHighlight` transformer from it ([#23039](https://github.com/vuetifyjs/vuetify/pull/23039)). We expect v0 to slowly take over more and more of responsibility within the Vuetify codebase.\n\n**Sass variables cleanup.** 125 variables across 39 components were declared but never read by any stylesheet ([2d01fae](https://github.com/vuetifyjs/vuetify/commit/2d01fae)). Setting them did not have any effect. Cleanup make it clear these were never part of the intended API of v3 and v4. If your `settings.scss` did include them, you might be prompted to remove them by the compiler:\n\n```txt\nError: This variable was not declared with !default in the @used module.\n```\n\nThe full list is posted in the dedicated page: [Unused Sass variables](/getting-started/unused-sass-variables/).\n\n**Buttons clip their overlay.** VBtn and VIconBtn now set `overflow: hidden`, so hover overlays and tonal underlays do not have any gaps when combined with thick borders ([#22992](https://github.com/vuetifyjs/vuetify/pull/22992)). We anticipated it may susprise some developers and some of them already shared that VBadge placed inside button is clipped. There are at least 3 easy solutions to this and you only need to pick one that suites your project (see [#23179](https://github.com/vuetifyjs/vuetify/issues/23179)).\n\n---\n\n## Framework Updates\n\n### New Features\n\nEverything in this section shipped in v4.2.0.\n\n**The select family.** VSelect, VAutocomplete and VCombobox received four additions:\n\n* **Persistent menus.** `:menu-props=\"{ persistent: true }\"` keeps the menu open, and `closeOnContentClick: false` keeps it open after a selection. Both were ignored before ([#23008](https://github.com/vuetifyjs/vuetify/pull/23008), closes [#20590](https://github.com/vuetifyjs/vuetify/issues/20590)).\n* **`trim-values`** on VCombobox trims typed values and drops whitespace-only entries ([#22895](https://github.com/vuetifyjs/vuetify/pull/22895), closes [#14874](https://github.com/vuetifyjs/vuetify/issues/14874)).\n* **`open-on-focus`** opens the menu when the field gets focus, from Tab as well as a click ([#23126](https://github.com/vuetifyjs/vuetify/pull/23126), closes [#22934](https://github.com/vuetifyjs/vuetify/issues/22934)). Focus returning to the field after the menu closes does not reopen it. VDateInput and VColorInput have the same prop.\n* **`close-on-input-click`** on VAutocomplete and VCombobox makes a click on the input toggle the menu instead of always opening it ([#23023](https://github.com/vuetifyjs/vuetify/pull/23023)).\n\nThe last two help improve experience if end-users are used to clicking the input to dismiss/toggle the menu.\n\n```html\n\n```\n\nKeyboard navigation in these menus was reworked around the virtual list ([#23031](https://github.com/vuetifyjs/vuetify/pull/23031), [aae8fc4](https://github.com/vuetifyjs/vuetify/commit/aae8fc4)). The problem was haunting any list longer than 50 elements. While not very noticable in general it most certainly impacted form-heavy apps especially if users rely on the keyboard to navigate and update selections ([#18383](https://github.com/vuetifyjs/vuetify/issues/18383), [#22770](https://github.com/vuetifyjs/vuetify/issues/22770)).\n\n**Defaults for inner controls.** Some components render inner controls with hardcoded props: chips in VSelect are `size=\"small\"`, VStepperActions buttons are `text` and `tonal`, the items-per-page select in the data table footer has a fixed variant. Customizing those was previously very had and involved deep CSS overrides or forced developers to use slots. Now it is a straightforward nested object structure in using the standard configuration system ([#23108](https://github.com/vuetifyjs/vuetify/pull/23108)):\n\n```js { resource=\"src/plugins/vuetify.js\" }\ncreateVuetify({\n defaults: {\n VSelect: { VChip: { size: 'large' } }, // also VAutocomplete, VCombobox, VFileInput\n VStepperActions: { VBtn: { variant: 'outlined' } },\n VDataTableFooter: { VSelect: { variant: 'solo-filled' } },\n },\n})\n```\n\nVisit [Global configuration](/features/global-configuration/) to inspect the full list of nested keys, where we listed new `VStepperActionsPrevBtn` and `VStepperActionsNextBtn` role names as well.\n\n**[VDateInput](/components/date-inputs/)** now types like a masked input ([#23052](https://github.com/vuetifyjs/vuetify/pull/23052), closes [#23051](https://github.com/vuetifyjs/vuetify/issues/23051)) while making sure user won't input invalid dates. Separators are inserted/enforced following current locale, range format and RTL. Further improvements are planned for v4.3.0 - input will show localized placeholders marking major i18n improvement ([#23173](https://github.com/vuetifyjs/vuetify/pull/23173)).\n\n**[VSlideGroup](/components/slide-groups/)** got three long-standing issues closed:\n\n* `scroll-snap` (`start`, `center` or `end`) enables CSS scroll snapping, and the prev/next arrows stop on item boundaries ([#15916](https://github.com/vuetifyjs/vuetify/issues/15916))\n* `scroll-distance` sets how far the arrows scroll, in pixels or as a percentage\n* `slide()` is exposed for scrolling programmatically: `slide('next')`, `slide({ by: 200 })`, `slide({ index: 3 })` ([#21250](https://github.com/vuetifyjs/vuetify/issues/21250))\n* the `edge` event fires with `'start'` or `'end'` when scrolling reaches either end ([#11364](https://github.com/vuetifyjs/vuetify/issues/11364))\n\n**[VProgressLinear](/components/progress-linear/) and [VProgressCircular](/components/progress-circular/)** take a `transition` prop: `false` turns off the value animation, and `{ duration: 600 }` makes it slower ([#22442](https://github.com/vuetifyjs/vuetify/issues/22442)). New `reveal` prop has been shipped to align with the circular counterpart.\n\nSmaller additions:\n\n* **[VNavigationDrawer](/components/navigation-drawers/)** — `width` accepts percentages ([#16150](https://github.com/vuetifyjs/vuetify/issues/16150)).\n* **[VRadio](/components/radio-buttons/)** — `v-model` works on a radio without VRadioGroup ([#16245](https://github.com/vuetifyjs/vuetify/issues/16245))\n* **[VFileInput](/components/file-inputs/)** — supports `placeholder` and `persistent-placeholder` ([#23048](https://github.com/vuetifyjs/vuetify/pull/23048)), and shows dashed outline while dragging files over it ([#22909](https://github.com/vuetifyjs/vuetify/pull/22909))\n* **[VVirtualScroll](/components/virtual-scroller/)** — `scrollToIndex(index, position)` accepts second argument with `'start'`, `'center'` or `'end'` ([#18574](https://github.com/vuetifyjs/vuetify/pull/18574))\n\n### Bug Fixes\n\nMost of August's fixes landed in overlays, virtual scrolling and the select family. Three worth reading about:\n\n**Dialogs opened from menus.** Clicking inside a VDialog opened from a VMenu closed the whole menu chain ([#20468](https://github.com/vuetifyjs/vuetify/issues/20468), from 2024). Non-menu overlays now stop the close cascade ([e30eb47](https://github.com/vuetifyjs/vuetify/commit/e30eb47cc5999f4a26a32dcd472f4ea19e2820f0)), and custom overlays and tooltips no longer keep a menu from closing ([#22993](https://github.com/vuetifyjs/vuetify/pull/22993)).\n\n**Android \"desktop site\" mode.** Overlays should now be correctly positioned in \"desktop site\" mode ([#22124](https://github.com/vuetifyjs/vuetify/issues/22124)) since v4.1.8 and v3.13.1, and on pages using CSS `zoom` again since v4.2.1.\n\n**Active links on refresh.** In Nuxt, links with `to` could flash as active on a hard refresh while the router was still resolving the first navigation ([#23131](https://github.com/vuetifyjs/vuetify/pull/23131)).\n\n| Component | Fix | Version | PR / commit |\n|---------------------------|-------------------------------------------------------------------------|---------|-----------------------------------------------------------------|\n| **VNumberInput** | Strip the grouping separator before parsing (German locale) | v4.1.8 | [94e94a9](https://github.com/vuetifyjs/vuetify/commit/94e94a9) |\n| **theme** | Emit `color-scheme: light` so native scrollbars follow a theme switch | v4.1.8 | [#23071](https://github.com/vuetifyjs/vuetify/pull/23071) |\n| **VFileUpload** | No SSR crash with an empty file list | v4.1.8 | [4cd5288](https://github.com/vuetifyjs/vuetify/commit/4cd5288) |\n| **package** | Accept Vue 3.6 prereleases in the peer range | v4.1.8 | [#23040](https://github.com/vuetifyjs/vuetify/pull/23040) |\n| **rounded** | Restore classes for per-side values containing `0` | v4.1.9 | [27962f3](https://github.com/vuetifyjs/vuetify/commit/27962f3) |\n| **validation** | Run rules as soon as a field is cleared, not on blur | v4.1.9 | [58b5537](https://github.com/vuetifyjs/vuetify/commit/58b5537) |\n| **VDataTableVirtual** | Correct height with several expanded rows per item | v4.1.9 | [6f5f04b](https://github.com/vuetifyjs/vuetify/commit/6f5f04b) |\n| **VSelect** | Focus the right item when opened with the keyboard in Shadow DOM | v4.1.9 | [#23102](https://github.com/vuetifyjs/vuetify/pull/23102) |\n| **VDataTable** | Key cells so slot props don't leak between columns | v4.1.10 | [#23124](https://github.com/vuetifyjs/vuetify/pull/23124) |\n| **VNumberInput** | Spin buttons snap an out-of-range value to `min`/`max` | v4.1.10 | [#23109](https://github.com/vuetifyjs/vuetify/pull/23109) |\n| **VDialog** | No error when unmounted while closing | v4.1.10 | [#23054](https://github.com/vuetifyjs/vuetify/pull/23054) |\n| **VProgressLinear** | Keep indeterminate bars visible in Firefox | v4.1.10 | [694fcdb](https://github.com/vuetifyjs/vuetify/commit/694fcdb) |\n| **VProgressLinear** | Restore the `split` variant animation, broken in v4.1.7 | v4.1.10 | [537a5f7](https://github.com/vuetifyjs/vuetify/commit/537a5f7) |\n| **VDatePicker** | Restore the hover preview in range selection | v4.1.10 | [6c1dee2](https://github.com/vuetifyjs/vuetify/commit/6c1dee2) |\n| **VOverlay** | Return focus to the activator when `eager` | v4.1.10 | [c879795](https://github.com/vuetifyjs/vuetify/commit/c879795) |\n| **VBtn / VDivider / VImg**| No `value` on links, no redundant `role` on `
`, no empty `aria-label` | v4.1.10 | [#23122](https://github.com/vuetifyjs/vuetify/pull/23122), [#23107](https://github.com/vuetifyjs/vuetify/pull/23107), [#23112](https://github.com/vuetifyjs/vuetify/pull/23112) |\n| **VVirtualScroll** | Measure dividers and subheaders, estimate item height by median | v4.1.11 | [cb60a1f](https://github.com/vuetifyjs/vuetify/commit/cb60a1f) |\n| **VVirtualScroll** | Scrolling no longer locks up when items contain a divider | v4.1.11 | [f1cf0b0](https://github.com/vuetifyjs/vuetify/commit/f1cf0b0) |\n| **VRow** | Restore 8px gutters for `dense` | v4.1.11 | [ea6c628](https://github.com/vuetifyjs/vuetify/commit/ea6c628) |\n| **VOverlay** | Correct position when the activator changes mid-transition | v4.1.12 | [63cccbb](https://github.com/vuetifyjs/vuetify/commit/63cccbb) |\n| **VProgressLinear** | `rounded-bar` with `reverse` and buffer | v4.1.12 | [55fed01](https://github.com/vuetifyjs/vuetify/commit/55fed01) |\n| **locale** | Ukrainian translation fixes, missing Arabic keys | v4.1.12 | [#23139](https://github.com/vuetifyjs/vuetify/pull/23139) |\n| **VIconBtn** | Default color matches VBtn (icons disappeared on colored backgrounds) | v4.2.0 | [1695a49](https://github.com/vuetifyjs/vuetify/commit/1695a49) |\n| **VMenu** | One open submenu per level; Tab and ArrowLeft return focus to the activator | v4.2.0 | [#22904](https://github.com/vuetifyjs/vuetify/pull/22904) |\n| **VTextField** | Keep caret and selection when toggling `type` in Chrome | v4.2.0 | [47c9cc1](https://github.com/vuetifyjs/vuetify/commit/47c9cc1) |\n| **VTreeview** | Open matching nodes when searching | v4.2.0 | [#22983](https://github.com/vuetifyjs/vuetify/pull/22983) |\n| **VInput** | Consistent transitions for messages, details and counter | v4.2.0 | [#23049](https://github.com/vuetifyjs/vuetify/pull/23049) |\n| **v-touch** | Ignore scrolling inside the element | v4.2.0 | [19ee74e](https://github.com/vuetifyjs/vuetify/commit/19ee74e) |\n| **VSlideGroup** | A click on a partially visible item selects it instead of scrolling it | v4.2.0 | [55d8e80](https://github.com/vuetifyjs/vuetify/commit/55d8e80) |\n\nThe VTextField fix covers the password reveal pattern: toggling `type` from an `append-inner` icon put the caret back at the start. It had been open since 2022 ([#16109](https://github.com/vuetifyjs/vuetify/issues/16109)).\n\n### In Development\n\nThe July update listed six PRs for 4.2: VSlider `pill` ([#22699](https://github.com/vuetifyjs/vuetify/pull/22699)), VMaskInput dynamic masks ([#22501](https://github.com/vuetifyjs/vuetify/pull/22501)), VTimePicker keyboard controls ([#22604](https://github.com/vuetifyjs/vuetify/pull/22604)), VBtn/VIconBtn MD3 sizing ([#21831](https://github.com/vuetifyjs/vuetify/pull/21831)), VDatePicker week selection ([#20867](https://github.com/vuetifyjs/vuetify/pull/20867)) and a VField `border` prop ([#19819](https://github.com/vuetifyjs/vuetify/pull/19819)). None of them made it. VSlider, VMaskInput and VDatePicker moved to the v4.3.0 milestone together with the VBreadcrumbs accessibility PR ([#22358](https://github.com/vuetifyjs/vuetify/pull/22358)). The other three have no target yet.\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\n163 merged PRs, three patches ([v1.0.3](https://0.vuetifyjs.com/releases/?version=v1.0.3) on August 4, [v1.0.4](https://0.vuetifyjs.com/releases/?version=v1.0.4) on August 12, [v1.0.5](https://0.vuetifyjs.com/releases/?version=v1.0.5) on August 18) and [v1.2.0](https://0.vuetifyjs.com/releases/?version=v1.2.0) on August 25. A release tooling slip published a partial v1.1.0 an hour earlier; 1.2.0 includes all of it.\n\n### New in 1.2\n\n* **[DataTable](https://0.vuetifyjs.com/components/data/data-table)** and **[DataGrid](https://0.vuetifyjs.com/components/data/data-grid)** — headless compounds over `createDataTable` and `createDataGrid`. DataTable renders semantic `` markup with `aria-sort` and `aria-rowcount`; DataGrid adds column pinning and resizing, cell editing and row spanning ([#825](https://github.com/vuetifyjs/0/pull/825), [#826](https://github.com/vuetifyjs/0/pull/826))\n* **[Alert](https://0.vuetifyjs.com/components/semantic/alert)** — a live region, `role=\"alert\"` by default and `role=\"status\"` for messages that shouldn't interrupt ([#823](https://github.com/vuetifyjs/0/pull/823))\n* **[usePopover](https://0.vuetifyjs.com/composables/system/use-popover)** — positioning adapters. CSS anchor positioning stays the default. Firefox ESR and Safari before 26 don't support it, so there is now a first-party floating-ui adapter at `@vuetify/v0/popover/adapters/floating-ui` (with `@floating-ui/dom` as a peer), and `createPopoverPlugin` sets an adapter for the whole app ([#846](https://github.com/vuetifyjs/0/pull/846), [#917](https://github.com/vuetifyjs/0/pull/917))\n* **useTheme** — `system: { light, dark }` follows `prefers-color-scheme` until the user picks a theme ([#872](https://github.com/vuetifyjs/0/pull/872))\n* **`persist`** for `createFeaturesPlugin` and `createNotificationsPlugin`. Features store only the flags the user changed; notifications store read/seen/archived/snoozed state, never content ([#388](https://github.com/vuetifyjs/0/pull/388), [#384](https://github.com/vuetifyjs/0/pull/384))\n* **NumberField** — `commitOn: 'input'` writes the model on every keystroke and leaves clamping for blur. The same PR found that `NumberField.Root` never clamped unless you passed `:clamp=\"true\"` ([#786](https://github.com/vuetifyjs/0/pull/786))\n\n### Fixes\n\n* **useDate** — every locale got Sunday-start weeks in Firefox, and server and client could disagree when Node and browser ICU versions differ. Week data now comes from CLDR 48 on every runtime ([#796](https://github.com/vuetifyjs/0/pull/796)). This matters for Vuetify too, since the framework's date composables are moving onto v0.\n* **`getActiveElement()`** walks open shadow roots, the same fix Vuetify made for Shadow DOM in July. `useHotkey`, `useClickOutside` and `useDragDrop` use it ([#693](https://github.com/vuetifyjs/0/pull/693)).\n* **Snackbar** — NVDA skipped toasts injected into a fresh `role=\"status\"` region. `Snackbar.Portal` now renders persistent polite and assertive live regions and mirrors each toast into them ([#774](https://github.com/vuetifyjs/0/pull/774)).\n* **AlertDialog** focuses the Cancel action on open, per the APG pattern ([#630](https://github.com/vuetifyjs/0/pull/630)).\n\n### Design systems on v0\n\n**[Emerald](https://0.vuetifyjs.com/systems/emerald)** (`@paper/emerald` 0.1.0) is a styled design system on v0: 28 component families, Figma-sourced tokens, light and dark themes that follow the OS, and an icon set addressed by role. There's a [live demo](https://0.vuetifyjs.com/demo/emerald/) and a [Figma UI kit](https://store.vuetifyjs.com/products/official-emerald-ui-kit-for-figma).\n\n**[Bulma](https://0.vuetifyjs.com/systems/bulma)** (`@paper/bulma` 0.1.0) goes the other way. Its components render the markup Bulma documents against the `bulma.css` you already load, and add the JavaScript Bulma never had: open state, click-outside, Escape, focus and form wiring. The package ships no CSS.\n\nThe [v0 playground](https://v0play.vuetifyjs.com) can save playgrounds to Vuetify One ([#817](https://github.com/vuetifyjs/0/pull/817)) and switch Vuetify versions (incl. nightly releases ([#836](https://github.com/vuetifyjs/0/pull/836))).\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v1.1.0 Release](https://0.vuetifyjs.com/releases/?version=v1.1.0)\n* [v1.2.0 Release](https://0.vuetifyjs.com/releases/?version=v1.2.0)\n* [v0play](https://v0play.vuetifyjs.com)\n\n---\n\n## Tooling Updates { #ecosystem-tooling }\n\n### Vuetify MCP\n\n\n\n
\n\nFour releases: v0.9.0 and v0.9.1 (August 13), v0.10.0 (August 27) and v0.11.0 (August 28). The hosted server now has two endpoints ([#41](https://github.com/vuetifyjs/mcp/pull/41)):\n\n| URL | Auth | Tools |\n|-----------------------------------|-----------------------|----------------------------------------------|\n| `https://mcp.vuetifyjs.com/mcp` | none | docs, API, issues |\n| `https://mcp.vuetifyjs.com/one` | OAuth (Vuetify One) | the same, plus bins, playgrounds and links |\n\nv0.11.0 adds a Vuetify 2 → 3 upgrade toolkit that targets 3.13 LTS ([#43](https://github.com/vuetifyjs/mcp/pull/43)): `get_v3_upgrade_playbook` (ordered phases, starting with a Playwright baseline), `get_v2_to_v3_component_map`, `get_v3_breaking_changes` and an `upgrade-v2-to-v3` prompt. Before this, `get_upgrade_guide('v2.7')` returned the v4 guide. The v3 upgrade guide got an MCP quick start to go with it ([#23154](https://github.com/vuetifyjs/vuetify/pull/23154)).\n\n### Vuetify CLI\n\nNo release in August. Two features are merged and wait for the next one: `vuetify add` copies v0 examples from the docs registry into your project and tracks them in `vuetify.json`, with `diff` and `refresh` against the source ([#27](https://github.com/vuetifyjs/cli/pull/27)), and `create --features=mcp` writes client config for Cursor, Claude Code and Grok pointing at the hosted server ([#29](https://github.com/vuetifyjs/cli/pull/29)).\n\n### Nuxt Module\n\n[v1.0.0-rc.4](https://github.com/vuetifyjs/nuxt-module/releases/tag/v1.0.0-rc.4) (August 2) and [rc.5](https://github.com/vuetifyjs/nuxt-module/releases/tag/v1.0.0-rc.5) (August 22) are dependency updates (Nuxt 4.5.1) and a documented workaround for the `useLayout` auto-import collision.\n\n### Upgrade guide\n\nTwo v3 → v4 migration problems from a production migration are now documented ([#22848](https://github.com/vuetifyjs/vuetify/pull/22848)). In Vite dev mode the dependency pre-bundler can create two `useStack` instances, and menus opened inside a dialog end up behind it; the fix is `optimizeDeps.include`. The guide digs deeper into the `@layer` order that is a typical friction point for developers trying to upgrade existing projects.\n\n### Snips\n\n[Snips](https://snips.vuetifyjs.com/) prices are cut by half with no end date: category packs $74, all-access $149, team all-access $399.\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\n[v4.2.0](/getting-started/release-notes/?version=v4.2.0) went stable on September 2 and [v4.2.1](/getting-started/release-notes/?version=v4.2.1) followed on September 9. If you set Sass variables, read [Before you upgrade](#before-you-upgrade) first. Three of the PRs that missed 4.2 are on the v4.3.0 milestone, and more of v0 will move into the framework through 4.x minors.\n\n* [Vuetify 4.2](/getting-started/release-notes/?version=v4.2.0) is stable, and it installs `@vuetify/v0` with it\n* [Vuetify0 1.2](https://0.vuetifyjs.com/releases/?version=v1.2.0) adds headless DataTable, DataGrid and Alert\n* The hosted MCP works without an account at `https://mcp.vuetifyjs.com/mcp`\n\n::: warning\n\n**Vuetify needs your support.** Open Collective funds are running low, the team has scaled down, and contributors are barely compensated for their work. If your team relies on Vuetify, point your organization at [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider).\n\n:::\n\nThanks to everyone who sent a PR in August: [lazerg](https://github.com/lazerg), [BatLeDev](https://github.com/BatLeDev), [waterWang](https://github.com/waterWang), [vianmangal](https://github.com/vianmangal), [userquin](https://github.com/userquin), [mahsarajabpour](https://github.com/mahsarajabpour), [klivak](https://github.com/klivak), [jcollins1983](https://github.com/jcollins1983) and [jaketig](https://github.com/jaketig) in the framework, and [sridhar-3009](https://github.com/sridhar-3009), [MuslumYilmaz](https://github.com/MuslumYilmaz) and [Haviles04](https://github.com/Haviles04) in Vuetify0 and the MCP.\n\nSee you in September!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://community.vuetifyjs.com), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements.*\n","packages/docs/src/pages/en/blog/building-a-basic-nuxt-application-with-vuetify.md":"---\nlayout: blog\nmeta:\n title: Vuetify — Building a Basic Nuxt App with Vuetify\n description: Learn how to build a basic Nuxt app with Vuetify\n keywords: Vuetify, Nuxt, Vue, JavaScript, Web Development\n---\n\n# Building a Basic Nuxt Application with Vuetify\n\n---\n\n🖊️ Eric Sarrion • 📅 February 21st, 2025\n\n\n\n---\n\n## Introduction\n\nIn this article, we will build a basic application using Vue.js and Vuetify, leveraging the Nuxt framework.\n\nWhy do we use the Nuxt framework?\n\n1. It allows us to easily create new pages in our application using URLs such as /contact to access the contact page, or /products to access the products page.\n1. It simplifies the use of Vuetify components through a simple configuration in the nuxt.config.ts file.\n1. It automatically loads Vue.js methods and the components of our application without the need to import them manually each time. No more instructions like import { ref } from \"vue\".\n\nFor the mere simplification of the code enabled by the automatic loading of Vue.js methods and our application’s components, using Nuxt in our projects is highly recommended.\n\nWhy do we use Vuetify?\n\n1. Vuetify was created in 2016 and has been regularly updated and improved since then. Version 3 fully utilizes the latest version of Vue.js, with the `\n```\n\nVuetify offers the v-spacer component, which allows \"pushing\" the elements that follow it to the right. The buttons will therefore be positioned on the right side of the toolbar.\n\nTo display the buttons, we use the v-btn component with the icon attribute. This attribute allows the button to be displayed in a circular shape, according to the icon it contains. The @click attribute is also used to handle navigation to the desired page, just as we did in the navigation menu.\n\nThe application is now displayed:\n\n![Toolbar with additional navigation buttons for quick page access.](https://cdn.vuetifyjs.com/docs/images/blog/building-a-basic-nuxt-application-with-vuetify/14.png){ height=500 }\n\nClicking on the buttons displays the desired page. For example, the /contact page:\n\n![Contact page displayed after selecting it from the navigation menu.](https://cdn.vuetifyjs.com/docs/images/blog/building-a-basic-nuxt-application-with-vuetify/15.png){ height=500 }\n\n## Conclusion\n\nIn this article, we have covered fundamental aspects of using Vue.js and Vuetify in a Nuxt application.\n\nWe explored several Vuetify components that help design the application, and we learned how to break down the application into different pages, through which we navigated.\n","packages/docs/src/pages/en/blog/building-with-nuxt-and-unocss.md":"---\nlayout: blog\nmeta:\n title: Build with Nuxt and UnoCSS\n description: Learn how to effectively integrate Vuetify v3 with UnoCSS taking into consideration breakpoints, theme, typography and CSS layers.\n keywords: UnoCSS, TailwindCSS, Theme, CSS Layers\n---\n\n# Creating a highly optimized Vuetify 3 project with Nuxt and UnoCSS\n\nAlthough traditionally we tend to think about Vuetify as a great fit for large projects, it can also serve smaller projects that tend to prioritize performance. When scaffolding new projects it comes with tree-shaking out-of-the-box, but there is still some room for improvement as main CSS bundle ships hundreds of kB of CSS we might not need. If the users like your page loading animation and you can afford a bit of overhead, there is nothing wrong with simplified setup that does the job and lets you focus on the business logic or UX. That said, integrating UnoCSS (atomic CSS engine) will help us trim the bundle and enable dynamic utilities. With its superpowers we not only avoid writing plain CSS (most of the time), but can also make use of TailwindCSS tooling (IDE extensions) or standardize certain utilities.\n\nThe article will walk through scaffolding a starter project, installing and wiring UnoCSS, customizing fonts, handling light/dark mode and aligning breakpoints. Finally, \"CSS layers\" section shows how to order Vuetify, UnoCSS, and app‑specific styles to avoid specificity conflicts.\n\n🖊️ Jacek Czarniecki • 📅 December 22nd, 2025\n\n\n\n---\n\n## Table of Contents\n\n* [The steps ahead](#the-steps-ahead)\n* [Scaffold a new project](#scaffold-a-new-project)\n* [Keep an eye on the outputs](#keep-an-eye-on-the-outputs)\n* [Disable CSS for utilities](#disable-css-for-utilities)\n * [Shortest way to setup UnoCSS](#shortest-way-to-setup-unocss)\n * [Migrating to utilities from TailwindCSS v4](#migrating-to-utilities-from-tailwindcss-v4)\n * [Resolve specificity issues (quickly)](#resolve-specificity-issues-quickly)\n * [Font family configuration](#font-family-configuration)\n * [Light/dark mode compatibility](#light-dark-mode-compatibility)\n * [Custom typography (text variants)](#custom-typography-text-variants)\n * [Customize breakpoints](#customize-breakpoints)\n* [Using CSS layers](#using-css-layers)\n\n---\n\n## The steps ahead\n\nRight after generating starter project we are going to disable all CSS for non-theme colors (Material colors palette) and CSS utilities. This leaves out styles for \"reset\", transitions and components. UnoCSS is going to generate them on the fly making sure we only bundle CSS we actually use.\n\nAlong the way we will keep in mind that successful integration has to correctly match following aspects:\n\n* themes (light / dark mode)\n* custom typography\n* responsive breakpoints\n\nLastly, we will enable CSS layers to establish order. This part is meant for advanced frontend developers and teams that have a solid knowledge of CSS and the layers can impact day to day work. It is not a free lunch and it might not always fit the workflow or the way you write CSS.\n\n## Scaffold a new project\n\n::: tabs\n\n```bash [pnpm]\npnpm create vuetify@2.8.0\n```\n\n```bash [yarn]\nyarn create vuetify@2.8.0\n```\n\n```bash [npm]\nnpm create vuetify@2.8.0\n```\n\n```bash [bun]\nbun create vuetify@2.8.0\n```\n\n:::\n\n...choose \"Nuxt Recommended\". Following questions don't matter much.\n\nStart the project on localhost\n\n::: tabs\n\n```bash [pnpm]\npnpm dev\n```\n\n```bash [yarn]\nyarn dev\n```\n\n```bash [npm]\nnpm run dev\n```\n\n```bash [bun]\nbun run dev\n```\n\n:::\n\n## Keep an eye on the outputs\n\nNuxt uses Vite under the hood to build assets for production. Sizes are all layed out in the logs.\n\n::: tabs\n\n```bash [pnpm]\npnpm build\n```\n\n```bash [yarn]\nyarn build\n```\n\n```bash [npm]\nnpm run build\n```\n\n```bash [bun]\nbun run build\n```\n\n:::\n\n![Log from Nuxt build showing entry bundle exceeding 500kB (unminified)](https://cdn.vuetifyjs.com/docs/images/blog/building-with-nuxt-and-unocss/nuxt-build-log.png)\n\nAnytime you build the project, bundle files are right there in the `.output/public/_nuxt` directory. The CSS bundle file named `entry{hash}.css` is one that might be particularly interesting.\n\n::: tip\nWhen inspecting bundles, keep in mind VSCode might refuse to format large files, freeze or even crash. I recommend Zed editor for the optimal experience.\n:::\n\n## Disable CSS for utilities\n\nLet's adjust the `app/assets/settings.scss`:\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $utilities: false,\n);\n```\n\nIf you run `pnpm build` again, you may observe that `entry.*.css` bundle is significantly smaller. We could get even further by replacing MDI font icons with SVG icons or UnoCSS preset for icons, but it is out of scope for this article.\n\n### Shortest way to setup UnoCSS\n\n::: tabs\n\n```bash [pnpm]\npnpm add -D unocss unocss-preset-vuetify @unocss/nuxt\n```\n\n```bash [yarn]\nyarn add -D unocss unocss-preset-vuetify @unocss/nuxt\n```\n\n```bash [npm]\nnpm i -D unocss unocss-preset-vuetify @unocss/nuxt\n```\n\n```bash [bun]\nbun add -D unocss unocss-preset-vuetify @unocss/nuxt\n```\n\n:::\n\nRegister the module in `nuxt.config.ts` and paste initial configuration nearby:\n\n```ts { resource=\"nuxt.config.ts\" }\nimport { presetVuetify } from 'unocss-preset-vuetify'\n\nexport default defineNuxtConfig({\n // ...\n\n modules: [\n '@unocss/nuxt',\n // ... keep other modules\n ],\n\n // vuetify: { ... }\n\n unocss: {\n presets: [\n presetVuetify(),\n ],\n safelist: [/* classes that have to be always generated */],\n },\n})\n```\n\nWith the dedicated preset for Vuetify, we get all the utilities back. Except this time, UnoCSS scans the project files and generates CSS only for the classes we actually use.\n\nKeep in mind that this library was released fairly recently. If you notice any problem or limitation, reach out on [Discord](https://community.vuetifyjs.com) or post the issue on [GitHub](https://github.com/vuetifyjs/unocss-preset-vuetify).\n\n### Migrating to utilities from TailwindCSS v4\n\n::: tabs\n\n```bash [pnpm]\npnpm remove unocss-preset-vuetify\npnpm add -D @unocss/preset-wind4\n```\n\n```bash [yarn]\nyarn remove unocss-preset-vuetify\nyarn add -D @unocss/preset-wind4\n```\n\n```bash [npm]\nnpm un unocss-preset-vuetify\nnpm i -D @unocss/preset-wind4\n```\n\n```bash [bun]\nbun remove unocss-preset-vuetify\nbun add -D @unocss/preset-wind4\n```\n\n:::\n\nThe preset called [Wind4](https://unocss.dev/presets/wind4) is an official configuration builder providing making it easy to expose all the utilities from TailwindCSS v4 in your project. There are 2 configuration points - an object passed to the main `presetWind4` method and `theme` field next to the `presets`. Unlike using pure TailwindCSS v4 it lets us configure stuff in JavaScript code.\n\n```ts { resource=\"nuxt.config.ts\" }\nimport presetWind4 from '@unocss/preset-wind4'\n\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [\n presetWind4({\n preflights: {\n reset: false,\n },\n }),\n ],\n theme: {},\n },\n})\n```\n\nThe code above ensures we use only CSS reset from Vuetify and won't experience conflicts.\n\nSince TailwindCSS preset comes with its color palette we can use it instead of the Material palette from Vuetify. It is not an equivalent replacement, but if you want to go all-in with TailwindCSS utilities, you probably know what to expect ahead. Let's change the `app/assets/settings.scss`:\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $color-pack: false, // <- disable colors from Material palette\n $utilities: false,\n);\n```\n\nWe can finish this part with small adjustment to the example content in `HelloWorld.vue` and `AppFooter.vue`\n\n* replace `fill-height` with `h-full`\n* replace `font-weight-` with `font-`\n* replace `mb-n1` with `-mb-1`\n\nOptionally replace typography classes if you intend to use utilities from TailwindCSS. Further in the article, we will configure UnoCSS to provide typography aligned with Vuetify conventions. If you already know you won't need it, these are the closest equivalents (for the font size only):\n\n* `text-h2` » `text-5xl`\n* `text-h5` » `text-2xl`\n* `text-subtitle-1` » `text-base`\n* `text-body-2` » `text-sm`\n\nTurns out `v-container` paired with `fill-height` class gets special additional styles when `v-row` is also on the page. So we need to add some more utility classes to move the content to the center:\n\n```html\n\n```\n\nThere is one more component that relies on utility classes - `v-row`. Convenient props named `justify` and `align` rely on the utilitity classes for CSS properties `justify-content` and `align-items` respectively. TailwindCSS won't detect them though and even if we could force it to generate them, the classes in TailwindCSS are named slightly differently (e.g. `justify-space-between` vs `justify-between`). There are couple of ways to get around it.\n\n* just paste the classes in any CSS/SCSS file meant for global styles (e.g. `main.scss`)\n* spread `$utilites` to selectively disable most of them while keeping `justify-content` and `align-items`\n* don't use VRow/VCol or ban just those two problematic props (can be achieved by patching `vuetify-eslint-plugin`)\n\nIf you go with the first option, you can copy the classes below.\n\n```scss\n.justify-start { justify-content: flex-start }\n.justify-end { justify-content: flex-end }\n.justify-center { justify-content: center }\n.justify-space-between { justify-content: space-between }\n.justify-space-around { justify-content: space-around }\n.justify-space-evenly { justify-content: space-evenly }\n\n.align-start { align-items: flex-start }\n.align-end { align-items: flex-end }\n.align-center { align-items: center }\n.align-baseline { align-items: baseline }\n.align-stretch { align-items: stretch }\n\n.order-1 { order: 1 }\n// repeat until 12...\n.order-last { order: 13 }\n```\n\nSecond option is trading hardcoded styles for some noise in the Sass configuration.\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $utilities: (\n \"align-items\": (responsive: false, unimportant: (align-items)),\n \"justify-content\": (responsive: false, unimportant: (justify-content)),\n \"order\": (responsive: false, unimportant: (order)),\n // followed by 80+ lines with all other utilities set to `false`\n ),\n);\n```\n\nBy default, those utilities have `responsive: true` and `!important`. The example above is something I would recommend if you plan on using `@layer` which we will go over in the last section of this article.\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $utilities: (\n // \"align-items\" // keep default\n // \"justify-content\" // keep default\n // \"order\" // keep default\n // followed by 80+ lines with all other utilities set to `false`\n ),\n);\n```\n\nThe important thing to note here is that we did not use CSS layers so you might see that utility classes from TailwindCSS do not override default styles. An example would be:\n\n```scss { resource=\"app/components/HelloWorld.vue\" }\n...\n```\n\nSomething that is not really noticable at first glance is the card rounding. `rounded=\"lg\"` is not recognized by UnoCSS with TailwindCSS preset and `.rounded-lg` class won't appear in the output CSS.\n\n```scss\n.rounded-0 { border-radius: 0 }\n.rounded-sm { border-radius: 2px }\n.rounded { border-radius: 4px }\n.rounded-lg { border-radius: 8px }\n.rounded-xl { border-radius: 24px }\n.rounded-pill { border-radius: 9999px }\n.rounded-circle { border-radius: 50% }\n.rounded-shaped { border-radius: 24px 0 }\n```\n\nor\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $utilities: (\n // ...\n \"rounded\": (responsive: false, unimportant: (border-radius)),\n // ...\n ),\n);\n```\n\nDid I mention we have the same problem with `border`? ...ugh... same story, let's move on.\n\nAssuming you want to use VRow and VCol and `$utilities` is no longer `false`, you might be surprised to notice that utilities like `elevation-*`, `hidden-*` (and 2 more) got re-enabled. Those do not have their dedicated flags in the `$utilities` configuration map and only get removed when using strictly `$utilities: false`. It will be resolved in the future - keep an eye on ([#22405](https://github.com/vuetifyjs/vuetify/pull/22405)).\n\n### Resolve specificity issues (quickly)\n\nIn our current configuration order in which the styles are loaded matters - which might make our application look differently after deployment, as usually Vite \"just loads\" assets when working on localhost. This means the order may be quite different for the production bundle.\n\nUsually the easiest fix would be to make UnoCSS generate all the styles with `!important`. This would make them equivalent to original Vuetify utility classes that all had `!important` by default. It is not very elegant, but get's the job done and is easy to reason about. If you are interested in using CSS layers instead, skip to the [final](#using-css-layers) part of this article.\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [\n presetWind4({\n important: true, // <- utility classes always win\n preflights: { ... },\n }),\n ],\n theme: {},\n },\n})\n```\n\n### Font family configuration\n\nTo customize fonts we will rely on `@nuxt/fonts` to minimize the amount of configuration required to set up custom font family. Beware, it scans the output CSS - doing a magic trick similar to TailwindCSS, but for the fonts. So you might want to inspect the build logs and make sure there is no mention of Roboto after applying the changes described below.\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [ ... ],\n theme: {\n font: {\n heading: \"'Bricolage Grotesque', sans-serif\",\n body: \"Sen, sans-serif\",\n mono: \"'Sometype Mono', monospace\",\n },\n },\n safelist: ['font-heading', 'font-body', 'font-mono'],\n },\n fonts: {\n defaults: {\n weights: [300, 400, 500, 700],\n styles: ['normal', 'italic'],\n subsets: ['latin'],\n },\n },\n})\n```\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $heading-font-family: var(--font-heading),\n $body-font-family: var(--font-body),\n // ...\n);\n```\n\nWe can also create `/assets/main.scss` to make use of monospace font in global styles. It is not strictly necessary, but apps usually need some custom global styles anyway.\n\n```scss { resource=\"app/assets/main.scss\" }\ncode,\npre,\n.v-code {\n font-family: var(--font-mono);\n}\n```\n\nNew file has to be referenced or imported. Go ahead and include it in `nuxt.config.ts`:\n\n```ts { resource=\"nuxt.config.ts\" }\n css: ['assets/main.scss'],\n```\n\n### Light/dark mode compatibility\n\nLet's add some colors and try using `dark:*` prefix for some classes to see what happens.\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [ ... ],\n theme: {\n font: { ... },\n colors: {\n primary: {\n 800: '#003256',\n },\n secondary: {\n 600: '#00677e',\n 800: '#003543',\n },\n },\n },\n },\n})\n```\n\nNow we can try `dark:bg-primary-800` to one of the cards, and `dark:bg-linear-to-r dark:from-secondary-800 dark:to-secondary-600` to another.\n\nIn order to toggle themes we can add a quick button in the corner of the page. Simply paste the following code anywhere (e.g. in `default.vue` layout file).\n\n```html\n\n```\n\n> When adding new colors in `nuxt.config.ts` you might need to occasionally restart the Dev server.\n\nAt this point, toggling dark mode won't apply the background and gradient from classes generated by UnoCSS.\n\nUpon inspection of Elements tab in the browser DevTools, we can find the generated code by searching for `.dark\\:`\n\n```css\n.dark .dark\\:from-secondary-800 { ... }\n.dark .dark\\:to-secondary-600 { ... }\n.dark .dark\\:bg-linear-to-r { ... }\n```\n\nWhat we actually want there is `.v-theme--dark` not `.dark`.\n\nTo align UnoCSS with Vuetify we need add some more code inside `presetWind4({ ... })`\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n //...\n unocss: {\n presets: [\n presetWind4({\n preflights: { ... },\n dark: {\n dark: '.v-theme--dark',\n light: '.v-theme--light',\n },\n }),\n ],\n },\n})\n```\n\n### Custom typography (text variants)\n\n> If you intend to fully rely on TailwindCSS classes or have some specific typography requirements, you can skip to the next part.\n\nLet's add a quick preview page for all the typography options that used to be provided by Vuetify.\n\n```html\n\n\n\n```\n\nWe can see none of the usual helper classes work because we disabled `$utilities`. Theoretically we could opt out more granularly, but those classes won't work with responsive prefixes (`sm:*`, `md:*`, etc) - by default they are generated with responsive variants stuffed in the middle (e.g. `*-sm-*`, `*-md-*`, etc.). Having both conventions may be considered an unnecessary mental overhead, so the recommended approach would is to recreate the helpers in UnoCSS configuration `shortcuts`.\n\nFollowing configuration is aligned with defaults from Vuetify v3.11.x\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n //...\n unocss: {\n presets: [ ... ],\n theme: { ... },\n shortcuts: {\n 'text-h1': 'font-heading normal-case text-[6rem] font-[300] leading-[1] tracking-[-.015625em]',\n 'text-h2': 'font-heading normal-case text-[3.75rem] font-[300] leading-[1] tracking-[-.0083333333em]',\n 'text-h3': 'font-heading normal-case text-[3rem] font-[400] leading-[1.05] tracking-[normal]',\n 'text-h4': 'font-heading normal-case text-[2.125rem] font-[400] leading-[1.175] tracking-[.0073529412em]',\n 'text-h5': 'font-heading normal-case text-[1.5rem] font-[400] leading-[1.333] tracking-[normal]',\n 'text-h6': 'font-heading normal-case text-[1.25rem] font-[500] leading-[1.6] tracking-[.0125em]',\n 'text-subtitle-1': 'font-body normal-case text-[1rem] font-[400] leading-[1.75] tracking-[.009375em]',\n 'text-subtitle-2': 'font-body normal-case text-[.875rem] font-[500] leading-[1.6] tracking-[.0071428571em]',\n 'text-body-1': 'font-body normal-case text-[1rem] font-[400] leading-[1.5] tracking-[.03125em]',\n 'text-body-2': 'font-body normal-case text-[.875rem] font-[400] leading-[1.425] tracking-[.0178571429em]',\n 'text-button': 'font-body uppercase text-[.875rem] font-[500] leading-[2.6] tracking-[.0892857143em]',\n 'text-caption': 'font-body normal-case text-[.75rem] font-[400] leading-[1.667] tracking-[.0333333333em]',\n 'text-overline': 'font-body uppercase text-[.75rem] font-[500] leading-[2.667] tracking-[.1666666667em]',\n },\n },\n})\n```\n\n### Customize breakpoints\n\nDefault breakpoints provided by TailwindCSS preset are not compatible with Vuetify. This mismatch can lead to confusing layout bugs, so let's address this right away.\n\nUnlike other aspects of configuration, it is more challenging to have a squicky cleanup with a single definition. When we customize vanilla Vuetify project we end up having some duplication. This is true even without integrating Vuetify with UnoCSS or Tailwind. It is usually not a big deal, and we can add comments that remind us to keep both places in sync.\n\n* `settings.scss` - breakpoints for VContainer, VCol and responsive utilities (if we would keep any)\n* general Vuetify configuration `display` » `thresholds` for responsive logic in some components, `useDisplay` and `$vuetify.display.*`\n\nUnoCSS needs its own values and expects slightly different format, but we can still define them in a separate TS file and, so we won't end up with 3 places to maintain. As a side-note, integration with TailwindCSS v4 (without UnoCSS) would mean we are back with 3 definitions, because latest TailwindCSS expects pure CSS variables. Anyway, enough talking - let's jump right into the code.\n\nCreate `breakpoints.ts` under `./app/theme` (create new `theme` folder) with the following content:\n\n```ts { resource=\"app/theme/breakpoints.ts\" }\nimport type { DisplayThresholds } from 'vuetify'\n\n// repeated in settings.scss\nconst breakpoints: DisplayThresholds = {\n xs: 0,\n sm: 400,\n md: 840,\n lg: 1145,\n xl: 1545,\n xxl: 2138,\n}\n\nexport const forVuetify = breakpoints\n\nexport const forTailwind = Object.entries(breakpoints)\n .reduce(\n (o, [key, value]) => ({ ...o, [key]: `${value}px` }),\n {} as Record,\n )\n```\n\nImport and apply it to both Vuetify in UnoCSS in `nuxt.config.ts`\n\n```ts { resource=\"nuxt.config.ts\" }\nimport * as breakpoints from './app/theme/breakpoints'\n\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [ ... ],\n theme: {\n font: { ... },\n colors: { ... },\n breakpoint: breakpoints.forTailwind,\n },\n shortcuts: { ... },\n },\n\n vuetify: {\n moduleOptions: { ... },\n vuetifyOptions: {\n display: {\n mobileBreakpoint: 'md',\n thresholds: breakpoints.forVuetify,\n },\n },\n },\n}),\n```\n\nNow adjust the SCSS variables for Vuetify. Note that in **v3.x** the `$container-max-widths` would be calculated from breakpoints without rounding the values. If you prefer those values to be stable and rounded to `100px`, you can simply define them right below.\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $grid-breakpoints: (\n // repeated in breakpoints.ts\n 'xs': 0,\n 'sm': 400px,\n 'md': 840px,\n 'lg': 1145px,\n 'xl': 1545px,\n 'xxl': 2138px,\n ),\n $container-max-widths: (\n // manually calculated (optional after https://github.com/vuetifyjs/vuetify/pull/19759)\n 'md': 700px,\n 'lg': 1000px,\n 'xl': 1400px,\n 'xxl': 2000px,\n ),\n);\n```\n\nThe important next step is to verify the changes. I recommend creating and keeping a hidden technical page that will help verify changes or quickly troubleshoot the regression. Here is what you can paste into `app/pages/breakpoints.ts`:\n\n```html\n\n\n\n```\n\nRestart the Dev server and open `localhost:3000/breakpoints`.\n\n## Using CSS layers\n\nCSS `@layer` is a relatively new feature designed to scope blocks of CSS and avoid conflicts over specificity. Layers establish a defined order and quite easy to reason about. Anything that is not wrapped in `@layer my-name { ... }` is applied on top. The only tricky part is how browser handles `!important`. If you never used them, you can read more on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer) or an [excellent article from CSS Tricks](https://css-tricks.com/css-cascade-layers/).\n\nIn our example, all we want from CSS layers is to separate utility classes and ensure they get applied on top of base and components CSS without using `!important`. We will start by ensuring we don't have any leftover configuration in `nuxt.config.ts`:\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [\n presetWind4({\n // important: true, // <- we won't need it\n preflights: { ... },\n }),\n ],\n },\n})\n```\n\nCSS layers are going to be enabled by default in Vuetify v4. If you still use version 3.x, you can opt-in by changing two places: Sass variables and theme configuration.\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $layers: true, // <- enable layers for CSS generated with Sass\n // ...\n);\n```\n\nThis will ensure CSS reset, base styles, transitions, component-specific styles and utilities are all wrapped in the dedicated layers.\n\nUpdate Vuetify configuration to enable `@layers` for themes - CSS that is generated at runtime and injected into document ``.\n\n```ts { resourcce=\"vuetify.config.ts\" }\nexport default defineVuetifyConfiguration({\n theme: {\n layers: true, // <- enable layers for theme CSS\n defaultTheme: 'dark',\n themes: { ... },\n // ...\n }\n // ...\n})\n```\n\nFinally we update UnoCSS configuration\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [ ... ],\n layers: {\n 'uno.theme': 0,\n 'uno.shortcuts': 1,\n 'uno.utilities': 2,\n },\n outputToCssLayers: {\n cssLayerName: (layer) => layer === 'properties' ? null : `uno.${layer}`,\n },\n theme: { ... },\n shortcuts: { ... },\n },\n})\n```\n\nYou can now utilize them to manage overrides without fighting specificity.\nFor example:\n\n```scss { resource=\"app/assets/main.scss\" }\n@layer vuetify.base {\n code, pre, .v-code {\n font-family: var(--font-mono);\n }\n}\n```\n\nWhen it comes to regular development, you should define layers you intend make sense for your app size. For medium projects I tend to start with no-brainer split into `base`, `components`, and custom `utilities`.\n\n```scss\n@layer app {\n @layer base, components, utilities;\n}\n```\n\nHere are some examples that help visualize the purpose of each group.\n\n```scss { resource=\"app/assets/main.scss\" }\n@layer app.base {\n .page {\n padding: 0 2rem 4rem;\n\n &__header {\n padding: 2rem 0 1rem;\n }\n }\n\n * {\n scrollbar-width: thin;\n scrollbar-color: #888a #8882;\n }\n}\n\n@layer app.utilities {\n .force-center {\n display: grid;\n place-items: center;\n }\n\n .flex-expand-even {\n display: flex;\n > * {\n flex: 1;\n }\n }\n}\n```\n\n`@layer app.components { ... }` is meant to be used in `\n```\n\n---\n\n## Summary\n\nWhoa! That's a lot. Integrating UnoCSS with a Vuetify + Nuxt project proves to be more than just `$utilities: false` and droping any configuration. Although we could take a shortcut with `important: true` I hope you will take an opportunity to use powerful `@layer` feature and elevate your development experience even more. Regardless, we achieved smaller CSS bundles and on-demand utility generation. Here are the key takeaways:\n\n* `unocss-preset-vuetify` (although experimental) can be a drop-in replacement of Vuetify utilities in projects that prefer to avoid full migration to TailwindCSS and its conventions\n* `@unocss/preset-wind4` is a go-to for developers eager to embrace widely adopted utilities\n* **Dark mode alignment**: Configure UnoCSS to use `.v-theme--dark` and `.v-theme--light` selectors instead of the default `.dark` class\n* **typography** can be fully restored using UnoCSS shortcuts also gaining responsive prefix support\n* **breakpoints** can be aligned across Vuetify's display config, Sass variables, and UnoCSS theme to avoid layout inconsistencies\n* **CSS layers**: enable `$layers: true` in Sass and configure UnoCSS layers to establish a clear cascade order without relying on `!important`\n\nThe result is a leaner, more maintainable styling setup that combines Vuetify's component library with atomic CSS utilities.\n\nIn the future we will explore similar setup based on Vite and pure TailwindCSS v4.\n\nHappy coding!\n","packages/docs/src/pages/en/blog/building-with-vite-and-tailwindcss.md":"---\nlayout: blog\nmeta:\n title: Build with Vite and TailwindCSS v4\n description: Learn how to integrate Vuetify v4 with TailwindCSS v4 in a Vite project, covering theme colors, dark mode, fonts, breakpoints and CSS layers.\n keywords: TailwindCSS v4, Vuetify v4, Vite, Theme, CSS Layers\n---\n\n# Integrating Vuetify v4 with TailwindCSS v4 in a Vite project\n\nIn the previous article we explored integrating UnoCSS with Vuetify v3 and Nuxt. This time we take a more direct route: pairing Vuetify v4 with TailwindCSS v4 on a plain Vite setup with both running as Vite plugins. Vuetify v4 ships with CSS layers enabled by default, which makes integrating TailwindCSS significantly smoother than before.\n\nWe will go through the following steps:\n\n* Scaffold a starter project and wire up TailwindCSS\n* Restore `rounded-*` utilities\n* Customize fonts\n* Discuss strategy for theme colors management\n* Ensure Vuetify's light/dark themes work with TailwindCSS `light:*` and `dark:*` prefixes\n* Align breakpoints configuration\n\n🖊️ Jacek Czarniecki • 📅 February 16th, 2026\n\n\n\n---\n\n## Table of Contents\n\n* [Scaffold and install TailwindCSS](#scaffold-and-install-tailwindcss)\n * [Create the project](#create-the-project)\n * [Add TailwindCSS v4 via the Vite plugin](#add-tailwindcss-v4-via-the-vite-plugin)\n * [Disable Vuetify utilities](#disable-vuetify-utilities)\n * [Migrate HelloWorld.vue and AppFooter.vue](#migrate-helloworldvue-and-appfootervue)\n* [Restore classes for rounded corners](#restore-classes-for-rounded-corners)\n* [Customize fonts](#customize-fonts)\n* [Avoid conflicting color utilities](#avoid-conflicting-color-utilities)\n* [Configure class-based light/dark variants](#configure-class-based-lightdark-variants)\n* [Breakpoints](#breakpoints)\n* [Summary](#summary)\n\n---\n\n## Scaffold and install TailwindCSS\n\n### Create the project\n\n::: tabs\n\n```bash [pnpm]\npnpm create vuetify@latest\n```\n\n```bash [yarn]\nyarn create vuetify\n```\n\n```bash [npm]\nnpm create vuetify\n```\n\n```bash [bun]\nbun create vuetify\n```\n\n:::\n\n...choose the \"Base\" preset and \"None\" when asked for the CSS framework. The point is to learn how the pieces work together by performing code changes manually.\n\nVerify the boilerplate by building it with the standard NPM build script (e.g. `pnpm run build`).\n\nAdd a few generated files to `.gitignore`, so they won't annoy us when inspecting applied changes.\n\n```sh { resource=\".gitignore\" }\n# Generated files\nauto-imports.d.ts\ncomponents.d.ts\ntyped-router.d.ts\n.eslintrc-auto-import.json\n```\n\nCommit all files as a baseline. This way you can always diff against it and keep track of changes we are about to introduce.\n\n### Add TailwindCSS v4 via the Vite plugin\n\n::: tabs\n\n```bash [pnpm]\npnpm add -D tailwindcss @tailwindcss/vite\n```\n\n```bash [yarn]\nyarn add -D tailwindcss @tailwindcss/vite\n```\n\n```bash [npm]\nnpm i -D tailwindcss @tailwindcss/vite\n```\n\n```bash [bun]\nbun add -D tailwindcss @tailwindcss/vite\n```\n\n:::\n\nRegister `tailwindcss()` in the `plugins` array of `vite.config.ts` and create `src/styles/tailwind.css`. Vuetify v4 already provides its own reset, so we skip Tailwind's preflight to avoid two competing resets:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@import \"tailwindcss/theme\" layer(tailwind.theme);\n/* @import \"tailwindcss/preflight.css\" layer(tailwind.reset); <-- skipped intentionally */\n@import \"tailwindcss/utilities\" layer(tailwind.utilities);\n```\n\n```ts { resource=\"src/main.ts\" }\nimport { registerPlugins } from '@/plugins'\nimport App from './App.vue'\nimport { createApp } from 'vue'\n\nimport 'unfonts.css'\nimport './styles/tailwind.css' // <-- include new file\n\nconst app = createApp(App)\nregisterPlugins(app)\napp.mount('#app')\n```\n\n```ts { resource=\"vite.config.mts\" }\nimport tailwindcss from '@tailwindcss/vite'\n// ...\n\nexport default defineConfig({\n plugins: [\n tailwindcss(), // <-- register the plugin\n // ...\n ],\n```\n\nIn order for Vuetify transitions to work properly, we have to ensure `tailwind.*` layers are placed before `vuetify-final`. Go ahead and add a new file called `layers.scss`:\n\n```css { resource=\"src/styles/layers.scss\" }\n@layer vuetify-core;\n@layer vuetify-components;\n@layer vuetify-overrides;\n@layer vuetify-utilities;\n\n@layer tailwind; /* <-- our new utilities */\n\n@layer vuetify-final;\n```\n\nThen reference it from `vuetify.ts` before importing `vuetify/styles`.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\n// Styles\nimport '../styles/layers.css'\nimport '@mdi/font/css/materialdesignicons.css'\nimport 'vuetify/styles'\n\n// followed by createVuetify({ ... })\n```\n\n![CSS Layers preview in browser DevTools](https://cdn.vuetifyjs.com/docs/images/blog/building-with-vite-and-tailwindcss/vuetify-tailwindcss-layers.png)\n\n### Disable Vuetify utilities\n\nLet's adjust `src/styles/settings.scss`:\n\n```scss { resource=\"src/styles/settings.scss\" }\n@use 'vuetify/settings' with (\n $color-pack: false,\n $utilities: false,\n);\n```\n\nIf you run the build again, you should observe that the CSS bundle shrinks noticeably:\n\n```md\nbefore: 658.40 kB │ gzip: 141.74 kB\nafter: 481.24 kB │ gzip: 115.70 kB\n```\n\nThe expected difference is substantial, but we still pay the tax of using the full MDI icon font. Switching to SVG icons (`@mdi/js`) is not a big deal, but we will keep this guide focused on integrating TailwindCSS. If you need to optimize the bundle size further, Vuetify documentation already covers [how to switch to SVG icon set](/features/icon-fonts/#mdi-js-svg).\n\n### Migrate HelloWorld.vue and AppFooter.vue { #migrate-helloworldvue-and-appfootervue }\n\nWith utilities disabled, some classes used in the scaffolded template will stop working. Here are the replacements:\n\n* replace `fill-height` with `h-full`\n* replace `d-flex` with `flex`\n* replace `align-center` with `items-center`\n* replace `font-weight-*` with `font-*`\n* replace `mb-n1` with `-mb-1`\n* replace typography `text-*` classes with native TailwindCSS utilities to achieve similar font size and weight\n * `text-body-2` » `text-sm`\n * `text-h2` » `text-7xl`\n\nVRow/VCol can also be replaced with `grid md:grid-cols-2 gap-3` and `md:col-span-2` for the first VCard. However, you might be surprised to learn that Vuetify's grid engine got a major overhaul in v4.0.0 and is much leaner and more flexible than ever.\n\n## Restore classes for rounded corners\n\nSomething that is not really noticeable at first glance is the card rounding. Vuetify's `rounded` prop values (`rounded=\"lg\"`, etc.) emit classes like `.rounded-lg` that collide with Tailwind's naming but use different values.\n\nTailwindCSS lets us define rounding using CSS variables that are later applied by the specific CSS classes.\n\n```css\n.rounded-lg {\n border-radius: var(--radius-lg);\n}\n```\n\nLooking at the default TailwindCSS configuration side-by-side with the default Vuetify classes generated from Sass, it is clear that those are not compatible and we will need some stitching.\n\n```css\n@theme {\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --radius-4xl: 2rem;\n}\n\n/* default output from Vuetify, we disabled those with $utilities: false */\n.rounded-0 { border-radius: 0 }\n.rounded-sm { border-radius: 2px }\n.rounded { border-radius: 4px }\n.rounded-lg { border-radius: 8px }\n.rounded-xl { border-radius: 24px }\n.rounded-pill { border-radius: 9999px }\n.rounded-circle { border-radius: 50% }\n.rounded-shaped { border-radius: 24px 0 }\n```\n\nIn order to resolve this, we need to use `blocklist` and suppress certain utilities from TailwindCSS. Create a config file `tailwind.config.ts`:\n\n```ts { resource=\"tailwind.config.ts\" }\nimport type { Config } from 'tailwindcss'\n\nmodule.exports = {\n blocklist: [\n 'rounded-xs',\n 'rounded-md',\n 'rounded-2xl',\n 'rounded-3xl',\n 'rounded-4xl',\n 'rounded-full',\n ],\n} satisfies Config\n```\n\nThe new file has to be linked from `tailwind.css`. We also override the radius variables and register custom utilities for the values that don't exist in Tailwind out-of-the-box:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@import \"tailwindcss/theme\" layer(theme);\n/* @import \"tailwindcss/preflight.css\" layer(reset); */\n@import \"tailwindcss/utilities\" layer(utilities);\n\n@config \"../../tailwind.config.ts\";\n\n@theme {\n --radius-sm: 2px;\n --radius-lg: 8px;\n --radius-xl: 24px;\n}\n\n@utility rounded-0 { border-radius: 0 }\n@utility rounded-pill { border-radius: 9999px }\n@utility rounded-shaped { border-radius: 24px 0 }\n\n@source inline('rounded-0');\n@source inline('rounded-sm');\n@source inline('rounded'); /* leaving .25rem */\n@source inline('rounded-lg');\n@source inline('rounded-xl');\n@source inline('rounded-pill');\n@source inline('rounded-circle');\n@source inline('rounded-shaped');\n```\n\nIf you'd rather use the original TailwindCSS `rounded-*` utilities, it is recommended to disallow use of Vuetify's rounded classes, which can be enforced by patching `eslint-plugin-vuetify`. The actual process of patching is specific to the package manager of your choice, so we will skip it for now. If you are stuck, feel free to reach out on [Discord](https://community.vuetifyjs.com).\n\n---\n\n## Customize fonts\n\nThe `create-vuetify` utility we used at the beginning to scaffold the project uses `unplugin-fonts` to load Roboto. Let's update the configuration to make sure the target fonts are available.\n\n```ts { resource=\"vite.config.mts\" }\n Fonts({\n fontsource: {\n families: [\n {\n name: 'Bricolage Grotesque',\n weights: [300, 400, 500, 700],\n },\n {\n name: 'Sen',\n weights: [400, 500, 700],\n },\n {\n name: 'Sometype Mono',\n weights: [400, 700],\n },\n ],\n },\n }),\n```\n\nNext step is to add them as dependencies:\n\n::: tabs\n\n```bash [pnpm]\npnpm i @fontsource/bricolage-grotesque @fontsource/sen @fontsource/sometype-mono\n```\n\n```bash [yarn]\nyarn add @fontsource/bricolage-grotesque @fontsource/sen @fontsource/sometype-mono\n```\n\n```bash [npm]\nnpm i @fontsource/bricolage-grotesque @fontsource/sen @fontsource/sometype-mono\n```\n\n```bash [bun]\nbun add @fontsource/bricolage-grotesque @fontsource/sen @fontsource/sometype-mono\n```\n\n:::\n\nNow we can configure TailwindCSS theme variables. These will generate utility classes like `font-heading`, `font-body` and `font-mono`:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@theme {\n --font-heading: \"Bricolage Grotesque\", sans-serif;\n --font-body: Sen, sans-serif;\n --font-mono: \"Sometype Mono\", monospace;\n\n /* ...breakpoints, radius, colors... */\n}\n\n/* ensure the variables are not skipped */\n@source inline('font-body');\n@source inline('font-heading');\n@source inline('font-mono');\n```\n\nThen we pass them to Vuetify through Sass variables so component typography picks them up too:\n\n```diff { resource=\"src/styles/settings.scss\" }\n@use 'vuetify/settings' with (\n $color-pack: false,\n $utilities: false,\n+ $heading-font-family: var(--font-heading),\n+ $body-font-family: var(--font-body),\n);\n```\n\nAt this point, I usually like to cover components that need a monospace font. We can also create `/styles/main.scss` to set it globally. It is not strictly necessary, but apps usually need some custom global styles anyway.\n\n```scss { resource=\"src/styles/main.scss\" }\n@layer vuetify-overrides {\n code, pre, .v-code {\n font-family: var(--font-mono);\n }\n}\n```\n\nNew file has to be imported in `main.ts` alongside the Tailwind stylesheet.\n\n---\n\n## Avoid conflicting color utilities\n\n`bg-*` classes generated by Vuetify carry over a foreground color that is calculated to ensure text and icons have a sufficient contrast ratio. This makes them superior to regular TailwindCSS utilities, but also incompatible with variants (`hover:`, `sm:*`, `md:*`, etc).\n\n```css\n.bg-primary {\n --v-theme-overlay-multiplier: var(--v-theme-primary-overlay-multiplier);\n background-color: rgb(var(--v-theme-primary));\n color: rgb(var(--v-theme-on-primary));\n}\n```\n\nWhen working with TailwindCSS, it is normal to split background and text colors into separate classes, and the responsibility of ensuring readability is on the developer writing the code.\n\nIn order to avoid the mental overhead of remembering where each `bg-*` is coming from, let's instruct Vuetify theme to generate only CSS variables and skip the classes:\n\n```diff { resource=\"src/plugins/vuetify.ts\" }\nexport default createVuetify({\n theme: {\n defaultTheme: 'system',\n+ utilities: false,\n },\n})\n```\n\nNext, we can pass those theme colors to TailwindCSS. Since the values are raw comma-separated RGB channels (translated from hex on the fly by Vuetify), we need to wrap them in `rgb()` when registering them in Tailwind's `@theme`:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@theme {\n --color-background: rgb(var(--v-theme-background));\n --color-primary: rgb(var(--v-theme-primary));\n --color-surface: rgb(var(--v-theme-surface));\n --color-success: rgb(var(--v-theme-success));\n --color-error: rgb(var(--v-theme-error));\n /* and the rest of colors you intend to use */\n}\n\n/* safelist common colors to be used with color=\"...\" attribute */\n@source inline('bg-primary');\n@source inline('text-primary');\n@source inline('bg-success');\n@source inline('text-success');\n@source inline('bg-error');\n@source inline('text-error');\n```\n\nNow you can use `bg-primary`, `text-success`, `hover:bg-error` and similar classes, all driven by Vuetify's theme definition.\n\n---\n\n## Configure class-based light/dark variants { #configure-class-based-lightdark-variants }\n\nLet's add some color-dependent classes and try using the `dark:*` prefix to see what happens. By default, Tailwind's `dark:` variant targets `@media (prefers-color-scheme: dark)` or a `.dark` class. Vuetify uses `.v-theme--dark` instead, so the generated selectors won't match.\n\nTo align Tailwind with Vuetify, we need to redeclare theming variants:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@custom-variant light (&:where(.v-theme--light, .v-theme--light *));\n@custom-variant dark (&:where(.v-theme--dark, .v-theme--dark *));\n```\n\nYou can verify it by toggling themes. Simply add a quick button somewhere (e.g. in `App.vue`):\n\n```html\n\n```\n\nNow classes like `dark:bg-primary` and `light:text-error` should react correctly to Vuetify's theme toggle.\n\n---\n\n## Breakpoints\n\nDefault breakpoints provided by TailwindCSS are not compatible with Vuetify. This mismatch can lead to unexpected layout issues when `sm:` in Tailwind kicks in at a different width than `sm` in VCol. Let's align them.\n\nUnlike the UnoCSS setup from the previous article, where we could define breakpoints in a shared `.ts` file and feed them into both tools, TailwindCSS v4 expects breakpoints as pure CSS variables under `@theme`. This means we inevitably end up with the same values in three places. It's a minor inconvenience, but easy to manage with a comment pointing to the other two.\n\nFirst, clear out the Tailwind defaults and set our own in `tailwind.css`:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@theme {\n --breakpoint-*: initial;\n /* repeated in vuetify.ts and settings.scss */\n --breakpoint-xs: 0px;\n --breakpoint-sm: 400px;\n --breakpoint-md: 840px;\n --breakpoint-lg: 1145px;\n --breakpoint-xl: 1545px;\n --breakpoint-xxl: 2138px;\n\n /* ... fonts, radius, colors ... */\n}\n```\n\n`--breakpoint-*: initial` resets all built-in Tailwind breakpoints (`2xl`, `3xl`, etc.) so they don't interfere or confuse your teammates.\n\nNext, set Vuetify's `display.thresholds` in the plugin setup. This controls `useDisplay()` and `$vuetify.display.*`.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nexport default createVuetify({\n theme: { ... },\n display: {\n mobileBreakpoint: 'md',\n thresholds: {\n // repeated in tailwind.css and settings.scss\n xs: 0,\n sm: 400,\n md: 840,\n lg: 1145,\n xl: 1545,\n xxl: 2138,\n },\n },\n})\n```\n\nFinally, update the SCSS variables. `$grid-breakpoints` drives VCol's responsive columns, and `$container-max-widths` sets the maximum width of VContainer at each breakpoint.\n\n```scss { resource=\"src/styles/settings.scss\" }\n@use 'vuetify/settings' with (\n $color-pack: false,\n $utilities: false,\n $heading-font-family: var(--font-heading),\n $body-font-family: var(--font-body),\n $grid-breakpoints: (\n // repeated in tailwind.css and vuetify.ts\n 'xs': 0,\n 'sm': 400px,\n 'md': 840px,\n 'lg': 1145px,\n 'xl': 1545px,\n 'xxl': 2138px,\n ),\n $container-max-widths: (\n // optional, computed from breakpoints\n 'md': 700px,\n 'lg': 1000px,\n 'xl': 1400px,\n 'xxl': 2000px,\n ),\n);\n```\n\nThe `$container-max-widths` values are manually rounded to keep VContainer sizing clean and predictable.\n\nAt this point, a class like `sm:text-lg` in Tailwind and `sm=\"6\"` on VCol will both trigger at exactly `400px`.\n\n---\n\n## Summary\n\nCompared to the UnoCSS path, most of the setup lands in `tailwind.css` instead of `nuxt.config.ts`. We used custom directives like `@theme` and `@custom-variant`, but had to drop back to importing JS-based config to blacklist some styles provided by Tailwind. I hope it was an interesting journey and you can feel comfortable building upon this setup. Here are the key takeaways:\n\n* **Utilities**: we disabled Vuetify's built-in utilities to replace them with TailwindCSS utilities while keeping an eye on the correct order of CSS layers\n* **Rounded classes**: Vuetify's `rounded` prop and Tailwind's `rounded-*` utilities use the same class names with different values. It was a challenge, but we were able to bridge the gap\n* **Theme colors**: Vuetify theme can also be configured to skip utility classes and generate only CSS properties. We have passed them inside the `@theme` directive and \"safelisted\" global colors we intend to use with the `color` prop on cards, buttons and icons\n* **Dark mode**: Tailwind is flexible enough to accept Vuetify theme classes\n* **Typography**: `text-*` classes were skipped for simplicity - you can introduce your own classes with the `@utility` directive if needed\n* **Breakpoints**: we aligned configuration across three definitions (SCSS, Vuetify config, Tailwind `@theme`) to prevent layout bugs\n\nReference repository with final state: [J-Sek/vuetify-vite-and-tailwind](https://github.com/J-Sek/vuetify-vite-and-tailwind). If you find it useful, give it a ⭐.\n\nCheers!\n","packages/docs/src/pages/en/blog/december-2025-update.md":"---\nlayout: blog\nmeta:\n title: December 2025 Update\n description: December shipped Vuetify 4.0.0-alpha.0 with CSS layers, five v3.11.x patches, the Vuetify CLI public release, ecosystem-wide PWA rollout, and v0 progress.\n keywords: Vuetify December 2025, v4.0.0-alpha.0, Vuetify CLI, PWA, CSS layers, Vuetify0, MCP\n---\n\n\n\n# December 2025 Update\n\nWelcome to the December 2025 Vuetify update! The year closes with a bang—**v4.0.0-alpha.0** marks the beginning of Vuetify 4's public development, while five v3.11.x patch releases keep the stable branch polished. The **Vuetify CLI** shipped its first public release, PWA support rolled out across all ecosystem products, and Vuetify0 continued its rapid evolution with 6 releases.\n\n![Hero image for December update](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/december-hero.png \"December hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 January 12th, 2026\n\n\n\n---\n\n## Closing the Year Strong\n\nDecember was our most productive month of 2025. With **522 commits** across 16 active repositories and **82 merged PRs**, the team shipped at an incredible pace. The release of v4.0.0-alpha.0 represents months of architectural planning finally landing for public testing—CSS layers, reduced breakpoints, and theme system improvements that set the stage for Vuetify 4.0 stable. Meanwhile, [J-Sek](https://github.com/J-Sek) continued his remarkable contribution streak with 16 PRs to the main framework, and [ikushum](https://github.com/ikushum) delivered 9 PRs across components. The CLI reached public release status just in time for the new year, and every ecosystem product now supports PWA installation.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Vuetify 4 Alpha](#vuetify-4-alpha)\n* [Ecosystem Spotlight: Vuetify CLI](#ecosystem-spotlight-vuetify-cli)\n * [create-vuetify Updates](#create-vuetify-updates)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Accessibility & Compatibility](#accessibility-compatibility)\n* [Product Updates](#product-updates)\n * [Vuetify Bin](#vuetify-bin)\n * [Vuetify Play](#vuetify-play)\n * [Vuetify Issues Reporter](#vuetify-issues)\n * [Other Products](#other-products)\n* [Vuetify MCP: Rate Limiting & CLI Support](#vuetify-mcp-rate-limiting-cli-support)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [December 2025 Changelog](#december-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nDecember delivered six Vuetify releases—five v3.11.x patches maintaining stability and the landmark **v4.0.0-alpha.0** kicking off the next major version. The v3.x branch continues receiving attention with accessibility improvements, bug fixes, and new props across multiple components.\n\n![December Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/releases.png \"December Releases Banner\")\n\n### Key Improvements\n\n* **[VWindow](/components/windows/)** keyboard controls for accessible navigation\n* **[VList](/components/lists/)** `navigation-strategy` prop to control focused item behavior\n* **[VImg](/components/images/)** attribute passthrough to underlying `` element\n* **[VOtpInput](/components/otp-input/)** `density` prop for compact layouts\n* **[VColorInput](/components/color-input/)/[VDateInput](/components/date-input/)** `picker-props` for customizing picker appearance\n* **[VDataIterator](/components/data-iterators/)** `items-length` prop for virtual scrolling support\n* **[VDatePicker](/components/date-pickers/)** custom `control-height` support\n* **[nested](/components/treeview/)** `branch` select strategy for hierarchical selection\n\nView the complete list of changes in the [Full Changelog](#december-2025-changelog)\n\n**Details:**\n\n* [v3.11.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.2)\n* [v3.11.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.3)\n* [v3.11.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.4)\n* [v3.11.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.5)\n* [v3.11.6](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.6)\n* [v4.0.0-alpha.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0-alpha.0)\n\n---\n\n## Vuetify 4 Alpha\n\nThe first alpha of **Vuetify 4.0** landed on December 30th, marking the start of public development for our next major version. This release contains significant architectural changes that improve performance, reduce bundle size, and modernize the CSS architecture.\n\n![Vuetify 4 Alpha](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/v4-alpha.png \"Vuetify 4 Alpha\")\n\n### What's New in v4.0.0-alpha.0\n\n**CSS Layers**: Vuetify 4 uses CSS layers throughout, flattening layer names and replacing `!important` declarations with proper cascade management. This makes customization cleaner and reduces specificity conflicts.\n\n**Theme System**: The default theme changes from `light` to `system`, respecting user preferences. Transparent color support enables more sophisticated design patterns. The `unimportant` option has been removed in favor of layers.\n\n**Reduced Breakpoints**: Default breakpoint sizes have been adjusted for modern viewport distributions.\n\n**Style Architecture**:\n\n* Separate entry points allow opting out of misc styles\n* CSS reset has been streamlined (removed overflow-y)\n* [VRow](/api/v-row/)/[VCol](/api/v-col/) styles can be skipped when only using [VContainer](/api/v-container/) or [VSpacer](/api/v-spacer/)\n\n**Component Updates**:\n\n* **[VBtn](/components/buttons/)**: Default text transform removed, display converted from grid to flex\n* **[VField](/api/v-field/)**: Display converted from grid to flex, append/prepend fills height\n* **[VSnackbar](/components/snackbars/)**: `multi-line` prop removed in favor of CSS\n* **[VSelect](/components/selects/)/[VAutocomplete](/components/autocompletes/)/[VCombobox](/components/combobox/)**: `item` renamed to `internalItem` for clarity\n* **[VNumberInput](/components/number-inputs/)**: No longer clamps value on mount\n* **[VDatePicker](/components/date-pickers/)**: Only emits start and end range values\n* **[VForm](/components/forms/)**: Unref values in slot props\n* **[VInput](/api/v-input/)**: New `indent-details` prop\n* **[VListItem](/api/v-list-item/)**: Exposes `isDisabled` in slot props\n* **[VCounter](/api/v-counter/)**: Inherits color (aligns with [VMessages](/api/v-messages/))\n\n::: info\n\nv4.0.0-alpha.0 is for testing and feedback only. Production applications should continue using v3.11.x until v4 reaches stable release.\n\n:::\n\n**Details:**\n\n* [v4.0.0-alpha.0 Release Notes](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0-alpha.0)\n* [Migration Guide](https://next.vuetifyjs.com/getting-started/upgrade-guide/)\n* [Remaining Issues](https://github.com/vuetifyjs/vuetify/milestone/62)\n\n---\n\n## Ecosystem Spotlight: Vuetify CLI { #ecosystem-spotlight-vuetify-cli }\n\n\n\n
\n\nThe **Vuetify CLI** reached its first public release in December with **25 commits** across versions v0.0.5 through v0.0.7. This new tooling ecosystem streamlines project scaffolding and integrates with the broader Vuetify ecosystem.\n\n![Vuetify CLI](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/cli.png \"Vuetify CLI\")\n\n### CLI Ecosystem Overview\n\nThe Vuetify CLI ecosystem consists of three packages that share logic via `@vuetify/cli-shared`:\n\n**create-vuetify0** (`npm create vuetify0`) — Scaffolds new Vuetify0 projects with support for [Vue](https://vuejs.org/) or [Nuxt](https://nuxt.com/) platforms. Includes feature selection for router, pinia, and eslint. TypeScript by default.\n\n**@vuetify/cli** (`vuetify` command) — The main CLI with multiple commands:\n\n* `vuetify init` — Same as create-vuetify, scaffolds new projects (supports `--type vuetify0`)\n* `vuetify add eslint` — Adds ESLint + [eslint-config-vuetify](https://github.com/vuetifyjs/eslint-config-vuetify) to existing projects\n* `vuetify add mcp` — Adds [Vuetify MCP](https://github.com/vuetifyjs/mcp) server config for [Cursor](https://cursor.sh/)/[VS Code](https://code.visualstudio.com/)\n* `vuetify update` — Smart updates Vuetify + related packages\n* `vuetify docs` — Opens vuetifyjs.com (version-aware)\n* `vuetify upgrade` — Self-upgrades the CLI\n\n::: tabs\n\n```bash [pnpm]\n# Install the CLI globally\npnpm add -g @vuetify/cli\n\n# Initialize a new project\nvuetify init my-app\n\n# Or create a v0 project directly\npnpm create vuetify0@latest\n\n# Add ESLint to an existing project\nvuetify add eslint\n\n# Add MCP server configuration\nvuetify add mcp\n\n# Update Vuetify packages\nvuetify update\n```\n\n```bash [yarn]\n# Install the CLI globally\nyarn global add @vuetify/cli\n\n# Initialize a new project\nvuetify init my-app\n\n# Or create a v0 project directly\nyarn create vuetify0\n\n# Add ESLint to an existing project\nvuetify add eslint\n\n# Add MCP server configuration\nvuetify add mcp\n\n# Update Vuetify packages\nvuetify update\n```\n\n```bash [npm]\n# Install the CLI globally\nnpm install -g @vuetify/cli\n\n# Initialize a new project\nvuetify init my-app\n\n# Or create a v0 project directly\nnpm create vuetify0@latest\n\n# Add ESLint to an existing project\nvuetify add eslint\n\n# Add MCP server configuration\nvuetify add mcp\n\n# Update Vuetify packages\nvuetify update\n```\n\n```bash [bun]\n# Install the CLI globally\nbun add -g @vuetify/cli\n\n# Initialize a new project\nvuetify init my-app\n\n# Or create a v0 project directly\nbun create vuetify0\n\n# Add ESLint to an existing project\nvuetify add eslint\n\n# Add MCP server configuration\nvuetify add mcp\n\n# Update Vuetify packages\nvuetify update\n```\n\n:::\n\n### create-vuetify Updates\n\nThe **create-vuetify** scaffolding tool received **12 commits** and 4 releases in December:\n\n**v2.8.0-beta.1** (December 30th):\n\n* **Vuetify 4 Alpha Support**: Templates now support bootstrapping projects with Vuetify 4.0.0-alpha.0\n* **Dynamic Version Replacement**: Vuetify version is now dynamically replaced in templates, making it easier to stay current\n\n**v2.7.3** (December 20th):\n\n* **[Volar](https://volarjs.dev/) Rich Hover Hints**: Enabled by default for better IDE experience with component prop documentation\n\n**v2.7.1-v2.7.2** (December 16th):\n\n* **Nuxt Styles Fix**: Corrected styles loading when not using the Nuxt module\n* Various maintenance updates\n\n**Details:**\n\n* [Vuetify CLI GitHub Repository](https://github.com/vuetifyjs/cli)\n* [create-vuetify Releases](https://github.com/vuetifyjs/create-vuetify/releases)\n* [v2.8.0-beta.1 Release Notes](https://github.com/vuetifyjs/create-vuetify/releases/tag/v2.8.0-beta.1)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nDecember's framework work balanced new features with stability improvements. The team merged 49 PRs addressing everything from keyboard accessibility to field validation.\n\n### New Features\n\n**[VWindow](/components/windows/) Keyboard Controls**\n\nThe [VWindow](/components/windows/) component now supports keyboard navigation, enabling users to move between slides with arrow keys—essential for accessibility and power users.\n\n**[VList](/components/lists/) Navigation Strategy**\n\nA new `navigation-strategy` prop gives fine-grained control over which items receive focus during keyboard navigation. This is particularly useful for complex lists with nested content.\n\n**[VImg](/components/images/) Attribute Passthrough**\n\nAttributes passed to [VImg](/components/images/) now flow through to the underlying `` element, enabling native image attributes like `loading=\"lazy\"` and custom data attributes.\n\n**[VOtpInput](/components/otp-input/) Density**\n\nThe [OTP input](/components/otp-input/) component now supports the `density` prop for compact layouts, and the `rounded` prop is properly applied to inner fields.\n\n**Details:**\n\n* [VWindow keyboard controls PR#22430](https://github.com/vuetifyjs/vuetify/pull/22430)\n* [VList navigation-strategy PR#22328](https://github.com/vuetifyjs/vuetify/pull/22328)\n* [VImg attribute passthrough PR#22439](https://github.com/vuetifyjs/vuetify/pull/22439)\n* [VOtpInput density PR#22401](https://github.com/vuetifyjs/vuetify/pull/22401)\n\n### Accessibility & Compatibility { #accessibility-compatibility }\n\n**Forced Colors Mode**\n\n[VColorPicker](/components/color-pickers/) now renders inner outlines correctly in Windows High Contrast Mode and other forced-colors environments, ensuring usability for users with visual impairments.\n\n**Screen Reader Improvements**\n\n[VTextArea](/components/textareas/) and [VSelect](/components/selects/) received accessibility improvements for better screen reader announcements, including proper ARIA attributes and field label reading.\n\n**[VSlider](/components/sliders/) ARIA Attributes**\n\nSlider components now correctly pass `aria-` attributes to the thumb element for assistive technology support.\n\n**[VTooltip](/components/tooltips/) Dismissable by Default**\n\nTooltips are now dismissable by default, improving keyboard accessibility and touch device support.\n\n**Fields ARIA Cleanup**\n\nAll field components received ARIA attribute cleanup for better screen reader compatibility.\n\n**Details:**\n\n* [VColorPicker forced-colors PR#22317](https://github.com/vuetifyjs/vuetify/pull/22317)\n* [VTextArea/VSelect screen reader PR#20339](https://github.com/vuetifyjs/vuetify/pull/20339)\n* [VSlider ARIA PR#22444](https://github.com/vuetifyjs/vuetify/pull/22444)\n* [VTooltip dismissable PR#22419](https://github.com/vuetifyjs/vuetify/pull/22419)\n* [Fields ARIA cleanup PR#22418](https://github.com/vuetifyjs/vuetify/pull/22418)\n\n---\n\n## Product Updates\n\nDecember saw significant updates across all Vuetify ecosystem products, with **PWA support** rolling out universally and major feature additions to [Bin](https://bin.vuetifyjs.com/) and [Play](https://play.vuetifyjs.com/).\n\n### Vuetify Bin\n\n\n\n
\n\n**41 commits** made December [Bin](https://bin.vuetifyjs.com/)'s most active month:\n\n* **Embeddable Bins**: New feature in testing for embedding bins in external documentation and blogs using [Shiki](https://shiki.style/) for lighter bundles. Available to Vuetify One subscribers.\n\n![Embeddable Bins](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/embeddable-bins.png \"Bin embedded in documentation\")\n\n* **18 Language Support**: Expanded language support with auto-detection for pasted code\n* **Public/Private Visibility**: Users can now control bin visibility with proper 403 error pages for private bins\n* **Live Share Restrictions**: Limited to public bins with dashboard action\n* **Accessibility Audit**: Comprehensive a11y review completed\n* **PWA Support**: Install Bin as a standalone app\n* **Editor Improvements**: Line wrapping enabled by default, grouped secondary AppBar actions\n\n### Vuetify Play\n\n\n\n
\n\n**23 commits** delivered key improvements to [Play](https://play.vuetifyjs.com/):\n\n* **Multiple Templates**: Switch between project templates without losing work, with proper preservation of changes to system files\n\n![Play Template Switcher](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/play-templates.png \"Template selection in Vuetify Play\")\n\n* **Editor Settings**: Customizable editor preferences\n* **Visibility Toggle**: Public/private playground support\n* **Version Selector**: Now includes prerelease versions for Vue and Vuetify\n* **v0 Template**: Updated to presetWind4\n* **PWA Support**: Install Play as a standalone app\n\n### Vuetify Issues\n\n\n\n
\n\nThe **Vuetify Issues** reporter received **31 commits** with significant improvements to the issue creation workflow:\n\n![Issues Form](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/vissues-form.png \"Improved issue creation form\")\n\n**Ecosystem Projects Support**:\n\n* Now supports non-library repositories (create-vuetify, admin, etc.)\n* Repo and type query parameters for direct linking\n* Project name displayed in title for ecosystem issues\n* Reproduction step hidden for ecosystem projects (not applicable)\n* Shows repo name instead of versions for ecosystem review\n\n**Form Validation Improvements**:\n\n* Required expected/actual behavior fields before save\n* Steps require content before adding new ones\n* New step auto-focus for better UX\n\n**Other Updates**:\n\n* **PWA Support**: Install as standalone app\n* **\"Used to work\" Switch**: Available for all repos, not just Vuetify\n* **New Favicon**: Fresh vissues branding\n* **UI Polish**: Fixed button spacing and v-confirm-edit actions\n\n**Details:**\n\n* [Vuetify Issues](https://issues.vuetifyjs.com/)\n\n### Other Products\n\n* **[Vuetify Snips](https://snips.vuetifyjs.com/)**: New button and pagination snippets in review, improved a11y for radio groups, PWA support added\n* **[Vuetify Studio](https://studio.vuetifyjs.com/)**: PWA support added, playground link generation updated\n* **[Vuetify Link](https://link.vuetifyjs.com/)**: Route handling refactored to use definePage, PWA support added\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n* [Vuetify Play](https://play.vuetifyjs.com/)\n* [Vuetify Snips](https://snips.vuetifyjs.com/)\n* [Vuetify Issues](https://issues.vuetifyjs.com/)\n\n---\n\n## Vuetify MCP: Rate Limiting & CLI Support { #vuetify-mcp-rate-limiting-cli-support }\n\n\n\n
\n\nDecember brought four releases to the Vuetify MCP server (v0.2.4 through v0.4.1), adding important infrastructure improvements and new capabilities.\n\n### What's New\n\n**Rate Limiter**: The MCP server now includes rate limiting to ensure fair usage and stability across all consumers.\n\n**[Claude Code](https://docs.anthropic.com/en/docs/claude-code) CLI Support**: Native integration with Claude Code for seamless AI-assisted development workflows.\n\n**update_vuetify_bin Tool**: A new tool for updating existing Vuetify bins programmatically.\n\n**HTTP Transport Improvements**: Stateless mode improvements and auth propagation fixes.\n\n### Getting Started\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\nOr run locally:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@vuetify/mcp\"]\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [Model Context Protocol Documentation](https://modelcontextprotocol.io/)\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\n
\n\nDecember was another strong month for Vuetify0, with **322 commits** and 6 releases (v0.0.15–v0.0.18, v0.0.20–v0.0.21). The headless meta-framework gained five new composables—including virtual scrolling and pagination primitives—along with accessibility improvements, observer enhancements, and significant documentation updates.\n\n![Vuetify0 Progress](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/v0.png \"Vuetify0 Progress\")\n\nWith these additions, v0 now provides production-ready primitives for building accessible, high-performance UI components without the styling opinions of a traditional component library.\n\n### New Composables\n\nDecember added five composables covering pagination, virtualization, and UI utilities:\n\n**[usePagination](https://0.vuetifyjs.com/composables/utilities/use-pagination/)** — Full-featured pagination logic with first/prev/next/last navigation, ellipsis support for large page ranges, and computed `pageStart`/`pageStop` for efficient data slicing. Supports locale-aware formatting and customizable page sizes.\n\n**[useVirtual](https://0.vuetifyjs.com/composables/utilities/use-virtual/)** — High-performance virtual scrolling that renders only visible items plus an overscan buffer. Supports dynamic or fixed item heights, bidirectional scrolling (useful for chat interfaces), scroll anchoring to maintain position across data changes, and iOS momentum scrolling. Handles 100k+ items efficiently.\n\n**[useOverflow](https://0.vuetifyjs.com/composables/utilities/use-overflow/)** — Computes how many items fit in a container based on available width. Two modes: variable-width (measures each item individually, ideal for breadcrumbs) and uniform-width (samples one item, ideal for pagination buttons). Tracks container width via ResizeObserver and supports reserved space for navigation controls.\n\n**[useClickOutside](https://0.vuetifyjs.com/composables/system/use-click-outside/)** — Click outside detection for closing menus, dialogs, and popovers. Handles edge cases like portaled content and nested overlays.\n\n**[useToggleScope](https://0.vuetifyjs.com/composables/system/use-toggle-scope/)** — Manages Vue effect scopes based on a reactive boolean. Automatically cleans up effects when the condition becomes false—useful for conditional side effects and feature flags.\n\n### New Components\n\n**[PaginationStatus](https://0.vuetifyjs.com/components/semantic/pagination/)** — An accessibility-focused component that provides `aria-live` announcements when pagination state changes. Screen readers automatically announce the current page, helping users who rely on assistive technology stay oriented. Style it with `sr-only` CSS to keep it visually hidden while remaining accessible.\n\n### Observer Improvements\n\nAll three observer composables—[useResizeObserver](https://0.vuetifyjs.com/composables/system/use-resize-observer/), [useMutationObserver](https://0.vuetifyjs.com/composables/system/use-mutation-observer/), and [useIntersectionObserver](https://0.vuetifyjs.com/composables/system/use-intersection-observer/)—received enhancements:\n\n| Feature | Description |\n|---------|-------------|\n| `once` option | Automatically stops observing after first callback execution |\n| `isActive` return | Exposes whether the observer is currently monitoring |\n| Broader targets | [useIntersectionObserver](https://0.vuetifyjs.com/composables/system/use-intersection-observer/) accepts additional target types |\n\nThe `once` option is particularly useful for lazy-loading images or triggering one-time animations when elements enter the viewport.\n\n### Registry Enhancements\n\n[createRegistry](https://0.vuetifyjs.com/composables/registration/create-registry/) powers component coordination patterns like tabs, accordions, and steppers. December brought performance improvements for complex component trees:\n\n| Feature | Description |\n|---------|-------------|\n| `batch()` method | Bulk register/unregister operations in a single call, reducing reindexing overhead |\n| `ReadonlyMap` collection | Type changed from `Map` to `ReadonlyMap` to prevent accidental mutations |\n| Deferred reindexing | Unregister operations now batch index recalculations for better performance |\n\nThese changes particularly benefit applications with deeply nested or dynamically generated component hierarchies.\n\n### Documentation Updates\n\nThe [0.vuetifyjs.com](https://0.vuetifyjs.com/) documentation site received substantial improvements:\n\n**AI Q&A** — An intelligent search feature that answers questions about v0 composables, patterns, and usage. Ask natural language questions like \"How do I implement infinite scroll?\" and get contextual answers with code examples.\n\n![v0 AI Q&A](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/v0-ai-qa.png \"AI-powered Q&A in Vuetify0 docs\")\n\n* **PWA support** — Install the documentation as a standalone app for offline access. Useful when working in environments with limited connectivity.\n* **Mobile improvements** — Redesigned navigation for smaller screens with proper iOS safe area support, making it easier to browse documentation on mobile devices.\n* **Code blocks** — Fence titles now display file paths above code examples, and syntax highlighting was improved across all supported languages.\n\n::: info\n\nThe v0 documentation at [0.vuetifyjs.com](https://0.vuetifyjs.com/) now includes AI-powered Q&A for finding information quickly.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [useVirtual](https://0.vuetifyjs.com/composables/use-virtual/)\n* [usePagination](https://0.vuetifyjs.com/composables/use-pagination/)\n* [useOverflow](https://0.vuetifyjs.com/composables/use-overflow/)\n* [useClickOutside](https://0.vuetifyjs.com/composables/use-click-outside/)\n* [v0.0.15](https://github.com/vuetifyjs/0/releases/tag/v0.0.15)–[v0.0.18](https://github.com/vuetifyjs/0/releases/tag/v0.0.18), [v0.0.20](https://github.com/vuetifyjs/0/releases/tag/v0.0.20)–[v0.0.21](https://github.com/vuetifyjs/0/releases/tag/v0.0.21)\n\n---\n\n## December 2025 Changelog\n\nThe following section provides an overview of the changes made in December 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* CSS layers architecture in v4 for cleaner customization\n* [VWindow](/components/windows/) keyboard controls for accessible slide navigation\n* [VList](/components/lists/) navigation-strategy prop for focus management\n* [VColorPicker](/components/color-pickers/) forced-colors mode compatibility\n* [VTreeview](/components/treeview/) selection state fixes with disabled items\n* [VSlider](/components/sliders/) ARIA attribute corrections\n* Strict TypeScript template support\n\n**Expand** this section to see the detailed changelog for December 2025:\n\n
\n\n### v3.11.2\n\n**:wrench: Bug Fixes**\n\n* **VDataTable:** hide checkbox for `mobile` without `show-select` ([d297f3f](https://github.com/vuetifyjs/vuetify/commit/d297f3f)), closes [#22375](https://github.com/vuetifyjs/vuetify/issues/22375)\n* **VDataTable:** hover icon should match `initial-sort-order` ([7a1ae83](https://github.com/vuetifyjs/vuetify/commit/7a1ae83))\n* **VDatePicker:** correctly render month when using Luxon adapter ([f98d9db](https://github.com/vuetifyjs/vuetify/commit/f98d9db)), closes [#22388](https://github.com/vuetifyjs/vuetify/issues/22388)\n* **VHotkey:** correct sass variables import order ([216b872](https://github.com/vuetifyjs/vuetify/commit/216b872)), closes [#22372](https://github.com/vuetifyjs/vuetify/issues/22372)\n* **VNumberInput:** avoid error state when using comma separator ([513e153](https://github.com/vuetifyjs/vuetify/commit/513e153)), closes [#22371](https://github.com/vuetifyjs/vuetify/issues/22371)\n* **VSlideGroup:** provide a way to never show arrows ([b76ffd5](https://github.com/vuetifyjs/vuetify/commit/b76ffd5))\n* **VTabs:** consistent padding for `inset` ([893eb71](https://github.com/vuetifyjs/vuetify/commit/893eb71))\n* **VTabs:** keep slider narrow when used without inset ([eb9477c](https://github.com/vuetifyjs/vuetify/commit/eb9477c)), closes [#22363](https://github.com/vuetifyjs/vuetify/issues/22363)\n* **VTextField:** check autofocus intersection on input wrapper element ([0409cde](https://github.com/vuetifyjs/vuetify/commit/0409cde)), closes [#22373](https://github.com/vuetifyjs/vuetify/issues/22373)\n\n**:test_tube: Labs**\n\n* **VStepperVertical:** avoid semi-transparent items with `non-linear` ([99a68e5](https://github.com/vuetifyjs/vuetify/commit/99a68e5)), closes [#22369](https://github.com/vuetifyjs/vuetify/issues/22369)\n\n---\n\n### v3.11.3\n\n**:wrench: Bug Fixes**\n\n* **fields:** clean up aria attributes ([#22418](https://github.com/vuetifyjs/vuetify/issues/22418)) ([054dbf4](https://github.com/vuetifyjs/vuetify/commit/054dbf4))\n* **types:** support strict TS checks in templates ([#22395](https://github.com/vuetifyjs/vuetify/issues/22395)) ([02710a6](https://github.com/vuetifyjs/vuetify/commit/02710a6))\n* **v-ripple:** remove mousedown and keydown listeners on unmount ([278a7e9](https://github.com/vuetifyjs/vuetify/commit/278a7e9))\n* **VAppBar:** prevent navbar pop-up when reaching page bottom ([#22224](https://github.com/vuetifyjs/vuetify/issues/22224)) ([8da1495](https://github.com/vuetifyjs/vuetify/commit/8da1495)), closes [#20352](https://github.com/vuetifyjs/vuetify/issues/20352)\n* **VAutocomplete, VCombobox:** skip subheader for `auto-select-first` ([#22402](https://github.com/vuetifyjs/vuetify/issues/22402)) ([9edd98c](https://github.com/vuetifyjs/vuetify/commit/9edd98c)), closes [#22398](https://github.com/vuetifyjs/vuetify/issues/22398)\n* **VBtn:** keep all styles within CSS layer ([c794da1](https://github.com/vuetifyjs/vuetify/commit/c794da1))\n* **VColorPicker:** render inner outlines in forced-colors mode ([#22317](https://github.com/vuetifyjs/vuetify/issues/22317)) ([c61c0d3](https://github.com/vuetifyjs/vuetify/commit/c61c0d3))\n* **VDataTable:** selecting group should respect selectable prop ([#22410](https://github.com/vuetifyjs/vuetify/issues/22410)) ([e295fa6](https://github.com/vuetifyjs/vuetify/commit/e295fa6)), closes [#22409](https://github.com/vuetifyjs/vuetify/issues/22409)\n* **VDataTable:** typo in header field `intent` » `indent` ([f44b2fd](https://github.com/vuetifyjs/vuetify/commit/f44b2fd))\n* **VDataTableFooter:** correct placement of aria label ([#22359](https://github.com/vuetifyjs/vuetify/issues/22359)) ([137cb95](https://github.com/vuetifyjs/vuetify/commit/137cb95)), closes [#20896](https://github.com/vuetifyjs/vuetify/issues/20896)\n* **VDatePicker:** correct year and month for jalali ([41067af](https://github.com/vuetifyjs/vuetify/commit/41067af)), closes [#22417](https://github.com/vuetifyjs/vuetify/issues/22417)\n* **VDatePicker:** correct next year button disabled condition ([04a4608](https://github.com/vuetifyjs/vuetify/commit/04a4608)), closes [#22408](https://github.com/vuetifyjs/vuetify/issues/22408)\n* **VHotkey:** avoid build errors when customizing VKbd sass variables ([fa1fb4f](https://github.com/vuetifyjs/vuetify/commit/fa1fb4f)), closes [#22372](https://github.com/vuetifyjs/vuetify/issues/22372)\n* **VInput:** prioritize slots over prepend/append icons ([#22406](https://github.com/vuetifyjs/vuetify/issues/22406)) ([2a998ee](https://github.com/vuetifyjs/vuetify/commit/2a998ee)), closes [#22332](https://github.com/vuetifyjs/vuetify/issues/22332)\n* **VNumberInput:** clean up listeners on unmount ([045bbaf](https://github.com/vuetifyjs/vuetify/commit/045bbaf))\n* **VOtpInput:** apply rounded prop to inner fields ([#21499](https://github.com/vuetifyjs/vuetify/issues/21499)) ([f49803a](https://github.com/vuetifyjs/vuetify/commit/f49803a)), closes [#20286](https://github.com/vuetifyjs/vuetify/issues/20286)\n* **VOverlay:** clean up focus trap listeners and data on unmount ([497ae4b](https://github.com/vuetifyjs/vuetify/commit/497ae4b)), closes [#22397](https://github.com/vuetifyjs/vuetify/issues/22397)\n* **VSelect:** don't skip continuing keyboard lookup match ([f1f3c45](https://github.com/vuetifyjs/vuetify/commit/f1f3c45)), closes [#22423](https://github.com/vuetifyjs/vuetify/issues/22423)\n* **VSelects:** no closable chips when `readonly` or `disabled` ([#22368](https://github.com/vuetifyjs/vuetify/issues/22368)) ([21c85eb](https://github.com/vuetifyjs/vuetify/commit/21c85eb)), closes [#22349](https://github.com/vuetifyjs/vuetify/issues/22349)\n* **VSlider:** clean up listeners on unmount ([f2621a3](https://github.com/vuetifyjs/vuetify/commit/f2621a3))\n* **VTextarea:** avoid placeholder obstructing the label ([27e854f](https://github.com/vuetifyjs/vuetify/commit/27e854f)), closes [#22416](https://github.com/vuetifyjs/vuetify/issues/22416)\n* **VTextArea/VSelects:** help screen readers read field labels ([#20339](https://github.com/vuetifyjs/vuetify/issues/20339)) ([04b6725](https://github.com/vuetifyjs/vuetify/commit/04b6725)), closes [#19155](https://github.com/vuetifyjs/vuetify/issues/19155) [#19156](https://github.com/vuetifyjs/vuetify/issues/19156)\n* **VTimePicker:** don't inherit defaults from VTextField ([3ffa749](https://github.com/vuetifyjs/vuetify/commit/3ffa749)), closes [#22407](https://github.com/vuetifyjs/vuetify/issues/22407)\n* **VTimePicker:** clean up listeners on unmount ([60183d7](https://github.com/vuetifyjs/vuetify/commit/60183d7))\n* **VTooltip:** should be dismissable by default ([#22419](https://github.com/vuetifyjs/vuetify/issues/22419)) ([c5ae129](https://github.com/vuetifyjs/vuetify/commit/c5ae129)), closes [#21501](https://github.com/vuetifyjs/vuetify/issues/21501)\n* **VVirtualScroll:** show more than 1 element when min height is 0 ([#22420](https://github.com/vuetifyjs/vuetify/issues/22420)) ([08550fd](https://github.com/vuetifyjs/vuetify/commit/08550fd))\n* **VWindow:** set transition-duration css variable ([4676b6d](https://github.com/vuetifyjs/vuetify/commit/4676b6d))\n\n**:test_tube: Labs**\n\n* **VVideo:** clean up listeners on unmount ([0d37af0](https://github.com/vuetifyjs/vuetify/commit/0d37af0))\n\n---\n\n### v3.11.4\n\n**:wrench: Bug Fixes**\n\n* **fields:** keep `inert` on root element ([8dea3bc](https://github.com/vuetifyjs/vuetify/commit/8dea3bc))\n* **VSelect:** clear on backspace ([#22435](https://github.com/vuetifyjs/vuetify/issues/22435)) ([f90f8ab](https://github.com/vuetifyjs/vuetify/commit/f90f8ab)), closes [#22422](https://github.com/vuetifyjs/vuetify/issues/22422)\n* **VSelects:** restore `appendInnerIcon` rendering ([#22431](https://github.com/vuetifyjs/vuetify/issues/22431)) ([5e9fa29](https://github.com/vuetifyjs/vuetify/commit/5e9fa29)), closes [#22429](https://github.com/vuetifyjs/vuetify/issues/22429)\n* **VSlider:** pass `aria-` attributes to thumb element ([#22444](https://github.com/vuetifyjs/vuetify/issues/22444)) ([83b55f5](https://github.com/vuetifyjs/vuetify/commit/83b55f5)), closes [#22432](https://github.com/vuetifyjs/vuetify/issues/22432)\n\n**:microscope: Code Refactoring**\n\n* **styles:** replace `if()` with `@if` ([5391930](https://github.com/vuetifyjs/vuetify/commit/5391930)), closes [#22421](https://github.com/vuetifyjs/vuetify/issues/22421)\n\n**:test_tube: Labs**\n\n* **VColorInput, VDateInput:** add `picker-props` ([#22437](https://github.com/vuetifyjs/vuetify/issues/22437)) ([ea6d861](https://github.com/vuetifyjs/vuetify/commit/ea6d861)), closes [#22436](https://github.com/vuetifyjs/vuetify/issues/22436)\n* **VDateInput,VMaskInput:** add specific classes ([#22447](https://github.com/vuetifyjs/vuetify/issues/22447)) ([f539630](https://github.com/vuetifyjs/vuetify/commit/f539630)), closes [#22334](https://github.com/vuetifyjs/vuetify/issues/22334)\n* **VDateInput:** make `prepend-icon` unfocusable ([#22445](https://github.com/vuetifyjs/vuetify/issues/22445)) ([c917533](https://github.com/vuetifyjs/vuetify/commit/c917533)), closes [#22333](https://github.com/vuetifyjs/vuetify/issues/22333)\n\n---\n\n### v3.11.5\n\n**:wrench: Bug Fixes**\n\n* **VDataTableVirtual:** show index from virtualized items ([#22324](https://github.com/vuetifyjs/vuetify/issues/22324)) ([29e3f09](https://github.com/vuetifyjs/vuetify/commit/29e3f09)), closes [#19108](https://github.com/vuetifyjs/vuetify/issues/19108)\n* **VList, VTreeview:** item should be selectable when `disabled` changes ([#22464](https://github.com/vuetifyjs/vuetify/issues/22464)) ([d6ca166](https://github.com/vuetifyjs/vuetify/commit/d6ca166)), closes [#22366](https://github.com/vuetifyjs/vuetify/issues/22366)\n* **VNumberInput:** respect `error` prop ([69862ea](https://github.com/vuetifyjs/vuetify/commit/69862ea)), closes [#22451](https://github.com/vuetifyjs/vuetify/issues/22451)\n* **VOtpInput:** hide placeholder on focus ([0852c8c](https://github.com/vuetifyjs/vuetify/commit/0852c8c))\n* **VTreeview:** bypass disabled when loading selection state ([#22465](https://github.com/vuetifyjs/vuetify/issues/22465)) ([70dd313](https://github.com/vuetifyjs/vuetify/commit/70dd313)), closes [#22353](https://github.com/vuetifyjs/vuetify/issues/22353)\n* **VTreeview:** prevent selection of disabled nodes ([0de4599](https://github.com/vuetifyjs/vuetify/commit/0de4599)), closes [#22352](https://github.com/vuetifyjs/vuetify/issues/22352)\n\n**:test_tube: Labs**\n\n* **VDateInput:** keep focus on input when opened with year view ([b58e361](https://github.com/vuetifyjs/vuetify/commit/b58e361)), closes [#22323](https://github.com/vuetifyjs/vuetify/issues/22323)\n* **VDateInput:** hide empty prepend slot ([28fe71e](https://github.com/vuetifyjs/vuetify/commit/28fe71e)), closes [#22456](https://github.com/vuetifyjs/vuetify/issues/22456)\n* **VDateInput:** clickable prepend icon when handler exists ([776a462](https://github.com/vuetifyjs/vuetify/commit/776a462))\n* **VStepperVertical:** restore default opacity of item title ([f30a081](https://github.com/vuetifyjs/vuetify/commit/f30a081)), closes [#22467](https://github.com/vuetifyjs/vuetify/issues/22467)\n\n---\n\n### v3.11.6\n\n**:wrench: Bug Fixes**\n\n* **VCalendar:** wrap unclamped timeToY ([3b4b5e6](https://github.com/vuetifyjs/vuetify/commit/3b4b5e6)), closes [#22413](https://github.com/vuetifyjs/vuetify/issues/22413)\n* **VCalendar:** extend start of event on following day ([4f7cc6a](https://github.com/vuetifyjs/vuetify/commit/4f7cc6a)), closes [#22480](https://github.com/vuetifyjs/vuetify/issues/22480)\n* **VColorPicker:** disable swatches ([#22472](https://github.com/vuetifyjs/vuetify/issues/22472)) ([8dbacad](https://github.com/vuetifyjs/vuetify/commit/8dbacad)), closes [#22471](https://github.com/vuetifyjs/vuetify/issues/22471)\n* **VDatePicker:** accept custom `control-height` ([#22479](https://github.com/vuetifyjs/vuetify/issues/22479)) ([b47a4ce](https://github.com/vuetifyjs/vuetify/commit/b47a4ce)), closes [#22478](https://github.com/vuetifyjs/vuetify/issues/22478)\n\n---\n\n### v4.0.0-alpha.0\n\n**:rocket: Features**\n\n* **display:** reduce default breakpoint sizes ([#19759](https://github.com/vuetifyjs/vuetify/issues/19759)) ([853ce33](https://github.com/vuetifyjs/vuetify/commit/853ce33))\n* **nested:** add branch select strategy ([4fcb72c](https://github.com/vuetifyjs/vuetify/commit/4fcb72c)), closes [#22404](https://github.com/vuetifyjs/vuetify/issues/22404)\n* **styles:** always use css layers ([f7123c6](https://github.com/vuetifyjs/vuetify/commit/f7123c6)), closes [#3400](https://github.com/vuetifyjs/vuetify/issues/3400) [#20232](https://github.com/vuetifyjs/vuetify/issues/20232)\n* **styles:** flatten layer names ([#22460](https://github.com/vuetifyjs/vuetify/issues/22460)) ([47bc400](https://github.com/vuetifyjs/vuetify/commit/47bc400)), closes [#22443](https://github.com/vuetifyjs/vuetify/issues/22443)\n* **styles:** possibility to opt-out from misc styles ([#22405](https://github.com/vuetifyjs/vuetify/issues/22405)) ([77d02f3](https://github.com/vuetifyjs/vuetify/commit/77d02f3))\n* **styles:** add separate entry points ([#22396](https://github.com/vuetifyjs/vuetify/issues/22396)) ([f00902c](https://github.com/vuetifyjs/vuetify/commit/f00902c)), closes [#20100](https://github.com/vuetifyjs/vuetify/issues/20100)\n* **styles:** cut down CSS reset ([#20960](https://github.com/vuetifyjs/vuetify/issues/20960)) ([ae3e8c9](https://github.com/vuetifyjs/vuetify/commit/ae3e8c9)), closes [#17633](https://github.com/vuetifyjs/vuetify/issues/17633)\n* **styles:** remove overflow-y from reset ([27868d5](https://github.com/vuetifyjs/vuetify/commit/27868d5)), closes [#1197](https://github.com/vuetifyjs/vuetify/issues/1197)\n* **theme:** change default theme to 'system' ([9c8506c](https://github.com/vuetifyjs/vuetify/commit/9c8506c))\n* **theme:** support transparent colors ([bb49662](https://github.com/vuetifyjs/vuetify/commit/bb49662)), closes [#10299](https://github.com/vuetifyjs/vuetify/issues/10299)\n* **theme:** remove unimportant option ([e8845ff](https://github.com/vuetifyjs/vuetify/commit/e8845ff))\n* **VDataIterator:** add `items-length` prop ([#22360](https://github.com/vuetifyjs/vuetify/issues/22360)) ([290836c](https://github.com/vuetifyjs/vuetify/commit/290836c)), closes [#19486](https://github.com/vuetifyjs/vuetify/issues/19486)\n* **VDatePicker:** only emit start and end range values ([#20621](https://github.com/vuetifyjs/vuetify/issues/20621)) ([eef80ad](https://github.com/vuetifyjs/vuetify/commit/eef80ad)), closes [#9098](https://github.com/vuetifyjs/vuetify/issues/9098) [#18701](https://github.com/vuetifyjs/vuetify/issues/18701) [#20599](https://github.com/vuetifyjs/vuetify/issues/20599)\n* **VForm:** unref values in slot props ([f92ae7a](https://github.com/vuetifyjs/vuetify/commit/f92ae7a)), closes [#18355](https://github.com/vuetifyjs/vuetify/issues/18355)\n* **VImg:** pass attributes to the underlying `` ([#22439](https://github.com/vuetifyjs/vuetify/issues/22439)) ([71e01aa](https://github.com/vuetifyjs/vuetify/commit/71e01aa)), closes [#18860](https://github.com/vuetifyjs/vuetify/issues/18860) [#18907](https://github.com/vuetifyjs/vuetify/issues/18907)\n* **VInput:** add `indent-details` prop ([#21265](https://github.com/vuetifyjs/vuetify/issues/21265)) ([f483092](https://github.com/vuetifyjs/vuetify/commit/f483092)), closes [#16679](https://github.com/vuetifyjs/vuetify/issues/16679)\n* **VList:** add `navigation-strategy` to control focused item ([#22328](https://github.com/vuetifyjs/vuetify/issues/22328)) ([3815eee](https://github.com/vuetifyjs/vuetify/commit/3815eee))\n* **VListItem:** expose `isDisabled` in slot props ([9d92638](https://github.com/vuetifyjs/vuetify/commit/9d92638))\n* **VNumberInput:** do not clamp value on mounted ([#21826](https://github.com/vuetifyjs/vuetify/issues/21826)) ([4b4bfa5](https://github.com/vuetifyjs/vuetify/commit/4b4bfa5))\n* **VOtpInput:** add `density` prop ([#22401](https://github.com/vuetifyjs/vuetify/issues/22401)) ([aca7d30](https://github.com/vuetifyjs/vuetify/commit/aca7d30))\n* **VSelect/Autocomplete/Combobox:** rename item to internalItem ([2c1ac25](https://github.com/vuetifyjs/vuetify/commit/2c1ac25)), closes [#18354](https://github.com/vuetifyjs/vuetify/issues/18354)\n* **VSnackbar:** remove `multi-line` prop ([#22212](https://github.com/vuetifyjs/vuetify/issues/22212)) ([1371aba](https://github.com/vuetifyjs/vuetify/commit/1371aba)), closes [#15996](https://github.com/vuetifyjs/vuetify/issues/15996)\n* **VWindow:** add support for keyboard controls ([#22430](https://github.com/vuetifyjs/vuetify/issues/22430)) ([ab5b671](https://github.com/vuetifyjs/vuetify/commit/ab5b671)), closes [#11544](https://github.com/vuetifyjs/vuetify/issues/11544)\n\n**:wrench: Bug Fixes**\n\n* **styles:** skip VRow/VCol styles when using only VContainer or VSpacer ([f899803](https://github.com/vuetifyjs/vuetify/commit/f899803))\n* **theme:** re-merge default variables when themes is set ([a14c763](https://github.com/vuetifyjs/vuetify/commit/a14c763))\n* **theme:** helpers should override theme base ([2690877](https://github.com/vuetifyjs/vuetify/commit/2690877))\n* **theme:** override automatic text color with classes ([#22475](https://github.com/vuetifyjs/vuetify/issues/22475)) ([59b11d5](https://github.com/vuetifyjs/vuetify/commit/59b11d5))\n* **theme:** .text- classes always override color from .bg- ([7edf33a](https://github.com/vuetifyjs/vuetify/commit/7edf33a)), closes [#21787](https://github.com/vuetifyjs/vuetify/issues/21787)\n* **VContainer:** drop dependency on utility class ([47ca5c8](https://github.com/vuetifyjs/vuetify/commit/47ca5c8))\n* **VCounter:** inherit color (aligns with VMessages) ([#22424](https://github.com/vuetifyjs/vuetify/issues/22424)) ([ecd07b9](https://github.com/vuetifyjs/vuetify/commit/ecd07b9))\n* **VField:** append/prepend should fill height ([add5d2d](https://github.com/vuetifyjs/vuetify/commit/add5d2d))\n* **VOverlay:** apply scrollbar offset to body and VNavigationDrawer ([ec926d7](https://github.com/vuetifyjs/vuetify/commit/ec926d7))\n\n**:microscope: Code Refactoring**\n\n* **styles:** replace !important with layers ([7484c81](https://github.com/vuetifyjs/vuetify/commit/7484c81))\n* **VBtn:** remove default text transform ([#21079](https://github.com/vuetifyjs/vuetify/issues/21079)) ([712bdd6](https://github.com/vuetifyjs/vuetify/commit/712bdd6))\n* **VBtn:** convert display from grid to flex ([41b7768](https://github.com/vuetifyjs/vuetify/commit/41b7768))\n* **VField:** convert display from grid to flex ([#21035](https://github.com/vuetifyjs/vuetify/issues/21035)) ([b213e3b](https://github.com/vuetifyjs/vuetify/commit/b213e3b))\n\n
\n\n## What's Next{ #whats-next .mt-4 }\n\nJanuary kicks off with continued development on Vuetify 4, incorporating feedback from the alpha release. We're targeting additional alpha releases throughout Q1 2026 as we refine the CSS layers architecture and modernize remaining components.\n\nThe v3.11.x branch will continue receiving maintenance releases with bug fixes and minor improvements. VCommandPalette is nearing [labs](/labs/introduction/) release, and we're expanding [v0](https://0.vuetifyjs.com/) with additional headless primitives for forms and data display.\n\nThe [CLI](https://github.com/vuetifyjs/cli) will gain additional commands for component generation and project management, while the [MCP server](https://github.com/vuetifyjs/mcp) continues to evolve with new tools for AI-assisted development.\n\nThank you for being part of the Vuetify community. Here's to an incredible 2026!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/february-2026-update.md":"---\nlayout: blog\nmeta:\n title: February 2026 Update\n description: February ships stable Vuetify 4.0.0 — CSS layers, MD3, and unstyled foundations — plus CLI v1.0.0, VAvatarGroup, and new Vuetify0 composables.\n keywords: Vuetify February 2026, Vuetify 4.0.0 Revisionist, v4 stable, VAvatarGroup, CLI v1.0.0, Vuetify0, createDataTable\n---\n\n\n\n# February 2026 Update\n\n**Vuetify 4 is here.** After four beta releases and months of community testing, **v4.0.0 (Revisionist)** shipped on February 23rd—bringing CSS layers, MD3 typography and elevation, and the architectural foundation for unstyled components. The **Vuetify CLI** also reached its **v1.0.0** milestone, and Vuetify0 continues building its headless composable layer with createDataTable, createNested, and Breadcrumbs.\n\n![Hero image for February update](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/february-hero.png \"February hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 March 9th, 2026\n\n\n\n---\n\n## The big one\n\nThis is the release we've been building toward since the [2024 State of the Union](https://vuetifyjs.com/blog/state-of-the-union-2024/). **390 commits** across 15 active repositories, **68 merged PRs**, and 21 releases across the ecosystem—all driven by a month laser-focused on getting v4 stable. [J-Sek](https://github.com/J-Sek) delivered another prolific month with 20+ merged framework PRs including VAvatarGroup and new transitions, while [Andrei Elkin](https://github.com/AndreyYolkin) drove the [CLI](https://github.com/vuetifyjs/cli) to its first stable release with the Tailwind preset and project scaffolding presets.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Vuetify 4.0.0 Stable](#vuetify-400-stable)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Ecosystem Spotlight: Vuetify CLI v1.0.0](#ecosystem-spotlight-vuetify-cli-v100)\n* [Vuetify MCP: V4 Migration & Developer Tools](#vuetify-mcp-v4-migration-developer-tools)\n* [Product Updates](#product-updates)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [February 2026 Changelog](#february-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nFebruary was Vuetify's biggest release month ever. Four v4 betas culminated in the **stable v4.0.0 (Revisionist) release**, while v3.11.9, v3.12.0, and v3.12.1 maintained the v3 line. The CLI shipped nine releases reaching v1.0.0, Vuetify0 released v0.1.3, and the UnoCSS preset hit v0.2.0.\n\n![February Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/releases.png \"February Releases Banner\")\n\n### Key Improvements\n\n* **[Vuetify 4.0.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0)** stable release with CSS layers, MD3 design system, and unstyled foundations\n* **[VAvatarGroup](https://vuetifyjs.com/components/avatar-groups/)** new component for stacked avatar displays\n* **[VSelect/VAutocomplete/VCombobox](https://vuetifyjs.com/components/selects/)** `menu-header` and `menu-footer` slots\n* **[VSnackbarQueue](https://vuetifyjs.com/components/snackbar-queue/)** show multiple snackbars simultaneously\n* **[v-expand-both-transition](https://vuetifyjs.com/styles/transitions/)** new bidirectional expand transition\n* **[mdi-unocss](https://vuetifyjs.com/features/icon-fonts/)** icon set for UnoCSS integration\n\nView the complete list of changes in the [Full Changelog](#february-2026-changelog).\n\n**Details:**\n\n* [v4.0.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0)\n* [v3.12.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.0)\n* [v3.12.1](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.1)\n* [v3.11.9](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.9)\n\n---\n\n## Vuetify 4.0.0 Stable { #vuetify-400-stable }\n\nThe stable release of **Vuetify 4.0.0 (Revisionist)** landed on February 23rd after four beta releases (beta.0 through beta.3). This is a pivotal release for the Vuetify ecosystem—not just for the features it ships, but for the architecture it establishes.\n\n\n![Vuetify 4 Launch](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/v4-launch.png \"Vuetify 4.0.0 Stable Release\")\n\n### What's in v4\n\n* **CSS Layers** — Vuetify's styles are now organized in CSS `@layer` blocks, making it trivial to override styles and coexist with utility frameworks like TailwindCSS and UnoCSS\n* **MD3 Typography & Elevation** — Full Material Design 3 type scale and shadow system\n* **Grid System Overhaul** — Modernized responsive grid with improved flexbox, RTL support, and cleaner CSS output\n* **Unstyled Foundations** — The internal architecture that makes true unstyled components possible in future releases\n\n### Migration\n\nThe upgrade path from v3 to v4 is intentionally minimal. The [upgrade guide](https://vuetifyjs.com/getting-started/upgrade-guide/) covers the handful of breaking changes, and the [Vuetify MCP server](#vuetify-mcp-v4-migration-developer-tools) provides AI-assisted migration tooling.\n\nEvery breaking change in v4 can be reverted with a drop-in snippet — upgrade now, migrate visuals at your own pace:\n\n* **[Grid System](https://vuetifyjs.com/getting-started/grid-legacy-mode/)** — CSS snippet restores v3 negative-margin grid behavior using `@layer vuetify-overrides`\n* **[Typography](https://vuetifyjs.com/getting-started/typography-migration/)** — Sass config restores full MD2 type scale with component-specific variable mappings\n* **[Elevation](https://vuetifyjs.com/getting-started/elevation-migration/)** — CSS file restores all 25 MD2 elevation levels (v4 ships MD3's 6-level system)\n* **[CSS Reset](https://vuetifyjs.com/getting-started/upgrade-guide/)** — Minimal or full reset snippets using `@layer vuetify-core.reset`\n* **[Breakpoints](https://vuetifyjs.com/getting-started/upgrade-guide/)** — JS or Sass config to restore v3 thresholds (960/1280/1920/2560)\n* **[Button text-transform](https://vuetifyjs.com/getting-started/upgrade-guide/)** — Sass variable, global default, or utility class to restore uppercase\n\nThe [vuetify-codemods](https://www.npmjs.com/package/vuetify-codemods) package automates class and attribute renames.\n\n::: tip\n\nUse the Vuetify MCP server to analyze your project: *\"Scan my project for Vuetify 3 patterns that need updating for v4.\"*\n\n:::\n\nAcross the ecosystem, v4 adoption started immediately—[Vuetify One](https://one.vuetifyjs.com/) upgraded to v4 the same week, and the CLI updated all project templates.\n\n**Details:**\n\n* [v4.0.0 Release Notes](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0)\n* [Upgrade Guide](https://vuetifyjs.com/getting-started/upgrade-guide/)\n* [Vuetify 3 Documentation](https://v3.vuetifyjs.com/)\n* [Building with Vite and TailwindCSS](https://vuetifyjs.com/blog/building-with-vite-and-tailwindcss/)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nFebruary's 39 merged PRs delivered new components, significant feature additions, and targeted bug fixes across both the v3 and v4 branches.\n\n### New Features\n\n**[VAvatarGroup](https://vuetifyjs.com/components/avatar-groups/)**\n\nA new component for displaying stacked avatar collections with overlap, max count, and a \"+N\" indicator for overflow. Pairs with the new `badge` prop on VAvatar for status indicators.\n\n\n![VAvatarGroup](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/avatar-group.png \"VAvatarGroup Component\")\n\n**[VSnackbarQueue](https://vuetifyjs.com/components/snackbar-queue/)** — Show multiple snackbars simultaneously instead of replacing one at a time ([#22605](https://github.com/vuetifyjs/vuetify/pull/22605))\n\n**[VToolbar](https://vuetifyjs.com/components/toolbars/)** — New `location` prop for bottom-positioned toolbars ([#22608](https://github.com/vuetifyjs/vuetify/pull/22608))\n\n**[VImg](https://vuetifyjs.com/components/images/)** — `image-class` prop for styling the inner `` element, plus `width=\"fit-content\"` support ([#22622](https://github.com/vuetifyjs/vuetify/pull/22622), [#21414](https://github.com/vuetifyjs/vuetify/pull/21414))\n\n**[VDataTable](https://vuetifyjs.com/components/data-tables/)** — `page-by` prop for page size control ([#22580](https://github.com/vuetifyjs/vuetify/pull/22580))\n\n**[VSelect/VAutocomplete/VCombobox](https://vuetifyjs.com/components/selects/)** — `menu-header` and `menu-footer` slots for custom dropdown content ([#22414](https://github.com/vuetifyjs/vuetify/pull/22414))\n\n**[VSlider](https://vuetifyjs.com/components/sliders/)** — Show thumb value on hover ([#22412](https://github.com/vuetifyjs/vuetify/pull/22412))\n\n**[VOtpInput](https://vuetifyjs.com/components/otp-input/)** — `masked` prop to hide or show entered text ([#20950](https://github.com/vuetifyjs/vuetify/pull/20950))\n\n**[VProgressCircular](https://vuetifyjs.com/components/progress-circular/)** — `reveal` prop for animated entry ([#22502](https://github.com/vuetifyjs/vuetify/pull/22502))\n\n**[VRow](https://vuetifyjs.com/api/v-row/)** — Smaller density steps for finer layout control ([#22574](https://github.com/vuetifyjs/vuetify/pull/22574))\n\n**v-expand-both-transition** — New transition that expands in both width and height ([#22570](https://github.com/vuetifyjs/vuetify/pull/22570))\n\n**color utilities** — Strip `text-*` and `bg-*` prefixes for dynamic utility class support ([#17569](https://github.com/vuetifyjs/vuetify/pull/17569))\n\n**mdi-unocss icon set** — Native UnoCSS icon support ([#22117](https://github.com/vuetifyjs/vuetify/pull/22117))\n\n**Details:**\n\n* [VAvatarGroup PR#22495](https://github.com/vuetifyjs/vuetify/pull/22495)\n* [VAvatar badge PR#22496](https://github.com/vuetifyjs/vuetify/pull/22496)\n* [VSnackbarQueue PR#22605](https://github.com/vuetifyjs/vuetify/pull/22605)\n* [VToolbar location PR#22608](https://github.com/vuetifyjs/vuetify/pull/22608)\n* [VImg image-class PR#22622](https://github.com/vuetifyjs/vuetify/pull/22622)\n\n### Bug Fixes\n\n**VSnackbar** — Opaque background for transparent variants ([#22646](https://github.com/vuetifyjs/vuetify/pull/22646))\n\n**VTab** — Correct text colors with `inset` without `slider-color` ([#22614](https://github.com/vuetifyjs/vuetify/pull/22614))\n\n**VDateInput** — Prevent page scroll when opening years view ([#22613](https://github.com/vuetifyjs/vuetify/pull/22613))\n\n**VTimePicker** — Enforce allowed values and range in inputs ([#22578](https://github.com/vuetifyjs/vuetify/pull/22578))\n\n**VColorPicker** — Avoid undefined alpha in RGB/HSL output ([#22582](https://github.com/vuetifyjs/vuetify/pull/22582))\n\n**VSelect** — Fix screenreader navigation to select options ([#22602](https://github.com/vuetifyjs/vuetify/pull/22602))\n\n**VTreeview** — Indent lines with `prepend-gap`, correct ARIA roles and attributes ([#22589](https://github.com/vuetifyjs/vuetify/pull/22589), [#22577](https://github.com/vuetifyjs/vuetify/pull/22577))\n\n**VCard** — Accept height when used within a dialog ([#22594](https://github.com/vuetifyjs/vuetify/pull/22594))\n\n**VDataTable** — Sort icon persists after removing sort ([#22595](https://github.com/vuetifyjs/vuetify/pull/22595))\n\n**router** — Ensure reactivity for `to` attribute in useLink ([#20994](https://github.com/vuetifyjs/vuetify/pull/20994))\n\n**styles** — Utilities override responsive typography correctly ([#22573](https://github.com/vuetifyjs/vuetify/pull/22573))\n\n**Details:**\n\n* [VSelect a11y PR#22602](https://github.com/vuetifyjs/vuetify/pull/22602)\n* [VTreeview ARIA PR#22577](https://github.com/vuetifyjs/vuetify/pull/22577)\n* [VTreeview indent PR#22589](https://github.com/vuetifyjs/vuetify/pull/22589)\n\n### In Development\n\nSeveral features opened in February are expected in upcoming releases:\n\n#### VMorphingIcon\n\nA new component for animated icon transitions—morphing between two icons using SVG path animation for polished state changes.\n\n#### Theme Page Transitions\n\nOptional built-in page transitions that leverage the View Transitions API, bringing smooth animated route changes without custom code.\n\n#### Hover Elevation\n\nA new `hover-elevation` prop and CSS utilities for elevation changes on hover—a common Material Design pattern now built in.\n\n**Details:**\n\n* [VMorphingIcon PR#22639](https://github.com/vuetifyjs/vuetify/pull/22639)\n* [Theme transitions PR#22623](https://github.com/vuetifyjs/vuetify/pull/22623)\n* [Hover elevation PR#22621](https://github.com/vuetifyjs/vuetify/pull/22621)\n\n---\n\n## Ecosystem Spotlight: Vuetify CLI v1.0.0 { #ecosystem-spotlight-vuetify-cli-v100 }\n\n\n\n
\n\nThe Vuetify CLI reached its **first stable release** on February 23rd—shipping alongside Vuetify 4. With **42 commits** and 9 releases (v0.0.14 through v1.0.3), [Andrei Elkin](https://github.com/AndreyYolkin) transformed the CLI from an early beta into a production-ready tool.\n\n### What's New in v1.0.0\n\n**Project Presets** — Create projects with predefined configurations. The first preset is **TailwindCSS**—scaffolding a complete Vuetify 4 + Tailwind project with CSS layers configured correctly out of the box.\n\n**Vuetify 4 Templates** — All project templates updated for v4, with version selection removed now that v4 is stable.\n\n**i18n Support** — CLI prompts now support fallback locales for internationalized project scaffolding.\n\n### Getting Started\n\n::: tabs\n\n```bash [pnpm]\npnpm add -g @vuetify/cli\n```\n\n```bash [npm]\nnpm install -g @vuetify/cli\n```\n\n```bash [yarn]\nyarn global add @vuetify/cli\n```\n\n```bash [bun]\nbun add -g @vuetify/cli\n```\n\n:::\n\n**Details:**\n\n* [Vuetify CLI GitHub Repository](https://github.com/vuetifyjs/cli)\n* [v1.0.0 Release](https://github.com/vuetifyjs/cli/releases/tag/v1.0.0)\n\n---\n\n## Vuetify MCP: V4 Migration & Developer Tools { #vuetify-mcp-v4-migration-developer-tools }\n\n\n\n
\n\nThe MCP server received 9 commits in February, adding new developer tooling and improving v0 integration.\n\n### What's New\n\n**V4 Migration Tools** — Two tools launched alongside the v4 beta cycle provide AI-assisted upgrade guidance:\n\n* **`get_upgrade_guide`** — Fetches the full v3 → v4 upgrade guide with step-by-step migration instructions and revert snippets\n* **`get_v4_breaking_changes`** — Returns detailed migration guidance for all 13 categories of breaking changes (styles, grid, typography, elevation, theme, display, v-btn, v-snackbar, v-select, v-date-picker, v-form, v-img, nested), with optional category filtering\n\n**`create_bug_report` Tool** — Generate a pre-filled link to the Vuetify issue tracker with the correct repository and label pre-selected.\n\n**`get_vuetify0_skill` Tool** — Provides AI assistants with v0 composable documentation and usage patterns, enabling better code generation for headless components.\n\n**v0 Fixes** — Corrected composable names and missing exports in the v0 documentation, and fixed GitHub URL branch references.\n\n**CLI Integration** — [Andrei Elkin](https://github.com/AndreyYolkin) opened a PR for detecting running IDE instances and supporting multi-selection during MCP setup.\n\n### Setup\n\nInstall with the Vuetify CLI:\n\n::: tabs\n\n```bash [pnpm]\npnpm dlx @vuetify/cli add mcp\n```\n\n```bash [npm]\nnpx @vuetify/cli add mcp\n```\n\n```bash [yarn]\nyarn dlx @vuetify/cli add mcp\n```\n\n```bash [bun]\nbunx @vuetify/cli add mcp\n```\n\n:::\n\nOr configure manually:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [create_bug_report commit](https://github.com/vuetifyjs/mcp/commit/47d4dafc4fc6fb13dad705d32f802beec92ffefd)\n* [get_vuetify0_skill commit](https://github.com/vuetifyjs/mcp/commit/d58a7abbcdb73a087e982ce8a8d3d27331064e52)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\nVuetify One completed a **monorepo conversion**, extracting `@vuetify/auth` as a standalone package with 7 iterative releases (v0.1.1 through v0.1.8). The app upgraded to **Vuetify 4** on release day, and a new [v3.vuetifyjs.com](https://v3.vuetifyjs.com/) site identifier was added for versioned documentation hosting.\n\n**Details:**\n\n* [Vuetify One](https://one.vuetifyjs.com/)\n* [v3.0.2 Release](https://github.com/vuetifyjs/one/releases/tag/v3.0.2)\n* [@vuetify/auth@0.1.8](https://github.com/vuetifyjs/one/releases/tag/%40vuetify/auth%400.1.8)\n\n### Vuetify Bin\n\n[Henry Aviles](https://github.com/Haviles04) shipped the **team dashboard** feature across 5 merged PRs—enabling team bin management, role-based permissions, and team switching.\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n\n### Vuetify Snips\n\n[Kael](https://github.com/KaelWD) set up **visual regression testing** for Snips, and [J-Sek](https://github.com/J-Sek) fixed import and TypeScript issues for Vuetify Play compatibility.\n\n### UnoCSS Preset\n\nThe [unocss-preset-vuetify](https://github.com/vuetifyjs/unocss-preset-vuetify) reached **v0.2.0** with theme variants, built-in MD2/MD3 elevation presets, and separated base typography layers.\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\n
\n\nFebruary was Vuetify0's highest-commit month with **152 commits** and **10 merged PRs**, releasing **v0.1.3**. The focus shifted toward data-heavy composables and overlay management, building the foundation for reconstructing Vuetify's internals on v0's headless layer.\n\n\n![Vuetify0 Progress](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/v0.png \"Vuetify0 February Progress\")\n\n### New Composables & Components\n\n* **[createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table/)** — Headless data table composable with sorting, filtering, pagination, and selection built in. The foundation for Vuetify's VDataTable refactor.\n\n* **[createNested](https://0.vuetifyjs.com/composables/selection/create-nested/)** — Gained active state management for hierarchical tree structures, enabling treeview, file browser, and nested navigation patterns with `activate()`, `deactivate()`, and `activeIds` tracking.\n\n* **[useStack](https://0.vuetifyjs.com/composables/plugins/use-stack/)** — Overlay z-index management plugin for coordinating dialogs, menus, and drawers. Ensures correct stacking order without manual z-index management.\n\n* **[Breadcrumbs](https://0.vuetifyjs.com/components/navigation/breadcrumbs/)** — Composable and component for accessible breadcrumb navigation with automatic ARIA attributes.\n\n### useDate Fixes\n\n[J-Sek](https://github.com/J-Sek) landed two important fixes—symmetrical date diffs and a corrected `getWeek` implementation ported from Vuetify core.\n\n### Coming Next\n\nDevelopment is accelerating with several new components and composables in active PRs:\n\n* **[Treeview](https://github.com/vuetifyjs/0/pull/144)** — Full tree component built on createNested\n* **[Slider](https://github.com/vuetifyjs/0/pull/143)** — New component and composable\n* **[Splitter](https://github.com/vuetifyjs/0/pull/145)** — Root, Panel, and Handle components for resizable pane layouts\n* **[useNotifications](https://github.com/vuetifyjs/0/pull/146)** — Notification lifecycle management with adapters\n* **[createModel](https://github.com/vuetifyjs/0/pull/148)** — Selection state layer between registry and selection\n* **[createRegistry](https://github.com/vuetifyjs/0/pull/149)** — `move()` method for reordering registered items\n* **[useRules](https://github.com/vuetifyjs/0/pull/140)** — Validation composable with Zod and Yup adapters\n\nThe [interactive playground](https://0.vuetifyjs.com/playground) is now live for experimenting with v0 composables.\n\n::: info\n\nWith v4 stable, the Vuetify → Vuetify0 refactor has begun. Core Vuetify components are being rebuilt on top of v0's headless composable layer—the path to Vuetify 5.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [createDataTable PR#138](https://github.com/vuetifyjs/0/pull/138)\n* [createNested PR#137](https://github.com/vuetifyjs/0/pull/137)\n* [Breadcrumbs PR#136](https://github.com/vuetifyjs/0/pull/136)\n* [createStack PR#129](https://github.com/vuetifyjs/0/pull/129)\n* [v0.1.3 Release Notes](https://github.com/vuetifyjs/0/releases/tag/v0.1.3)\n\n---\n\n## February 2026 Changelog\n\nThe following section provides an overview of the changes made in February 2026, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* New components: VAvatarGroup, v-expand-both-transition\n* Select components: menu-header/footer slots, screenreader fixes\n* VDataTable: page-by prop, sort icon persistence fix\n* VTreeview: ARIA roles, indent line improvements\n* Multiple VTimePicker, VDateInput, and VColorPicker fixes\n* Dynamic color utility class support\n\n**Expand** this section to see the detailed changelog for February 2026:\n\n
\nFebruary 2026 Full Changelog\n\n### v3.11.9\n\n**:wrench: Bug Fixes**\n\n* **VSnackbar:** opaque background for transparent variants ([#22646](https://github.com/vuetifyjs/vuetify/issues/22646)) ([Timur000101](https://github.com/Timur000101))\n* **VTab:** correct text colors when using inset without slider-color ([#22614](https://github.com/vuetifyjs/vuetify/issues/22614)) ([J-Sek](https://github.com/J-Sek))\n* **VDateInput:** don't scroll the page when opening years view ([#22613](https://github.com/vuetifyjs/vuetify/issues/22613)) ([Tzahile](https://github.com/Tzahile))\n* **VTimePicker:** enforce allowed values and range in inputs ([#22578](https://github.com/vuetifyjs/vuetify/issues/22578)) ([J-Sek](https://github.com/J-Sek))\n* **VColorPicker:** avoid undefined alpha in rgb/hsl output ([#22582](https://github.com/vuetifyjs/vuetify/issues/22582)) ([TheSanjBot](https://github.com/TheSanjBot))\n* **VTable:** apply $table-header-font-size to th elements ([#22598](https://github.com/vuetifyjs/vuetify/issues/22598)) ([nemanjamalesija](https://github.com/nemanjamalesija))\n* **VDataTable:** sort icon persists after removing sort via click ([#22595](https://github.com/vuetifyjs/vuetify/issues/22595)) ([nemanjamalesija](https://github.com/nemanjamalesija))\n* **VCard:** accept height when used within a dialog ([#22594](https://github.com/vuetifyjs/vuetify/issues/22594)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect:** pass listProps density to VCheckboxBtn in multiple ([#22512](https://github.com/vuetifyjs/vuetify/issues/22512)) ([johnleider](https://github.com/johnleider))\n* **VField:** fixed incorrect type define ([#22618](https://github.com/vuetifyjs/vuetify/issues/22618)) ([ZacharyBear](https://github.com/ZacharyBear))\n* **styles:** utilities should override responsive typography ([#22573](https://github.com/vuetifyjs/vuetify/issues/22573)) ([J-Sek](https://github.com/J-Sek))\n* **router:** ensure reactivity for 'to' attribute in useLink ([#20994](https://github.com/vuetifyjs/vuetify/issues/20994)) ([rbgmulmb](https://github.com/rbgmulmb))\n\n---\n\n### v3.12.0\n\n**:rocket: Features**\n\n* **VAvatarGroup:** add new component ([#22495](https://github.com/vuetifyjs/vuetify/issues/22495)) ([J-Sek](https://github.com/J-Sek))\n* **VAvatar:** add badge prop + dot-size for VBadge ([#22496](https://github.com/vuetifyjs/vuetify/issues/22496)) ([J-Sek](https://github.com/J-Sek))\n* **VSnackbarQueue:** show multiple snackbars ([#22605](https://github.com/vuetifyjs/vuetify/issues/22605)) ([J-Sek](https://github.com/J-Sek))\n* **VToolbar:** add location prop ([#22608](https://github.com/vuetifyjs/vuetify/issues/22608)) ([J-Sek](https://github.com/J-Sek))\n* **VImg:** add image-class prop ([#22622](https://github.com/vuetifyjs/vuetify/issues/22622)) ([J-Sek](https://github.com/J-Sek))\n* **VImg:** support width=\"fit-content\" ([#21414](https://github.com/vuetifyjs/vuetify/issues/21414)) ([eesayas](https://github.com/eesayas))\n* **VDataTable:** add page-by prop ([#22580](https://github.com/vuetifyjs/vuetify/issues/22580)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect/VAutocomplete/VCombobox:** add menu-header and menu-footer slots ([#22414](https://github.com/vuetifyjs/vuetify/issues/22414)) ([Haviles04](https://github.com/Haviles04))\n* **VSlider:** show thumb slider value on hover ([#22412](https://github.com/vuetifyjs/vuetify/issues/22412)) ([brandonpham13](https://github.com/brandonpham13))\n* **VOtpInput:** add masked prop ([#20950](https://github.com/vuetifyjs/vuetify/issues/20950)) ([ankusharoraa](https://github.com/ankusharoraa))\n* **VProgressCircular:** add reveal prop ([#22502](https://github.com/vuetifyjs/vuetify/issues/22502)) ([J-Sek](https://github.com/J-Sek))\n* **VRow:** smaller density steps ([#22574](https://github.com/vuetifyjs/vuetify/issues/22574)) ([J-Sek](https://github.com/J-Sek))\n* **VCol:** syntax for overriding row size ([#22572](https://github.com/vuetifyjs/vuetify/issues/22572)) ([J-Sek](https://github.com/J-Sek))\n* **transitions:** add v-expand-both-transition ([#22570](https://github.com/vuetifyjs/vuetify/issues/22570)) ([J-Sek](https://github.com/J-Sek))\n* **color:** strip text-*/bg-* for dynamic utility classes ([#17569](https://github.com/vuetifyjs/vuetify/issues/17569)) ([cgodo](https://github.com/cgodo))\n* **icon-set:** add mdi-unocss icon set ([#22117](https://github.com/vuetifyjs/vuetify/issues/22117)) ([userquin](https://github.com/userquin))\n* **VProgressLinear:** split buffer and indeterminate ([#22663](https://github.com/vuetifyjs/vuetify/issues/22663)) ([J-Sek](https://github.com/J-Sek))\n\n**:wrench: Bug Fixes**\n\n* **VSelect:** fix screenreader navigation to select options ([#22602](https://github.com/vuetifyjs/vuetify/issues/22602)) ([ikushum](https://github.com/ikushum))\n* **VTreeview:** indent lines with prepend-gap ([#22589](https://github.com/vuetifyjs/vuetify/issues/22589)) ([J-Sek](https://github.com/J-Sek))\n* **VTreeview:** add correct roles and aria attributes ([#22577](https://github.com/vuetifyjs/vuetify/issues/22577)) ([mjung2605](https://github.com/mjung2605))\n\n---\n\n### v3.12.1\n\n**:wrench: Bug Fixes**\n\n* **docs:** add overflow-hidden to FAQ expansion panels ([#22660](https://github.com/vuetifyjs/vuetify/issues/22660)) ([Haviles04](https://github.com/Haviles04))\n\n---\n\n### v4.0.0\n\n**:rocket: Features**\n\n* All features from v3.12.0 included in the v4 stable release\n* **CSS Layers:** styles organized in `@layer` blocks for clean utility framework coexistence\n* **MD3 Typography:** Material Design 3 type scale from v4.0.0-beta.0\n* **MD3 Elevation:** updated elevation levels matching MD3 specifications from v4.0.0-beta.0\n* **Grid System Overhaul:** modernized responsive grid from v4.0.0-beta.0\n\n
\n\n---\n\n## What's Next{ #whats-next .mt-4 }\n\nWith v4 stable, the focus shifts to two fronts. First, **v4.1** will land the features currently in development—VMorphingIcon, theme page transitions, and hover elevation. VFileUpload's VInput integration and VCommandPalette's `closeOnSelect` and `before-select` events have already landed, along with Nuxt and UnoCSS presets for the CLI.\n\nSecond, the **Vuetify → Vuetify0 refactor** is now [underway](https://github.com/vuetifyjs/vuetify/pull/22672). Core Vuetify components are being rebuilt on v0's headless composable layer—starting with data table, tree, and form primitives. This is the path to **Vuetify 5**, where the full component library and the headless meta-framework share one unified architecture.\n\nVuetify is and always will be free and open source. If your team relies on the framework, consider supporting continued development through [Vuetify One](https://one.vuetifyjs.com/) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution helps us ship features like v4, the CLI, and Vuetify0 faster.\n\nThank you for being part of the Vuetify community. See you in March!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/index.md":"---\nlayout: blog\nmeta:\n title: Blog\n description: The Vuetify blog shares the latest news, updates, and stories — stay up to date with developments across the Vuetify ecosystem.\n keywords: vuetify, blog, news, updates, stories, ecosystem\n---\n\n
\n\n# From the blog\n\nLatest news, updates, and stories about Vuetify.\n\n\n\n---\n\n
\n\n## Announcing Vuetify v4.3\n\n🖊️ John Leider • 📅 October 20th, 2026\n\nVuetify v4.3 \"Paladin\" adds more control over filtering and selection in data tables and forms, a batch of new labs components, right-click menus for VMenu, and opt-in Material Design Expressive styles for 7 components. It also includes new options for carousels and slide groups, and a more stable layout for SSR apps. { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify-4.3/) { .text-end }\n\n## September 2026 Update\n\n🖊️ Jacek Czarniecki • 📅 October 7th, 2026\n\nVuetify 4.2 got three patches while dev branch marches up for 4.3: VInfiniteCarousel, MD3 tabs alignment, modal rail drawers and localized VDateInput hints for typing. Vuetify's RTL, locale and observer composables now run on @vuetify/v0, and moving display onto it surfaced two fixes in Vuetify0 1.2.3. { .text-medium-emphasis }\n\n[Read More](/blog/september-2026-update/) { .text-end }\n\n## August 2026 Update\n\n🖊️ Jacek Czarniecki • 📅 September 14th, 2026\n\nVuetify 4.2 went into beta on August 27 and stable on September 2. It makes @vuetify/v0 the framework's first (and only) runtime dependency. Release included some cleanup and fixes that were too risky for patch releases so you might want to read this post closely. The team improved VDateInput, selection dropdowns, and many improvements landed in v0 for headless DataTable, DataGrid and Alert... { .text-medium-emphasis }\n\n[Read More](/blog/august-2026-update/) { .text-end }\n\n## July 2026 Update\n\n🖊️ John Leider • 📅 August 11th, 2026\n\nVuetify0 reached 1.0 on July 22, shipping stable as @vuetify/v0 after 214 merged PRs and a thirteen-component stable spine. Five days later v3.13.0 shipped as the final Vuetify 3 minor and moved the line into long-term support through July 2027, on a window now shortened from eighteen months to twelve. The v4.1 patch line shipped five releases underneath both, fixing focus resolution in Shadow DOM, two defaults-inheritance leaks, and a run of select-family reports... { .text-medium-emphasis }\n\n[Read More](/blog/july-2026-update/) { .text-end }\n\n## Announcing Vuetify0 1.0\n\n🖊️ John Leider • 📅 July 22nd, 2026\n\nVuetify0 is 1.0. The release candidate held — the frozen surface shipped through the validation window without a breaking change — and the package is now `@vuetify/v0`, no tag required. For a headless meta-framework, 1.0 is a promise about the foundation: nineteen composables, seventeen utilities, and a thirteen-component spine locked under semver for the whole 1.x line, enforced by CI, with the rest of the components promoting onto it individually. It ships 40 components, 71 composables, and 24 utilities — the logic layer a decade of Vuetify was built on, extracted, hardened, and frozen so you can build on it directly... { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify0-v1/) { .text-end }\n\n## June 2026 Update\n\n🖊️ Jacek Czarniecki • 📅 July 8th, 2026\n\nThis was a stabilization month. v4.1.0 shipped on June 2, followed by two patch releases. Most of that work went into the updated VOverlay, fixing placement and sizing bugs. Lot's of great new features were released to the users. Meanwhile Vuetify0 spent its first month in beta with the public API frozen, refining what shipped on the road to v1.0 in July... { .text-medium-emphasis }\n\n[Read More](/blog/june-2026-update/) { .text-end }\n\n## Announcing the Vuetify0 Release Candidate\n\n🖊️ John Leider • 📅 July 2nd, 2026\n\nVuetify0 has reached release candidate. The API freeze held through six beta releases — nothing renamed, nothing removed — across 184 commits with 60 fixes and 5 performance rewrites. The RC promotes the v1 stable set — the selection family, createRegistry, and the core plugins — and the surface stands at 50 components, 71 composables, and 24 utilities, every component shipping a built-in English aria label (WCAG 4.1.2). From here to v1.0 the work is final testing and documentation — no new features... { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify0-rc/) { .text-end }\n\n## May 2026 Update\n\n🖊️ Jacek Czarniecki • 📅 June 16th, 2026\n\nMay was a full-throttle feature sprint for Vuetify 4.1, the first minor since 4.0.0. The core team pushed hard to clear the backlog and land everything queued for the release: seven components promoted out of labs (VFileUpload, VDateInput, VColorInput, VIconBtn, VPicker, VStepperVertical, VPullToRefresh), four new ones (VHeatmap, VHighlight, VMonthPicker, VDateRangePicker), a full data-table accessibility pass, and a wave of fixes across 89 commits and 4 releases. Vuetify0 ran in parallel, landing its headless drag-and-drop family (useDragDrop, createSortable, createKanban) on the road to its June beta... { .text-medium-emphasis }\n\n[Read More](/blog/may-2026-update/) { .text-end }\n\n## Announcing the Vuetify0 Beta\n\n🖊️ John Leider • 📅 June 2nd, 2026\n\nVuetify0 has reached beta, freezing the public API: the existing composables and components keep their names and signatures through v1. Since the alpha, the totals went to 49 components and 68 composables, no composables remain in draft, and a headless drag-and-drop family (useDragDrop, createSortable, createKanban) was added along with createOtp, useDelay, and the Overflow component. The release also covers the testing and stability work — 5,700+ unit tests, 98.7% coverage — ahead of v1... { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify0-beta/) { .text-end }\n\n## April 2026 Update\n\n🖊️ John Leider • 📅 May 4th, 2026\n\nApril delivered the Vuetify0 v1.0.0 public alpha — 46 components and 63 composables of headless Vue primitives — alongside three Vuetify framework patch releases, MCP v0.7.0 with playground and link CRUD tools, and four ESLint Config releases including ESLint 10 support. Six new v0 components (Carousel, Image, NumberField, Progress, Toggle, Overflow) merged in April, the display composable became the first Vuetify internal to migrate to v0, and useTheme/useLocale/useFeatures became reactive-by-default across 847 total commits... { .text-medium-emphasis }\n\n[Read More](/blog/april-2026-update/) { .text-end }\n\n## March 2026 Update\n\n🖊️ John Leider • 📅 April 16th, 2026\n\nMarch delivered 7 Vuetify patch releases stabilizing v4, while Vuetify0 exploded with 427 commits reaching v0.2.0 with 7 new headless components including Switch, Slider, Treeview, and Combobox. The Nuxt Module hit v1.0.0-beta, the CLI shipped 10 releases with Vite 8 and Vue Router 5 support, and the ESLint plugin gained automated v4 migration rules across 720 total commits... { .text-medium-emphasis }\n\n[Read More](/blog/march-2026-update/) { .text-end }\n\n## Announcing the Vuetify0 Alpha\n\n🖊️ John Leider • 📅 April 7th, 2026\n\nThe Vuetify0 alpha is here — a headless meta-framework for Vue 3 with 46 components, 63 composables, first-class AI integration, and an adapter-based plugin system. 100% TypeScript, zero styles. Includes a full tutorial building DevKey, a developer API dashboard, from scratch. { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify0-alpha/) { .text-end }\n\n## February 2026 Update\n\n🖊️ John Leider • 📅 March 9th, 2026\n\nFebruary marks Vuetify's most significant milestone—the stable release of **Vuetify 4.0.0** with CSS layers, MD3 design system, and unstyled component foundations. The Vuetify CLI hit v1.0.0, VAvatarGroup shipped as a new component, and Vuetify0 gained createDataTable and Breadcrumbs composables across 390 commits and 68 merged PRs... { .text-medium-emphasis }\n\n[Read More](/blog/february-2026-update/) { .text-end }\n\n## Vuetify Project baseline with Vite and TailwindCSS\n\n🖊️ Jacek Czarniecki • 📅 February 16th, 2026\n\nEver wondered what does it really take to make Vuetify project play in harmony with TailwindCSS? This article is about to lay it out in a consise step-by-step guide. With CSS layers enabled by default in Vuetify v4, the two frameworks coexist smoothly while sharing aligned breakpoints, theme colors, and custom fonts. We cover disabling Vuetify's built-in utilities in favor of Tailwind's, resolving conflicting classes and more. { .text-medium-emphasis }\n\n[Read More](/blog/building-with-vite-and-tailwindcss/) { .text-end }\n\n## January 2026 Update\n\n🖊️ John Leider • 📅 February 11th, 2026\n\nJanuary delivered Vuetify 4.0.0-beta.0 with MD3 typography and elevation systems, VCommandPalette in labs, grid system overhaul, and the Vuetify CLI reaching 100 commits with analyze command and tab completion. Vuetify0 hit v0.1.0 with Tabs, Radio, and Checkbox components, while Snips gained 11 new snippets from J-Sek... { .text-medium-emphasis }\n\n[Read More](/blog/january-2026-update/) { .text-end }\n\n## December 2025 Update\n\n🖊️ John Leider • 📅 January 12th, 2026\n\nDecember was our most productive month of 2025 with 522 commits across 16 repositories. The month delivered Vuetify 4.0.0-alpha.0 with CSS layers, six v3.11.x patches, the Vuetify CLI public release, Google OAuth for Vuetify One, PWA support across all ecosystem products, and 6 Vuetify0 releases with new composables including usePagination, useClickOutside, and useVirtual... { .text-medium-emphasis }\n\n[Read More](/blog/december-2025-update/) { .text-end }\n\n## Vuetify Project baseline with Nuxt and UnoCSS\n\n🖊️ Jacek Czarniecki • 📅 December 22th, 2025\n\nLet's explore a lean, production‑ready setup for Nuxt application that combines Vuetify 3 with UnoCSS. By disabling Vuetify’s default CSS bundles (basic colors and utility classes) and generating only the styles actually used, the resulting CSS footprint shrinks dramatically. We will ensure the project foundation works with themes, typography, and breakpoints without compromises. { .text-medium-emphasis }\n\n[Read More](/blog/building-with-nuxt-and-unocss/) { .text-end }\n\n## November 2025 Update\n\n🖊️ John Leider • 📅 December 10th, 2025\n\nNovember delivered Vuetify v3.11.0 (Harbinger) with VCalendar and VHotkey promoted from labs, new VTimePicker input variant, VDatePicker MD3 improvements, and significant CLI progress. J-Sek contributed an impressive 14 PRs while the v0 project hit 109 commits across 5 releases... { .text-medium-emphasis }\n\n[Read More](/blog/november-2025-update/) { .text-end }\n\n## October 2025 Update\n\n🖊️ John Leider • 📅 November 11th, 2025\n\nOctober focused on refinement and reliability, delivering critical accessibility improvements with enhanced focus trap functionality, optimized VDataTable performance for large datasets, and refined components across the board. The month also saw the launch of Vuetify Link, our new URL shortening service, and significant updates to the Vuetify MCP server with HTTP transport support. We made substantial progress on v0 composables, laying the groundwork for Vuetify 4.0... { .text-medium-emphasis }\n\n[Read More](/blog/october-2025-update/) { .text-end }\n\n## September 2025 Update\n\n🖊️ John Leider • 📅 October 12th, 2025\n\nSeptember 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. This update includes the release of v3.10.0 (Argo), updated Figma UI Kit, new Vuetify0 composables, and over 60 bug fixes and features... { .text-medium-emphasis }\n\n[Read More](/blog/september-2025-update/) { .text-end }\n\n## August 2025 Update\n\n🖊️ John Leider • 📅 September 9th, 2025\n\nAugust marks a pivotal moment in Vuetify's evolution as we prepare to release the pre-alpha of Vuetify0 (v0), launch our redesigned issues page, and continue delivering powerful components and improvements. This month brings exciting developments including the \"Mastering Vuetify Theming\" webinar recap, VEditor final testing phase, free premium themes for personal use, and significant framework updates with 87 merged pull requests... { .text-medium-emphasis }\n\n[Read More](/blog/august-2025-update/) { .text-end }\n\n## July 2025 Update\n\n🖊️ John Leider • 📅 August 6th, 2025\n\nJuly was a month of significant advancements in the Vuetify ecosystem, highlighted by the release of v3.9.0 (Zealot) and the promotion of VTreeview and VTimePicker from labs to core components. This update also includes a focus on component stability, bug fixes, and developer experience improvements, with subsequent patches up to v3.9.3... { .text-medium-emphasis }\n\n[Read More](/blog/july-2025-update/) { .text-end }\n\n## June 2025 Update\n\n🖊️ John Leider • 📅 July 7th, 2025\n\nJune delivered substantial progress on VHotkey component, VCommandPalette development, component stability improvements, and developer experience enhancements across the Vuetify ecosystem. Discover the completion of VHotkey and useHotkey composable, new components in development like VMaskInput and VEditor, and exciting ecosystem updates including documentation improvements and Vuetify Studio enhancements... { .text-medium-emphasis }\n\n[Read More](/blog/june-2025-update/) { .text-end }\n\n---\n\n## May 2025 Update\n\n🖊️ John Leider • 📅 June 6th, 2025\n\nThis month brings exciting advancements across the Vuetify ecosystem, with major strides in AI integration, component refinements, and developer experience. Discover the official release of @vuetify/mcp (Model Context Protocol), substantial improvements to VDateInput and VNumberInput components, and the introduction of the new VColorInput Labs component... { .text-medium-emphasis }\n\n[Read More](/blog/may-2025-update/) { .text-end }\n\n---\n\n## April 2025 Update\n\n🖊️ John Leider • 📅 May 1st, 2025\n\nApril delivered tangible progress on MCP, the new theming engine, component refinements, docs, ESLint v4, and tooling across the Vuetify ecosystem. Discover how these updates enhance your development experience and prepare Vuetify for the future... { .text-medium-emphasis }\n\n[Read More](/blog/april-2025-update/) { .text-end }\n\n---\n\n## Announcing Vuetify v3.8\n\n🖊️ John Leider • 📅 April 8th, 2025\n\nVuetify v3.8 is here! Discover the latest features, improvements, and bug fixes in this minor release, including new components and form input enhancements. This release is packed with new features, improvements, and bug fixes, and contains no breaking changes... { .text-medium-emphasis }\n\n---\n\n[Read More](/blog/announcing-vuetify-3.8/) { .text-end }\n\n## Vuetify HeroDevs Partnership\n\n🖊️ Taylor Corbett • 📅 March 28th, 2025\n\nVuetify is excited to announce a partnership with HeroDevs to provide extended long-term support for Vuetify 2 users through Vue 2 NES + Essentials. For teams that haven't yet migrated to Vuetify 3, this solution is designed to keep applications secure and up to date without requiring an immediate migration, addressing security vulnerabilities, compliance issues, and compatibility challenges... { .text-medium-emphasis }\n\n[Read More](/blog/vuetify-herodevs-partnership/) { .text-end }\n\n---\n\n## State of the Union 2024 - Post Mortem\n\n🖊️ John Leider • 📅 March 19th, 2025\n\nA lot has changed since the 2024 State of the Union. In this post, I want to share the journey we've been on, the challenges we've faced, and the incredible team that's come together to shape Vuetify's future. From nearly losing it all to finding renewed purpose and energy, this is a story of resilience, community, and a shared vision for what Vuetify can become... { .text-medium-emphasis }\n\n[Read More](/blog/state-of-the-union-2024-post-mortem/) { .text-end }\n\n---\n\n## Building a Basic Nuxt Application with Vuetify\n\n🖊️ Eric Sarrion • 📅 February 21st, 2025\n\nDiscover how to craft a polished Nuxt application with Vuetify in this detailed guide. Leverage Vue.js and Nuxt’s streamlined framework to build a basic app featuring a toolbar, navigation menu, and multiple pages. Ideal for developers of all levels looking to simplify their workflow with automatic imports and reusable components... { .text-medium-emphasis }\n\n[Read More](/blog/building-a-basic-nuxt-application-with-vuetify/) { .text-end }\n\n---\n\n## State of the Union 2024\n\n🖊️ John Leider • 📅 September 8th, 2024\n\nIt's been a long road to get where we are today, and looking back, I can’t help but feel proud of how far Vuetify has come. From humble beginnings to now surpassing Vuetify 2’s usage, the journey has been anything but easy, but we’ve always had our community to lean on. Today, I want to take some time to reflect on our past, acknowledge our wins and challenges, and share where we're headed... { .text-medium-emphasis }\n\n[Read More](/blog/state-of-the-union-2024/) { .text-end }\n\n---\n","packages/docs/src/pages/en/blog/january-2026-update.md":"---\nlayout: blog\nmeta:\n title: January 2026 Update\n description: January shipped Vuetify 4.0.0-beta.0, MD3 typography and elevation, the VCommandPalette labs release, a grid overhaul, and Vuetify0 v0.1.0.\n keywords: Vuetify January 2026, v4.0.0-beta.0, VCommandPalette, MD3 typography, grid system, Vuetify0, CLI\n---\n\n\n\n# January 2026 Update\n\nWelcome to the January 2026 Vuetify update! The new year kicks off with **Vuetify 4.0.0-beta.0**—the first beta of our next major version featuring MD3 typography, elevation levels, and a complete grid system overhaul. **VCommandPalette** lands in labs, and **Vuetify0** hits the v0.1.0 milestone with new Tabs, Radio, and Checkbox components.\n\n![Hero image for January update](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/january-hero.png \"January hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 February 11th, 2026\n\n\n\n---\n\n## A Strong Start to 2026\n\nJanuary delivered steady progress across all Vuetify projects. With **661 commits** across 12 active repositories and **49 merged PRs**, the team maintained momentum from December's productive close. The release of v4.0.0-beta.0 brings MD3 typography and elevation system migrations, preparing Vuetify 4 for stable release. [J-Sek](https://github.com/J-Sek) continued his exceptional contribution streak with 5 merged PRs to the main framework plus 11 to Snips, while [Andrei Elkin](https://github.com/AndreyYolkin) drove the grid system overhaul and led CLI development with 75 commits.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Vuetify 4 Beta](#vuetify-4-beta)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Ecosystem Spotlight: Vuetify Snips](#ecosystem-spotlight-vuetify-snips)\n* [Vuetify CLI: Rapid Development](#vuetify-cli-rapid-development)\n* [Vuetify MCP: V4 Migration Tools](#vuetify-mcp-v4-migration-tools)\n* [Product Updates](#product-updates)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [January 2026 Changelog](#january-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nJanuary delivered three Vuetify releases—two v3.11.x patches maintaining stability and the landmark **v4.0.0-beta.0** advancing the next major version. The MCP server shipped five releases (v0.4.4 through v0.5.0) with v4 migration tooling, and Vuetify One saw eight releases with Open Collective integration.\n\n![January Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/releases.png \"January Releases Banner\")\n\n### Key Improvements\n\n* **[VCommandPalette](https://next.vuetifyjs.com/components/command-palettes/)** new labs component for command-driven navigation\n* **[VDataTable](/components/data-tables/)** `sort-icon` prop for custom sort indicators\n* **MD3 Typography** migration to Material Design 3 type system\n* **MD3 Elevation** updated elevation levels matching MD3 specifications\n* **Grid System Overhaul** modernized responsive grid implementation\n* **[v-intersect](/directives/intersect/)** re-mount on prop updates for dynamic behavior\n\nView the complete list of changes in the [Full Changelog](#january-2026-changelog)\n\n**Details:**\n\n* [v3.11.7](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.7)\n* [v3.11.8](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.8)\n* [v4.0.0-beta.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0-beta.0)\n\n---\n\n## Vuetify 4 Beta\n\nThe first beta of **Vuetify 4.0** landed on January 30th, building on December's alpha with significant style system migrations. This release brings Material Design 3 alignment for typography and elevation, plus a modernized grid system.\n\n![Vuetify 4 Beta](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/releases-beta.png \"Vuetify 4 Beta\")\n\n### What's New in v4.0.0-beta.0\n\n* **MD3 Typography** — Migrates to Material Design 3's type scale while preserving Sass customization. Updated font sizes and line heights for better hierarchy and readability.\n* **MD3 Elevation** — Elevation levels now match MD3 specifications with smoother shadow progressions and better depth perception across light and dark themes.\n* **Grid System Overhaul** — The responsive grid has been completely modernized with improved flexbox implementation, better RTL support, and cleaner CSS output. [VCol](/api/v-col/) gains syntax for overriding row size.\n\n**Component Updates**:\n\n* **[VDataTable](/components/data-tables/)**: New `sort-icon` prop allows custom sort indicators\n* **[v-intersect](/directives/intersect/)**: Now re-mounts when props update for dynamic threshold changes\n* **nested**: Mark individual nodes as detached for independent selection behavior\n\n::: info\n\nv4.0.0-beta.0 is for testing and feedback only. Production applications should continue using v3.11.x until v4 reaches stable release.\n\n:::\n\n**Details:**\n\n* [v4.0.0-beta.0 Release Notes](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0-beta.0)\n* [Migration Guide](https://next.vuetifyjs.com/getting-started/upgrade-guide/)\n* [Remaining Issues](https://github.com/vuetifyjs/vuetify/milestone/62)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nJanuary's framework work balanced v4 development with v3 maintenance. The team merged 14 PRs addressing new features, accessibility, and bug fixes.\n\n### New Features\n\n**[VCommandPalette](/labs/command-palette/)**\n\nThe highly anticipated command palette component lands in labs! VCommandPalette provides a keyboard-driven interface for searching commands, navigation, and actions. It's built on the same patterns used by VS Code, Figma, and other modern applications.\n\n\n\n**[VDataTable](/components/data-tables/) Sort Icon**\n\nA new `sort-icon` prop allows customizing the sort indicator in table headers, enabling consistent iconography with your design system.\n\n**[VField](/api/v-field/) Label Improvements**\n\nVField now ensures only one label element renders at a time, fixing edge cases with floating labels and improving screen reader compatibility.\n\n**Details:**\n\n* [VCommandPalette PR#22403](https://github.com/vuetifyjs/vuetify/pull/22403)\n* [VDataTable sort-icon PR#22521](https://github.com/vuetifyjs/vuetify/pull/22521)\n* [VField label PR#22542](https://github.com/vuetifyjs/vuetify/pull/22542)\n\n### Bug Fixes\n\n**[VAutocomplete](/components/autocompletes/)** Avoid no-items being selectable\n\n**[VInput](/api/v-input/)** Use direction prop only where needed\n\n**[VNumberInput](/components/number-inputs/)** Prevent stepper hover overflow when rounded\n\n**Details:**\n\n* [VAutocomplete PR#22509](https://github.com/vuetifyjs/vuetify/pull/22509)\n* [VInput direction PR#22519](https://github.com/vuetifyjs/vuetify/pull/22519)\n* [VNumberInput PR#22492](https://github.com/vuetifyjs/vuetify/pull/22492)\n\n### In Development\n\nSeveral exciting features are in active development and expected in upcoming releases:\n\n#### VHeatmap\n\nA new visualization component for displaying data density and patterns. Ideal for activity calendars, contribution graphs, and heat distribution displays.\n\n![VHeatmap Preview](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/heatmap-preview.png \"VHeatmap Preview\")\n\n#### VMonthPicker\n\nA dedicated month selection component complementing VDatePicker for use cases requiring only month/year selection.\n\n#### VMaskInput Multiple Masks\n\nEnhanced mask input supporting multiple and dynamic mask resolution for complex input patterns like phone numbers with variable country codes.\n\n**Details:**\n\n* [VHeatmap PR#22535](https://github.com/vuetifyjs/vuetify/pull/22535)\n* [VMonthPicker PR#22534](https://github.com/vuetifyjs/vuetify/pull/22534)\n* [VMaskInput PR#22501](https://github.com/vuetifyjs/vuetify/pull/22501)\n\n---\n\n## Ecosystem Spotlight: Vuetify Snips { #ecosystem-spotlight-vuetify-snips }\n\n\n\n
\n\n[Vuetify Snips](https://snips.vuetifyjs.com/) had an exceptional January with **11 merged PRs**—all from [J-Sek](https://github.com/J-Sek)—adding new snippet categories and improving existing templates.\n\n### New Snippets\n\n![Vuetify Snips Pickers](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/snips-pickers.png \"Vuetify Snips Pickers\")\n\n**Pickers**: 6 new picker snippets covering date ranges, time selection, and combined datetime patterns\n\n**Pagination**: New pagination templates demonstrating various layouts and styles\n\n**Buttons**: Additional button variations and loading state patterns\n\n**Charts**: New visualization snippets using Vuetify's chart components\n\n### Improvements\n\n* Improved accessibility for radio group snippets\n* Fixed TypeScript compatibility for Chat snippets in Vuetify Play\n* Updated Vuetify version across all snippets\n\n**Details:**\n\n* [Vuetify Snips](https://snips.vuetifyjs.com/)\n* [Pickers PR#70](https://github.com/vuetifyjs/snips/pull/70)\n* [Pagination PR#83](https://github.com/vuetifyjs/snips/pull/83)\n* [Charts PR#63](https://github.com/vuetifyjs/snips/pull/63)\n\n---\n\n## Vuetify CLI: Rapid Development { #vuetify-cli-rapid-development }\n\n\n\n
\n\nThe Vuetify CLI saw intensive development in January with **97 commits** and 31 releases (v0.0.8 through v0.0.13-beta.9), bringing major new capabilities for project management and development workflows. [Andrei Elkin](https://github.com/AndreyYolkin) drove the majority of CLI development with 75 commits.\n\n### New Features{ #new-cli-features }\n\n**Analyze Command**: `vuetify analyze` detects Vuetify usage patterns in your project, helping identify optimization opportunities and migration paths.\n\n\n\n**MCP Integration**: Built-in MCP server configuration with `vuetify add mcp` now supports ruler configuration for AI-assisted development.\n\n**Tab Completion**: Shell tab completion for commands and project arguments, powered by @bomb.sh/tab.\n\n**Localization**: Internationalized prompts for version selection during project scaffolding.\n\n### Getting Started\n\n::: tabs\n\n```bash [pnpm]\npnpm add -g @vuetify/cli\n```\n\n```bash [npm]\nnpm install -g @vuetify/cli\n```\n\n```bash [yarn]\nyarn global add @vuetify/cli\n```\n\n```bash [bun]\nbun add -g @vuetify/cli\n```\n\n:::\n\n**Details:**\n\n* [Vuetify CLI GitHub Repository](https://github.com/vuetifyjs/cli)\n* [v0.0.13 Release](https://github.com/vuetifyjs/cli/releases/tag/v0.0.13)\n\n---\n\n## Vuetify MCP: V4 Migration Tools { #vuetify-mcp-v4-migration-tools }\n\n\n\n
\n\nThe Vuetify MCP server shipped four releases in January (v0.4.4 through v0.5.0), with the headline feature being **V4 migration tooling**.\n\n### What's New\n\n![Vuetify MCP Migration](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/mcp-migration.png \"Vuetify MCP Migration Workflow\")\n\n**V3 to V4 Upgrade Guide**: New tool providing comprehensive migration guidance for upgrading from Vuetify 3 to Vuetify 4.\n\n**Breaking Changes Reference**: Detailed documentation of all v4 breaking changes with migration examples.\n\n**Vuetify0 Sync**: Updated composable and component documentation synchronized with the v0 repository.\n\n::: tip AI Migration Prompt\n\nTry asking your AI assistant: *\"Use the Vuetify MCP server to analyze my project and generate a migration plan from Vuetify 3 to Vuetify 4.\"*\n\n:::\n\n### Getting Started{ #getting-started-cli }\n\nInstall with the Vuetify CLI:\n\n::: tabs\n\n```bash [pnpm]\npnpm dlx @vuetify/cli add mcp\n```\n\n```bash [npm]\nnpx @vuetify/cli add mcp\n```\n\n```bash [yarn]\nyarn dlx @vuetify/cli add mcp\n```\n\n```bash [bun]\nbunx @vuetify/cli add mcp\n```\n\n:::\n\nOr configure manually:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [v0.5.0 Release Notes](https://github.com/vuetifyjs/mcp/releases/tag/v0.5.0)\n* [Model Context Protocol Documentation](https://modelcontextprotocol.io/)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\nVuetify One shipped **8 releases** in January (v2.11.0 through v2.13.2), with the highlight being **Open Collective integration**—backers on OpenCollective now receive Vuetify One benefits automatically. Other improvements include banner priority sorting, store function additions, and ecosystem link fixes.\n\n**Details:**\n\n* [Vuetify One](https://one.vuetifyjs.com/)\n\n### Other Products\n\n**Vuetify Play** received 6 commits with quality-of-life improvements. **Vuetify Bin** and **Vuetify Link** each saw minor updates, and **Vuetify Issues Reporter** gained 5 commits improving triage workflows.\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\n
\n\nJanuary marked a significant milestone for Vuetify0 with the **v0.1.0 release**—the first minor version signaling API stability. With **464 commits**, **21 merged PRs**, and 7 releases (v0.0.22 through v0.1.2), the headless meta-framework gained three new components and substantial internal improvements.\n\n![Vuetify0 Progress](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/v0.png \"Vuetify0 Progress\")\n\n### New Components\n\n**[Tabs](https://0.vuetifyjs.com/components/disclosure/tabs/)** — A fully accessible tab interface with keyboard navigation, ARIA attributes, and flexible styling. Supports both horizontal and vertical orientations with lazy rendering options.\n\n```html\n\n\n\n```\n\n**[Radio](https://0.vuetifyjs.com/components/forms/radio/)** — Accessible radio button groups with proper fieldset/legend semantics, keyboard navigation, and focus management.\n\n```html\n\n\n\n```\n\n**[Checkbox](https://0.vuetifyjs.com/components/forms/checkbox/)** — Standalone checkbox with indeterminate state support, proper labeling, and native form integration.\n\n```html\n\n\n\n```\n\n### New Composables\n\n**[useLazy](https://0.vuetifyjs.com/composables/system/use-lazy/)** — Deferred rendering based on visibility. Content renders only when its container enters the viewport, ideal for performance optimization in long pages.\n\n**[useDate](https://0.vuetifyjs.com/composables/plugins/use-date/)** — Date manipulation utilities with locale support, formatting, and comparison functions.\n\n**[useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey/)** — Keyboard shortcut management ported from Vuetify 3, enabling consistent hotkey handling across applications.\n\n**[createNested](https://0.vuetifyjs.com/composables/selection/create-nested/)** — Hierarchical tree management for building treeview, file browser, and nested list components.\n\n### Internal Improvements\n\n**useFeatures Adapters**: New adapter system allows customizing feature behavior without modifying core composables.\n\n**Theme Style Injection**: Migrated to adoptedStyleSheets for better performance and Shadow DOM support.\n\n**Web Types Generation**: Automatic generation of web-types for IDE support with prop documentation and type hints.\n\n::: info\n\nVuetify0 v0.1.x signals API stability for existing composables. Breaking changes will follow semver conventions going forward.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [Vuetify0 Roadmap](https://0.vuetifyjs.com/roadmap)\n* [Tabs Component](https://0.vuetifyjs.com/components/disclosure/tabs/)\n* [Radio Component](https://0.vuetifyjs.com/components/forms/radio/)\n* [Checkbox Component](https://0.vuetifyjs.com/components/forms/checkbox/)\n* [v0.1.0 Release Notes](https://0.vuetifyjs.com/releases/?version=v0.1.0)\n\n---\n\n## January 2026 Changelog\n\nThe following section provides an overview of the changes made in January 2026, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* MD3 typography and elevation system migrations\n* VCommandPalette labs component\n* Grid system modernization\n* VDataTable sort-icon customization\n* v-intersect dynamic prop updates\n* Numerous accessibility and form fixes\n\n**Expand** this section to see the detailed changelog for January 2026:\n\n
\n\n### v3.11.7\n\n**:wrench: Bug Fixes**\n\n* **VAutocomplete:** avoid no-items being selectable ([#22509](https://github.com/vuetifyjs/vuetify/issues/22509)) ([36f679c](https://github.com/vuetifyjs/vuetify/commit/36f679ccef))\n* **VInput:** Use direction prop only where needed ([#22519](https://github.com/vuetifyjs/vuetify/issues/22519)) ([1eca6f8](https://github.com/vuetifyjs/vuetify/commit/1eca6f8fad))\n* **VNumberInput:** prevent inner button overflow when rounded ([#22492](https://github.com/vuetifyjs/vuetify/issues/22492)) ([942ddcc](https://github.com/vuetifyjs/vuetify/commit/942ddcccc8))\n* **VBreadcrumbs:** drop redundant `item-props` prop ([901061b](https://github.com/vuetifyjs/vuetify/commit/901061b7fb))\n* **VTabs:** correct slider width with inset and vertical ([0201b64](https://github.com/vuetifyjs/vuetify/commit/0201b641c4))\n\n---\n\n### v3.11.8\n\n**:wrench: Bug Fixes**\n\n* **VColorPicker:** prevent glitch hiding canvas on resize ([f4e3172](https://github.com/vuetifyjs/vuetify/commit/f4e31724e3))\n* **VListItem:** avoid overlay blinking when deactivating ([d11c6a6](https://github.com/vuetifyjs/vuetify/commit/d11c6a69ec))\n* **VField:** Use only one for label at a time ([#22542](https://github.com/vuetifyjs/vuetify/issues/22542)) ([4c0c9fc](https://github.com/vuetifyjs/vuetify/commit/4c0c9fc08a))\n\n---\n\n### v4.0.0-beta.0\n\n**:rocket: Features**\n\n* **typography:** migrate to MD3 typography ([#22557](https://github.com/vuetifyjs/vuetify/issues/22557)) ([311daf4](https://github.com/vuetifyjs/vuetify/commit/311daf433a))\n* **elevation:** MD3 elevation levels ([#22461](https://github.com/vuetifyjs/vuetify/issues/22461)) ([dfce695](https://github.com/vuetifyjs/vuetify/commit/dfce695f8e))\n* **VCol/VRow:** grid system overhaul ([#21500](https://github.com/vuetifyjs/vuetify/issues/21500)) ([f6d24a9](https://github.com/vuetifyjs/vuetify/commit/f6d24a9234))\n* **VDataTable:** add `sort-icon` prop ([#22521](https://github.com/vuetifyjs/vuetify/issues/22521)) ([3bdf0ea](https://github.com/vuetifyjs/vuetify/commit/3bdf0ead33))\n* **v-intersect:** re-mount on prop updates ([#22556](https://github.com/vuetifyjs/vuetify/issues/22556)) ([6262290](https://github.com/vuetifyjs/vuetify/commit/6262290d24))\n\n**:test_tube: Labs**\n\n* **VCommandPalette:** add new command palette component ([#22403](https://github.com/vuetifyjs/vuetify/issues/22403)) ([2d4d0df](https://github.com/vuetifyjs/vuetify/commit/2d4d0df64f))\n\n
\n\n---\n\n## What's Next{ #whats-next .mt-4 }\n\n**Vuetify 4.0 launches February 23rd.** The final beta releases are landing now, incorporating community feedback on the new typography, elevation, and grid systems. This is a pivotal Vuetify release—bringing CSS layers, a DX overhaul, and minimal migration effort. The [v3 → v4 MCP migration tools](#vuetify-mcp-v4-migration-tools) make an already straightforward upgrade even easier. Importantly, v4 includes the infrastructure changes that make **unstyled components possible**—the foundation for true styling freedom in future releases.\n\nThe tailwind/unocss support landing in v4 is exciting, but it's a stepping stone. The real transformation comes next: **full unstyled capability** where you control every aspect of styling while keeping Vuetify's component logic and accessibility. V4's architecture—combined with the work happening in [Vuetify0](https://0.vuetifyjs.com/roadmap)—sets the stage for this future.\n\nVCommandPalette will receive refinements based on labs feedback, and we're expanding the component's integration patterns for common use cases. VHeatmap and VMonthPicker are on track for labs release.\n\nStarting February 24th, we begin the **Vuetify → Vuetify0 refactor**—rebuilding Vuetify's internals on top of v0's headless composable layer. This is the path to **Vuetify 5**, where the full component library and the headless meta-framework become one unified architecture, unlocking complete styling control without sacrificing the features you rely on.\n\nThank you for being part of the Vuetify community. See you in February!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/july-2025-update.md":"---\nlayout: blog\nmeta:\n title: July 2025 Update\n description: July delivered progress on collaborative development, component enhancements, developer-experience improvements, and ecosystem tools across Vuetify.\n keywords: Vuetify July 2025, Vuetify Migrations Webinar, Vuetify0, VCommandPalette, VEditor, Framework Czar, Vuetify Bin\n---\n\n\n\n# July 2025 Update\n\nThis month showcases the power of collaborative development as our team and community work together to enhance Vuetify's ecosystem.\n\n![Hero image for July release notes](https://cdn.vuetifyjs.com/docs/images/blog/july-2025-update/july-hero.png \"July release notes hero image\"){ height=112 }\n\n---\n\n🖊️ John Leider • 📅 August 6th, 2025\n\n\n\n---\n\n## New Beginnings\n\nJuly 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.\n\n::: success\n\nCool example of the month: [VChatList](https://play.vuetifyjs.com/playgrounds/spDtrg) by [Ishan](https://github.com/ikushum)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n* [The future of Vuetify](#the-future-of-vuetify)\n* [\"Decoding Vuetify Migrations\" Webinar Recap](#webinar-recap)\n* [Ecosystem Spotlight: Vuetify Bin](#ecosystem-spotlight-vuetify-bin)\n* [Framework Updates](#framework-updates)\n* [July 2025 Changelog](#july-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nJuly featured the release of [v3.9.0 (Zealot)](/getting-started/release-notes/?version=v3.9.0) on July 8th, promoting [VTreeview](/components/treeview/) and [VTimePicker](/components/time-pickers/) 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](#july-2025-changelog).\n\n**Details:**\n\n* [v3.9.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.0)\n* [v3.9.1](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.1)\n* [v3.9.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.2)\n* [v3.9.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.3)\n\n## The future of Vuetify\n\nOver 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](https://github.com/vuetifyjs/vuetify/issues/2240), 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!\n\nWe went through some [organizational](https://vuetifyjs.com/blog/state-of-the-union-2024-post-mortem/) changes earlier this year after facing funding [challenges](https://vuetifyjs.com/blog/state-of-the-union-2024/) 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.\n\nLast [month](https://vuetifyjs.com/blog/june-2025-update/), I revealed some information regarding a new project I've been working on called [Vuetify0](https://github.com/vuetifyjs/0). 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.\n\n![Image of Vuetify composition progress](https://cdn.vuetifyjs.com/docs/images/blog/july-2025-update/evolution.png \"Vuetify composition progress\"){ height=588 }\n\n* **Vuetify0**: Meta framework for building framework agnostic UI libraries\n* **Vuetify Paper**: Styleless components that are prop configured—no CSS required\n* **Vuetify**: Marries Vuetify0, Vuetify Paper, and Vuetify's defaults system\n\nI plan to give my first public talk about it at **VueConf Toronto** later this year, and I'm excited to see what everyone thinks.\n\nIn 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](https://github.com/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.\n\nToday 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.\n\n
\n\n\n\n
\n\nJacek 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.\n\nThank 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](https://community.vuetifyjs.com/).\n\n---\n\n## \"Decoding Vuetify Migrations\" Webinar Recap{ #webinar-recap}\n\nLast 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.\n\nBelow are a few key points we noticed most users struggled with during the migration process:\n\n### ESLint Plugin\n\nThe [Vuetify ESLint plugin](https://github.com/vuetifyjs/eslint-plugin-vuetify) 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.\n\n```bash\npnpm install eslint-plugin-vuetify --save-dev\n```\n\n```js\n// eslint.config.js\nimport vue from 'eslint-plugin-vue'\nimport vuetify from 'eslint-plugin-vuetify'\n\nexport default [\n ...vue.configs['flat/base'],\n ...vuetify.configs['flat/base'],\n]\n```\n\nFor more information on how to set up and use this plugin, check out the [vuetifyjs/eslint-plugin-vuetify](https://github.com/vuetifyjs/eslint-plugin-vuetify) repository.\n\n### Theme Changes\n\nThe most common migration issue we see? **Theme configuration**. V3's theme system is more powerful but requires a different approach:\n\n```js\n// V2 Approach (Won't work in V3)\ntheme: {\n themes: {\n light: {\n primary: '#1976D2',\n },\n },\n}\n\n// V3 Approach (Correct)\ntheme: {\n themes: {\n light: {\n colors: { // Note the 'colors' wrapper!\n primary: '#1976D2',\n },\n },\n },\n}\n```\n\n---\n\nWe 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](https://community.vuetifyjs.com).\n\n## Ecosystem Spotlight: Vuetify Bin { #ecosystem-spotlight-vuetify-bin }\n\nEvery 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.\n\n### What is Vuetify Bin?\n\n[Vuetify Bin](https://bin.vuetifyjs.com/) 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*.\n\n![Image of Vuetify Bin](https://cdn.vuetifyjs.com/docs/images/blog/july-2025-update/vbin1234.png \"Vuetify Bin interface\"){ height=300 }\n\n::: info\nIf you're part of the **Vuetify One** subscription, you can save your snippets with a unique URL. [More Info](https://vuetifyjs.com/?one=subscribe)\n:::\n\n## Framework Updates\n\nWe'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:\n\n**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.\n\n\n\n**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.\n\n\n\n**VVideo** officially entered Labs with the release of [v3.9.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.3). This component provides a flexible and powerful way to embed videos in Vuetify applications, supporting various formats and configurations.\n\n\n\n**Details:**\n\n* [VCommandPalette PR#21534](https://github.com/vuetifyjs/vuetify/pull/21534)\n* [VEditor PR#21653](https://github.com/vuetifyjs/vuetify/pull/21653)\n* [VVideo PR#21460](https://github.com/vuetifyjs/vuetify/pull/21460)\n\n## July 2025 Changelog\n\nThe following section provides an overview of the changes made in July 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* **VProgressLinear** [#21744](https://github.com/vuetifyjs/vuetify/pull/21744): Added chunk separation capability for creating segmented progress indicators—perfect for multi-step forms and wizards *(Merged July 15)*\n* **VDatePicker** [#21760](https://github.com/vuetifyjs/vuetify/pull/21760): Restored the accidentally removed `first-day-of-year` prop after community feedback *(Draft as of July 24)*\n* **VMaskInput** [#21719](https://github.com/vuetifyjs/vuetify/pull/21719): Fixed validation value handling, ensuring masks work correctly with form validation\n* **VField** [#21706](https://github.com/vuetifyjs/vuetify/pull/21706): Enhanced label accessibility for improved screen reader support\n* **VDateInput** [#21684](https://github.com/vuetifyjs/vuetify/pull/21684): Added proper TypeScript definitions to the `displayFormat` function\n* **Input components** [#21703](https://github.com/vuetifyjs/vuetify/pull/21703): Fixed `aria-describedby` attributes when using `hide-details`\n\nExpand this section to see the detailed changelog for July 2025.\n\n
\n\n### 🏅 Component promotions\n\nThe following components have been promoted to the core framework from labs:\n\n* [VTreeview](https://vuetifyjs.com/components/treeview/)\n* [VTimePicker](https://vuetifyjs.com/components/time-pickers/)\n\n### :rocket: Features\n\n* **date:** add StringDateAdapter ([#21174](https://github.com/vuetifyjs/vuetify/issues/21174)) ([7fe9152](https://github.com/vuetifyjs/vuetify/commit/7fe91520fb9ab3ae58d4f7eeba6c0a7b431e6198)), closes [#20967](https://github.com/vuetifyjs/vuetify/issues/20967)\n* **date:** export VuetifyDateAdapter ([#21252](https://github.com/vuetifyjs/vuetify/issues/21252)) ([1a98d03](https://github.com/vuetifyjs/vuetify/commit/1a98d030a7b9547d519b1491e14e97f3e554ee6e)), closes [#19904](https://github.com/vuetifyjs/vuetify/issues/19904)\n* **ripple:** use key names instead of codes ([7ecec03](https://github.com/vuetifyjs/vuetify/commit/7ecec03fb50267507928c6de6751dee16540ea7f))\n* **theme:** add change, toggle, and cycle functions ([#21224](https://github.com/vuetifyjs/vuetify/issues/21224)) ([3570254](https://github.com/vuetifyjs/vuetify/commit/357025485c7e8ac8dbc254a9fb37a3360e8c8d79))\n* **theme:** add new option 'unimportant' to generate classes without `!important` ([3190331](https://github.com/vuetifyjs/vuetify/commit/3190331e70f42b7fdf4d7ee04f662b15eefde026))\n* **theme:** add new theme 'system' ([#21244](https://github.com/vuetifyjs/vuetify/issues/21244)) ([8393a41](https://github.com/vuetifyjs/vuetify/commit/8393a41287d34dba56cb2140bcc1aa44de62ffcb))\n* **transition:** expose create transition functions ([#21352](https://github.com/vuetifyjs/vuetify/issues/21352)) ([79f36aa](https://github.com/vuetifyjs/vuetify/commit/79f36aa042284471c7a7cb248721de884e4ef329)), closes [#16050](https://github.com/vuetifyjs/vuetify/issues/16050)\n* **types:** emit GlobalDirectives ([136dfdf](https://github.com/vuetifyjs/vuetify/commit/136dfdf99380063ed20ca8d0672e1e450faf5431)), closes [#21475](https://github.com/vuetifyjs/vuetify/issues/21475)\n* **useHotkey:** add new composable for making hotkey bindings ([#21598](https://github.com/vuetifyjs/vuetify/issues/21598)) ([99c721c](https://github.com/vuetifyjs/vuetify/commit/99c721c381e47b403429c7de194306013c0ec679))\n* **VAlert:** better aligment with prepend icon ([#20700](https://github.com/vuetifyjs/vuetify/issues/20700)) ([5231b95](https://github.com/vuetifyjs/vuetify/commit/5231b956c39477e913648dcbaef4030c284b1ece)), closes [#20636](https://github.com/vuetifyjs/vuetify/issues/20636)\n* **VBadge:** add width and height props ([#21509](https://github.com/vuetifyjs/vuetify/issues/21509)) ([b87f179](https://github.com/vuetifyjs/vuetify/commit/b87f17933b31cf63289ffccdd78eda3682decc07)), closes [#20837](https://github.com/vuetifyjs/vuetify/issues/20837)\n* **VBtnGroup:** add `direction=\"vertical\"` ([#17878](https://github.com/vuetifyjs/vuetify/issues/17878)) ([5f39b85](https://github.com/vuetifyjs/vuetify/commit/5f39b8586e99c4529da9ef71576c048e711757e8)), closes [#17492](https://github.com/vuetifyjs/vuetify/issues/17492)\n* **VCombobox:** scroll to first item on search result ([#21255](https://github.com/vuetifyjs/vuetify/issues/21255)) ([57bb5ad](https://github.com/vuetifyjs/vuetify/commit/57bb5adb426372ca6af48b961a5b3533efa7d703)), closes [#20572](https://github.com/vuetifyjs/vuetify/issues/#20572)\n* **VDataTable:** support `fixed: 'end'` in headers ([#21665](https://github.com/vuetifyjs/vuetify/issues/21665)) ([415c267](https://github.com/vuetifyjs/vuetify/commit/415c267d057ad49334d9801c4fdb0c6aa9dcdcd1)), closes [#20020](https://github.com/vuetifyjs/vuetify/issues/20020) [#21153](https://github.com/vuetifyjs/vuetify/issues/21153)\n* **VDatePicker:** add `weekday-format` prop ([#21290](https://github.com/vuetifyjs/vuetify/issues/21290)) ([b13b15c](https://github.com/vuetifyjs/vuetify/commit/b13b15c865252f43f09ef590feeaeaac6a49bc1b))\n* **VDatePicker:** expose slots from underlying components ([#21532](https://github.com/vuetifyjs/vuetify/issues/21532)) ([1e351a2](https://github.com/vuetifyjs/vuetify/commit/1e351a2015db61564c3432662e4fc7700dff3a84)), closes [#20236](https://github.com/vuetifyjs/vuetify/issues/20236)\n* **VInfiniteScroll:** add reset method ([#20637](https://github.com/vuetifyjs/vuetify/issues/20637)) ([2e5bc43](https://github.com/vuetifyjs/vuetify/commit/2e5bc4330bf7409870516b818dcdd8bb0f36d0d5)), closes [#20308](https://github.com/vuetifyjs/vuetify/issues/20308) [#19935](https://github.com/vuetifyjs/vuetify/issues/19935)\n* **VKbd:** update default styling, add configurable options ([8ea20d9](https://github.com/vuetifyjs/vuetify/commit/8ea20d9fccaca572465d31af780f460d03f489db))\n* **VNumberInput:** custom decimal separator ([#21489](https://github.com/vuetifyjs/vuetify/issues/21489)) ([534c1e7](https://github.com/vuetifyjs/vuetify/commit/534c1e72363dadfee213f0360272c29d308b28af)), closes [#20254](https://github.com/vuetifyjs/vuetify/issues/20254)\n* **VNumberInput:** more flexible precision display ([#21315](https://github.com/vuetifyjs/vuetify/issues/21315)) ([d5779cd](https://github.com/vuetifyjs/vuetify/commit/d5779cd8529c6589d215569453733700b095ffe9)), closes [#21306](https://github.com/vuetifyjs/vuetify/issues/21306)\n* **VOtpInput:** allow to keep focus on paste ([#21356](https://github.com/vuetifyjs/vuetify/issues/21356)) ([cb8015d](https://github.com/vuetifyjs/vuetify/commit/cb8015daad38b7d9c6853e1053d78ab148574804)), closes [#21275](https://github.com/vuetifyjs/vuetify/issues/21275)\n* **VOverlay:** align scrim color with MD3 ([#21219](https://github.com/vuetifyjs/vuetify/issues/21219)) ([29d22a6](https://github.com/vuetifyjs/vuetify/commit/29d22a6737fa7e68bdd49c522a5b36dca3cabe11)), closes [#20244](https://github.com/vuetifyjs/vuetify/issues/20244)\n* **VSelect/VAutoComplete/VCombobox:** add `item-type` prop ([eaa4d15](https://github.com/vuetifyjs/vuetify/commit/eaa4d15caac1b66868a6af42e52b22cf2279821b)), closes [#21666](https://github.com/vuetifyjs/vuetify/issues/21666)\n* **VSelect:** add `no-auto-scroll` prop ([#21254](https://github.com/vuetifyjs/vuetify/issues/21254)) ([1e0f1c1](https://github.com/vuetifyjs/vuetify/commit/1e0f1c1a527deb5256844e4663d6931840736968)), closes [#20237](https://github.com/vuetifyjs/vuetify/issues/20237)\n* **VSelect:** support divider and subheader in items ([#21348](https://github.com/vuetifyjs/vuetify/issues/21348)) ([0953ed2](https://github.com/vuetifyjs/vuetify/commit/0953ed22c81c1c8d51505a2e35e222af1880698a)), closes [#5014](https://github.com/vuetifyjs/vuetify/issues/5014) [#15721](https://github.com/vuetifyjs/vuetify/issues/15721)\n* **VSlideGroup:** add content class to VSlideGroup props ([#21431](https://github.com/vuetifyjs/vuetify/issues/21431)) ([935351c](https://github.com/vuetifyjs/vuetify/commit/935351cc0e80c2327701a071eeeff15f1a128310)), , closes [#20853](https://github.com/vuetifyjs/vuetify/issues/20853)\n* **VSlider:** expose focus method ([#21575](https://github.com/vuetifyjs/vuetify/issues/21575)) ([6790e1e](https://github.com/vuetifyjs/vuetify/commit/6790e1ebfa820506f92a68f4c9055a2a36413b4b)), closes [#17602](https://github.com/vuetifyjs/vuetify/issues/17602)\n* **VTable:** add striped prop ([#19735](https://github.com/vuetifyjs/vuetify/issues/19735)) ([35b3304](https://github.com/vuetifyjs/vuetify/commit/35b3304a18bdb39df3431b71eef52cdef11130c9)), closes [#17505](https://github.com/vuetifyjs/vuetify/issues/17505)\n* **VTextarea:** add update:rows event ([#21226](https://github.com/vuetifyjs/vuetify/issues/21226)) ([e72d4d3](https://github.com/vuetifyjs/vuetify/commit/e72d4d30088ef47d5abf2e4533cc62c8ee91f823)), closes [#21133](https://github.com/vuetifyjs/vuetify/issues/21133)\n* **VTimePicker:** promote from labs ([7ce2cd6](https://github.com/vuetifyjs/vuetify/commit/7ce2cd68cb40d8de9c2135bdf33c9be9140d22c3))\n* **VTimePicker:** remove ampmInTitle prop ([#21595](https://github.com/vuetifyjs/vuetify/issues/21595)) ([e32796a](https://github.com/vuetifyjs/vuetify/commit/e32796a114711f2b30d3401abea11bfd8b8c2460)), closes [#19637](https://github.com/vuetifyjs/vuetify/issues/19637) [#19957](https://github.com/vuetifyjs/vuetify/issues/19957)\n* **VToolbar:** allow for explicit `:extension=\"false\"` ([#21264](https://github.com/vuetifyjs/vuetify/issues/21264)) ([092e64a](https://github.com/vuetifyjs/vuetify/commit/092e64a10aa6e1b476e0e7fddaf01d1bb1df3793)), closes [#7317](https://github.com/vuetifyjs/vuetify/issues/7317)\n* **VTreeview:** add `indent-lines` prop ([#21675](https://github.com/vuetifyjs/vuetify/issues/21675)) ([501e016](https://github.com/vuetifyjs/vuetify/commit/501e01641f226b54d80176c9e5a20baa4dd7df43)), closes [#11506](https://github.com/vuetifyjs/vuetify/issues/11506)\n* **VTreeview:** expose depth, path, index in slots ([#19833](https://github.com/vuetifyjs/vuetify/issues/19833)) ([bd908af](https://github.com/vuetifyjs/vuetify/commit/bd908afc7e335904c2fb35aa73541d8c04a9fcfb)), closes [#13863](https://github.com/vuetifyjs/vuetify/issues/13863)\n* **VTreeview:** promote from labs ([b610813](https://github.com/vuetifyjs/vuetify/commit/b6108138fdbfb2cc157a29602817708676a23491))\n* **VTreeview:** support `item-type` ([#21709](https://github.com/vuetifyjs/vuetify/issues/21709)) ([877f323](https://github.com/vuetifyjs/vuetify/commit/877f3232698147dee01effc57b2a9770d2ed0e39))\n* **VVirtualScroll:** support fractional scroll index ([#20407](https://github.com/vuetifyjs/vuetify/issues/20407)) ([adad9e2](https://github.com/vuetifyjs/vuetify/commit/adad9e2629fffa52b0abbb7d18297a5c0078074f))\n* **VWindow:** add `vertical-arrows` prop ([#21587](https://github.com/vuetifyjs/vuetify/issues/21587)) ([663b9a8](https://github.com/vuetifyjs/vuetify/commit/663b9a83ee602200adae115500594d462ddfff16))\n\n### :wrench: Bug Fixes\n\n* **date:** align `fullDate` format with documentation and other adapters ([#21668](https://github.com/vuetifyjs/vuetify/issues/21668)) ([c856da3](https://github.com/vuetifyjs/vuetify/commit/c856da3c4d5b0ac6a8c2ac5f8312debc3009fae4)), closes [#21667](https://github.com/vuetifyjs/vuetify/issues/21667)\n* **input:** handle aria-describedby with hide-details ([#21703](https://github.com/vuetifyjs/vuetify/issues/21703)) ([543f932](https://github.com/vuetifyjs/vuetify/commit/543f932622f1de44a215c71fbe8d52af3edea1bd)), closes [#17012](https://github.com/vuetifyjs/vuetify/issues/17012) [#19794](https://github.com/vuetifyjs/vuetify/issues/19794)\n* **inputs:** expose missing validation methods ([be64296](https://github.com/vuetifyjs/vuetify/commit/be6429615af6e0e9e0aad7ef21bfe7a1403229ec)), closes [#19934](https://github.com/vuetifyjs/vuetify/issues/19934)\n* **theme:** ability to restore \"system\" ([#21821](https://github.com/vuetifyjs/vuetify/issues/21821)) ([45077be](https://github.com/vuetifyjs/vuetify/commit/45077be13c220a4abeac161d16f5f406d7e1fb2e)), closes [#21819](https://github.com/vuetifyjs/vuetify/issues/21819)\n* **types:** don't use primitive object wrappers ([32007ed](https://github.com/vuetifyjs/vuetify/commit/32007ed2d34f9a131eb73faeb7629c0ff515f7b2))\n* **virtual:** skip items update if height has not been checked ([#21442](https://github.com/vuetifyjs/vuetify/issues/21442)) ([2e55ed3](https://github.com/vuetifyjs/vuetify/commit/2e55ed3d30daf6ea19660fb8168ea45fca0e9b1d)), closes [#18806](https://github.com/vuetifyjs/vuetify/issues/18806)\n* **VAutocomplete, VCombobox:** space key should not select ([#21311](https://github.com/vuetifyjs/vuetify/issues/21311)) ([f9288ad](https://github.com/vuetifyjs/vuetify/commit/f9288ad7dbfb3547d36e036932e653270eb9ff08)), closes [#20728](https://github.com/vuetifyjs/vuetify/issues/20728)\n* **VChipGroup:** don't select items with a value by index ([#21742](https://github.com/vuetifyjs/vuetify/issues/21742)) ([72cd412](https://github.com/vuetifyjs/vuetify/commit/72cd412ac7a794cc7fbb18918928c4e819827449)), closes [#20129](https://github.com/vuetifyjs/vuetify/issues/20129)\n* **VColorPicker:** keep sliders visible when inputs are hidden ([#21803](https://github.com/vuetifyjs/vuetify/issues/21803)) ([215bfd8](https://github.com/vuetifyjs/vuetify/commit/215bfd866e8c6f606620d8f88c8b1fd4dfe7ab15)), closes [#21801](https://github.com/vuetifyjs/vuetify/issues/21801)\n* **VCombobox:** select all values from pasted text ([#21840](https://github.com/vuetifyjs/vuetify/issues/21840)) ([408a95d](https://github.com/vuetifyjs/vuetify/commit/408a95d7b4c39649546f8098af7a6afd663f777c)), closes [#21838](https://github.com/vuetifyjs/vuetify/issues/21838)\n* **VDataTable:** continue sorting if dates are identical ([a9d0c56](https://github.com/vuetifyjs/vuetify/commit/a9d0c560d77392c803fd0c27b4748b82591dd0e0)), closes [#21650](https://github.com/vuetifyjs/vuetify/issues/21650)\n* **VDataTable:** don't pass slots to VSelect in mobile view ([#21572](https://github.com/vuetifyjs/vuetify/issues/21572)) ([6e61468](https://github.com/vuetifyjs/vuetify/commit/6e6146814462ec56a40bd439b6641630f6e057a3)), closes [#19873](https://github.com/vuetifyjs/vuetify/issues/19873)\n* **VDataTable:** only tab focus sortable columns ([27aaaf4](https://github.com/vuetifyjs/vuetify/commit/27aaaf41246aaaf3bed977c74d0b962daf0a5662)), closes [#20899](https://github.com/vuetifyjs/vuetify/issues/20899)\n* **VDatePicker:** add aria-labels for improved accessibility ([#21635](https://github.com/vuetifyjs/vuetify/issues/21635)) ([5e3fc2b](https://github.com/vuetifyjs/vuetify/commit/5e3fc2b4baf9df2939bdaca84cec28f3bf41633b)), closes [#20696](https://github.com/vuetifyjs/vuetify/issues/20696)\n* **VDatePicker:** avoid infinite loop when first day is out of range ([#21649](https://github.com/vuetifyjs/vuetify/issues/21649)) ([a330d75](https://github.com/vuetifyjs/vuetify/commit/a330d75ef091046c96aae3451bed5f29a66b5d3b))\n* **VDatePicker:** correct week labels ([#21648](https://github.com/vuetifyjs/vuetify/issues/21648)) ([b46e60c](https://github.com/vuetifyjs/vuetify/commit/b46e60c5eba21438c4ecd412ec99f67ebbb24dac)), closes [#21645](https://github.com/vuetifyjs/vuetify/issues/21645) [#21332](https://github.com/vuetifyjs/vuetify/issues/21332)\n* **VDatePicker:** format month to always have 2 digits ([#21686](https://github.com/vuetifyjs/vuetify/issues/21686)) ([f529212](https://github.com/vuetifyjs/vuetify/commit/f529212faffbde85299023b1eb0f4fa344e87df7)), closes [#21681](https://github.com/vuetifyjs/vuetify/issues/21681)\n* **VDatePicker:** improved date comparison with `min` constraint ([#21398](https://github.com/vuetifyjs/vuetify/issues/21398)) ([421a6f6](https://github.com/vuetifyjs/vuetify/commit/421a6f68557e617e0e24b9e525a4cebd841c4f2c)), closes [#21380](https://github.com/vuetifyjs/vuetify/issues/21380)\n* **VDatePicker:** round font-size from 13.6 to 14px ([#21590](https://github.com/vuetifyjs/vuetify/issues/21590)) ([d81a4a0](https://github.com/vuetifyjs/vuetify/commit/d81a4a0cf81353c96f6c5557d8c9be77df7a5836))\n* **VField:** fix label accessibility ([#21706](https://github.com/vuetifyjs/vuetify/issues/21706)) ([85abd80](https://github.com/vuetifyjs/vuetify/commit/85abd8078a2cba159b1cc3caa323519b3b29dec6))\n* **VFileInput:** avoid text overflow with long file names ([#21748](https://github.com/vuetifyjs/vuetify/issues/21748)) ([389a260](https://github.com/vuetifyjs/vuetify/commit/389a260a334d2b9fa1cd717d04904c0b60abe755)), closes [#21707](https://github.com/vuetifyjs/vuetify/issues/21707)\n* **VFileUploadItem:** accept `title` slot ([#21769](https://github.com/vuetifyjs/vuetify/issues/21769)) ([fe85aa0](https://github.com/vuetifyjs/vuetify/commit/fe85aa0ecb4efa17f499beccea27710ad3bea164))\n* **VFileUploadItem:** apply classes, styles as props ([#21752](https://github.com/vuetifyjs/vuetify/issues/21752)) ([d6050f0](https://github.com/vuetifyjs/vuetify/commit/d6050f051ac36cadef5cb6ae1e8995875d2b4bfe)), closes [#21740](https://github.com/vuetifyjs/vuetify/issues/21740)\n* **VList:** ignore invalid itemType values ([4bae0bc](https://github.com/vuetifyjs/vuetify/commit/4bae0bcfba724d90eafda96801ed597558e30885)), closes [#21728](https://github.com/vuetifyjs/vuetify/issues/21728)\n* **VList:** merge classes from itemProps ([5423fbf](https://github.com/vuetifyjs/vuetify/commit/5423fbf18ca6d27ac560529cdd20310aee6d2d32))\n* **VListItem:** keyboard navigation when list contains checkboxes ([#21701](https://github.com/vuetifyjs/vuetify/issues/21701)) ([f500c5b](https://github.com/vuetifyjs/vuetify/commit/f500c5bad5d0da31d8ebec0447cd4b68f91bcbbd)), closes [#21516](https://github.com/vuetifyjs/vuetify/issues/21516)\n* **VMenu:** let persistent menus coexist with regular ones ([#21449](https://github.com/vuetifyjs/vuetify/issues/21449)) ([30ac0fc](https://github.com/vuetifyjs/vuetify/commit/30ac0fcdd491d0eba970d383023d183aafcef491)), closes [#20976](https://github.com/vuetifyjs/vuetify/issues/20976)\n* **VNumberInput:** keep cursor position when typing decimal values ([acc30fb](https://github.com/vuetifyjs/vuetify/commit/acc30fbfa5cd8295f341c545bd4adc5629b14bd6))\n* **VNumberInput:** only trim zeros from the end ([ab2d941](https://github.com/vuetifyjs/vuetify/commit/ab2d941c02a2b5f0c976269c277471a808f251ca)), closes [#21828](https://github.com/vuetifyjs/vuetify/issues/21828)\n* **VOtpInput:** only autofocus if autofocus prop is set ([79bcb27](https://github.com/vuetifyjs/vuetify/commit/79bcb27d8b6006ac9e50787b8e771f46b402e315))\n* **VOverlay:** properly detect location flipping loop ([07db6b2](https://github.com/vuetifyjs/vuetify/commit/07db6b2fdda106325fff514f603b861ae788fee4)), closes [#21564](https://github.com/vuetifyjs/vuetify/issues/21564) [#21551](https://github.com/vuetifyjs/vuetify/issues/21551)\n* **VOverlay:** trigger scrollStrategy when target is a point ([1146171](https://github.com/vuetifyjs/vuetify/commit/114617141a73271f07c108b91829186f3ec36291))\n* **VProgressLinear:** accept pointer events unless `clickable` is used ([#21691](https://github.com/vuetifyjs/vuetify/issues/21691)) ([a6b1136](https://github.com/vuetifyjs/vuetify/commit/a6b1136243f70bf868c438f8d9e6be9b18a492e3)), closes [#21690](https://github.com/vuetifyjs/vuetify/issues/21690)\n* **VRipple:** support touch simulators ([#20776](https://github.com/vuetifyjs/vuetify/issues/20776)) ([9fa2870](https://github.com/vuetifyjs/vuetify/commit/9fa2870eeaf073489f3de790defe3e94a3746788))\n* **VSelect:** don't open menu on its own when items change ([#21247](https://github.com/vuetifyjs/vuetify/issues/21247)) ([339bd45](https://github.com/vuetifyjs/vuetify/commit/339bd45a1fd75b8d51dafcc1d0b270f07c985ee0)), closes [#21205](https://github.com/vuetifyjs/vuetify/issues/21205)\n* **VSelectionControl:** correctly pass ripple options to directive ([#21713](https://github.com/vuetifyjs/vuetify/issues/21713)) ([87a8a3e](https://github.com/vuetifyjs/vuetify/commit/87a8a3ef0edb14d43179442c1727cf5b3d86edab)), closes [#21208](https://github.com/vuetifyjs/vuetify/issues/21208)\n* **VSelects:** avoid error with `null` items ([#21660](https://github.com/vuetifyjs/vuetify/issues/21660)) ([dd98067](https://github.com/vuetifyjs/vuetify/commit/dd98067d8fb2ac46c5cd7f23d630777b61129797))\n* **VSlider:** correctly apply `thumb-color` ([#21833](https://github.com/vuetifyjs/vuetify/issues/21833)) ([b207522](https://github.com/vuetifyjs/vuetify/commit/b207522f5767f11edf56d4c4f0fad0b8dd8fcbb7)), closes [#21832](https://github.com/vuetifyjs/vuetify/issues/21832)\n* **VTextField:** avoid infinite focus loop ([#21628](https://github.com/vuetifyjs/vuetify/issues/21628)) ([efaaa5d](https://github.com/vuetifyjs/vuetify/commit/efaaa5d4f02e886b3e0c46e1f9dd9eed1cdf2e88)), closes [#21626](https://github.com/vuetifyjs/vuetify/issues/21626)\n* **VTextField:** don't try to re-focus input on focus ([#21722](https://github.com/vuetifyjs/vuetify/issues/21722)) ([14c88df](https://github.com/vuetifyjs/vuetify/commit/14c88df44eff939e176f8c01cc4350d2be0d81c5)), closes [#21716](https://github.com/vuetifyjs/vuetify/issues/21716) [#21626](https://github.com/vuetifyjs/vuetify/issues/21626) [#21717](https://github.com/vuetifyjs/vuetify/issues/21717)\n* **VTimePicker:** auto width ([#21613](https://github.com/vuetifyjs/vuetify/issues/21613)) ([5d1ceab](https://github.com/vuetifyjs/vuetify/commit/5d1ceab3e519974cdde29f7e7610ffb5972ac6a7))\n* **VTreeview:** activatable implies openOnClick=false ([c0b7d7b](https://github.com/vuetifyjs/vuetify/commit/c0b7d7b518727f8d43e4463dd3e69edfa4c43d73))\n* **VTreeview:** don't display expanded items as activated ([683dc86](https://github.com/vuetifyjs/vuetify/commit/683dc863d1e8736ac8bda93f58f2b8cc8fa819b4)), closes [#21721](https://github.com/vuetifyjs/vuetify/issues/21721) [#21724](https://github.com/vuetifyjs/vuetify/issues/21724)\n* **VTreeview:** don't select disabled children with parent ([#20962](https://github.com/vuetifyjs/vuetify/issues/20962)) ([0772bc1](https://github.com/vuetifyjs/vuetify/commit/0772bc11c10cd55ca1dd186a64819337b38bc3fd)), closes [#20386](https://github.com/vuetifyjs/vuetify/issues/20386)\n* **VTreeview:** hide extended lines when fluid ([#21798](https://github.com/vuetifyjs/vuetify/issues/21798)) ([5728b2b](https://github.com/vuetifyjs/vuetify/commit/5728b2b2fc9a1e608bb395cc077f5640261a57ea)), closes [#21794](https://github.com/vuetifyjs/vuetify/issues/21794)\n* **VTreeview:** modelValue reactivity ([6daf53d](https://github.com/vuetifyjs/vuetify/commit/6daf53ddbd7f66155f1e1cce870968153fc2b1df))\n* **VTreeview:** prevent checkbox deselection when mandatory ([431af5f](https://github.com/vuetifyjs/vuetify/commit/431af5fa7df28d98d7bb76f88a1803ec98a62719)), closes [#21614](https://github.com/vuetifyjs/vuetify/issues/21614)\n* **VTreeview:** restore reactivity with computed items ([107dd0c](https://github.com/vuetifyjs/vuetify/commit/107dd0c6822a5f029e302627f040a43a82bebb58)), closes [#20900](https://github.com/vuetifyjs/vuetify/issues/20900)\n* **VTreeview:** select trunk nodes on click when openOnClick=false ([e6a1710](https://github.com/vuetifyjs/vuetify/commit/e6a1710296ea0cb67d6877a9c587766b5565f90d)), closes [#21599](https://github.com/vuetifyjs/vuetify/issues/21599)\n* **VTreeview:** set active state from router ([#21644](https://github.com/vuetifyjs/vuetify/issues/21644)) ([01c7a4f](https://github.com/vuetifyjs/vuetify/commit/01c7a4f8a0af4b62eda99bcd7eac56ef452e22d8))\n\n### :microscope: Code Refactoring\n\n* **layout:** consoleWarn instead of error for missing layout items ([34b53f1](https://github.com/vuetifyjs/vuetify/commit/34b53f10b5ae1b218721b32d51c757adecf343f7))\n* **theme:** add internal methods for testing tailwind integration ([abfdb77](https://github.com/vuetifyjs/vuetify/commit/abfdb777e0e00d4a1798f52d7e4c118e7409fcb9))\n\n### :test_tube: Labs\n\n* **VCalendar:** slot day-event not available ([#21558](https://github.com/vuetifyjs/vuetify/issues/21558)) ([d743051](https://github.com/vuetifyjs/vuetify/commit/d743051c3fc2ba99c77b49e2fa99f9925af50eb6)), closes [#21341](https://github.com/vuetifyjs/vuetify/issues/21341)\n* **VCalendar:** use adapter for day element key ([#21689](https://github.com/vuetifyjs/vuetify/issues/21689)) ([428f460](https://github.com/vuetifyjs/vuetify/commit/428f4602b54b6ecbfcc37cd2edf61703ae49712e)), closes [#21688](https://github.com/vuetifyjs/vuetify/issues/21688)\n* **VColorInput:** ensure cancel action closes menu ([#21664](https://github.com/vuetifyjs/vuetify/issues/21664)) ([7822179](https://github.com/vuetifyjs/vuetify/commit/7822179df9d61dec98179ddcb70346d949305412)), closes [#21655](https://github.com/vuetifyjs/vuetify/issues/21655)\n* **VDateInput:** align generic model type with VDatePicker ([#21764](https://github.com/vuetifyjs/vuetify/issues/21764)) ([0cfca46](https://github.com/vuetifyjs/vuetify/commit/0cfca46b2da04c9b98e7a56788f9e648f31b6c3e)), closes [#21751](https://github.com/vuetifyjs/vuetify/issues/21751) [#21753](https://github.com/vuetifyjs/vuetify/issues/21753)\n* **VDateInput:** assign type to displayFormat function ([#21684](https://github.com/vuetifyjs/vuetify/issues/21684)) ([4446ebf](https://github.com/vuetifyjs/vuetify/commit/4446ebff30e96f1d7629bafa0c8b8bad8f473307)), closes [#21683](https://github.com/vuetifyjs/vuetify/issues/21683)\n* **VDateInput:** avoid time values in the field ([#21694](https://github.com/vuetifyjs/vuetify/issues/21694)) ([d4efd48](https://github.com/vuetifyjs/vuetify/commit/d4efd487d384f94a263d2af9b8abc5dbb8381134))\n* **VHotkey:** add new component ([#21598](https://github.com/vuetifyjs/vuetify/issues/21598)) ([99c721c](https://github.com/vuetifyjs/vuetify/commit/99c721c381e47b403429c7de194306013c0ec679))\n* **VIconBtn:** add button type ([#21638](https://github.com/vuetifyjs/vuetify/issues/21638)) ([dd1db74](https://github.com/vuetifyjs/vuetify/commit/dd1db749edd8df351727c01eeca67a1bb7fb8fb6)), closes [#21634](https://github.com/vuetifyjs/vuetify/issues/21634)\n* **VMaskInput:** create new component ([#21519](https://github.com/vuetifyjs/vuetify/issues/21519)) ([117443a](https://github.com/vuetifyjs/vuetify/commit/117443afbe676d5d31ab20b4a549cb7405994493))\n* **VMaskInput:** send unmasked value to rules ([#21719](https://github.com/vuetifyjs/vuetify/issues/21719)) ([64943b3](https://github.com/vuetifyjs/vuetify/commit/64943b30c4a84ddfaa565f9b2d62285450aa128b))\n* **VPie:** create new component ([#21176](https://github.com/vuetifyjs/vuetify/issues/21176)) ([5f0ebca](https://github.com/vuetifyjs/vuetify/commit/5f0ebca99b830f2cdce234b5f45529a1553c66ef))\n* **VStepperVertical:** correct avatar alignment ([#21797](https://github.com/vuetifyjs/vuetify/issues/21797)) ([6292149](https://github.com/vuetifyjs/vuetify/commit/6292149811091210af7005bbaf7de37aea66b69a)), closes [#21792](https://github.com/vuetifyjs/vuetify/issues/21792)\n* **VStepperVertical:** fix next/prev-text props ([#21360](https://github.com/vuetifyjs/vuetify/issues/21360)) ([11986c6](https://github.com/vuetifyjs/vuetify/commit/11986c6e2ac351c38194cd3a8c74f6e03f58e3cf)), closes [#21358](https://github.com/vuetifyjs/vuetify/issues/21358)\n* **VVideo:** create new component ([#21460](https://github.com/vuetifyjs/vuetify/issues/21460)) ([936eba2](https://github.com/vuetifyjs/vuetify/commit/936eba2ef278137d650b00acf0425116ec8237eb)), closes [#5592](https://github.com/vuetifyjs/vuetify/issues/5592)\n\n
\n\n---\n\n## What's Next { #whats-next }\n\nNext month promises to be an exciting one as we continue building momentum from July's achievements. Here's what's on the horizon:\n\n### Community Roadmap Voting\n\nOver 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.\n\n### Vuetify0 Alpha Release\n\nWe're targeting **late August** for the first alpha release of Vuetify0. This milestone will include:\n\n* Core composable abstractions\n* Initial documentation and examples\n\n### Labs Component Stabilization\n\nAugust is dedicated to refining our Labs components based on community feedback:\n\n* **VCommandPalette**: Finalizing keyboard navigation patterns\n* **VEditor**: Completing table and list formatting features\n* **VCalendar**: Addressing performance optimizations and accessibility improvements\n* **VMaskInput**: Expanding validation integration\n\nThank you for your continued support, feedback, and contributions that make all of this possible! See you next month.\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/eXubxyJ), and upcoming webinar series announcements.*\n","packages/docs/src/pages/en/blog/july-2026-update.md":"---\nlayout: blog\nmeta:\n title: July 2026 Update\n description: July closed the Vuetify 3 line with v3.13.0 entering long-term support, shipped Vuetify0 1.0, and kept the v4.1 patch cadence running with five releases\n keywords: Vuetify July 2026, Vuetify 3.13 LTS, Vuetify0 1.0, Vuetify 4.1, Vuetify CLI, pkg-diff\n---\n\n\n\n# July 2026 Update\n\nWelcome to the July 2026 Vuetify update! This month closes out two long-running efforts at once — **Vuetify0 1.0** shipped stable on July 22 after 214 merged pull requests, and **v3.13.0** landed five days later as the final Vuetify 3 minor, moving the v3 line into [long-term support](/introduction/long-term-support/) through July 27th, 2027. Underneath both, the v4.1 patch line kept its weekly cadence with five releases.\n\n![Hero image for July update](https://cdn.vuetifyjs.com/docs/images/blog/july-2026-update/july-hero.png \"July hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 August 11th, 2026\n\n\n\n---\n\n## Stable ground\n\n**386 commits** across 11 active repositories and **264 merged PRs**, with two releases doing most of the work. v3.13.0 is the last minor Vuetify 3 will get — from here the line takes critical bug fixes and security patches only, for twelve months. Vuetify0 1.0 gives the framework's logic layer a semver-locked surface for the first time, which is what the theme, locale, and date migrations have been waiting on.\n\nThe numbers lean hard toward v0: 214 of the month's merged PRs landed in [vuetifyjs/0](https://github.com/vuetifyjs/0), where our team spent the month hardening the surface ahead of the release rather than adding to it. The framework side was quieter — 34 merged PRs, no labs promotions, no new components — but shipped nine releases across the v4 and v3 lines, and the accessibility pass across v0 accounted for a large share of the rest. We're grateful to everyone in the community who filed a fix this month.\n\n| Metric | Count |\n|-------------------------|---------------------------------------------------|\n| Total Commits | 386 |\n| Total PRs Merged | 264 |\n| Active Repositories | 11 |\n| Vuetify Releases | 9 (v4.1.3 → v4.1.7, v3.12.9 → v3.13.0) |\n| Components Promoted | 0 (framework) · 13 (Vuetify0 stable spine) |\n| Vuetify0 Releases | 11 tags, including **v1.0.0** |\n\nCounts cover July 1–31, 2026 (America/Chicago), by commit date and merge date. Cherry-picks and back-ports between the `master`, `dev`, and `v3-stable` branches are counted once, not once per branch.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Vuetify 3 Enters LTS](#vuetify-3-lts)\n* [Vuetify0 1.0](#vuetify0-1-0)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Tooling Updates](#ecosystem-tooling)\n* [July 2026 Changelog](#july-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\n**Nine framework releases** shipped in July across two lines. The v4 line ran weekly patches — [v4.1.3](/getting-started/release-notes/?version=v4.1.3) (July 2), [v4.1.4](/getting-started/release-notes/?version=v4.1.4) (July 7), [v4.1.5](/getting-started/release-notes/?version=v4.1.5) (July 13), [v4.1.6](/getting-started/release-notes/?version=v4.1.6) (July 23), and [v4.1.7](/getting-started/release-notes/?version=v4.1.7) (July 30), The v3 line took three patches and then [v3.13.0](/getting-started/release-notes/?version=v3.13.0) on July 27.\n\n\n\n### Key Improvements\n\n* **[Vuetify 3.13](/getting-started/release-notes/?version=v3.13.0)** — the final v3 minor; the line now sits in [LTS](/introduction/long-term-support/) until July 27th, 2027\n* **[VSelect / VAutocomplete / VCombobox](/components/selects/)** — new events for multi-selection in v3.13.0, plus a run of focus and native-form-submission fixes ([#23038](https://github.com/vuetifyjs/vuetify/pull/23038), [#23022](https://github.com/vuetifyjs/vuetify/pull/23022), [#23029](https://github.com/vuetifyjs/vuetify/pull/23029))\n* **[VSkeletonLoader](/components/skeleton-loaders/)** — a new `types` prop, a `chip-group` type, and `table-cell` reintroduced ([#23037](https://github.com/vuetifyjs/vuetify/pull/23037))\n* **[VBtnGroup](/components/button-groups/)** — a `size` prop matching standalone buttons ([`eada595`](https://github.com/vuetifyjs/vuetify/commit/eada595))\n* **Shadow DOM** — keyboard navigation and focus resolution work inside an open shadow root ([#23024](https://github.com/vuetifyjs/vuetify/pull/23024), [#23027](https://github.com/vuetifyjs/vuetify/pull/23027))\n* **Defaults** — nested root defaults survive a teleport reset, and parent config no longer leaks into menu and dialog content ([#23015](https://github.com/vuetifyjs/vuetify/pull/23015), [#23016](https://github.com/vuetifyjs/vuetify/pull/23016))\n\nView the complete list of changes in the [Full Changelog](#july-2026-changelog).\n\n**Details:**\n\n* [v4.1.7](/getting-started/release-notes/?version=v4.1.7) · [v4.1.6](/getting-started/release-notes/?version=v4.1.6) · [v4.1.5](/getting-started/release-notes/?version=v4.1.5) · [v4.1.4](/getting-started/release-notes/?version=v4.1.4) · [v4.1.3](/getting-started/release-notes/?version=v4.1.3)\n* [v3.13.0](/getting-started/release-notes/?version=v3.13.0) · [v3.12.11](/getting-started/release-notes/?version=v3.12.11) · [v3.12.10](/getting-started/release-notes/?version=v3.12.10) · [v3.12.9](/getting-started/release-notes/?version=v3.12.9)\n\n---\n\n## Vuetify 3 Enters LTS { #vuetify-3-lts }\n\n\n\n
\n\nVuetify 3 shipped on November 1st, 2022. Nearly four years and thirteen minors later, **[v3.13.0](/getting-started/release-notes/?version=v3.13.0) is the last one**. As of July 27th, 2026 the v3 line is in [long-term support](/introduction/long-term-support/) and will receive critical bug fixes and security patches — and nothing else — until **July 27th, 2027**.\n\n**The LTS window is twelve months, not eighteen.** The previous policy gave the outgoing major 18 months. That is now 12, and the [long-term support page](/introduction/long-term-support/) and [release cycle](/introduction/why-vuetify/) docs have been updated to match. Check your migration plan against the new number.\n\n**v3.13.0 also carries features.** It is the only place July's four new ones shipped — on the v4 line the same commits sit on `dev`, queued for [v4.2.0](https://github.com/vuetifyjs/vuetify/milestone/90) in September. They arrive alongside accessibility work back-ported from May:\n\n* **[VSelect / VAutocomplete / VCombobox](/components/selects/)** — new events for multi-selection ([#23038](https://github.com/vuetifyjs/vuetify/pull/23038))\n* **[VDataTable](/components/data-tables/basics/)** — a community-contributed `mobile.header` slot ([#21429](https://github.com/vuetifyjs/vuetify/pull/21429)), plus `aria-sort` on sortable headers and `aria-label`s on selection controls\n* **[VSkeletonLoader](/components/skeleton-loaders/)** — the `types` prop, `chip-group`, and `table-cell`\n* **[VBtnGroup](/components/button-groups/)** — the `size` prop\n\nThe v3 documentation stays at [v3.vuetifyjs.com](https://v3.vuetifyjs.com/), and the docs site trimmed its outdated cross-version content in the process ([`e3fb29d`](https://github.com/vuetifyjs/vuetify/commit/e3fb29d)). If you are still on v3, start with the [upgrade guide](/getting-started/upgrade-guide/). You have a year.\n\n**Details:**\n\n* [Long-term support](/introduction/long-term-support/)\n* [Roadmap](/introduction/roadmap/)\n* [v3.13.0 Release Notes](/getting-started/release-notes/?version=v3.13.0)\n\n---\n\n## Vuetify0 1.0 { #vuetify0-1-0 }\n\n\n\n
\n\n[Vuetify0 shipped 1.0](/blog/announcing-vuetify0-v1/) on **July 22nd**. The package is now plain `@vuetify/v0` — no `beta`, no `rc`, no tag required. The announcement post has the full surface; this is how July got there.\n\n\n\nThe month opened with the release candidate. [v1.0.0-rc.6](https://github.com/vuetifyjs/0/releases) landed July 2 alongside the promotion of **ten composables from preview to stable** — `createModel`, `createSelection`, `createSingle`, `createStep`, `createGroup`, `createNested`, `createRegistry`, `useTheme`, `useStorage`, and `useBreakpoints` ([#470](https://github.com/vuetifyjs/0/pull/470)). Three more RCs followed, and on July 20 the **1.0 component spine** — thirteen components: `Atom`, `AspectRatio`, `Theme`, `Group`, `Selection`, `Single`, `Step`, `Tabs`, `Toggle`, `Collapsible`, `Checkbox`, `Radio`, and `Switch` — was promoted to stable in one pass ([#655](https://github.com/vuetifyjs/0/pull/655)), taking the stable component count from zero to thirteen. Two days later, 1.0.0.\n\n**No new composables or components shipped in July.** The API had been frozen since the June beta, so the month went into hardening what already existed — accessibility, performance, and correctness.\n\n### Accessibility\n\nWe've added an [axe-core](https://github.com/dequelabs/axe-core) sweep that now runs against every component ([#736](https://github.com/vuetifyjs/0/pull/736)). The fixes that preceded it:\n\n* **Avatar, Scrim, Popover, Tooltip, Select, Toggle** — restored dropped alt text and completed missing ARIA wiring ([#618](https://github.com/vuetifyjs/0/pull/618))\n* **Switch, Form, Slider** — correct ARIA states for mixed, native-validation, and grouped controls ([#619](https://github.com/vuetifyjs/0/pull/619))\n* **Carousel** — autoplay pauses on keyboard focus, satisfying WCAG 2.2.2 ([#625](https://github.com/vuetifyjs/0/pull/625))\n* **Snackbar** — an `urgent` prop that switches the live region to `role=\"alert\"` ([#624](https://github.com/vuetifyjs/0/pull/624))\n* **Breadcrumbs** — collapsed-item count and `aria-expanded` on the expander ([#634](https://github.com/vuetifyjs/0/pull/634))\n* **Button, Toggle, Pagination** — Enter/Space activation on non-native `as` elements ([#645](https://github.com/vuetifyjs/0/pull/645))\n* **Treeview** — `aria-current` on the active item ([#626](https://github.com/vuetifyjs/0/pull/626)); **Splitter** — a localized handle label ([#627](https://github.com/vuetifyjs/0/pull/627))\n\n### Performance\n\n`createRegistry` sits underneath most of v0, so it got the attention. Reactive `keys`/`values`/`entries` are memoized behind a version signal ([#540](https://github.com/vuetifyjs/0/pull/540)), field-only upserts skip version notification ([#542](https://github.com/vuetifyjs/0/pull/542)), and the hot paths dropped `indexOf` and a `values()` copy ([#531](https://github.com/vuetifyjs/0/pull/531)). `createDataGrid` skips the row reorder on sort when no manual order is in effect ([#555](https://github.com/vuetifyjs/0/pull/555)), and baseline benchmarks landed on `createGroup`, `createSingle`, and `createStep` so future regressions show up ([#604](https://github.com/vuetifyjs/0/pull/604)), alongside a bundle-size gate on the key exports ([#605](https://github.com/vuetifyjs/0/pull/605)) and an SSR hydration smoke-test harness ([#607](https://github.com/vuetifyjs/0/pull/607)).\n\n### Correctness\n\nFour fixes to know about if you were running an RC:\n\n* `useResizeObserver` was silently ignoring border-box measurements ([#725](https://github.com/vuetifyjs/0/pull/725))\n* `isArray` and `isObject` now narrow correctly against element types, tuples, and `readonly` ([#745](https://github.com/vuetifyjs/0/pull/745), [#746](https://github.com/vuetifyjs/0/pull/746))\n* `useStack` leaked its singleton across SSR requests ([#569](https://github.com/vuetifyjs/0/pull/569))\n* A security review produced a guard sweep against prototype pollution and CSS injection ([#489](https://github.com/vuetifyjs/0/pull/489))\n\nTwo structural changes landed alongside. **`@vuetify/paper` came out of the publish path** ([#671](https://github.com/vuetifyjs/0/pull/671)) and out of the consumer-facing docs ([#672](https://github.com/vuetifyjs/0/pull/672)). And the release pipeline now blocks prereleases from claiming the `latest` dist-tag ([#665](https://github.com/vuetifyjs/0/pull/665)) and makes publishes idempotent ([#696](https://github.com/vuetifyjs/0/pull/696)) — both fallout from the tagging problems earlier in the year.\n\nTwo patches followed: **v1.0.1** (July 24) and **v1.0.2** (July 29).\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n**Details:**\n\n* [Announcing Vuetify0 1.0](/blog/announcing-vuetify0-v1/)\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v0play](https://v0play.vuetifyjs.com)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nNothing was promoted out of labs in July and no new components were added — the last promotions were the seven that landed in May. Our team spent the month on correctness instead, concentrated in three areas: **Shadow DOM**, **defaults inheritance**, and the **select family**.\n\n### New Features\n\nFour features landed on July 27, and all of them **shipped in v3.13.0, not on the v4 line**. On v4 the same commits are merged to `dev` and arrive with [v4.2.0](https://github.com/vuetifyjs/vuetify/milestone/90):\n\n* **[VSelect / VAutocomplete / VCombobox](/components/selects/)** — new events for multi-selection ([#23038](https://github.com/vuetifyjs/vuetify/pull/23038))\n* **[VSkeletonLoader](/components/skeleton-loaders/)** — a `types` prop, and `table-cell` reintroduced ([#23037](https://github.com/vuetifyjs/vuetify/pull/23037)); separately, a `chip-group` type ([`06cbc10`](https://github.com/vuetifyjs/vuetify/commit/06cbc10))\n* **[VBtnGroup](/components/button-groups/)** — a `size` prop aligned with standalone buttons ([`9b46baa`](https://github.com/vuetifyjs/vuetify/commit/9b46baa))\n\n### Bug Fixes\n\n**Shadow DOM.** Components mounted inside an open shadow root resolved focus against the wrong root, breaking keyboard navigation in lists and stealing focus in dialogs. Three fixes closed it ([#23024](https://github.com/vuetifyjs/vuetify/pull/23024), [#23027](https://github.com/vuetifyjs/vuetify/pull/23027), [`8908e7e`](https://github.com/vuetifyjs/vuetify/commit/8908e7e)).\n\n**Defaults.** Two leaks. Parent component config bled into teleported menu and dialog content ([#23016](https://github.com/vuetifyjs/vuetify/pull/23016)), and nested root defaults were dropped by the teleport reset ([#23015](https://github.com/vuetifyjs/vuetify/pull/23015)). Either one gives you a component that styles correctly in isolation and wrongly in place.\n\n**The select family.** Focus behavior, native form submission, and list reliability all got passes. Most of these were long-standing reports rather than v4.1 regressions.\n\n| Component | Fix | Version | PR / commit |\n|------------------------------------|-----------------------------------------------------------|---------|---------------------------------------------------------------------|\n| **locale** | Correctly resolve Kurdish locale to RTL | v4.1.3 | [`4782312`](https://github.com/vuetifyjs/vuetify/commit/4782312) |\n| **VBtn** | No letter-spacing for RTL locales | v4.2.0 | [`3956c08`](https://github.com/vuetifyjs/vuetify/commit/3956c08) |\n| **VOtpInput** | Move focus correctly in RTL mode | v4.1.3 | [`f0145aa`](https://github.com/vuetifyjs/vuetify/commit/f0145aa) |\n| **VSelect/VAutocomplete/VCombobox**| Respect `no-auto-scroll` | v4.1.3 | [`adb2597`](https://github.com/vuetifyjs/vuetify/commit/adb2597) |\n| **VDataTable** | Apply `text-align` to columns with align `start` | v4.1.3 | [`02f5f81`](https://github.com/vuetifyjs/vuetify/commit/02f5f81) |\n| **VDateInput** | Do not fill range on blur | v4.1.4 | [`b7569fe`](https://github.com/vuetifyjs/vuetify/commit/b7569fe) |\n| **rounded** | Translate `2xl`, `3xl`, etc. to classes | v4.1.3 | [`0ea03f4`](https://github.com/vuetifyjs/vuetify/commit/0ea03f4) |\n| **VDateInput** | Derive display format from the date adapter locale | v4.1.3 | [#22976](https://github.com/vuetifyjs/vuetify/pull/22976) |\n| **theme** | `provideTheme` current should use `computedThemes` | v4.1.4 | [#22987](https://github.com/vuetifyjs/vuetify/pull/22987) |\n| **VMenu** | Correct close cascade for nested menus | v4.1.4 | [`5902e09`](https://github.com/vuetifyjs/vuetify/commit/5902e09) |\n| **VMenu** | Correct click-outside detection when content resizes | v4.1.4 | [`007f546`](https://github.com/vuetifyjs/vuetify/commit/007f546) |\n| **VNumberInput** | Accept a non-ASCII minus sign | v4.1.4 | [`6063d7a`](https://github.com/vuetifyjs/vuetify/commit/6063d7a) |\n| **VNumberInput** | Keep all decimals when `precision` is null | v4.1.4 | [`87b0e57`](https://github.com/vuetifyjs/vuetify/commit/87b0e57) |\n| **date** | Correct locale on `StringDateAdapter` | v4.1.4 | [`83ed8d4`](https://github.com/vuetifyjs/vuetify/commit/83ed8d4) |\n| **VOverlay** | Skip click-outside DOM scan for inactive overlays | v4.1.5 | [`74e297f`](https://github.com/vuetifyjs/vuetify/commit/74e297f) |\n| **VTreeview** | More aria attributes and correct keyboard navigation | v4.2.0 | [#22903](https://github.com/vuetifyjs/vuetify/pull/22903) |\n| **VDataTable** | Hide empty header cell in mobile view | v4.1.5 | [`a759055`](https://github.com/vuetifyjs/vuetify/commit/a759055) |\n| **VCalendar** | Prevent next-day hours when customizing intervals | v4.1.5 | [`4e36892`](https://github.com/vuetifyjs/vuetify/commit/4e36892) |\n| **VSwitch** | Resolve inset thumb scale ratios in Sass | v4.1.5 | [`86fcfaa`](https://github.com/vuetifyjs/vuetify/commit/86fcfaa) |\n| **types** | Preserve `RouteLocationRaw` in emitted declarations | v4.1.5 | [`d4d7b4b`](https://github.com/vuetifyjs/vuetify/commit/d4d7b4b) |\n| **VMaskInput** | Preserve value when pasting over a selection | v4.1.5 | [#23003](https://github.com/vuetifyjs/vuetify/pull/23003) |\n| **VImg** | Handle image ref deferred by a Nuxt page transition | v4.1.6 | [`0f72baf`](https://github.com/vuetifyjs/vuetify/commit/0f72baf) |\n| **VList** | Keyboard navigation inside an open Shadow DOM | v4.1.6 | [#23024](https://github.com/vuetifyjs/vuetify/pull/23024) |\n| **VDialog/VField** | Correct focus resolution in Shadow DOM | v4.1.6 | [#23027](https://github.com/vuetifyjs/vuetify/pull/23027) |\n| **VDialog** | Defer auto-focus until the inner field is focusable | v4.1.6 | [`8908e7e`](https://github.com/vuetifyjs/vuetify/commit/8908e7e) |\n| **VSelect** | Only focus the first item when opened with the keyboard | v4.1.6 | [`4bb9151`](https://github.com/vuetifyjs/vuetify/commit/4bb9151) |\n| **VSelect** | Release focus on the first click outside | v4.1.6 | [`ff966d2`](https://github.com/vuetifyjs/vuetify/commit/ff966d2) |\n| **defaults** | Keep nested root defaults through teleport reset | v4.1.6 | [#23015](https://github.com/vuetifyjs/vuetify/pull/23015) |\n| **VDataTableVirtual** | Avoid scroll glitches with expanded rows | v4.1.6 | [#23014](https://github.com/vuetifyjs/vuetify/pull/23014) |\n| **VVirtualScroll** | Trim leading items when appending to the bottom | v4.1.6 | [`1ac7cb7`](https://github.com/vuetifyjs/vuetify/commit/1ac7cb7) |\n| **VVirtualScroll** | Call `calculateVisibleItems` after `updateOffsets` | v4.1.6 | [#22938](https://github.com/vuetifyjs/vuetify/pull/22938) |\n| **VOverlay** | Handle `transition` prop correctly for target assignment | v4.1.6 | [#22190](https://github.com/vuetifyjs/vuetify/pull/22190) |\n| **defaults** | Avoid parent config leaking into menu and dialog content | v4.2.0 | [#23016](https://github.com/vuetifyjs/vuetify/pull/23016) |\n| **VStepperWindow/VTouch** | Only remove touch handlers when not null | v4.1.7 | [#23030](https://github.com/vuetifyjs/vuetify/pull/23030) |\n| **VStepperVerticalItem** | Unnecessary error color on step content | v4.1.7 | [`fce4eaa`](https://github.com/vuetifyjs/vuetify/commit/fce4eaa) |\n| **v-touch** | React to binding value changes | v4.2.0 | [`937a471`](https://github.com/vuetifyjs/vuetify/commit/937a471) |\n| **v-tooltip** | Correctly handle `true` and `undefined` | v4.2.0 | [`cef88bf`](https://github.com/vuetifyjs/vuetify/commit/cef88bf) |\n| **VAutocomplete/VCombobox** | Camelize item props for prepend icon and avatar | v4.1.7 | [`8a20623`](https://github.com/vuetifyjs/vuetify/commit/8a20623) |\n| **elevation** | `hover-elevation` should not require `elevation` | v4.1.7 | [`378f593`](https://github.com/vuetifyjs/vuetify/commit/378f593) |\n| **VProgressLinear/VIconBtn** | Avoid Vite v8 dropping transition timing | v4.1.7 | [`f23af8a`](https://github.com/vuetifyjs/vuetify/commit/f23af8a) |\n| **VTextField** | Respect `hide-details=\"auto\"` with a counter | v4.1.7 | [#22620](https://github.com/vuetifyjs/vuetify/pull/22620) |\n\nRows marked **v4.2.0** are merged to `dev` and had not shipped on the v4 line by the end of July. One further fix — `VNumberInput` stripping the grouping separator before parsing ([`94e94a9`](https://github.com/vuetifyjs/vuetify/commit/94e94a9)) — landed on July 31 but had not been released when the month closed.\n\n### In Development\n\nThe [v4.2.0 milestone](https://github.com/vuetifyjs/vuetify/milestone/90) is targeting **September 1st** and carries the feature work that slipped past v4.1. The queue is largely unchanged since June, now with a date attached:\n\n* **[VSlider](/components/sliders/)** — a `pill` variant to match MD3 ([#22699](https://github.com/vuetifyjs/vuetify/pull/22699))\n* **[VMaskInput](/components/mask-inputs/)** — multiple and dynamic mask resolution ([#22501](https://github.com/vuetifyjs/vuetify/pull/22501))\n* **[VTimePicker](/components/time-pickers/)** — keyboard controls ([#22604](https://github.com/vuetifyjs/vuetify/pull/22604))\n* **[VBtn / VIconBtn](/components/buttons/)** — sizes, spacing, and focus aligned with MD3 ([#21831](https://github.com/vuetifyjs/vuetify/pull/21831))\n* **[VDatePicker](/components/date-pickers/)** — week selection ([#20867](https://github.com/vuetifyjs/vuetify/pull/20867))\n* **[VField](/components/text-fields/)** — a `border` prop ([#19819](https://github.com/vuetifyjs/vuetify/pull/19819))\n\nOpened in July and still open at the end of it: persistent menus for the select family ([#23008](https://github.com/vuetifyjs/vuetify/pull/23008)) and a `close-on-input-click` prop for VAutocomplete and VCombobox ([#23023](https://github.com/vuetifyjs/vuetify/pull/23023)).\n\n---\n\n## Tooling Updates { #ecosystem-tooling }\n\n### Vuetify CLI\n\n\n\n
\n\nThe [CLI](https://github.com/vuetifyjs/cli) shipped four releases in July and gained a command. **`vuetify release-notes`** ([#23](https://github.com/vuetifyjs/cli/pull/23)) prints release notes for Vuetify or Vuetify0 from the terminal:\n\n```bash\nnpx vuetify release-notes # latest Vuetify release\nnpx vuetify release-notes v0 # latest Vuetify0 release\nnpx vuetify release-notes --version v4.1.7\n```\n\nIt reads the GitHub Releases API directly — no new dependencies — and links to both the docs release-notes page and the GitHub release. It shipped in **v1.2.0-beta.3** and went stable in **v1.2.0** on July 15.\n\n`vuetify analyze` got a correctness fix ([#26](https://github.com/vuetifyjs/cli/pull/26)). Lowercase `create*` factories such as `createSelection` and `createRegistry` were classified as utilities rather than composables, because the shipped import map has no `composables` key — roughly thirty core v0 composables were mislabeled. The Nuxt templates now set `prefixComposables` to avoid a naming collision introduced upstream ([#25](https://github.com/vuetifyjs/cli/issues/25)), and feature application was fixed when converting a project to JavaScript ([#19](https://github.com/vuetifyjs/cli/pull/19)).\n\n**Releases:** v1.2.0-beta.2 (July 1) · v1.2.0-beta.3 (July 15) · **v1.2.0** (July 15) · v1.2.1 (July 22)\n\n### pkg-diff\n\n[pkg-diff](https://github.com/vuetifyjs/pkg-diff), the in-browser NPM package diffing tool that came out of June's security work, **went live** in July at [pkg-diff.vuetifyjs.com](https://pkg-diff.vuetifyjs.com/). All fifteen of the month's commits went into it: the Coolify deploy, accessible themes, a version dropdown grouped by dist-tag, an `av=prev` URL parameter, and **a CLI**, so an agent can diff two package versions without a browser. A matching link from the Vuetify CLI's `release-notes` output was merged on July 25, after v1.2.1, so it was still unreleased when the month closed.\n\n### Vuetify MCP\n\nThe [MCP server](https://github.com/vuetifyjs/mcp) shipped **v0.8.0** on July 22, resyncing its published composable and component inventory against v0 1.0 ([#26](https://github.com/vuetifyjs/mcp/pull/26), [#27](https://github.com/vuetifyjs/mcp/pull/27)). Upgrade if you use it for v0 lookups — anything before 0.8.0 predates the 1.0 surface.\n\n### Nuxt Module\n\nThe [Nuxt module](https://github.com/vuetifyjs/nuxt-module) reached **v1.0.0-rc.3** on July 20, adding **selective imports and prefixing for composables** — which you want when Vuetify's composable names collide with your own auto-imports. rc.2 shipped earlier in the month.\n\n### Backend Fixes\n\nNot user-facing, but worth recording. **Every non-happy-path OAuth callback was returning a 500.** The first fix swapped a throwing `schema.parse()` for `safeParse` ([#103](https://github.com/vuetifyjs/api/pull/103)), which was not the cause. The cause was a custom Hono `compose()` that never assigned a handler's returned `Response` to the context, so every early return was discarded ([#104](https://github.com/vuetifyjs/api/pull/104)). The docs AI assistant now escalates to the full documentation index instead of refusing off an index-only view ([#105](https://github.com/vuetifyjs/api/pull/105)). And the [issues app](https://issues.vuetifyjs.com/) verifies your Vuetify One session on boot, so a valid login stops showing as logged-out ([#79](https://github.com/vuetifyjs/issues/pull/79)).\n\n---\n\n## July 2026 Changelog\n\nThe following section provides an overview of the changes made in July 2026 across the Vuetify framework.\n\n**Key Improvements:**\n\n* **Shadow DOM**: keyboard navigation and focus resolution corrected for lists, dialogs, and fields\n* **Defaults**: two inheritance leaks closed around teleported menu and dialog content\n* **Select family**: multi-selection events, focus behavior, and native form submission\n* **Virtual scrolling**: item trimming, visible-item recalculation, and expanded-row scroll glitches\n* **RTL and locale**: Kurdish RTL resolution, VBtn letter-spacing, VOtpInput focus direction\n* **Accessibility**: VTreeview aria attributes and keyboard navigation; VDataTable `aria-sort` and selection labels on v3\n\n**Expand** this section to see the detailed changelog for July 2026:\n\n
\n\n### :rocket: Features\n\nAll four component features below shipped in **v3.13.0**; the v4 equivalents are merged to `dev` for v4.2.0.\n\n* **VSelect/VAutocomplete/VCombobox:** new events for multi-selection ([#23038](https://github.com/vuetifyjs/vuetify/pull/23038)) ([45079af](https://github.com/vuetifyjs/vuetify/commit/45079af))\n* **VSkeletonLoader:** add `types` prop & reintroduce `table-cell` ([#23037](https://github.com/vuetifyjs/vuetify/pull/23037)) ([b5d380b](https://github.com/vuetifyjs/vuetify/commit/b5d380b))\n* **VSkeletonLoader:** add `chip-group` type ([06cbc10](https://github.com/vuetifyjs/vuetify/commit/06cbc10))\n* **VBtnGroup:** add `size` prop to align with standalone buttons ([9b46baa](https://github.com/vuetifyjs/vuetify/commit/9b46baa))\n* **VDataTable:** add mobile header slot — v3.13.0 ([#21429](https://github.com/vuetifyjs/vuetify/pull/21429))\n* **VDataTable:** add `aria-sort` to sortable headers — v3.13.0 ([25c0f0f](https://github.com/vuetifyjs/vuetify/commit/25c0f0f))\n* **VDataTable:** add aria-labels for selection controls — v3.13.0 ([db186fc](https://github.com/vuetifyjs/vuetify/commit/db186fc))\n\n### :wrench: Bug Fixes\n\n* **VNumberInput:** strip grouping separator before parsing number ([94e94a9](https://github.com/vuetifyjs/vuetify/commit/94e94a9))\n* **VProgressLinear,VIconBtn:** avoid Vite v8 dropping transition timing ([f23af8a](https://github.com/vuetifyjs/vuetify/commit/f23af8a))\n* **VTextField:** respect `hide-details=\"auto\"` with counter ([#22620](https://github.com/vuetifyjs/vuetify/pull/22620))\n* **elevation:** `hover-elevation` prop should not require `elevation` ([378f593](https://github.com/vuetifyjs/vuetify/commit/378f593))\n* **VAutocomplete,VCombobox:** camelize item props for prepend icon and avatar ([8a20623](https://github.com/vuetifyjs/vuetify/commit/8a20623))\n* **v-tooltip:** correctly handle `true` and `undefined` ([cef88bf](https://github.com/vuetifyjs/vuetify/commit/cef88bf))\n* **defaults:** avoid parent config leaking into menu and dialog content ([#23016](https://github.com/vuetifyjs/vuetify/pull/23016))\n* **VStepperWindow/VTouch:** only remove touchHandlers when not null ([#23030](https://github.com/vuetifyjs/vuetify/pull/23030))\n* **VStepperVerticalItem:** unnecessary error color to step content ([fce4eaa](https://github.com/vuetifyjs/vuetify/commit/fce4eaa))\n* **v-touch:** react to binding value changes ([937a471](https://github.com/vuetifyjs/vuetify/commit/937a471))\n* **VSelect/VAutocomplete/VCombobox:** reliable list with selection ([#23029](https://github.com/vuetifyjs/vuetify/pull/23029))\n* **VListItem/VChip/VDatePickerHeader:** only attach click when interactive ([#23028](https://github.com/vuetifyjs/vuetify/pull/23028))\n* **VDialog/VField:** correct focus resolution in Shadow DOM ([#23027](https://github.com/vuetifyjs/vuetify/pull/23027))\n* **VDialog:** defer auto-focus until the inner field is focusable ([8908e7e](https://github.com/vuetifyjs/vuetify/commit/8908e7e))\n* **VList:** resolve keyboard navigation inside an open Shadow DOM ([#23024](https://github.com/vuetifyjs/vuetify/pull/23024))\n* **VAutocomplete,VCombobox,VSelect:** improvements for native form submissions ([#23022](https://github.com/vuetifyjs/vuetify/pull/23022))\n* **VSelect:** release focus on first click outside ([ff966d2](https://github.com/vuetifyjs/vuetify/commit/ff966d2))\n* **VSelect:** only focus first item when menu is opened with keyboard ([4bb9151](https://github.com/vuetifyjs/vuetify/commit/4bb9151))\n* **defaults:** keep nested root defaults through teleport reset ([#23015](https://github.com/vuetifyjs/vuetify/pull/23015))\n* **VDataTableVirtual:** avoid scroll glitches with expanded rows ([#23014](https://github.com/vuetifyjs/vuetify/pull/23014))\n* **VVirtualScroll:** trim leading items when appending to bottom ([1ac7cb7](https://github.com/vuetifyjs/vuetify/commit/1ac7cb7))\n* **VVirtualScroll:** call calculateVisibleItems after updateOffsets ([#22938](https://github.com/vuetifyjs/vuetify/pull/22938))\n* **VOverlay:** handle transition prop correctly for target assignment ([#22190](https://github.com/vuetifyjs/vuetify/pull/22190))\n* **VImg:** handle image ref deferred by Nuxt page transition ([0f72baf](https://github.com/vuetifyjs/vuetify/commit/0f72baf))\n* **VMaskInput:** preserve value when pasting over a selection ([#23003](https://github.com/vuetifyjs/vuetify/pull/23003))\n* **VCalendar:** add missing interval props ([#23000](https://github.com/vuetifyjs/vuetify/pull/23000))\n* **VCalendar:** prevent next day hours when customizing intervals ([4e36892](https://github.com/vuetifyjs/vuetify/commit/4e36892))\n* **VTreeview:** make sure toRaw is used on children ([#22640](https://github.com/vuetifyjs/vuetify/pull/22640))\n* **VTreeview:** more aria attributes and correct keyboard navigation ([#22903](https://github.com/vuetifyjs/vuetify/pull/22903))\n* **types:** preserve RouteLocationRaw in emitted declarations ([d4d7b4b](https://github.com/vuetifyjs/vuetify/commit/d4d7b4b))\n* **VSwitch:** resolve inset thumb scale ratios in Sass ([86fcfaa](https://github.com/vuetifyjs/vuetify/commit/86fcfaa))\n* **VDataTable:** hide empty header cell in mobile view ([a759055](https://github.com/vuetifyjs/vuetify/commit/a759055))\n* **VOverlay:** skip click-outside DOM scan for inactive overlays ([74e297f](https://github.com/vuetifyjs/vuetify/commit/74e297f))\n* **VMenu:** correct close cascade for nested menus ([5902e09](https://github.com/vuetifyjs/vuetify/commit/5902e09))\n* **VMenu:** correct click-outside detection when content resizes ([007f546](https://github.com/vuetifyjs/vuetify/commit/007f546))\n* **VNumberInput:** accept non-ASCII minus sign ([6063d7a](https://github.com/vuetifyjs/vuetify/commit/6063d7a))\n* **VNumberInput:** keep all decimals when precision is null ([87b0e57](https://github.com/vuetifyjs/vuetify/commit/87b0e57))\n* **date:** correct locale on StringDateAdapter ([83ed8d4](https://github.com/vuetifyjs/vuetify/commit/83ed8d4))\n* **theme:** provideTheme current should use computedThemes ([#22987](https://github.com/vuetifyjs/vuetify/pull/22987))\n* **VDateInput:** derive display format from date adapter locale ([#22976](https://github.com/vuetifyjs/vuetify/pull/22976))\n* **VDateInput:** do not fill range on blur ([b7569fe](https://github.com/vuetifyjs/vuetify/commit/b7569fe))\n* **VAutocomplete:** don't trigger keydown listener during IME composition ([#22974](https://github.com/vuetifyjs/vuetify/pull/22974))\n* **VDataTable:** keep rows visible after hiding a column with a custom filter ([#22971](https://github.com/vuetifyjs/vuetify/pull/22971))\n* **VSelect/VAutocomplete/VCombobox:** respect `no-auto-scroll` ([adb2597](https://github.com/vuetifyjs/vuetify/commit/adb2597))\n* **rounded:** translate `2xl`, `3xl`, etc. to classes ([0ea03f4](https://github.com/vuetifyjs/vuetify/commit/0ea03f4))\n* **VOtpInput:** move focus correctly in RTL mode ([f0145aa](https://github.com/vuetifyjs/vuetify/commit/f0145aa))\n* **VDataTable:** apply text-align to columns with align 'start' ([02f5f81](https://github.com/vuetifyjs/vuetify/commit/02f5f81))\n* **locale:** correctly resolve Kurdish locale to RTL ([4782312](https://github.com/vuetifyjs/vuetify/commit/4782312))\n* **VBtn:** no letter-spacing for RTL locales ([3956c08](https://github.com/vuetifyjs/vuetify/commit/3956c08))\n\n### :books: Documentation\n\n* Add the [Vuetify0 1.0 announcement](/blog/announcing-vuetify0-v1/) ([#23025](https://github.com/vuetifyjs/vuetify/pull/23025)) and the [RC announcement](/blog/announcing-vuetify0-rc/) ([#22981](https://github.com/vuetifyjs/vuetify/pull/22981))\n* Update the roadmap and announce v3.13.0 as LTS ([8306637](https://github.com/vuetifyjs/vuetify/commit/8306637))\n* Trim outdated content and redirect LTS to the root domain ([e3fb29d](https://github.com/vuetifyjs/vuetify/commit/e3fb29d))\n* Add `/.well-known/security.txt` ([#23010](https://github.com/vuetifyjs/vuetify/pull/23010))\n* New VMenu examples ([#19710](https://github.com/vuetifyjs/vuetify/pull/19710)), VTreeview footer slot example, VDataTable fixed-footer example\n* Add a new 'silver' sponsor tier\n\n
\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nAugust turns back to features. The [v4.2.0 milestone](https://github.com/vuetifyjs/vuetify/milestone/90) is dated **September 1st** — the MD3 button alignment, VSlider's `pill` variant, VTimePicker keyboard controls, and VMaskInput's dynamic masks are all queued against it. Expect the v4.1 patch line to keep running underneath it.\n\nWith Vuetify0 1.0 out and its API locked under semver for the whole 1.x line, the framework's **theme**, **locale**, and **date** migrations onto v0 have a target that will not move. Those branches have been waiting since spring. They now have something stable to land against.\n\n* [Vuetify 3.13](/getting-started/release-notes/?version=v3.13.0) is the last v3 minor — if you are still on v3, the [LTS clock](/introduction/long-term-support/) runs to July 27th, 2027\n* [Vuetify0 1.0](/blog/announcing-vuetify0-v1/) is stable and untagged — `pnpm add @vuetify/v0`\n* [pkg-diff](https://pkg-diff.vuetifyjs.com/) is live, with a CLI if you drive it from an agent\n\n::: warning\n\n**Vuetify needs your support.** Every contribution funds ongoing work on the framework and the ecosystem tools around it. If your team relies on Vuetify, point your organization at [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider).\n\n:::\n\nVuetify is and always will be free and open source. If your team builds on the framework, Vuetify0, the MCP server, the CLI, the Nuxt module, or the design systems coming behind them, [Vuetify One](https://one.vuetifyjs.com/) and [GitHub Sponsors](https://github.com/sponsors/johnleider) are the most direct ways to help.\n\nNearly four years of Vuetify 3 ended this month, and a lot of you have been here for all of it. Thank you to everyone who filed an issue, opened a PR, or tested a release candidate in July.\n\nSee you in August!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://community.vuetifyjs.com), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/june-2025-update.md":"---\nlayout: blog\nmeta:\n title: June 2025 Update\n description: June delivered progress on the VHotkey component, VCommandPalette development, component stability, and developer-experience improvements across Vuetify.\n keywords: Vuetify June 2025, VHotkey, VCommandPalette, Vuetify 0, component stability, developer experience\n---\n\n\n\n# June 2025 Update\n\nThis month is packed full of exciting updates and progress across the Vuetify ecosystem.\n\n---\n\n🖊️ John Leider • 📅 July 7th, 2025\n\n\n\n---\n\n## Powering Forward\n\nJune delivered substantial progress on developer experience enhancements, component stability improvements, and platform ecosystem expansion. Our team focused on shipping major new composables, refining core components, and strengthening the development workflow with significant updates to hotkey management, command palette functionality, and comprehensive bug fixes across the framework.\n\nWe also hosted an engaging Q&A session with [me](https://github.com/johnleider/), where our community shared their questions and valuable insights. We were thrilled to connect directly with our users and gather feedback that will help shape the future direction of the framework. Don't worry if you missed this session, we have exciting webinars planned for the coming months as well!\n\n::: success\n\nCool example of the month: [VBites](https://play.vuetifyjs.com/playgrounds/7Ksitg) by [Jacek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n* [Spotlight: Vuetify Studio](#spotlight-vuetify-studio)\n* [Framework](#framework)\n * [VHotkey Component and useHotkey Composable](#vhotkey-component-and-usehotkey-composable)\n * [New Component Development](#new-component-development)\n* [Ecosystem Updates](#ecosystem-updates)\n * [Vuetify Documentation](#vuetify-documentation)\n * [Vuetify One](#vuetify-one)\n * [Vuetify Bin](#vuetify-bin)\n* [Q&A and Upcoming Webinars](#qa-and-upcoming-webinars)\n* [Sneak Peek: Vuetify 0](#sneak-peek-vuetify-0)\n* [June 2025 Changelog](#june-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nJune continued our steady release cadence with several updates addressing bugs and introducing enhancements. These releases focused on component stability and developer experience improvements. View the complete list of changes in the [Full Changelog](#june-2025-changelog).\n\n![Hero image for June release notes](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/june-2025-hero-asdfasdf.png \"June release notes hero image\"){ height=200 }\n\n**Details:**\n\n* [v3.8.8](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.8.8)\n* [v3.8.9](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.8.9)\n* [v3.8.10](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.8.10)\n* [v3.8.11](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.8.11)\n* [v3.9.0-beta.0](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.9.0-beta.0)\n* [v3.9.0-beta.1](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.9.0-beta.1)\n\n---\n\n## Spotlight: Vuetify Studio { #spotlight-vuetify-studio }\n\n**Did you know?** [Vuetify Studio](https://studio.vuetifyjs.com/) is our comprehensive development platform that often goes unnoticed by the broader community. Studio provides a complete ecosystem for Vuetify development, including:\n\n* **Interactive Component Playground**: Test and experiment with components in real-time\n* **Code Generation Tools**: Quickly prototype layouts and component configurations\n* **Collaborative Development**: Share and iterate on designs with team members\n* **Integration Testing**: Validate component behavior across different scenarios\n\n\n\nWe're continuously expanding Studio's capabilities to support modern development workflows, and we encourage the community to explore how Studio can accelerate your Vuetify development process.\n\n**Details:**\n\n* [Vuetify Studio](https://studio.vuetifyjs.com/)\n\n## Framework\n\nThere are multiple new components in development with some of that functionality reaching Labs this month. Below are some of the highlights.\n\n### VHotkey Component and useHotkey Composable\n\nThis month marked a significant milestone with the completion and pre-release of our [VHotkey component](https://vuetifyjs.com/en/components/hotkeys/) and `useHotkey` composable system. After extensive development and iteration, these tools are now available in Labs for testing and feedback as we work toward their stable release.\n\n**VHotkey Component Features:**\n\n* **Inline Mode**: Use the component inline with text and it automatically inherits font size and baseline styling\n* **New Variants**: Introduction of the Combined Variant that displays hotkeys in a Chip with Label format\n* **Consolidated Parser**: VHotkey and useHotkey now share the same parsing logic and key alias mapping for consistent behavior\n* **Platform Awareness**: New `platform` prop allows forcing the component to display Mac vs PC hotkey conventions\n* **Enhanced Customization**: Added `prefix` and `postfix` props for better integration flexibility\n\n![Hero image for VHotkey component](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/hotkeys.png \"VHotkey component hero image\"){ height=220 }\n\n**useHotkey Composable Features:**\n\n* **Dynamic Options**: Options accept `maybeRefs`, enabling dynamic hotkey configuration changes\n* **Shared Logic**: Unified codebase with VHotkey component ensures consistency\n* **Comprehensive Documentation**: Detailed examples and usage patterns available\n\nThis functionality serves as a critical building block for the upcoming VCommandPalette component, providing developers with robust keyboard shortcut management that works seamlessly across different platforms and use cases. While currently in Labs, we encourage the community to test these components and provide feedback as we work toward their stable release.\n\n**Details:**\n\n* [VHotkey Component Documentation](https://vuetifyjs.com/en/components/hotkeys/)\n* [useHotkey Composable Documentation](https://vuetifyjs.com/en/features/hotkey/)\n\n### New Component Development\n\nWe have several new components in development that we are confident will enhance the Vuetify ecosystem and provide additional functionality for developers.\n\n**VMaskInput**: After vanishing in v2, masking is back in the library with enhanced input capabilities and new features.\n\n![Hero gif for VMaskInput component](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/vmaskinput.gif \"VMaskInput component hero gif\"){ height=280 }\n\n**VEditor**: Early development phase for a new editor component, expanding Vuetify's content creation capabilities.\n\n![Hero image for VEditor component](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/veditor.png \"VEditor component hero image\"){ height=220 }\n\n**VVideo**: Documentation improvements, Sass variable extraction, and volume component refinement.\n\n\n\n**VCommandPalette**: Ongoing development for a powerful command palette component, designed to enhance user interaction and streamline application workflows.{ height=150 }\n\n![Hero image for VCommandPalette component](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/vcommandpalette.png \"VCommandPalette component hero image\"){ height=370 }\n\n**Details:**\n\n* [VMaskInput P.R.](https://github.com/vuetifyjs/vuetify/pull/21519)\n* [VEditor P.R.](https://vuetifyjs.com/en/components/editor/)\n* [VVideo P.R.](https://github.com/vuetifyjs/vuetify/pull/21460)\n\n## Ecosystem Updates\n\nMultiple advancements were made across the Vuetify ecosystem to improve developer experience and platform capabilities.\n\n### Vuetify Documentation\n\n[Vuetify One subscribers](https://vuetifyjs.com/en/?one=subscribe) can now copy documentation pages as Markdown. This feature allows you to easily extract and reuse documentation content in your projects, enhancing collaboration and knowledge sharing within teams.\n\n![Vuetify documentation copy page as markdown](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/copy-page-as-markdown.png \"Vuetify documentation copy page as markdown\"){ height=220 }\n\nAll users can now save favorite search results in the Vuetify documentation. Just press `ctrl+k` or `cmd+k` to open the search bar, type your query, and click the star icon next to the search result you want to save. This feature allows you to quickly access frequently used documentation pages, improving your workflow and efficiency.\n\n![Vuetify documentation search favorites](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/docs-favorites.png \"Vuetify documentation search favorites\"){ height=300 }\n\n**Details:**\n\n* [Copy as Markdown Commit](https://github.com/vuetifyjs/vuetify/commit/dfd8eea1ebd28e6fde702c19b15a33af3620daa4)\n* [Save Search Favorites Commit](https://github.com/vuetifyjs/vuetify/commit/14d5e63f2760db84257f324cfa298a8ce9905903)\n\n### Vuetify One\n\nUpdated default interface to include links to various Vuetify ecosystem sites, making it easier for users to navigate and access resources.\n\n![Vuetify One Platform interface](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/one-quicklinks.png \"Vuetify One Platform interface\"){ height=300 }\n\n### Vuetify Bin\n\nBins now support **locking**. This new functionality prevents unwanted changes to shared code examples, ensuring that your collaborative work remains intact and consistent.\n\n![Vuetify Bin locking functionality](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/lock-bin.png \"Vuetify Bin locking functionality\"){ height=250 }\n\nThis feature will soon propagate to the [Vuetify Playground](https://play.vuetifyjs.com/) as well as [Vuetify Studio](https://studio.vuetifyjs.com/).\n\nIt's also now possible to access Bins saved while having an active Vuetify One subscription.\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n\n## Q&A and Upcoming Webinars { #qa-and-upcoming-webinars }\n\nJune featured successful community Q&A sessions that provided direct interaction between our core team and the developer community. The feedback and engagement we received were invaluable in shaping our development priorities and understanding real-world usage patterns.\n\n**Missed the Q&A Sessions?** Don't worry! We're planning a comprehensive webinar series launching in July. If you have valuable feedback, suggestions, or questions you'd like to see addressed, keep an eye out for our upcoming webinar announcements. These sessions will provide deep dives into Vuetify best practices, new feature demonstrations, and direct access to core team expertise.\n\nWe encourage community members to [share their input](https://community.vuetifyjs.com/) and help us make these educational sessions as valuable as possible for everyone.\n\n## Sneak Peek: Vuetify 0 { #sneak-peek-vuetify-0 }\n\n\n\nWe're excited to share an early glimpse into **Vuetify 0** (internally known as v0), our upcoming entry into the unstyled component and composable ecosystem. Building on our experience with Vuetify's component library, we're developing a new approach that delivers the same functionality and developer experience without built-in styling.\n\n**What This Means**: While unstyled components are certainly part of this initiative, Vuetify 0 represents something much more significant - we're publicly releasing our internal composables and framework building tooling. This includes the foundational utilities, patterns, and architectural components that power Vuetify itself, giving developers access to the same building blocks we use internally to create robust UI frameworks:\n\n```ts\nimport { useGroup } from '@vuetify/0'\nimport type { GroupItem, GroupTicket, GroupContext, GroupOptions } from '@vuetify/0'\n\ninterface StepItem extends GroupItem {\n title: string\n description?: string\n}\n\ninterface StepTicket extends GroupTicket {\n step: number\n}\n\ninterface StepOptions extends Omit {}\n\ninterface StepContext extends GroupContext {\n first: () => void\n last: () => void\n next: () => void\n prev: () => void\n step: (count: number) => void\n}\n\nconst options: StepOptions = {\n itemKey: 'step',\n itemValue: 'value',\n}\n\nexport function useStep (\n namespace: string,\n options?: StepOptions,\n) {\n const [\n useGroupContext,\n provideGroupContext,\n group,\n ] = useGroup(namespace, options)\n\n function first () { ... }\n function last () { ... }\n function next () { ... }\n function prev () { ... }\n function step (count: number) { ... }\n\n const context = {\n ...group,\n first,\n last,\n next\n prev,\n step,\n } as T\n\n return [\n useGroupContext,\n provideGroupContext,\n context,\n ]\n}\n```\n\nThis project is in early development as we explore the best path forward for providing developers with powerful, accessible, and feature-complete building blocks for custom implementations. We're taking time to ensure we deliver genuine value while maintaining the quality standards you expect from Vuetify.\n\nWe'll share more details as development progresses and look forward to community feedback on this new direction.\n\n## June 2025 Changelog\n\nExpand this section to see the detailed changelog for June 2025, including bug fixes and enhancements.\n\n
\n\n### :rocket: Features\n\n* **VDatePicker:** Disable months and years if not allowed ([#21466](https://github.com/vuetifyjs/vuetify/issues/21466))\n\n### :wrench: Bug Fixes\n\n* **date:** Keep `createDateRange` internal ([#21531](https://github.com/vuetifyjs/vuetify/issues/21531))\n* **date:** Week number for DST ([#21378](https://github.com/vuetifyjs/vuetify/issues/21378))\n* **icons:** Add missing aliases in presets ([#21521](https://github.com/vuetifyjs/vuetify/issues/21521))\n* **VBtn:** Allow text values for letter-spacing Sass variable ([#21602](https://github.com/vuetifyjs/vuetify/issues/21602))\n* **VBtn:** Correct letter-spacing compensation for RTL ([#21574](https://github.com/vuetifyjs/vuetify/issues/21574))\n* **VBtnToggle:** Buttons should be accessible despite overflow ([#21577](https://github.com/vuetifyjs/vuetify/issues/21577))\n* **VCarousel:** Avoid missing progress bar ([#21586](https://github.com/vuetifyjs/vuetify/issues/21586))\n* **VChip:** Disable close button of disabled chip ([#21512](https://github.com/vuetifyjs/vuetify/issues/21512))\n* **VDataTable:** Add missing ARIA label on footer text ([#21508](https://github.com/vuetifyjs/vuetify/issues/21508))\n* **VDataTable:** Columns are not keyboard-accessible ([#20939](https://github.com/vuetifyjs/vuetify/issues/20939))\n* **VDataTableColumn:** On tab focus also show sortable icon ([#21540](https://github.com/vuetifyjs/vuetify/issues/21540))\n* **VDatePicker:** Completely hide days not in weekdays array ([#21624](https://github.com/vuetifyjs/vuetify/issues/21624))\n* **VDatePicker:** Fix autoscroll ([#21556](https://github.com/vuetifyjs/vuetify/issues/21556))\n* **VDatePicker:** Reactive month and year ([#21563](https://github.com/vuetifyjs/vuetify/issues/21563))\n* **VFileInput, VFileUpload:** Handle folders drop ([#21495](https://github.com/vuetifyjs/vuetify/issues/21495))\n* **VList:** Set item value to item if primitive ([#21596](https://github.com/vuetifyjs/vuetify/issues/21596))\n* **VListGroup:** Use item value in ID with return-object ([#20595](https://github.com/vuetifyjs/vuetify/issues/20595))\n* **VNumberInput:** Fix endless increment ([#21610](https://github.com/vuetifyjs/vuetify/issues/21610))\n* **VNumberInput:** Focus after click handler executed ([#21217](https://github.com/vuetifyjs/vuetify/issues/21217))\n* **VOtpInput:** Autofocus on intersect ([#21582](https://github.com/vuetifyjs/vuetify/issues/21582))\n* **VOtpInput:** Trim clipboard text and update focus on finish ([#21342](https://github.com/vuetifyjs/vuetify/issues/21342))\n* **VSelect, VAutocomplete, VCombobox:** Open menu on icon click ([#21617](https://github.com/vuetifyjs/vuetify/issues/21617))\n* **VSelect:** Camelize props only for custom use ([#21544](https://github.com/vuetifyjs/vuetify/issues/21544))\n* **VSelect:** Convert all `itemProps` keys to camelCase ([#21518](https://github.com/vuetifyjs/vuetify/issues/21518))\n* **VSelect:** Reuse compact chip label style ([#21517](https://github.com/vuetifyjs/vuetify/issues/21517))\n* **VSlider:** Apply color to slider label ([#21538](https://github.com/vuetifyjs/vuetify/issues/21538))\n* **VSlider:** Correct step rounding for max value ([#21434](https://github.com/vuetifyjs/vuetify/issues/21434))\n* **VSpeedDial:** Avoid position glitch when reopening menu ([#21451](https://github.com/vuetifyjs/vuetify/issues/21451))\n* **VTabs:** Deselect tab when route is no longer active ([#21569](https://github.com/vuetifyjs/vuetify/issues/21569))\n* **VTextField:** Change order of events for checking input focus state ([#21136](https://github.com/vuetifyjs/vuetify/issues/21136))\n* **VWindow, VTabs:** Don't override cursor in VWindowItem ([#21138](https://github.com/vuetifyjs/vuetify/issues/21138))\n\n### :microscope: Code Refactoring\n\n* **VNumberInput:** Replace touch-action with pointercancel ([#21436](https://github.com/vuetifyjs/vuetify/issues/21436))\n\n### :test_tube: Labs\n\n* **VDateInput:** Use common date range parser ([#21450](https://github.com/vuetifyjs/vuetify/issues/21450))\n* **VFileUpload:** File name not passed correctly ([#21541](https://github.com/vuetifyjs/vuetify/issues/21541))\n* **VTimePicker:** Value not changing on wheel ([#21549](https://github.com/vuetifyjs/vuetify/issues/21549))\n* **VTreeview:** Avoid inaccessible items when overflow ([#21443](https://github.com/vuetifyjs/vuetify/issues/21443))\n* **VTreeview:** Stop click bubbling up on expand icon ([#21083](https://github.com/vuetifyjs/vuetify/issues/21083))\n\n
\n\n---\n\n## What's Next { #whats-next }\n\nJuly will focus on finalizing the `VCommandPalette` Labs release, expanding `VMaskInput` and `VEditor` component development, and continuing our documentation excellence initiative. We're also actively working on enhanced MCP integration features that allow you to create and access existing Vuetify Bin, Playground, Studio files; in addition to new Studio platform capabilities.\n\nThe team remains committed to delivering stable, performant components while expanding Vuetify's ecosystem to support modern development patterns. Our focus on developer experience, community feedback integration, and systematic improvement processes continues to drive meaningful progress each month.\n\nWe appreciate the community's continued engagement, feedback, and contributions that make these improvements possible. Keep building amazing applications with Vuetify, and don't forget to explore [Vuetify Studio](https://studio.vuetifyjs.com/) for an enhanced development experience.\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/eXubxyJ), and upcoming webinar series announcements.*\n","packages/docs/src/pages/en/blog/june-2026-update.md":"---\nlayout: blog\nmeta:\n title: June 2026 Update\n description: June started with Vuetify 4.1 stable release, followed by a bunch of regression fixes across two patch releases\n keywords: Vuetify June 2026, Vuetify 4.1 stable, VOverlay, Vuetify0 beta\n---\n\n\n\n# June 2026 Update\n\n**June was a stabilization month.** [v4.1.0](/getting-started/release-notes/?version=v4.1.0) shipped on June 2, with two patch releases after that. Most of the work went into the new overlay location strategy, fixing the placement bugs that only turned up once people were using VDialog in fullscreen mode. June was also when a security incident cost us our Discord server. No package, release, or user data was touched, but the community lost its home for a couple of weeks, and getting it back was a big part of the month. One small thing did come out of the drama — [pkg-diff](https://github.com/vuetifyjs/pkg-diff), a fast in-browser tool for diffing NPM packages (more on that [below](#security-focus)).\n\n![Hero image for June update](https://cdn.vuetifyjs.com/docs/images/blog/june-2026-update/june-hero.png \"June hero image\"){ height=112 }\n\n🖊️ Jacek Czarniecki • 📅 July 8th, 2026\n\n\n\n---\n\n## A month of settling in\n\nWhere May was a feature sprint, June was about making that work solid. **52 commits**, **two dozen fixes**, and **four releases**, with the stable [v4.1.0](/getting-started/release-notes/?version=v4.1.0) at the center. The new viewport/static location strategy that shipped with the minor turned out to be the month's main character — real-world usage surfaced a string of placement edge cases (iOS keyboards, `calc()` sizes, percentage boundaries, closing animations), and the two follow-up patches worked through them one by one. Meanwhile [Vuetify0](https://0.vuetifyjs.com/) settled into the [beta announced June 2](/blog/announcing-vuetify0-beta/), with its public API frozen and the road to v1 opening up.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Spotlight: Vuetify 4.1 Goes Stable](#vuetify-4-1)\n* [Framework Updates](#framework-updates)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [A side-effect of security focus](#security-focus)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [Product Updates](#product-updates)\n* [What's Next](#whats-next)\n * [Looking Further Ahead](#looking-ahead)\n\n---\n\n## Releases\n\nWe shipped **four framework releases**. [v4.0.9](/getting-started/release-notes/?version=v4.0.9) (June 2) was a small patch on the stable v4.0 line — an SSR fix for `VProgressLinear`, a `VNumberInput` control-state fix, and a focus-trap scroll fix. The same day, [v4.1.0](/getting-started/release-notes/?version=v4.1.0) went stable, finalizing the VSwitch MD3 work and folding in the late-May fixes. From there the month was patches: [v4.1.1](/getting-started/release-notes/?version=v4.1.1) (June 8) and [v4.1.2](/getting-started/release-notes/?version=v4.1.2) (June 16), each a round of fixes led by the overlay location strategy.\n\n\n\n### Key Improvements\n\n* **[Vuetify 4.1](/getting-started/release-notes/?version=v4.1.0)** — the first minor of the v4 line went stable on June 2\n* **[VSwitch](/components/switches/)** — MD3 alignment, a long awaited `size` prop, and a `square` nobody asked for, 😂 LOL, quite a mix\n* **[VCalendar](/components/calendars/)** — new `interval-highlight` for subtle row tint on mouse hover ([#22885](https://github.com/vuetifyjs/vuetify/pull/22885))\n* **[VExpansionPanels](/components/expansion-panels/)** — improved focus styles and a `hover` prop to opt-out of the hover effect ([#22827](https://github.com/vuetifyjs/vuetify/pull/22827))\n* **[VOverlay](/components/overlays/)** — a handful of location fixes after introducing edge snapping ([#22921](https://github.com/vuetifyjs/vuetify/pull/22921)), iOS keyboard attachment ([#22923](https://github.com/vuetifyjs/vuetify/pull/22923)), finished by restoring `calc()`/`min()`/`vw` support for sizing\n* **Forced-colors mode** — `VHeatmap` and `VHighlight` now render correctly for people relying on forced high-contrast override\n\nView the complete list of changes in the [Full Changelog](/getting-started/release-notes/).\n\n**Details:**\n\n* [v4.1.2](https://vuetifyjs.com/getting-started/release-notes/?version=v4.1.2)\n* [v4.1.1](https://vuetifyjs.com/getting-started/release-notes/?version=v4.1.1)\n* [v4.1.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.1.0)\n* [v4.0.9](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.9)\n\n---\n\n## Spotlight: Vuetify 4.1.0 release { #vuetify-4-1 }\n\n\n\n
\n\nMay opened [v4.1.0](/getting-started/release-notes/?version=v4.1.0) in beta; **on June 2 it went stable**. The release brought us four new components (`VHeatmap`, `VHighlight`, `VMonthPicker`, `VDateRangePicker`), already covered in [the previous blog post](/blog/may-2026-update/) and a broad wave of feature props across data tables, pickers, and overlays.\n\n**Details:**\n\n* [v4.1 Release Notes](/getting-started/release-notes/?version=v4.1.0)\n* [Roadmap](/introduction/roadmap/)\n\n---\n\n## Framework Updates\n\nThis month was deliberately feature-light — the team waited for feedback from users adopting latest version for new features and improvements.\n\n### Bug Fixes\n\nThe overlay location strategy introduced in v4.1 was the month's dominant fix theme. It's a powerful feature, and putting it in front of real layouts surfaced the placement edge cases you'd expect — most of them now closed.\n\n| Component | Fix | Version | PR / commit |\n|---------------------|-------------------------------------------------|---------|-----------------------------------------------------------|\n| **VProgressLinear** | Avoid `opacity:NaN` when rendering with SSR | v4.0.9 | [#22880](https://github.com/vuetifyjs/vuetify/pull/22880) |\n| **VNumberInput** | Keep both controls enabled when empty | v4.0.9 | [e0133c2](https://github.com/vuetifyjs/vuetify/commit/e0133c2) |\n| **focusTrap** | Prevent page scroll when capturing focus | v4.0.9 | [451e7c3](https://github.com/vuetifyjs/vuetify/commit/451e7c3) |\n| **VSelect** | Close menu when click lands inside host overlay | v4.1.1 | [7ed9a54](https://github.com/vuetifyjs/vuetify/commit/7ed9a54) |\n| **VSnackbar** | More reliable progress bar | v4.1.1 | [5e6fe60](https://github.com/vuetifyjs/vuetify/commit/5e6fe60) |\n| **VNumberInput** | Emit `change` when using controls and arrows | v4.1.1 | [2ab2509](https://github.com/vuetifyjs/vuetify/commit/2ab2509) |\n| **VTooltip** | Avoid stealing focus | v4.1.1 | [77d1a8a](https://github.com/vuetifyjs/vuetify/commit/77d1a8a) |\n| **VTable** | Apply background and border for `fixed-footer` | v4.1.1 | [ecabcc5](https://github.com/vuetifyjs/vuetify/commit/ecabcc5) |\n| **VMenu** | Prevent focus change during IME input | v4.1.1 | [#21008](https://github.com/vuetifyjs/vuetify/pull/21008) |\n| **VHeatmap** | Keep legend bar visible in forced-colors mode | v4.1.1 | [58e3e7d](https://github.com/vuetifyjs/vuetify/commit/58e3e7d) |\n| **VHighlight** | Support forced-colors mode | v4.1.1 | [067228c](https://github.com/vuetifyjs/vuetify/commit/067228c) |\n| **VOverlay** | Static location should snap to edges using CSS | v4.1.2 | [#22921](https://github.com/vuetifyjs/vuetify/pull/22921) |\n| **VOverlay** | Keep overlay attached with iOS keyboard open | v4.1.2 | [#22923](https://github.com/vuetifyjs/vuetify/pull/22923) |\n| **VOverlay** | Resolve `calc`/`min`/`vw` sizes to pixels | v4.1.2 | [bf105bf](https://github.com/vuetifyjs/vuetify/commit/bf105bf) |\n| **VDialog** | Clear inline styles when enabling fullscreen | v4.1.2 | [ea29378](https://github.com/vuetifyjs/vuetify/commit/ea29378) |\n| **VTreeview** | Apply `hide-actions` to group nodes | v4.1.2 | [e5555ae](https://github.com/vuetifyjs/vuetify/commit/e5555ae) |\n| **VPagination** | Predictable length behavior in flex container | v4.1.2 | [#22912](https://github.com/vuetifyjs/vuetify/pull/22912) |\n| **theme** | Async transition should return a Promise | v4.1.2 | [904f949](https://github.com/vuetifyjs/vuetify/commit/904f949) |\n\n### In Development\n\n**Deferred to v4.2** — keeping v4.1 tight meant several in-flight initiatives slipped past the minor and now sit against the [v4.2.0 milestone](https://github.com/vuetifyjs/vuetify/milestone/90). Most are feature PRs that were already open before v4.1 went stable:\n\n* **[VTreeview](/components/treeview/)** — a set of accessibility improvements: more aria attributes and correct keyboard navigation\n* **[VSlider](/components/sliders/)** — a `pill` variant to match MD3 ([#22699](https://github.com/vuetifyjs/vuetify/pull/22699))\n* **[VBreadcrumbs](/components/breadcrumbs/)** — improved accessibility and a collapse menu ([#22358](https://github.com/vuetifyjs/vuetify/pull/22358))\n* **[VMaskInput](/components/mask-inputs/)** — multiple and dynamic mask resolution ([#22501](https://github.com/vuetifyjs/vuetify/pull/22501))\n\n---\n\n## A side-effect of security focus { #security-focus }\n\nIf you somehow missed the [deep dive into the incident](/about/incidents/2026-06-nyven-infostealer/), a long story short is that Discord failed us by shipping insecure client (2FA is a joke) and having no backup, no \"security cooldown\" nor tools to recover the server after the takeover. After a shaky two weeks, we had set up a new one and get things back on track. All community members are welcome to re-join.\n\n**No Vuetify package, source, release, CI pipeline, or user data was affected.** But the team still took the opportunity to rotate the security tokens and strenghten the internal policies. One interesting side-effect of \"what if\" planning was a new project [pkg-diff](https://github.com/vuetifyjs/pkg-diff). It appears despite constant problems around NPM packages security, we had not found even one decent tool to diff packages - some were slow, other limited, so we created our own and since it is computing everything in-browser - arguably better than what NPMX shipped lately, everyone is free to use it :)\n\n![pkg-diff screenshot](https://cdn.vuetifyjs.com/docs/images/blog/june-2026-update/pkg-diff-screenshot.png)\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\nJune was Vuetify0's first month in beta. The [beta was announced on June 2](/blog/announcing-vuetify0-beta/) with the public API frozen, so the work shifted from adding primitives to refining the ones that shipped — edge cases, documentation, and the road to **v1.0 in July**. With a frozen target now in place, the **theme**, **locale**, and **date** v0 migrations inside the framework have something stable to build against.\n\n\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n**Details:**\n\n* [Announcing the Vuetify0 Beta](/blog/announcing-vuetify0-beta/)\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v0play](https://v0play.vuetifyjs.com)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\n\n\n
\n\nThe docs picked up a round of housekeeping in June — SEO length limits enforced on page meta titles and descriptions, unified CDN links, and a corrected MD2 typography snippet in the upgrade guide. The Discord invite link across the docs was updated to point at the new community server.\n\n### Nuxt Module\n\nThe [Nuxt Module](https://github.com/vuetifyjs/nuxt-module) continued its march toward a stable v1, with [Andrei Elkin](https://github.com/AndreyYolkin) keeping up the package-resolution and reliability work carried over from May.\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nJuly finishes the year's first arc. **Vuetify0** reaches **v1.0**, ending the beta and giving the framework a stable foundation to migrate onto. **Vuetify 4.1** continues its patch cadence, with the `rules` promotion and more overlay and treeview polish already queued. And with a v0 v1 in hand, the **theme**, **locale**, and **date** migrations move from planning to real work.\n\n* [Vuetify 4.1](/getting-started/release-notes/?version=v4.1.0) is stable — try the new components and labs promotions in your project today\n* The [Vuetify0 beta](/blog/announcing-vuetify0-beta/) has frozen its public API ahead of v1 — try it via [v0play](https://v0play.vuetifyjs.com)\n* Join the rebuilt community server at [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n### Looking Further Ahead { #looking-ahead }\n\nThe theme for the rest of the year hasn't changed: **finishing what we started**.\n\n**A clean finish for labs**: our roadmap commitments for the remainder of 2026 stay narrowed to one outcome — **by November 1st, 2026, labs will be drained**. Every component still incubating will either graduate into core or be retired; nothing will be left in an \"unfinished\" state. June's `rules` promotion is one more step down that list.\n\n**A community-driven issue board**: we're building a curated view into the issue board where the community can surface and vote on what matters most, opening a direct line into what we tackle next. More as it takes shape.\n\n**A modernized docs experience (later this year)**: we're planning a significant UX upgrade to the Vuetify docs, porting over features introduced first to the [Vuetify0 documentation](https://0.vuetifyjs.com/). For a preview of where we're headed, spend some time in the [v0 docs](https://0.vuetifyjs.com/) — the navigation, search, and interactive code samples are an early taste of what's coming.\n\n::: warning\n\n**Vuetify needs your support.** OpenCollective trend slowly picks up and we appreciate every contribution and support for ongoing work on the framework and ecosystem tools. If your team relies on Vuetify, please educate your boss about importance of sponsoring OSS projects like Vuetify. You can point them to [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution keeps Vuetify afloat.\n\n:::\n\nVuetify is and always will be free and open source. If your team builds on the framework, the v0 beta, the MCP, the CLI, the Nuxt module, the ESLint plugin, or any of the design systems coming behind them, your support directly funds continued development. [Vuetify One](https://one.vuetifyjs.com/) and [GitHub Sponsors](https://github.com/sponsors/johnleider) are the most direct ways to help.\n\nTo everyone who checked in, shared the verified invite, and helped us rebuild the community server after this month's incident — thank you. It meant a lot.\n\nThank you for being part of the Vuetify community. See you in July!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://community.vuetifyjs.com), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/march-2026-update.md":"---\nlayout: blog\nmeta:\n title: March 2026 Update\n description: March shipped 7 Vuetify patches while Vuetify0 reached v0.2.0 with 7 new headless components, the Nuxt Module beta, 10 CLI releases, and ESLint v4 rules.\n keywords: Vuetify March 2026, Vuetify0 v0.2.0, VCommandPalette, VProgress, Nuxt Module beta, Vuetify CLI, ESLint v4 migration\n---\n\n\n\n# March 2026 Update\n\n**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.\n\n![Hero image for March update](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/march-hero.png \"March hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 April 16th, 2026\n\n\n\n---\n\n## Acceleration\n\n**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](https://github.com/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](https://github.com/AndreyYolkin) completely overhauled the Nuxt module and pushed the CLI through 10 releases. And the Vuetify → Vuetify0 refactor that [began last month](https://vuetifyjs.com/blog/february-2026-update/) is now actively migrating core composables—observer, display, theme, and locale.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Ecosystem Spotlight: Nuxt Module v1.0.0 Beta](#nuxt-module-beta)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Tooling and Migration](#tooling-migration)\n* [Vuetify MCP v0.6.0 and Playground Tools](#vuetify-mcp)\n* [Product Updates](#product-updates)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [March 2026 Changelog](#march-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nMarch 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.\n\n![March Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/releases.png \"March Releases Banner\")\n\n### Key Improvements\n\n* **[CSS font variables](/styles/text-and-typography/)** — CSS custom properties for font customization (v4.0.1)\n* **[Icon sets](/features/icon-fonts/)** — More UnoCSS-based iconsets + Material Symbols iconset (v4.0.1, v4.0.2)\n* **[VDataTable](/components/data-tables/)** — Expose `prevPage`, `nextPage`, `setPage` in bottom slot (v4.0.2)\n* **[VCommandPalette](/components/command-palettes/)** — `closeOnSelect` prop and `before-select` event (v4.0.2 Labs)\n* **[VProgress](/components/progress/)** — New progress component (v4.0.3 Labs)\n* **[VVideo](/components/videos/)** — `src-object` prop for WebRTC and `hide-progress-bar` prop (v4.0.3 Labs)\n* **[VFileUpload](/components/file-uploads/)** — Integrated with VInput and split internal logic (v3.12.2/v4.0.1 Labs)\n* **[VMaskInput](/components/masked-inputs/)** — Accept escaped characters in mask patterns (v4.0.3 Labs)\n\nView the complete list of changes in the [Full Changelog](#march-2026-changelog).\n\n**Details:**\n\n* [v4.0.4](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.4)\n* [v4.0.3](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.3)\n* [v4.0.2](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.2)\n* [v4.0.1](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.1)\n* [v3.12.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.4)\n* [v3.12.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.3)\n* [v3.12.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.2)\n\n---\n\n## Ecosystem Spotlight: Nuxt Module v1.0.0 Beta { #nuxt-module-beta }\n\nThe 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](https://github.com/AndreyYolkin). This is the module's biggest change since its initial release.\n\n### What's New { #nuxt-whats-new }\n\n**Monorepo Conversion** — The module was restructured as a monorepo, with cleaner package boundaries and improved maintainability.\n\n**Vuetify 4 Support** — Full compatibility with v4's CSS layers and SASS integration. The `disableVuetifyStyles` option was removed in favor of `styles: 'none'`.\n\n**Experimental SASS Caching** — In-memory caching for SASS compilation reduces cold-start times in development.\n\n**Revamped Documentation** — Documentation was completely overhauled alongside the structural changes.\n\n**Beta Stability** — With alpha.2 through beta.2 all landing in March, the module is on track for a stable v1.0.0 release.\n\n[userquin](https://github.com/userquin) contributed configuration and documentation improvements.\n\n**Details:**\n\n* [Nuxt Module GitHub Repository](https://github.com/vuetifyjs/nuxt-module)\n* [Major overhaul PR#353](https://github.com/vuetifyjs/nuxt-module/pull/353)\n* [v1.0.0-beta.2](https://github.com/vuetifyjs/nuxt-module/releases/tag/v1.0.0-beta.2)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nMarch's 31 merged PRs focused on new features for the v4 branch, targeted bug fixes, and the beginning of the Vuetify → v0 migration.\n\n### New Features\n\n**[CSS font variables](/styles/text-and-typography/)** — CSS custom properties for font-family, font-size, and font-weight, enabling runtime font customization without SASS (v4.0.1, [#22666](https://github.com/vuetifyjs/vuetify/pull/22666))\n\n![CSS font variables](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/css-font-variables.png \"CSS custom properties for runtime font customization\")\n\n**[Icon sets](/features/icon-fonts/)** — Additional UnoCSS-based iconsets shipped in v4.0.1 ([#22668](https://github.com/vuetifyjs/vuetify/pull/22668)), followed by Material Symbols via UnoCSS in v4.0.2 ([#22680](https://github.com/vuetifyjs/vuetify/pull/22680))\n\n**[VDataTable](/components/data-tables/)** — `prevPage`, `nextPage`, and `setPage` exposed in the bottom slot for custom pagination controls (v4.0.2, [#22681](https://github.com/vuetifyjs/vuetify/pull/22681))\n\n**[VCommandPalette](/components/command-palettes/)** — `closeOnSelect` prop and `before-select` event for fine-grained selection control, plus a name fix for the inner component (v4.0.2 Labs, [#22634](https://github.com/vuetifyjs/vuetify/pull/22634))\n\n![VCommandPalette](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/command-palette.png \"VCommandPalette with search and command list\")\n\n**[VFileUpload](/components/file-uploads/)** — Integrated with VInput and split internal logic for better composability and form integration (v3.12.2/v4.0.1 Labs, [#22637](https://github.com/vuetifyjs/vuetify/pull/22637))\n\n**[VProgress](/components/progress/)** — New progress component added to Labs (v4.0.3, [#22682](https://github.com/vuetifyjs/vuetify/pull/22682))\n\n**[VVideo](/components/videos/)** — `src-object` prop for MediaStream/WebRTC playback and `hide-progress-bar` prop for cleaner embeds (v4.0.3 Labs, [#22670](https://github.com/vuetifyjs/vuetify/pull/22670), [#22636](https://github.com/vuetifyjs/vuetify/pull/22636))\n\n**Details:**\n\n* [CSS font variables PR#22666](https://github.com/vuetifyjs/vuetify/pull/22666)\n* [VCommandPalette closeOnSelect PR#22634](https://github.com/vuetifyjs/vuetify/pull/22634)\n* [VDataTable pagination slot PR#22681](https://github.com/vuetifyjs/vuetify/pull/22681)\n* [VProgress PR#22682](https://github.com/vuetifyjs/vuetify/pull/22682)\n* [VVideo src-object PR#22670](https://github.com/vuetifyjs/vuetify/pull/22670)\n\n### Bug Fixes\n\n| Component | Fix | Version | PR |\n|-----------|-----|---------|----|\n| **VSelect** | Fix screenreader navigation to select options | v3.12.2 / v4.0.1 | [#22602](https://github.com/vuetifyjs/vuetify/pull/22602) |\n| **VOtpInput** | Handle deletion via `onBeforeinput` for mobile compatibility | v4.0.1 | [#22657](https://github.com/vuetifyjs/vuetify/pull/22657) |\n| **VSnackbar** | Opaque background for transparent variants | v4.0.1 | [#22646](https://github.com/vuetifyjs/vuetify/pull/22646) |\n| **hotkey** | Delimiter alias fixes without ambiguity | v3.12.3 / v4.0.2 | [#22635](https://github.com/vuetifyjs/vuetify/pull/22635) |\n| **VNumberInput** | Prevent input changes when readonly | v3.12.3 / v4.0.2 | [#22692](https://github.com/vuetifyjs/vuetify/pull/22692) |\n| **VDataTable** | Respect `disableSort` prop for sortable headers | v4.0.2 | [#22684](https://github.com/vuetifyjs/vuetify/pull/22684) |\n| **rounded** | Add missing `md` size | v4.0.2 | [#22679](https://github.com/vuetifyjs/vuetify/pull/22679) |\n| **router** | Replace deprecated `next()` for Vue Router v5 compatibility | v3.12.3 / v4.0.2 | [#22643](https://github.com/vuetifyjs/vuetify/pull/22643) |\n| **VTimePicker** | Keep hour value when changing AM/PM | v3.12.3 / v4.0.2 | — |\n| **hotkey** | Resilient sequence parsing | v4.0.3 | [#22704](https://github.com/vuetifyjs/vuetify/pull/22704) |\n| **VExpansionPanels** | Apply `rounded` only to first and last panel when closed | v4.0.3 | — |\n| **VTooltip** | Correct selector for non-interactive tooltips | v4.0.3 | — |\n| **VMaskInput** | Accept escaped characters in mask patterns | v4.0.3 Labs | [#22727](https://github.com/vuetifyjs/vuetify/pull/22727) |\n| **VFileUpload** | Fix adding/replacing files with dropzone click | v3.12.4 / v4.0.4 Labs | [#22741](https://github.com/vuetifyjs/vuetify/pull/22741) |\n| **rules** | Fix type resolution for custom validation rules | v4.0.4 Labs | [#22701](https://github.com/vuetifyjs/vuetify/pull/22701) |\n| **VSelect** | Prevent brief error state when clicking a menu item | v4.0.4 | — |\n| **VField** | Label transition on pages with CSS zoom | v3.12.4 / v4.0.4 | — |\n\n**Details:**\n\n* [VSelect a11y PR#22602](https://github.com/vuetifyjs/vuetify/pull/22602)\n* [hotkey aliases PR#22635](https://github.com/vuetifyjs/vuetify/pull/22635)\n* [hotkey resilient PR#22704](https://github.com/vuetifyjs/vuetify/pull/22704)\n* [VMaskInput PR#22727](https://github.com/vuetifyjs/vuetify/pull/22727)\n\n### In Development\n\nSeveral PRs merged in March are pending their first release, alongside features still in active development:\n\n#### Merged, Pending Release { #merged-pending-release }\n\n* **rounded: arbitrary values** — Accept any valid CSS border-radius value beyond predefined presets ([#22721](https://github.com/vuetifyjs/vuetify/pull/22721))\n* **VProgressLinear split variant** — MD3-aligned split variant for buffer/indeterminate states ([#22662](https://github.com/vuetifyjs/vuetify/pull/22662))\n* **VOverlay** — `location` and `origin` props reworked to be actually useful ([#22720](https://github.com/vuetifyjs/vuetify/pull/22720))\n* **VCommandPalette viewport strategy** — Full-viewport location strategy for command palettes ([#22698](https://github.com/vuetifyjs/vuetify/pull/22698))\n* **SSR** — Avoid errors when rendering with latest Vue ([#22764](https://github.com/vuetifyjs/vuetify/pull/22764))\n* **CSS zoom** — Coordinate mismatch fix for VColorPicker, ripple, and VCalendar ([#22774](https://github.com/vuetifyjs/vuetify/pull/22774))\n\n#### VSparkline Markers and Tooltips\n\nInteractive markers and hover tooltips for data visualization.\n\n#### VSlider Pill Variant\n\nA new `pill` variant for VSlider aligned with Material Design 3's rounded slider track design.\n\n#### VMorphingIcon\n\nAnimated icon transitions using SVG path morphing—carrying over from February, now nearing completion.\n\n#### V0 Migration Core Composables\n\nThe Vuetify → Vuetify0 refactor is now migrating core systems. Open PRs cover:\n\n* **Theme** — Migrate the entire theme system to v0 ([#22765](https://github.com/vuetifyjs/vuetify/pull/22765))\n* **Locale/RTL** — Delegate locale and RTL management to v0 ([#22753](https://github.com/vuetifyjs/vuetify/pull/22753))\n* **Display** — Migrate breakpoints to v0's `createBreakpoints` ([#22710](https://github.com/vuetifyjs/vuetify/pull/22710))\n* **Date** — Delegate to v0's `createDate` runtime ([#22768](https://github.com/vuetifyjs/vuetify/pull/22768))\n\nObserver composables were already [migrated in March](https://github.com/vuetifyjs/vuetify/pull/22672).\n\n**Details:**\n\n* [rounded arbitrary PR#22721](https://github.com/vuetifyjs/vuetify/pull/22721)\n* [VProgressLinear split PR#22662](https://github.com/vuetifyjs/vuetify/pull/22662)\n* [VSparkline PR#22748](https://github.com/vuetifyjs/vuetify/pull/22748)\n* [VSlider pill PR#22699](https://github.com/vuetifyjs/vuetify/pull/22699)\n* [VMorphingIcon PR#22639](https://github.com/vuetifyjs/vuetify/pull/22639)\n* [Theme migration PR#22765](https://github.com/vuetifyjs/vuetify/pull/22765)\n* [Locale/RTL migration PR#22753](https://github.com/vuetifyjs/vuetify/pull/22753)\n\n---\n\n## Tooling and Migration { #tooling-migration }\n\n### Vuetify CLI\n\n\n\n
\n\nThe 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](https://github.com/AndreyYolkin) with template contributions from [J-Sek](https://github.com/J-Sek).\n\n**Vite 8 Support** — Templates updated for Vite 8 compatibility.\n\n**Vue Router 5 Migration** — Templates migrated from unplugin-vue-router to Vue Router 5.\n\n**MCP CLI Integration** — A standalone MCP CLI command for setting up the Vuetify MCP server directly from the CLI.\n\n**Preset System** — Enhanced user presets with improved UX, plus new Nuxt and UnoCSS presets alongside the existing TailwindCSS preset.\n\n**TypeScript 6.0** — Template fixes to avoid typechecking errors with TS 6.0.\n\n**Dynamic Project Docs** — `create` now generates project-specific documentation.\n\n**Details:**\n\n* [Vuetify CLI GitHub Repository](https://github.com/vuetifyjs/cli)\n* [v1.2.0-beta.1](https://github.com/vuetifyjs/cli/releases/tag/v1.2.0-beta.1)\n* [TS 6.0 fix PR#11](https://github.com/vuetifyjs/cli/pull/11)\n* [Nuxt/UnoCSS presets PR#7](https://github.com/vuetifyjs/cli/pull/7)\n\n### ESLint Plugin for Vuetify\n\n\n\n
\n\n[J-Sek](https://github.com/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.\n\n**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](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/125)).\n\n**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](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/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.\n\n**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 `` to `
`), replacement props, or custom messages ([#127](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/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.\n\n**ESLint 10 Support** — Compatibility with the latest ESLint major version, contributed by [jssuttles](https://github.com/jssuttles) ([#124](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/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](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/119)).\n\n**Details:**\n\n* [ESLint Plugin GitHub Repository](https://github.com/vuetifyjs/eslint-plugin-vuetify)\n* [v2.7.2](https://github.com/vuetifyjs/eslint-plugin-vuetify/releases/tag/v2.7.2)\n* [v2.7.0](https://github.com/vuetifyjs/eslint-plugin-vuetify/releases/tag/v2.7.0)\n* [v2.6.0](https://github.com/vuetifyjs/eslint-plugin-vuetify/releases/tag/v2.6.0)\n\n### ESLint Config\n\n\n\n
\n\nThe 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.\n\n**`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](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.3.5)).\n\n**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.\n\n**Details:**\n\n* [ESLint Config GitHub Repository](https://github.com/vuetifyjs/eslint-config-vuetify)\n* [v4.4.0](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.4.0)\n* [v4.3.5](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.3.5)\n\n---\n\n## Vuetify MCP v0.6.0 and Playground Tools { #vuetify-mcp }\n\n\n\n
\n\nThe 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.\n\n### v0.6.0 { #mcp-v060 }\n\n**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.)\n\n**Bug Fixes** — Corrected composable names and missing exports in v0 documentation; fixed GitHub URL branch references from `main` to `master`.\n\n### Playground CRUD (Pending Release) { #mcp-playground-crud }\n\n[PR#19](https://github.com/vuetifyjs/mcp/pull/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.\n\n### Setup\n\nInstall with the Vuetify CLI:\n\n::: tabs\n\n```bash [pnpm]\npnpm dlx @vuetify/cli add mcp\n```\n\n```bash [npm]\nnpx @vuetify/cli add mcp\n```\n\n```bash [yarn]\nyarn dlx @vuetify/cli add mcp\n```\n\n```bash [bun]\nbunx @vuetify/cli add mcp\n```\n\n:::\n\nOr configure manually:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [v0.6.0 Release](https://github.com/vuetifyjs/mcp/releases/tag/v0.6.0)\n* [Playground CRUD PR#19](https://github.com/vuetifyjs/mcp/pull/19)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\n\n\n
\n\n[Henry Aviles](https://github.com/Haviles04) shipped a **new dashboard** for Vuetify One, releasing v0.1.0, v3.1.0, and v3.1.1 in March.\n\n![Vuetify One](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/vuetify-one.png \"Vuetify One — Power the Future of Vuetify\")\n\n**Details:**\n\n* [Vuetify One](/one/)\n* [Vuetify One Dashboard](https://one.vuetifyjs.com/)\n* [New dashboard PR#49](https://github.com/vuetifyjs/one/pull/49)\n\n### Vuetify Bin\n\n\n\n
\n\n[Henry Aviles](https://github.com/Haviles04) added **markdown preview** support—bins can now render markdown content alongside code. The update also includes cursor tracking.\n\n![Vuetify Bin Markdown Preview](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/bin-markdown-preview.png \"Vuetify Bin rendering markdown content\")\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n* [Markdown preview PR#142](https://github.com/vuetifyjs/bin/pull/142)\n* [Cursor tracking PR#140](https://github.com/vuetifyjs/bin/pull/140)\n\n### Vuetify Play\n\n\n\n
\n\n[J-Sek](https://github.com/J-Sek) fixed a cursor positioning bug that caused edits to jump while typing ([#51](https://github.com/vuetifyjs/play/pull/51)), and [Henry Aviles](https://github.com/Haviles04) updated the default visibility behavior.\n\n![Vuetify Play](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/vuetify-play.png \"Vuetify Play — online playground with live preview\")\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\nMarch 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.\n\n![Vuetify0 Progress](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/v0.png \"Vuetify0 March Progress\")\n\n### New Components\n\nSeven headless components shipped in March, each with a composable layer and compound component pattern:\n\n* **[Switch](https://0.vuetifyjs.com/components/forms/switch/)** — Toggle switch with Root, Track, and Thumb compound components ([#142](https://github.com/vuetifyjs/0/pull/142))\n* **[Slider](https://0.vuetifyjs.com/components/forms/slider/)** — Range slider with Track, Range, and Thumb parts, backed by a dedicated composable ([#143](https://github.com/vuetifyjs/0/pull/143))\n* **[Treeview](https://0.vuetifyjs.com/components/disclosure/treeview/)** — Hierarchical tree built on createNested with expand, select, and activate ([#144](https://github.com/vuetifyjs/0/pull/144))\n* **[Splitter](https://0.vuetifyjs.com/components/semantic/splitter/)** — Resizable pane layouts with Root, Panel, and Handle components ([#145](https://github.com/vuetifyjs/0/pull/145))\n* **[Input](https://0.vuetifyjs.com/components/forms/input/)** — Headless form input with validation integration ([#162](https://github.com/vuetifyjs/0/pull/162))\n* **[Button](https://0.vuetifyjs.com/components/actions/button/)** — Headless button with disabled, loading, readonly, and passive states, plus Button.Group for toggle selection ([#166](https://github.com/vuetifyjs/0/pull/166))\n* **[Combobox](https://0.vuetifyjs.com/components/forms/combobox/)** — Autocomplete-style input with createCombobox composable for filtering and selection ([#172](https://github.com/vuetifyjs/0/pull/172))\n\n### New Composables\n\n* **[useNotifications](https://0.vuetifyjs.com/composables/plugins/use-notifications/)** — Full notification lifecycle management with registry/queue architecture, read/archive/snooze states, and Novu/Knock adapters ([#146](https://github.com/vuetifyjs/0/pull/146))\n* **[useRules](https://0.vuetifyjs.com/composables/plugins/use-rules/)** — Validation composable with alias-based rules and adapters for Zod and Yup ([#140](https://github.com/vuetifyjs/0/pull/140))\n* **[useRaf](https://0.vuetifyjs.com/composables/system/use-raf/)** — Scope-safe `requestAnimationFrame` composable with automatic cleanup ([#165](https://github.com/vuetifyjs/0/pull/165))\n* **[createModel](https://0.vuetifyjs.com/composables/selection/create-model/)** — Shared selection state foundation bridging createRegistry, createSelection, and createSlider ([#148](https://github.com/vuetifyjs/0/pull/148))\n\n### Other Improvements\n\n* **createRegistry** — `move()` method for reordering registered items ([#149](https://github.com/vuetifyjs/0/pull/149))\n* **useHotkey** — Symbol aliases and AST-based hotkey string parser for more reliable parsing ([#150](https://github.com/vuetifyjs/0/pull/150), [#155](https://github.com/vuetifyjs/0/pull/155))\n* **MaybeRef** — Accept getters alongside refs for more flexible API signatures ([#141](https://github.com/vuetifyjs/0/pull/141))\n* **toReactive** — Performance refactor for proxy creation ([#170](https://github.com/vuetifyjs/0/pull/170))\n* **Playground** — Version selector and settings modal for easier experimentation ([#163](https://github.com/vuetifyjs/0/pull/163))\n\n### Coming Next\n\n* **[createDataGrid](https://github.com/vuetifyjs/0/pull/174)** — Data grid composable for advanced table layouts\n* **[Paper Design System](https://github.com/vuetifyjs/0/pull/167)** — The Emerald design system foundation for v0's visual layer\n* **[v0play](https://v0play.vuetifyjs.com)** — Expanding the editor and tutorial system with more examples and guided lessons\n\n::: info\n\nThe 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.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v0.2.0 Release Notes](https://github.com/vuetifyjs/0/releases/tag/v0.2.0)\n* [Combobox PR#172](https://github.com/vuetifyjs/0/pull/172)\n* [Button PR#166](https://github.com/vuetifyjs/0/pull/166)\n* [Input PR#162](https://github.com/vuetifyjs/0/pull/162)\n\n---\n\n## March 2026 Changelog\n\nThe following section provides an overview of the changes made in March 2026, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* v4.0.1: CSS font variables, additional UnoCSS iconsets, VSnackbar and VSelect a11y fixes\n* v4.0.2: Material Symbols iconset, VDataTable pagination slot, VCommandPalette Labs improvements\n* v4.0.3: VProgress and VVideo Labs components, VMaskInput escaped characters, hotkey and VExpansionPanels fixes\n* v4.0.4: VFileUpload dropzone fix, rules type resolution, VSelect brief error state fix\n* v3.x: bugfix-only releases mirroring the v4 fixes above\n\n**Expand** this section to see the detailed changelog for March 2026:\n\n
\nMarch 2026 Full Changelog\n\n### v3.12.2 (2026-03-04)\n\n**:wrench: Bug Fixes**\n\n* **VDataTable:** improvements for sorting in mobile mode ([c3b3278](https://github.com/vuetifyjs/vuetify/commit/c3b3278))\n* **VDataTable:** keep fixed cells opaque when loading ([35e1e2c](https://github.com/vuetifyjs/vuetify/commit/35e1e2c))\n* **VSelect:** fix screenreader navigation to select options ([#22602](https://github.com/vuetifyjs/vuetify/issues/22602)) ([f906336](https://github.com/vuetifyjs/vuetify/commit/f906336))\n* **VTimeline:** keep dot border when using numeric dot size ([9511bc3](https://github.com/vuetifyjs/vuetify/commit/9511bc3))\n\n**:test_tube: Labs**\n\n* **VFileUpload:** `hide-browse` should hide divider as well\n* **VFileUpload:** expose `controlRef` for internal ``\n* **VFileUpload:** append instead of replacing files when `multiple`\n* **VFileUpload:** integrate VInput & split internal logic ([#22637](https://github.com/vuetifyjs/vuetify/issues/22637)) ([251adb0](https://github.com/vuetifyjs/vuetify/commit/251adb0))\n\n---\n\n### v4.0.1 (2026-03-04)\n\n**:rocket: Features**\n\n* **icons:** add more iconsets based on UnoCSS ([#22668](https://github.com/vuetifyjs/vuetify/issues/22668)) ([6c8bea5](https://github.com/vuetifyjs/vuetify/commit/6c8bea5))\n* **styles:** CSS variables for fonts ([#22666](https://github.com/vuetifyjs/vuetify/issues/22666)) ([84495a3](https://github.com/vuetifyjs/vuetify/commit/84495a3))\n\n**:wrench: Bug Fixes**\n\n* **theme:** put theme stylesheet in body when loaded with unhead ([2475a28](https://github.com/vuetifyjs/vuetify/commit/2475a28))\n* **VBadge:** correct props.dotSize fallback ([a71f396](https://github.com/vuetifyjs/vuetify/commit/a71f396))\n* **VColorPicker:** align sliders with controls ([0d1ce90](https://github.com/vuetifyjs/vuetify/commit/0d1ce90))\n* **VDataTable:** improvements for sorting in mobile mode ([54affe1](https://github.com/vuetifyjs/vuetify/commit/54affe1))\n* **VDataTable:** keep fixed cells opaque when loading ([ddca6ca](https://github.com/vuetifyjs/vuetify/commit/ddca6ca))\n* **VGrid:** correct mapping for grid gap x/y ([65b4278](https://github.com/vuetifyjs/vuetify/commit/65b4278))\n* **VOtpInput:** handle deletion via onBeforeinput for mobile compatibility ([#22657](https://github.com/vuetifyjs/vuetify/issues/22657)) ([2f8a4f9](https://github.com/vuetifyjs/vuetify/commit/2f8a4f9))\n* **VPagination:** suppress browser spacing ([a6b7b93](https://github.com/vuetifyjs/vuetify/commit/a6b7b93))\n* **VSelect:** fix screenreader navigation to select options ([#22602](https://github.com/vuetifyjs/vuetify/issues/22602)) ([6c962b7](https://github.com/vuetifyjs/vuetify/commit/6c962b7))\n* **VSlideGroup:** don't read dom attributes in computed() ([a51b313](https://github.com/vuetifyjs/vuetify/commit/a51b313))\n* **VSlider:** reduce affix margins ([18af2d2](https://github.com/vuetifyjs/vuetify/commit/18af2d2))\n* **VSnackbar:** opaque background for transparent variants ([#22646](https://github.com/vuetifyjs/vuetify/issues/22646)) ([e83fa88](https://github.com/vuetifyjs/vuetify/commit/e83fa88))\n* **VTimeline:** keep dot border when using numeric dot size ([6764c95](https://github.com/vuetifyjs/vuetify/commit/6764c95))\n\n**:test_tube: Labs**\n\n* **VFileUpload:** `hide-browse` should hide divider as well\n* **VFileUpload:** expose `controlRef` for internal ``\n* **VFileUpload:** append instead of replacing files when `multiple`\n* **VFileUpload:** integrate VInput & split internal logic ([#22637](https://github.com/vuetifyjs/vuetify/issues/22637)) ([027ab86](https://github.com/vuetifyjs/vuetify/commit/027ab86))\n\n---\n\n### v3.12.3 (2026-03-12)\n\n**:wrench: Bug Fixes**\n\n* **hotkey:** add delimiter aliases without delimiter ambiguity ([#22635](https://github.com/vuetifyjs/vuetify/issues/22635)) ([0e6a9c6](https://github.com/vuetifyjs/vuetify/commit/0e6a9c6))\n* **router:** replace `next()` deprecated in Vue Router v5 ([#22643](https://github.com/vuetifyjs/vuetify/issues/22643)) ([4e93846](https://github.com/vuetifyjs/vuetify/commit/4e93846))\n* **VNavigationDrawer:** fully clip list item text in rail mode ([ab42b13](https://github.com/vuetifyjs/vuetify/commit/ab42b13))\n* **VNumberInput:** prevent input changes when readonly ([#22692](https://github.com/vuetifyjs/vuetify/issues/22692)) ([995989c](https://github.com/vuetifyjs/vuetify/commit/995989c))\n* **VSelect/VAutocomplete/VCombobox:** let focus leave to other fields ([3d33e2f](https://github.com/vuetifyjs/vuetify/commit/3d33e2f))\n* **VTimePicker:** keep hour value when changing AM/PM ([2c9cb0a](https://github.com/vuetifyjs/vuetify/commit/2c9cb0a))\n\n**:test_tube: Labs**\n\n* **VAvatarGroup:** ❗ change the `limit` behavior to cover overflow item ([5aefdac](https://github.com/vuetifyjs/vuetify/commit/5aefdac))\n\n---\n\n### v4.0.2 (2026-03-12)\n\n**:rocket: Features**\n\n* **icons:** add Material Symbols iconset via UnoCSS ([#22680](https://github.com/vuetifyjs/vuetify/issues/22680)) ([6c463c1](https://github.com/vuetifyjs/vuetify/commit/6c463c1))\n* **VDataTable:** expose prevPage, nextPage, setPage in bottom slot ([#22681](https://github.com/vuetifyjs/vuetify/issues/22681)) ([4d1aa79](https://github.com/vuetifyjs/vuetify/commit/4d1aa79))\n\n**:wrench: Bug Fixes**\n\n* **hotkey:** add delimiter aliases without delimiter ambiguity ([#22635](https://github.com/vuetifyjs/vuetify/issues/22635)) ([a639698](https://github.com/vuetifyjs/vuetify/commit/a639698))\n* **rounded:** add missing \"md\" size ([#22679](https://github.com/vuetifyjs/vuetify/issues/22679)) ([47cffdd](https://github.com/vuetifyjs/vuetify/commit/47cffdd))\n* **router:** replace `next()` deprecated in Vue Router v5 ([#22643](https://github.com/vuetifyjs/vuetify/issues/22643)) ([87c4129](https://github.com/vuetifyjs/vuetify/commit/87c4129))\n* **VDataTable:** respect disableSort prop for sortable header ([#22684](https://github.com/vuetifyjs/vuetify/issues/22684)) ([767b0e8](https://github.com/vuetifyjs/vuetify/commit/767b0e8))\n* **VFileInput:** correct VField ref type ([41a6063](https://github.com/vuetifyjs/vuetify/commit/41a6063))\n* **VGrid:** avoid warning about no-gutters being deprecated ([5d8ec63](https://github.com/vuetifyjs/vuetify/commit/5d8ec63))\n* **VNavigationDrawer:** fully clip list item text in rail mode ([6b448cd](https://github.com/vuetifyjs/vuetify/commit/6b448cd))\n* **VNumberInput:** prevent input changes when readonly ([#22692](https://github.com/vuetifyjs/vuetify/issues/22692)) ([2b1ed0d](https://github.com/vuetifyjs/vuetify/commit/2b1ed0d))\n* **VSelect/VAutocomplete/VCombobox:** let focus leave to other fields ([51196cf](https://github.com/vuetifyjs/vuetify/commit/51196cf))\n* **VTextarea:** correct VField ref type ([0d689aa](https://github.com/vuetifyjs/vuetify/commit/0d689aa))\n* **VTimePicker:** keep hour value when changing AM/PM ([b030df8](https://github.com/vuetifyjs/vuetify/commit/b030df8))\n\n**:test_tube: Labs**\n\n* **VAvatarGroup:** change the `limit` behavior to cover overflow item ([e580ebc](https://github.com/vuetifyjs/vuetify/commit/e580ebc))\n* **VCommandPalette:** add closeOnSelect prop and before-select event ([#22634](https://github.com/vuetifyjs/vuetify/issues/22634)) ([d534f79](https://github.com/vuetifyjs/vuetify/commit/d534f79))\n* **VCommandPalette:** correct name of the inner component ([bfed30c](https://github.com/vuetifyjs/vuetify/commit/bfed30c))\n\n---\n\n### v4.0.3 (2026-03-19)\n\n**:wrench: Bug Fixes**\n\n* **hotkey:** resilient sequence parsing ([#22704](https://github.com/vuetifyjs/vuetify/issues/22704)) ([cae1cea](https://github.com/vuetifyjs/vuetify/commit/cae1cea))\n* **md2:** restore correct global rounding ([6d1ef04](https://github.com/vuetifyjs/vuetify/commit/6d1ef04))\n* **VDataTable:** reactive items from `expanded` with `return-object` ([5d7af2c](https://github.com/vuetifyjs/vuetify/commit/5d7af2c))\n* **VExpansionPanels:** apply `rounded` only to the first and last panel when closed ([dbc7421](https://github.com/vuetifyjs/vuetify/commit/dbc7421))\n* **VGrid:** restore `no-gutters` instead of mapping to \"compact\" ([947d7d5](https://github.com/vuetifyjs/vuetify/commit/947d7d5))\n* **VSkeletonLoader:** less jitter when scrolling on slow device ([468ba314](https://github.com/vuetifyjs/vuetify/commit/468ba314))\n* **VTooltip:** correct selector for non-interactive tooltips ([15b3cbd](https://github.com/vuetifyjs/vuetify/commit/15b3cbd))\n\n**:test_tube: Labs**\n\n* **VMaskInput:** accept escaped characters in mask ([#22727](https://github.com/vuetifyjs/vuetify/issues/22727)) ([a5d1116](https://github.com/vuetifyjs/vuetify/commit/a5d1116))\n* **VProgress:** create new component ([#22682](https://github.com/vuetifyjs/vuetify/issues/22682)) ([122cdeb](https://github.com/vuetifyjs/vuetify/commit/122cdeb))\n* **VVideo:** add `hide-progress-bar` prop ([#22636](https://github.com/vuetifyjs/vuetify/issues/22636)) ([0e5a2cb](https://github.com/vuetifyjs/vuetify/commit/0e5a2cb))\n* **VVideo:** add `src-object` prop for MediaStream/WebRTC ([#22670](https://github.com/vuetifyjs/vuetify/issues/22670)) ([575e7c5](https://github.com/vuetifyjs/vuetify/commit/575e7c5))\n\n---\n\n### v3.12.4 (2026-03-25)\n\n**:wrench: Bug Fixes**\n\n* **VField:** label transition on page with zoom ([6246a96](https://github.com/vuetifyjs/vuetify/commit/6246a96))\n* **VTimePicker:** avoid loading all CSS utilities ([884e5dc](https://github.com/vuetifyjs/vuetify/commit/884e5dc))\n\n**:test_tube: Labs**\n\n* **VFileUpload:** adding/replacing files with dropzone click ([#22741](https://github.com/vuetifyjs/vuetify/issues/22741)) ([86f3568](https://github.com/vuetifyjs/vuetify/commit/86f3568))\n\n---\n\n### v4.0.4 (2026-03-25)\n\n**:wrench: Bug Fixes**\n\n* **VCol:** correct types for `offset-*` props ([1cdd9c4](https://github.com/vuetifyjs/vuetify/commit/1cdd9c4))\n* **VField:** label transition on page with zoom ([1fcad6b](https://github.com/vuetifyjs/vuetify/commit/1fcad6b))\n* **VSelect:** prevent brief error state when clicking a menu item ([7fec2d4](https://github.com/vuetifyjs/vuetify/commit/7fec2d4))\n* **VTimePicker:** avoid loading all CSS utilities ([015da52](https://github.com/vuetifyjs/vuetify/commit/015da52))\n\n**:test_tube: Labs**\n\n* **rules:** type resolution for custom rules ([#22701](https://github.com/vuetifyjs/vuetify/issues/22701)) ([053b605](https://github.com/vuetifyjs/vuetify/commit/053b605))\n* **VFileUpload:** adding/replacing files with dropzone click ([#22741](https://github.com/vuetifyjs/vuetify/issues/22741)) ([eb95c9e](https://github.com/vuetifyjs/vuetify/commit/eb95c9e))\n\n
\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nApril 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.\n\nOn 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.\n\n* The [Vuetify MCP server](https://github.com/vuetifyjs/mcp) now supports playground management—try creating a playground from your editor\n* [J-Sek's TailwindCSS guide](https://vuetifyjs.com/blog/building-with-vite-and-tailwindcss/) covers the recommended v4 + Tailwind setup\n\nVuetify is and always will be free and open source. If your team relies on the framework, consider supporting continued development through [Vuetify One](https://one.vuetifyjs.com/) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution helps us ship features like v0, the Nuxt Module, and migration tooling faster.\n\nThank you for being part of the Vuetify community. See you in April!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/may-2025-update.md":"---\nlayout: blog\nmeta:\n title: May 2025 Update\n description: May delivered significant progress on MCP, VDateInput enhancements, VNumberInput improvements, and ecosystem-wide improvements across Vuetify.\n keywords: Vuetify May 2025, Model Context Protocol, VDateInput, VNumberInput, Vuetify ecosystem\n---\n\n\n\n# May 2025 Update\n\nThis month brings exciting advancements across the Vuetify ecosystem, with major strides in AI integration, component refinements, and developer experience.\n\n---\n\n🖊️ John Leider • 📅 June 6th, 2025\n\n\n\n---\n\n## Expanding Horizons\n\nMay 2025 has been a month of significant progress for Vuetify, with key developments that enhance the framework's capabilities and developer experience. From the official release of [Vuetify MCP](https://github.com/vuetifyjs/mcp) (Model Context Protocol) to substantial improvements in core components like [VDateInput](https://vuetifyjs.com/components/date-inputs/); this month has set the stage for exciting future innovations.\n\n::: success\n\nCool example of the month: [VTreeview File structure](https://play.vuetifyjs.com/playgrounds/AbH9-w) by [Jacek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n- [Releases](#releases)\n- [Official @vuetify/mcp Release](#official-vuetifymcp-release)\n - [MCP Vuetify API Keys](#mcp-vuetify-api-keys)\n- [Framework](#framework)\n - [VDateInput Enhancements](#vdateinput-enhancements)\n - [VNumberInput](#vnumberinput)\n - [New Labs Component: VColorInput](#new-labs-component-vcolorinput)\n- [Ecosystem updates](#ecosystem-updates)\n \n - [Vuetify Bin](#vuetify-bin)\n - [Vuetify Issues Next in Testing](#vuetify-issues-next-in-testing)\n - [Vuetify Play Enhancements](#vuetify-play-enhancements)\n - [Vuetify ESLint Config](#vuetify-eslint-config)\n- [May 2025 Changelog](#may-2025-changelog)\n- [What's Next](#whats-next)\n\n---\n\n## Releases\n\nMay continued our steady release cadence with several patch updates addressing bugs and introducing minor enhancements. These releases focused on stability and performance improvements, ensuring that Vuetify remains a reliable foundation for your applications.\n\n![Hero image for latest release notes](https://cdn.vuetifyjs.com/docs/images/blog/may-2025-update/may-2025-release-note.png \"Latest release notes hero image\")\n\n**Details:**\n\n- [v3.8.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.4)\n- [v3.8.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.5)\n- [v3.8.6](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.6)\n- [v3.8.7](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.7)\n\n## Official @vuetify/mcp Release { #official-vuetifymcp-release }\n\nAfter months of development and anticipation, we're excited to announce that **@vuetify/mcp** is officially publicly available!\n\n\n\nThis implementation of the [Model Context Protocol](https://modelcontextprotocol.io/introduction) represents a fundamental shift in how developers can interact with Vuetify through AI-powered tools. Now you can provide up-to-date context for features, components, and best practices directly to AI applications, enhancing the accuracy and relevance of AI-generated code.\n\nThe Model Context Protocol (MCP) standardizes how applications provide context to LLMs, functioning like a \"USB-C port for AI applications.\"\n\nSetting up MCP is as simple as running the following in your terminal:\n\n```bash\nnpx -y @vuetify/mcp config\n```\n\nThis single command configures MCP for your development environment, giving AI tools instant access to up-to-date Vuetify context.\n\nOur implementation ensures that AI tools have access to the most up-to-date Vuetify documentation, components, and best practices, eliminating the frustration of outdated or incorrect AI-generated code.\n\nRecent additions to @vuetify/mcp include:\n\n- Improved installation process (one command installation) using `npx -y @vuetify/mcp config`\n- New tools for accessing release notes, directives, frequently asked questions, and more\n- Up next: Application upgrade between major versions\n\n\n\nThis release marks just the beginning of our MCP journey. We're actively working on expanding its capabilities and integrations, with a focus on making Vuetify development more intuitive and efficient than ever before.\n\n### MCP Vuetify API Keys\n\nLater in June, we'll be introducing a new API key system for MCP managed through Vuetify One. We will be rolling out special **primer** prompts that super charge how agents interact with Vuetify MCP for our Vuetify One subscribers.\n\n**Details:**\n\n- [@vuetify/mcp GitHub repository](https://github.com/vuetifyjs/mcp)\n- [Model Context Protocol documentation](https://modelcontextprotocol.io/introduction)\n\n## Framework\n\nWe continue to make improvements to the core framework, focusing on resolving bugs, iterating on Labs components, and preparing for the next minor release, v3.9.0, which is scheduled for June 2025. Here are a few highlights:\n\n### VDateInput Enhancements\n\nMay brought substantial improvements to several core components, with VDateInput receiving particular attention. The component now features enhanced parsing capabilities, improved validation, and more flexible configuration options. The spotlight for this month is on the [VDateInput](https://vuetifyjs.com/components/date-inputs/).\n\n\n\nFor details on other changes, please check the [May 2025 Changelog](#may-2025-changelog).\n\n**Details:**\n\n- [VDateInput input-format PR #21221](https://github.com/vuetifyjs/vuetify/pull/21221)\n- [VDateInput menu v-model PR #21298](https://github.com/vuetifyjs/vuetify/pull/21298)\n- [VDateInput validationValue PR #21408](https://github.com/vuetifyjs/vuetify/pull/21408)\n- [VDateInput common parser PR #21450](https://github.com/vuetifyjs/vuetify/pull/21450)\n- [VDateInput disable months/years PR #21466](https://github.com/vuetifyjs/vuetify/pull/21466)\n\n### VNumberInput\n\nThis month also saw multiple updates to the [VNumberInput](https://vuetifyjs.com/components/number-inputs/) component, including:\n\n- Improved append inner icon alignment\n- Enhanced touch pointer capture on controls\n- Better extraction of numbers from pasted text\n\n\n\n**Details:**\n\n- [VNumberInput inner spacing PR #21389](https://github.com/vuetifyjs/vuetify/pull/21389)\n- [VNumberInput touch pointer capture PR #21436](https://github.com/vuetifyjs/vuetify/pull/21436)\n- [VNumberInput paste text extraction PR #21263](https://github.com/vuetifyjs/vuetify/pull/21263)\n\n### New Labs Component: VColorInput { #new-labs-component-vcolorinput }\n\nThis month also saw the introduction of a new [VColorInput](https://vuetifyjs.com/components/color-inputs/) component in the Labs section. This component provides an intuitive interface for color selection and input, featuring integration with color pickers and text-based hex input. As a Labs component, VColorInput is available for testing and feedback as we refine its API and functionality.\n\nBasic usage is simple:\n\n```html\n\n\n\n```\n\n\n\nThe component supports both picker and text input modes, making it flexible for different use cases.\n\n**Details:**\n\n- [VColorInput introduction PR #20623](https://github.com/vuetifyjs/vuetify/pull/20623)\n\n## Ecosystem updates\n\nThe broader Vuetify ecosystem saw significant advancements in May, with improvements in developer tooling and infrastructure. These updates collectively enhance the developer experience and set the stage for future innovations.\n\n\n\n### Vuetify Bin\n\nYou can now choose a language for your code snippets in Vuetify Bin, improving syntax highlighting and code organization. This enhancement makes it easier to share and collaborate on code examples with proper language-specific formatting.\n\n\n\n### Vuetify Play Enhancements\n\nVuetify Play continues to evolve with new features and improvements that make it an even more powerful tool for exploring and experimenting with Vuetify components.\n\n\n\nKey enhancements to Vuetify Play include:\n\n- Added New File Explorer\n- Added Export-to-Vite functionality\n\nThese improvements make Vuetify Play more versatile and user-friendly, enabling developers to more effectively explore, test, and share Vuetify components and configurations.\n\n**Details:** [Vuetify Play](https://play.vuetifyjs.com/)\n\n### Vuetify Issues Next in Testing\n\nWe've published the new issue generator for testing, providing a new interface for creating and managing GitHub issues. Please drop us a line in [Discord](https://community.vuetifyjs.com/) if you have any feedback or suggestions.\n\n**Details:** [Issues-next deployment](https://issues-next.vuetifyjs.com/)\n\n### Vuetify ESLint Config\n\nv4.0.0 of the Vuetify ESLint config is now available, providing updated linting rules and configurations that align with the latest Vuetify standards and best practices. This major version includes improved TypeScript support and enhanced component-specific rules. The config is automatically included when [Creating a new project](https://vuetify.new/) and is recommended for all Vuetify projects.\n\n**Key improvements:**\n\n- Enhanced TypeScript integration\n- Updated component-specific linting rules\n- Better compatibility with modern JavaScript standards\n- Improved accessibility checks\n\n## May 2025 Changelog\n\nExpand this section to see the detailed changelog for May 2025, including bug fixes and enhancements.\n\n
\n\n### 🛠️ Bug Fixes\n\n- **VAutocomplete:** Re-evaluate dirty on external change [#21344](https://github.com/vuetifyjs/vuetify/issues/21344)\n- **VBottomNavigation:** Set inline margin to auto [#21357](https://github.com/vuetifyjs/vuetify/issues/21357)\n- **VDataTable:** Shift-click toggles only selectable rows [#21334](https://github.com/vuetifyjs/vuetify/issues/21334)\n- **VDataTableServer/Virtual:** Add generic headers type [#21327](https://github.com/vuetifyjs/vuetify/issues/21327)\n- **VDialog:** Focus on open only with scrim or retainFocus [#21343](https://github.com/vuetifyjs/vuetify/issues/21343)\n- **VField:** Prevent tab focus on clear icon [#19528](https://github.com/vuetifyjs/vuetify/issues/19528)\n- **VFileInput/VFileUpload:** Fix drop not calling change function [#21182](https://github.com/vuetifyjs/vuetify/issues/21182)\n- **VMenu:** Position relative to `visualViewport` when not zoomed [#21462](https://github.com/vuetifyjs/vuetify/issues/21462)\n- **VNumberInput:** Adjust inner spacing [#21389](https://github.com/vuetifyjs/vuetify/issues/21389)\n- **VNumberInput:** Capture touch pointer on controls [#21436](https://github.com/vuetifyjs/vuetify/issues/21436)\n- **VNumberInput:** Extract number from pasted text [#21263](https://github.com/vuetifyjs/vuetify/issues/21263)\n- **VOverlay:** Validate target positioning [#21350](https://github.com/vuetifyjs/vuetify/issues/21350)\n- **VPagination:** Adapt button width for large values [#21139](https://github.com/vuetifyjs/vuetify/issues/21139)\n- **VSelect:** Keyboard match multiple items with same prefix [#21419](https://github.com/vuetifyjs/vuetify/issues/21419)\n- **VSelect:** Prevent selection on lookup in multiple mode [#21418](https://github.com/vuetifyjs/vuetify/issues/21418)\n- **VSnackbarQueue:** Prevent infinite recursion in message type [#21410](https://github.com/vuetifyjs/vuetify/issues/21410)\n- **VTable:** Remove border radius with top/bottom [#21320](https://github.com/vuetifyjs/vuetify/issues/21320) [#21321](https://github.com/vuetifyjs/vuetify/issues/21321)\n- **VTextField:** Reset field on clear [#21310](https://github.com/vuetifyjs/vuetify/issues/21310)\n- **VTooltip:** Disable transition when set to false [#21268](https://github.com/vuetifyjs/vuetify/issues/21268)\n\n### 🧪 Labs\n\n- **validation:** Resolve global rules [#21267](https://github.com/vuetifyjs/vuetify/issues/21267)\n- **VColorInput:** Introduced new component [#20623](https://github.com/vuetifyjs/vuetify/issues/20623)\n- **VDateInput:** Accept value on hidden picker [#21273](https://github.com/vuetifyjs/vuetify/issues/21273)\n- **VDateInput:** Add `input-format` prop [#21221](https://github.com/vuetifyjs/vuetify/issues/21221)\n- **VDateInput:** Add `update-on` prop [#21249](https://github.com/vuetifyjs/vuetify/issues/21249)\n- **VDateInput:** Expose menu as `v-model` [#21298](https://github.com/vuetifyjs/vuetify/issues/21298)\n- **VDateInput:** Reset model to \\[] when multiple [#21299](https://github.com/vuetifyjs/vuetify/issues/21299)\n- **VDateInput:** Sync placeholder and locale [#21409](https://github.com/vuetifyjs/vuetify/issues/21409)\n- **VDateInput:** Validation sync with `modelValue` [#21408](https://github.com/vuetifyjs/vuetify/issues/21408)\n- **VTimePicker:** Fix SSR hydration mismatch [#21355](https://github.com/vuetifyjs/vuetify/issues/21355)\n\n### 🔄 Reverts\n\n- Revert fix for **VAutocomplete** dirty state change [#21392](https://github.com/vuetifyjs/vuetify/issues/21392)\n\n### 🧩 Code Refactoring\n\n- Resolve directives directly [#21413](https://github.com/vuetifyjs/vuetify/issues/21413)\n- Use `clamp()` utility function [commit](https://github.com/vuetifyjs/vuetify/commit/6784ba7aae029c3e25dd92197c5b5d19feb43430)\n\n
\n\n---\n\n## What's Next { #whats-next }\n\nJune is all about shipping. MCP gets API keys and primer prompts, v3.9.0 lands with the features we've been building, and we'll start showing off more of the new theming work in the release blog post coming next week. VDateInput will likely graduate from Labs soon, and we've got some performance improvements in the pipeline that I'm excited about.\n\nUntil next month!\n","packages/docs/src/pages/en/blog/may-2026-update.md":"---\nlayout: blog\nmeta:\n title: May 2026 Update\n description: May shipped Vuetify 4.1 — seven labs promotions, four new components, and a wave of fixes across four releases, with Vuetify0 racing toward its own beta.\n keywords: Vuetify May 2026, Vuetify 4.1 Ascendant, labs promotion, VHeatmap, VHighlight, VMonthPicker, VDateRangePicker, Vuetify0 drag and drop, createSortable, createKanban\n---\n\n\n\n# May 2026 Update\n\n**May was a feature-focused sprint.** With Vuetify 4 stable since February, we spent the month building out the first minor — and on May 21 that work opened [v4.1.0](/getting-started/release-notes/?version=v4.1.0). The whole month ran at full throttle, working through a long backlog of features and fixes we had lined up for v4.1: **seven components promoted out of labs**, four brand-new ones, and a broad sweep of new props and bug fixes across the framework. Four releases shipped over the month, while Vuetify0 ran in parallel toward its own beta.\n\n![Hero image for May update](https://cdn.vuetifyjs.com/docs/images/blog/may-2026-update/may-hero.png \"May hero image\"){ height=112 }\n\n🖊️ Jacek Czarniecki • 📅 June 5th, 2026\n\n\n\n---\n\n## A release chock-full of goodies\n\nMay was our busiest framework month of the year so far, and nearly all of it pointed at one goal: shipping v4.1. **89 commits**, **34 features**, **19 fixes**, and **4 releases**, with [v4.1.0](/getting-started/release-notes/?version=v4.1.0) at the center. Rather than spreading ourselves across the ecosystem, we put the energy into clearing the framework backlog — graduating labs components that had earned their place, finishing half-built features, and dealing with the fixes that had to land before the minor. The effort shows up in the numbers: open issues dropped from 436 at the start of May to 386 by the 31st — and zooming out, the backlog is down 22% over the last three months. Meanwhile [Vuetify0](https://0.vuetifyjs.com/) wrapped up its alpha work with a headless drag-and-drop family and a testing push that set up the [beta announced June 2](/blog/announcing-vuetify0-beta/).\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Spotlight: Vuetify 4.1](#vuetify-4-1)\n* [Framework Updates](#framework-updates)\n * [New Components](#new-components)\n * [Out of Labs](#out-of-labs)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [Product Updates](#product-updates)\n* [May 2026 Changelog](#may-2026-changelog)\n* [What's Next](#whats-next)\n * [Looking Further Ahead](#looking-ahead)\n\n---\n\n## Releases\n\nMay shipped **four framework releases**. [v4.0.7](/getting-started/release-notes/?version=v4.0.7) (May 8) was a patch with seven bug fixes. The feature work then opened the [v4.1.0](/getting-started/release-notes/?version=v4.1.0) minor — a first drop on May 21 carried the labs promotions and new components, and a May 28 follow-up focused on data table accessibility. A [v4.0.8](/getting-started/release-notes/?version=v4.0.8) patch (May 29) shipped a round of fixes on the stable v4.0 line — the same fixes that merge forward into v4.1.\n\n\n\n### Key Improvements\n\n* **[Vuetify 4.1](/getting-started/release-notes/?version=v4.1.0)** — first minor since 4.0.0, with seven labs promotions and four new components\n* **[VHeatmap](/components/heatmaps/)** — new component for calendar/grid heatmaps (v4.1)\n* **[VHighlight](/components/highlights/)** — new component for highlighting matched text (v4.1)\n* **[VMonthPicker](/components/month-pickers/) / [VDateRangePicker](/components/date-pickers/)** — new date components (v4.1)\n* **[VFileUpload](/components/file-upload/), [VDateInput](/components/date-inputs/), [VColorInput](/components/color-inputs/), [VIconBtn](/components/icon-buttons/), [VPicker](/components/pickers/), [VStepperVertical](/components/vertical-steppers/), [VPullToRefresh](/components/pull-to-refresh/)** — promoted from labs to core\n* **[VSparkline](/components/sparklines/)** — interactive markers, a vertical guideline, and hover tooltips (v4.1)\n* **[VOtpInput](/components/otp-input/)** — field grouping, a11y improvements, and emoji support (v4.1)\n* **[VOverlay](/components/overlays/) / [VCommandPalette](/components/command-palette/)** — viewport location strategy for precise placement (v4.1)\n\nView the complete list of changes in the [Full Changelog](#may-2026-changelog).\n\n**Details:**\n\n* [v4.1.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.1.0)\n* [v4.0.8](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.8)\n* [v4.0.7](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.7)\n\n---\n\n## Spotlight: Vuetify 4.1 (Ascendant) { #vuetify-4-1 }\n\n\n\n
\n\nAfter February's stable [Vuetify 4.0.0](/blog/february-2026-update/) and a string of patches, **May opened the first minor of the v4 line**. [v4.1.0](/getting-started/release-notes/?version=v4.1.0) is a feature release rather than a fix release — its theme is graduating components that proved themselves in labs, adding new ones, and expanding data table and date picker functionality.\n\nThe headline is volume. **Seven components moved out of labs** into core in a single release, and **four entirely new components** joined the framework. Alongside them came a wave of feature props across data tables, pickers, overlays, and the theme system — the breadth you'd expect from a minor, not a patch.\n\nThe work shipped in two drops in May — May 21 and May 28 — with the later one dedicated almost entirely to data table and table accessibility.\n\n**Details:**\n\n* [v4.1 Release Notes](/getting-started/release-notes/?version=v4.1.0)\n* [Roadmap](/introduction/roadmap/)\n\n---\n\n## Framework Updates\n\n### New Components\n\nFour new components landed in v4.1:\n\n**[VHeatmap](/components/heatmaps/)** — A calendar/grid heatmap for visualizing values across a matrix of cells, with a configurable legend, group gaps, and rounded cells ([#22535](https://github.com/vuetifyjs/vuetify/pull/22535)).\n\n**[VHighlight](/components/highlights/)** — Highlights matched substrings within text — useful for search results, filtering, and command palettes. It pairs with the `toHighlight` transformer being added in v0 ([#22817](https://github.com/vuetifyjs/vuetify/pull/22817)).\n\n**[VMonthPicker](/components/month-pickers/)** — A dedicated month-and-year selection component, split out from the date picker family ([#22534](https://github.com/vuetifyjs/vuetify/pull/22534)).\n\n**[VDateRangePicker](/components/date-pickers/)** — Range selection as a first-class component, with MD3-aligned range styling and keyboard grid navigation ([#22860](https://github.com/vuetifyjs/vuetify/pull/22860)).\n\n### Out of Labs\n\nSeven components graduated from labs to core in v4.1. For most of them this is just a formality — they've been stable and largely untouched since 2025, so the promotion simply acknowledges APIs that had already settled. VFileUpload is the exception, picking up real additions on its way out:\n\n* **[VFileUpload](/components/file-upload/)** — also gained a `loading` prop and support for pasting files and folders\n* **[VDateInput](/components/date-inputs/)**\n* **[VColorInput](/components/color-inputs/)**\n* **[VIconBtn](/components/icon-buttons/)**\n* **[VPicker](/components/pickers/)**\n* **[VStepperVertical](/components/vertical-steppers/)**\n* **[VPullToRefresh](/components/pull-to-refresh/)**\n\n### New Features\n\n**[VDataTable](/components/data-tables/basics/)** — The data table received the most attention of any component this month. Some additions are quick to summarize: search-match highlighting ([#22852](https://github.com/vuetifyjs/vuetify/pull/22852)), a mobile header slot ([#21429](https://github.com/vuetifyjs/vuetify/pull/21429)), and full ARIA support — `aria-sort` on sortable headers and labels for selection controls. Others deserve a closer look:\n\n* The new **`expanded`** slot ([#22871](https://github.com/vuetifyjs/vuetify/pull/22871)) renders custom detail content with a built-in transition, and the accompanying **`expand-strategy`** prop makes the table behave like an accordion — set it to `\"single\"` and opening one row collapses the others, no extra state-juggling required (`expand-transition` can swap or disable the animation).\n* **`v-model:opened`** ([#22772](https://github.com/vuetifyjs/vuetify/pull/22772)) two-way binds which groups are open and adds an `open-all` prop and a custom `group-key`, which lets you drive group state from code — expand everything by default, or save and restore a user's open groups across sessions.\n* The **`loading`** prop now accepts a `{ side, color }` object ([#22872](https://github.com/vuetifyjs/vuetify/pull/22872)), which lets you place the progress bar on a chosen edge — for example, at the bottom to signal a load-more-on-scroll footer is fetching the next page.\n* Filtered **`itemsLength`** in slot props ([#22874](https://github.com/vuetifyjs/vuetify/pull/22874)) exposes the post-filter row count, which closes the last gap to fully replacing `VDataTableFooter` with your own — you can now render \"X results\" and wire pagination from the slot without reaching into the table's internals.\n\n**[VOtpInput](/components/otp-input/)** — Fields can now be grouped into segments, with accessibility improvements and emoji support, co-authored by [Yanis-Riani](https://github.com/Yanis-Riani) ([#22803](https://github.com/vuetifyjs/vuetify/pull/22803)).\n\n**[VSparkline](/components/sparklines/)** — gained `interactive` prop to show markers, a vertical guideline, and hover tooltips ([#22748](https://github.com/vuetifyjs/vuetify/pull/22748)).\n\n\n\n**[VOverlay](/components/overlays/) and [VCommandPalette](/components/command-palette/)** — A new viewport location strategy lets overlays enforce a specific on-screen placement ([#22698](https://github.com/vuetifyjs/vuetify/pull/22698)), and `location`/`origin` now behave the way you'd expect ([#22720](https://github.com/vuetifyjs/vuetify/pull/22720)).\n\n**[VTable](/components/tables/)** — Added a `caption` slot with pass-through of `aria-*` attributes and a `gridlines` prop ([#22873](https://github.com/vuetifyjs/vuetify/pull/22873)).\n\n**[VDatePicker](/components/date-pickers/)** — Keyboard-arrow navigation in the selection grid ([#22857](https://github.com/vuetifyjs/vuetify/pull/22857)) plus MD3-aligned range selection ([#22858](https://github.com/vuetifyjs/vuetify/pull/22858)).\n\n![Date Picker - new range selection](https://cdn.vuetifyjs.com/docs/images/blog/may-2026-update/date-picker.png)\n\n**[VNumberInput](/components/number-inputs/)** — The new `grouping` prop is a deep piece of work, not just a thousands-separator toggle ([#22134](https://github.com/vuetifyjs/vuetify/pull/22134)). It applies locale-aware grouping and decimal separators that hold together while you type, paste, cut, and delete — the separators reflow as you edit rather than only on blur — honors custom decimal and group separators.\n\n**[VProgressLinear](/components/progress-linear/)** — A new `split` variant aligns the bar with Material Design 3, drawing a gap between the filled portion and the remaining track instead of one continuous line ([#22662](https://github.com/vuetifyjs/vuetify/pull/22662)). It reworked how the bar's chunks are calculated and rendered to match the MD3 progress indicator.\n\n**Arbitrary `rounded` values** — The list is already long, but this one earns its spot ([#22721](https://github.com/vuetifyjs/vuetify/pull/22721)): `rounded` now accepts any value, finally letting you break out of the strict `sm`/`md`/`lg`/`xl` scale and dial in the exact corner radius your design calls for.\n\n\n\n**[VSwitch](/components/switches/)** — Late in the month, the switch was aligned with the MD3 spec ([#22879](https://github.com/vuetifyjs/vuetify/pull/22879)) and gained a `size` prop ([#22882](https://github.com/vuetifyjs/vuetify/pull/22882)) and a `square` inset variant ([#22881](https://github.com/vuetifyjs/vuetify/pull/22881)).\n\n\n\nRounding out the month, a handful of smaller additions: `VCalendar` gained 24-hour support ([#22853](https://github.com/vuetifyjs/vuetify/pull/22853)), the theme system picked up optional page transitions ([#22623](https://github.com/vuetifyjs/vuetify/pull/22623)), and a `hover-elevation` prop with matching CSS utilities ([#22621](https://github.com/vuetifyjs/vuetify/pull/22621)) and a long awaited `color` prop for `VTooltip` ([#19689](https://github.com/vuetifyjs/vuetify/pull/19689)).\n\n### Bug Fixes\n\n| Component | Fix | Version | PR |\n|-----------------------------------------|--------------------------------------------------|---------|-----------------------------------------------------------|\n| **VAlert** | Border opacity should win over theme variables | v4.0.7 | [#22832](https://github.com/vuetifyjs/vuetify/pull/22832) |\n| **VTreeview / VList** | Wire `value-comparator` into selection logic | v4.0.7 | [#22841](https://github.com/vuetifyjs/vuetify/pull/22841) |\n| **VField** | Correct baseline alignment | v4.0.7 | [#22812](https://github.com/vuetifyjs/vuetify/pull/22812) |\n| **VCheckbox** | Align indeterminate opacity and color with MD3 | v4.1.0 | [#22804](https://github.com/vuetifyjs/vuetify/pull/22804) |\n| **VSnackbarQueue** | Avoid stale z-index | v4.1.0 | [#22796](https://github.com/vuetifyjs/vuetify/pull/22796) |\n| **VProgressLinear** | Correct calculation for filled chunks | v4.0.7 | — |\n| **VBtnToggle** | Correct background when active | v4.0.7 | — |\n| **VHover** | Reconcile actual hover state when re-enabled | v4.1.0 | [#22845](https://github.com/vuetifyjs/vuetify/pull/22845) |\n| **VAutocomplete / VCombobox** | Click in empty space should not close menu | v4.0.8 | [#22754](https://github.com/vuetifyjs/vuetify/pull/22754) |\n| **VSelect / VAutocomplete / VCombobox** | Keep menu open when scrolling | v4.0.8 | [#22877](https://github.com/vuetifyjs/vuetify/pull/22877) |\n| **VOverlay** | Restore focus without preventing Enter keydown | v4.0.8 | [#22276](https://github.com/vuetifyjs/vuetify/pull/22276) |\n| **theme** | Support transparent hex color for CSS variables | v4.0.8 | [#22875](https://github.com/vuetifyjs/vuetify/pull/22875) |\n| **VForm** | Avoid eager `.value` reads in default slot props | v4.0.8 | [#22846](https://github.com/vuetifyjs/vuetify/pull/22846) |\n| **VProgressLinear** | Avoid `opacity:NaN` when rendering with SSR | v4.1.0 | [#22880](https://github.com/vuetifyjs/vuetify/pull/22880) |\n| **focusTrap** | Prevent page scroll when capturing focus | v4.1.0 | — |\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\nMay was Vuetify0's bridge from alpha to beta — **163 commits** across **three releases** ([v1.0.0-alpha.3](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.3) on May 5, [alpha.4](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.4) on May 12, [alpha.5](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.5) on May 19). The headline addition was a **headless drag-and-drop family** — three composables that handle state and behavior only, with no markup or styling — alongside a testing and hardening push that set up the [beta announced on June 2](/blog/announcing-vuetify0-beta/).\n\n\n\n### Drag and Drop\n\n* **[useDragDrop](https://0.vuetifyjs.com/composables/system/use-drag-drop)** ([#225](https://github.com/vuetifyjs/0/pull/225)) — the base primitive: a pointer and keyboard input adapter owning two registries (draggables and drop zones) plus the active-drag state.\n* **[createSortable](https://0.vuetifyjs.com/composables/data/create-sortable)** ([#231](https://github.com/vuetifyjs/0/pull/231)) — ordered-list state with `move`, `swap`, and `reorder` mutations and a typed `move:ticket` event. No DOM or input handling of its own, so it can be driven from buttons, gestures, or server updates.\n* **[createKanban](https://0.vuetifyjs.com/composables/data/create-kanban)** ([#234](https://github.com/vuetifyjs/0/pull/234)) — two levels of `createSortable` (columns and items) plus a `transfer` method for moving items between columns.\n\n### Other Additions\n\n* **[createOtp](https://0.vuetifyjs.com/composables/forms/create-otp)** ([#238](https://github.com/vuetifyjs/0/pull/238)) — state and focus management for one-time-code inputs.\n* **[Overflow](https://0.vuetifyjs.com/components/semantic/overflow)** ([#220](https://github.com/vuetifyjs/0/pull/220)) — a container that detects overflow and exposes scroll state to children.\n* **[toHighlight](https://0.vuetifyjs.com/composables/transformers/to-highlight)** ([#222](https://github.com/vuetifyjs/0/pull/222)) — a transformer that marks matched substrings, the companion to VHighlight.\n* **useDelay** ([#224](https://github.com/vuetifyjs/0/pull/224)) — debounce and delayed-execution timing.\n* **Avatar** ([#245](https://github.com/vuetifyjs/0/pull/245)) — added `Avatar.Group` and `Avatar.Indicator` compound parts.\n\n`createRegistry`, which the stateful composables build on, also gained a bulk `reorder` primitive and an `offboard` that returns removed entries — the latter is what `createKanban` uses to move items between columns.\n\n### Genesis Design System\n\nMay also brought the first design system built on Paper: **[@paper/genesis](https://github.com/vuetifyjs/0/pull/240)** — a minimal set of docs primitives extracted from the v0 documentation site. It's an early, working example of the Paper layer the rest of the ecosystem will build on.\n\n### Testing and Performance\n\nBy the end of the alpha cycle, v0 had **5,700+ unit tests** across 142 spec files, **98.7% average coverage** across 105 primitives, and 12 benchmark suites covering hot paths like `createDataTable`, `createFilter`, and the registry core. `createSortable`'s reorder was rewritten to use the registry's bulk operation instead of a per-item loop.\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n**Details:**\n\n* [Announcing the Vuetify0 Beta](/blog/announcing-vuetify0-beta/)\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v1.0.0-alpha.5 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.5)\n* [v1.0.0-alpha.4 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.4)\n* [v1.0.0-alpha.3 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.3)\n* [useDragDrop PR#225](https://github.com/vuetifyjs/0/pull/225)\n* [createSortable PR#231](https://github.com/vuetifyjs/0/pull/231)\n* [createKanban PR#234](https://github.com/vuetifyjs/0/pull/234)\n* [Genesis Design System PR#240](https://github.com/vuetifyjs/0/pull/240)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\n\n\n
\n\nA new [enterprise sponsorship landing page](https://github.com/vuetifyjs/vuetify/pull/22813) was added for teams that want to support the framework at the organization level. The docs also picked up an upgrade-guide pass — a [CSS reset fallback for non-Sass setups](https://github.com/vuetifyjs/vuetify/pull/22821), a more conservative typography mapping, and codemod annotations — to smooth the v3 → v4 migration.\n\n### Nuxt Module\n\n[Andrei Elkin](https://github.com/AndreyYolkin) kept pushing the [Nuxt Module](https://github.com/vuetifyjs/nuxt-module) toward a stable v1, with `beta.3` (May 3) and `beta.4` (May 7) and a focus on more reliable package resolution. That work carried into June — we'll cover it in the next update, so stay tuned.\n\n---\n\n## May 2026 Changelog\n\nThe following section provides an overview of the changes made in May 2026 across the Vuetify framework.\n\n**Key Improvements:**\n\n* v4.0.7: bug-fix patch — VAlert border opacity, VTreeview/VList value-comparator, VField baseline, VProgressLinear chunks, VBtnToggle, VList focus, VSelects contentClass\n* v4.1.0: seven labs promotions, new VHeatmap/VHighlight/VMonthPicker/VDateRangePicker, VSparkline markers, VOtpInput groups, VOverlay viewport strategy, theme page transitions, VTooltip cursor target, VExpansionPanels customization, VNumberInput grouping, VPagination/VDataTableFooter hide-last-page, plus VDataTable/VTable accessibility (aria-sort, aria-labels, caption slot, gridlines)\n* v4.0.8: stable-line fixes — VSelect/VAutocomplete/VCombobox menu, VOverlay focus, theme transparent hex, VForm slot perf\n\n**Expand** this section to see the detailed changelog for May 2026:\n\n
\nMay 2026 Full Changelog\n\n### v4.0.7 (2026-05-08)\n\n**:wrench: Bug Fixes**\n\n* **VAlert:** border opacity should win over theme variables ([#22832](https://github.com/vuetifyjs/vuetify/issues/22832))\n* **VTreeview, VList:** wire `value-comparator` into selection logic ([#22841](https://github.com/vuetifyjs/vuetify/issues/22841))\n* **VField:** correct baseline alignment ([#22812](https://github.com/vuetifyjs/vuetify/issues/22812))\n* **VProgressLinear:** correct calculation for filled chunks\n* **VBtnToggle:** correct background when active\n* **VList:** invisibly focus first element after open\n* **VSelects:** merge `menuProps.contentClass`\n\n---\n\n### v4.1.0-beta.0 (2026-05-21)\n\n**:rocket: Features**\n\n* **VFileUpload:** promote from labs; add `loading` prop\n* **VFileInput, VFileUpload:** support pasting files and folders\n* **VIconBtn:** promote from labs\n* **VDateInput:** promote from labs\n* **VStepperVertical:** promote from labs\n* **VColorInput:** promote from labs\n* **VPicker:** promote from labs\n* **VPullToRefresh:** promote from labs\n* **VHeatmap:** add new component ([#22535](https://github.com/vuetifyjs/vuetify/issues/22535))\n* **VHighlight:** add new component ([#22817](https://github.com/vuetifyjs/vuetify/issues/22817))\n* **VMonthPicker:** add new component ([#22534](https://github.com/vuetifyjs/vuetify/issues/22534))\n* **VDateRangePicker:** add new component ([#22860](https://github.com/vuetifyjs/vuetify/issues/22860))\n* **VSparkline:** markers & tooltips ([#22748](https://github.com/vuetifyjs/vuetify/issues/22748))\n* **VOtpInput:** groups, a11y improvements, emoji ([#22803](https://github.com/vuetifyjs/vuetify/issues/22803))\n* **VDataTable:** highlight search matches ([#22852](https://github.com/vuetifyjs/vuetify/issues/22852)); add mobile header slot ([#21429](https://github.com/vuetifyjs/vuetify/issues/21429)); add `v-model:opened` for group-by ([#22772](https://github.com/vuetifyjs/vuetify/issues/22772))\n* **vCalendar:** 24hour support ([#22853](https://github.com/vuetifyjs/vuetify/issues/22853))\n* **VDatePicker:** keyboard arrows navigation in selection grid ([#22857](https://github.com/vuetifyjs/vuetify/issues/22857))\n* **theme:** add optional page transitions ([#22623](https://github.com/vuetifyjs/vuetify/issues/22623))\n* **elevation:** add `hover-elevation` prop and CSS utilities ([#22621](https://github.com/vuetifyjs/vuetify/issues/22621))\n* **rounded:** accept arbitrary values ([#22721](https://github.com/vuetifyjs/vuetify/issues/22721))\n* **VCommandPalette, VOverlay:** introduce viewport location strategy ([#22698](https://github.com/vuetifyjs/vuetify/issues/22698))\n* **VProgressLinear:** add `split` variant to align with MD3 ([#22662](https://github.com/vuetifyjs/vuetify/issues/22662))\n* **VTooltip:** add `color` prop ([#19689](https://github.com/vuetifyjs/vuetify/issues/19689)); `target=\"cursor\"` should work for hoverable tooltips ([#22728](https://github.com/vuetifyjs/vuetify/issues/22728))\n* **VExpansionPanels:** add more props for customization ([#22723](https://github.com/vuetifyjs/vuetify/issues/22723))\n* **VNumberInput:** add `grouping` prop ([#22134](https://github.com/vuetifyjs/vuetify/issues/22134))\n* **VPagination, VDataTableFooter:** ability to hide last page ([#22788](https://github.com/vuetifyjs/vuetify/issues/22788))\n* **VTreeview:** bind indentLines to item slot\n* **VColorPicker:** add `hide-input-labels` prop\n\n**:wrench: Bug Fixes**\n\n* **VHover:** reconcile actual hover state when re-enabled ([#22845](https://github.com/vuetifyjs/vuetify/issues/22845))\n* **VCheckbox:** align indeterminate opacity and color with MD3 ([#22804](https://github.com/vuetifyjs/vuetify/issues/22804))\n* **VSnackbarQueue:** avoid stale z-index ([#22796](https://github.com/vuetifyjs/vuetify/issues/22796))\n* **VDatePicker:** align range selection with MD3 ([#22858](https://github.com/vuetifyjs/vuetify/issues/22858))\n* **VOverlay:** make `location` and `origin` actually useful ([#22720](https://github.com/vuetifyjs/vuetify/issues/22720)); `contained` should opt-out from static strategy\n* **Dialog, VSnackbar:** correct position with static location strategy\n\n---\n\n### v4.1.0-beta.1 (2026-05-28)\n\n**:rocket: Features**\n\n* **VTable:** add `caption` slot and pass aria-* to `
`; add `gridlines` prop ([#22873](https://github.com/vuetifyjs/vuetify/issues/22873))\n* **VDataTable:** add aria-sort to sortable headers; add aria-labels for selection controls; `loading` prop to accept object with `side` ([#22872](https://github.com/vuetifyjs/vuetify/issues/22872)); add `expanded` slot with transition support ([#22871](https://github.com/vuetifyjs/vuetify/issues/22871)); add filtered `itemsLength` to slot props ([#22874](https://github.com/vuetifyjs/vuetify/issues/22874))\n* **VRating:** expose activeColor in item slot props ([#22814](https://github.com/vuetifyjs/vuetify/issues/22814))\n\n**:wrench: Bug Fixes**\n\n* **theme:** support transparent hex color for CSS variables ([#22875](https://github.com/vuetifyjs/vuetify/issues/22875))\n* **VForm:** avoid eager `.value` reads in default slot props ([#22846](https://github.com/vuetifyjs/vuetify/issues/22846))\n* **VBtnToggle:** restore active overlay when no color is set\n* **VOverlay:** pull focus to trap when it briefly escapes\n\n---\n\n### v4.0.8 (2026-05-29)\n\n**:wrench: Bug Fixes**\n\n* **VSelect/VAutocomplete/VCombobox:** keep menu open when scrolling ([#22877](https://github.com/vuetifyjs/vuetify/issues/22877))\n* **VAutocomplete/VCombobox:** click in empty space should not close menu ([#22754](https://github.com/vuetifyjs/vuetify/issues/22754))\n* **VOverlay:** restore focus without preventing Enter keydown ([#22276](https://github.com/vuetifyjs/vuetify/issues/22276))\n* **theme:** support transparent hex color for CSS variables ([#22875](https://github.com/vuetifyjs/vuetify/issues/22875))\n* **VForm:** avoid eager `.value` reads in default slot props ([#22846](https://github.com/vuetifyjs/vuetify/issues/22846))\n* **VSwitch:** suppress user-agent styles to avoid click dead-zone\n\n\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nJune stabilizes what May opened. **Vuetify 4.1** moves toward its stable release, with a final round of VSwitch MD3 work, VExpansionPanel focus polish, and the SSR and focus-trap fixes that landed late in the month. **Vuetify0** reached [beta on June 2](/blog/announcing-vuetify0-beta/) with its API frozen — from here the focus is edge cases, documentation, and the road to v1.0 in July. And the **theme**, **locale**, and **date** v0 migrations in the framework now have a frozen target to build against.\n\n* [Vuetify 4.1](/getting-started/release-notes/?version=v4.1.0) is live — try the new components and labs promotions in your project today\n* The [Vuetify0 beta](/blog/announcing-vuetify0-beta/) froze its public API ahead of v1 — try it via [v0play](https://v0play.vuetifyjs.com)\n\n### Looking Further Ahead { #looking-ahead }\n\nLooking past June, the theme for the rest of the year is a simple one: **finishing what we started**.\n\n**A focused roadmap, and a clean finish for labs**: We've deliberately narrowed our roadmap commitments for the remainder of 2026 to concentrate the team on one outcome — **by November 1st, 2026, labs will be drained**. Every component still incubating will either graduate into core or be retired; nothing will be left sitting in an \"unfinished\" state. This isn't just housekeeping — a stable framework API is the foundation for a smooth migration as Vuetify0 moves in underneath.\n\n**A community-driven issue board**: We're building a curated view into the issue board where the community can surface and vote on what matters most. Today, prioritization happens largely behind the scenes — this opens a direct line into what we tackle next, and gives us a far clearer read on where the framework's real pain points and most-wanted features actually are. We'll share more as it takes shape.\n\n**A modernized docs experience (later this year)**: We're planning a significant UX upgrade to Vuetify documentation pages, porting over many of the features introduced first to the [Vuetify0 documentation](https://0.vuetifyjs.com/). For a preview of where we're headed, you are more than welcome to spend some time in the [v0 docs](https://0.vuetifyjs.com/) — the navigation, search, and interactive code samples there are an early taste of what's coming.\n\n**Community snips**: [Vuetify Snips](https://snips.vuetifyjs.com/) has always been a hand-curated collection, but we know plenty of talented community members are sitting on gems worth sharing. Once [Vuetify Play](https://play.vuetifyjs.com) gets the stability overhaul it deserves, we'd like to open the door to community submissions — a curated set of community snips contributed by you. It's early days for this one, but it's something we're excited about.\n\n::: error\n\n**Vuetify needs your support.** OpenCollective funds are exhausted and we're currently unable to compensate contributors for ongoing work on the framework and ecosystem tools. If your team relies on Vuetify, please consider sponsoring us via [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution keeps Vuetify shipping.\n\n:::\n\nVuetify is and always will be free and open source. If your team builds on the framework, the v0 beta, the MCP, the CLI, the Nuxt module, the ESLint plugin, or any of the design systems coming behind them, your support directly funds continued development. [Vuetify One](https://one.vuetifyjs.com/) and [GitHub Sponsors](https://github.com/sponsors/johnleider) are the most direct ways to help.\n\nThanks also to the community members who sent patches this month — [mixelburg](https://github.com/mixelburg), [webdevnerdstuff](https://github.com/webdevnerdstuff), [VaishnaviD5900](https://github.com/VaishnaviD5900), [Spatlani](https://github.com/Spatlani), and [Haviles04](https://github.com/Haviles04) — for the fixes and additions that made it into this release.\n\nThank you for being part of the Vuetify community. See you in June!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/november-2025-update.md":"---\nlayout: blog\nmeta:\n title: November 2025 Update\n description: November shipped Vuetify v3.11.0 with VCalendar and VHotkey promoted from labs, a new VTimePicker input variant, VDatePicker MD3 work, and CLI progress.\n keywords: Vuetify November 2025, v3.11.0 Harbinger, VCalendar, VHotkey, VTimePicker, VDatePicker MD3\n---\n\n\n\n# November 2025 Update\n\nWelcome to the November 2025 Vuetify update! This month marks a major milestone with the release of **v3.11.0 (Harbinger)**, promoting VCalendar and VHotkey from labs to core, introducing the new VTimePicker input variant, and aligning VDatePicker with Material Design 3 specifications.\n\n![Hero image for November update](https://cdn.vuetifyjs.com/docs/images/blog/november-2025-update/november-hero.png \"November hero image\")\n\n🖊️ John Leider • 📅 December 10th, 2025\n\n\n\n---\n\n## The Harbinger Arrives\n\nNovember was a landmark month for the framework. We shipped **v3.11.0 (Harbinger)** with two components graduating from labs—VCalendar and VHotkey—alongside significant enhancements to date and time pickers that bring them in line with Material Design 3. The **VTimePicker input variant** and **VDatePicker control alignment** represent months of refinement work finally landing in a stable release. Beyond the framework, we made substantial progress on the **Vuetify CLI** with 37 commits laying the groundwork for v0 tooling. J-Sek continued his incredible contribution streak, authoring 14 PRs to the main framework and adding 7+ new templates to Snips. The ecosystem is firing on all cylinders.\n\n::: success\n\nCool example of the month: [v0 Expansion Panel in VPlay](https://vtfy.link/i5LxmQ) by [johnleider](https://github.com/johnleider)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Ecosystem Spotlight: Vuetify CLI](#ecosystem-spotlight-vuetify-cli)\n* [Framework Updates](#framework-updates)\n * [Date & Time Picker Enhancements](#date-time-picker-enhancements)\n * [Component Refinements](#component-refinements)\n* [Vuetify MCP: Continued Evolution](#vuetify-mcp-continued-evolution)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [November 2025 Changelog](#november-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nNovember delivered seven releases culminating in **v3.11.0 (Harbinger)**, our most feature-rich release since v3.10. Two components graduated from labs to core, and we shipped significant enhancements across date/time pickers, tabs, and overlay components.\n\n![November Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/november-2025-update/releases.png \"November Releases Banner\")\n\n### Key Improvements\n\n* **VCalendar** and **VHotkey** promoted from labs to core components\n* New **VTimePicker input variant** for inline time entry without the dial interface\n* **VDatePicker MD3 alignment** with updated control variants matching Material Design 3 specifications\n* **VTabs inset prop** for subtle tab designs in dense layouts\n* **VTextarea max-height prop** for controlled textarea growth\n* **VSelect auto-select-first** for automatic first-item highlighting\n* Theme **layers option** for advanced CSS cascade control\n\nView the complete list of changes in the [Full Changelog](#november-2025-changelog)\n\n**Details:**\n\n* [v3.10.9](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.9)\n* [v3.10.10](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.10)\n* [v3.10.11](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.11)\n* [v3.10.12](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.12)\n* [v3.11.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.0)\n\n---\n\n## Ecosystem Spotlight: Vuetify CLI { #ecosystem-spotlight-vuetify-cli }\n\nNovember saw intensive development on the **Vuetify CLI**, with 37 commits laying the foundation for v0 tooling and developer workflows. While not yet released, this work represents a significant investment in the developer experience for Vuetify 4.0 and beyond.\n\nThe CLI will provide streamlined project scaffolding, component generation, and integration with the broader Vuetify ecosystem including v0 composables and the MCP server. More details coming as we approach the initial release.\n\n**Also this month:**\n\n* **Vuetify Bin** received real-time collaboration features\n* **Vuetify Snips** added 7+ new templates across pricing, buttons, feedback cards, and chat components\n* **Vuetify Play** and **Studio** improved user preference persistence\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n* [Vuetify Snips](https://snips.vuetifyjs.com/)\n* [Vuetify Play](https://play.vuetifyjs.com/)\n\n---\n\n## Framework Updates\n\n\n\nNovember's framework work centered on date/time picker improvements and component polish. J-Sek delivered an outstanding 14 PRs, driving many of the enhancements below.\n\n### Date & Time Picker Enhancements { #date-time-picker-enhancements }\n\nThe date and time picker components received significant attention this month, bringing them closer to Material Design 3 specifications and adding long-requested features.\n\n**VTimePicker Input Variant**\n\nA new input variant allows users to type time values directly without using the dial interface—perfect for power users and keyboard-first workflows.\n\n![VTimePicker Input Variant](https://cdn.vuetifyjs.com/docs/images/blog/november-2025-update/vtimepicker-input.png \"VTimePicker Input Variant\")\n\n**VDatePicker MD3 Controls**\n\nControl variants have been aligned with Material Design 3, providing a more polished and consistent appearance.\n\n\n\n\n**Details:**\n\n* [VTimePicker input variant PR#21601](https://github.com/vuetifyjs/vuetify/pull/21601)\n* [VDatePicker MD3 alignment PR#21589](https://github.com/vuetifyjs/vuetify/pull/21589)\n* [VDatePicker landscape mode PR#22305](https://github.com/vuetifyjs/vuetify/pull/22305)\n* [VDateInput min/max fix PR#22295](https://github.com/vuetifyjs/vuetify/pull/22295)\n\n### Component Refinements\n\n**Navigation & Layout**\n\n* **VTabs**: New `inset` prop for subtle tab designs, plus slider transition improvements\n* **VOverlay**: Added `viewport-margin` prop for better positioning control\n* **VNavigationDrawer**: New `retain-focus` prop to control focus behavior\n\n\n\n\n**Form Components**\n\n* **VTextarea**: Added `max-height` prop for controlled growth\n* **VSelect**: New `auto-select-first` prop and improved chip itemProps handling\n* **VCombobox**: Create new items when pasting with line breaks\n\n**Data & Display**\n\n* **VTreeview**: Significant performance improvements for large trees\n* **VList**: New `prepend-gap` and `indent` props for flexible spacing\n* **VBreadcrumbs**: Props and width can now be passed to items\n\n**Theming**\n\n* New `layers` option for advanced CSS cascade control\n\n**Details:**\n\n* [VTabs inset PR#22221](https://github.com/vuetifyjs/vuetify/pull/22221)\n* [VTabs slider transition PR#19556](https://github.com/vuetifyjs/vuetify/pull/19556)\n* [VOverlay viewport-margin PR#22243](https://github.com/vuetifyjs/vuetify/pull/22243)\n* [VNavigationDrawer retain-focus PR#22106](https://github.com/vuetifyjs/vuetify/pull/22106)\n* [VTextarea max-height PR#22286](https://github.com/vuetifyjs/vuetify/pull/22286)\n* [VSelect auto-select-first PR#22312](https://github.com/vuetifyjs/vuetify/pull/22312)\n* [VCombobox line breaks PR#22304](https://github.com/vuetifyjs/vuetify/pull/22304)\n* [VTreeview performance PR#22255](https://github.com/vuetifyjs/vuetify/pull/22255)\n* [VList prepend-gap/indent PR#20616](https://github.com/vuetifyjs/vuetify/pull/20616)\n* [VBreadcrumbs props PR#22213](https://github.com/vuetifyjs/vuetify/pull/22213)\n* [Theme layers PR#22215](https://github.com/vuetifyjs/vuetify/pull/22215)\n\n---\n\n## Vuetify MCP: Continued Evolution { #vuetify-mcp-continued-evolution }\n\n\n\nNovember brought four releases to the Vuetify MCP server (v0.2.0 through v0.2.3), continuing to refine the AI-powered development experience.\n\n### What's New\n\n**Stability Improvements**: Multiple releases focused on reliability and edge case handling for the HTTP transport introduced in October.\n\n**Documentation Enhancements**: Improved tool descriptions and response formatting for better AI assistant integration.\n\n### Getting Started\n\nTo use the hosted MCP server with Claude Desktop or other MCP clients:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [Model Context Protocol Documentation](https://modelcontextprotocol.io/)\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\nNovember was our most active month yet for Vuetify0, with 109 commits and 5 releases (v0.0.10 through v0.0.14). The focus was on performance optimization and type safety improvements.\n\n![Vuetify0 Type Safety](https://cdn.vuetifyjs.com/docs/images/blog/november-2025-update/v0.png \"Vuetify0 Type Safety\")\n\n**Performance Optimizations**\n\nWe implemented deferred reindexing for registry unregister operations, significantly improving performance when components mount and unmount rapidly.\n\n**Type Safety Improvements**\n\nThe `RegistryTicket.value` is now generic, providing better type inference and IntelliSense support when working with registered items.\n\n```ts\nimport { useRegistry } from '@vuetify/v0'\nimport type { RegistryTicket } from '@vuetify/v0'\n\ninterface User {\n name: string\n email: string\n}\n\n// Value type flows through the registry\nconst registry = useRegistry>()\n\nconst ticket = registry.register({\n id: 'user-1',\n value: { name: 'John', email: 'john@vuetifyjs.com' }\n})\n\n// ticket.value is typed as User\nconsole.log(ticket.value.name) // ✓ TypeScript knows this is a string\n```\n\nDecember will focus on expanding the component library and preparing integration paths with the main Vuetify framework.\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [Performance optimization PR#48](https://github.com/vuetifyjs/0/pull/48)\n* [Type safety PR#53](https://github.com/vuetifyjs/0/pull/53)\n\n---\n\n## November 2025 Changelog\n\nThe following section provides an overview of the changes made in November 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* VCalendar and VHotkey promoted from labs to core\n* VTimePicker input variant for direct time entry\n* VDatePicker MD3 control alignment\n* VTabs inset prop and slider transitions\n* VTreeview performance optimizations for large trees\n* Theme layers option for CSS cascade control\n\n**Expand** this section to see the detailed changelog for November 2025:\n\n
\n\n### :rocket: Features\n\n* **flex:** add justify-items utilities ([#22346](https://github.com/vuetifyjs/vuetify/issues/22346)) ([pgalhardo](https://github.com/pgalhardo))\n* **VBreadcrumbs:** pass props and width to items ([#22213](https://github.com/vuetifyjs/vuetify/issues/22213)) ([J-Sek](https://github.com/J-Sek))\n* **VCombobox:** create new items when pasting with line breaks ([#22304](https://github.com/vuetifyjs/vuetify/issues/22304)) ([ikushum](https://github.com/ikushum))\n* **VDatePicker:** align control variants with MD3 ([#21589](https://github.com/vuetifyjs/vuetify/issues/21589)) ([J-Sek](https://github.com/J-Sek))\n* **VList:** add `prepend-gap` and `indent` props ([#20616](https://github.com/vuetifyjs/vuetify/issues/20616)) ([yuwu9145](https://github.com/yuwu9145))\n* **VNavigationDrawer, VOverlay:** add `retain-focus` prop ([#22106](https://github.com/vuetifyjs/vuetify/issues/22106)) ([J-Sek](https://github.com/J-Sek))\n* **VOverlay:** add `viewport-margin` prop ([#22243](https://github.com/vuetifyjs/vuetify/issues/22243)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect:** add `auto-select-first` prop ([#22312](https://github.com/vuetifyjs/vuetify/issues/22312)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect:** apply compatible itemProps to chips ([#22339](https://github.com/vuetifyjs/vuetify/issues/22339)) ([KaelWD](https://github.com/KaelWD))\n* **VStepper:** add new item-props prop ([#20651](https://github.com/vuetifyjs/vuetify/issues/20651)) ([johnleider](https://github.com/johnleider))\n* **VTabs:** add `inset` prop ([#22221](https://github.com/vuetifyjs/vuetify/issues/22221)) ([J-Sek](https://github.com/J-Sek))\n* **VTabs:** add new prop, slider transition ([#19556](https://github.com/vuetifyjs/vuetify/issues/19556)) ([johnleider](https://github.com/johnleider))\n* **VTextarea:** add `max-height` prop ([#22286](https://github.com/vuetifyjs/vuetify/issues/22286)) ([J-Sek](https://github.com/J-Sek))\n* **VTimePicker:** input variant ([#21601](https://github.com/vuetifyjs/vuetify/issues/21601)) ([J-Sek](https://github.com/J-Sek))\n* **theme:** add layers option ([#22215](https://github.com/vuetifyjs/vuetify/issues/22215)) ([Niki2k1](https://github.com/Niki2k1))\n* **typography:** add font-weight semibold helper class ([#20586](https://github.com/vuetifyjs/vuetify/issues/20586)) ([FraCata00](https://github.com/FraCata00))\n\n### :wrench: Bug Fixes\n\n* **v-tooltip:** prevent showing empty tooltip ([#22347](https://github.com/vuetifyjs/vuetify/issues/22347)) ([Haviles04](https://github.com/Haviles04))\n* **VAvatar:** update background variable to use RGB format ([#22310](https://github.com/vuetifyjs/vuetify/issues/22310)) ([juanjcardona13](https://github.com/juanjcardona13))\n* **VBtnToggle:** remove semicolon from Sass ([#22293](https://github.com/vuetifyjs/vuetify/issues/22293)) ([methompson](https://github.com/methompson))\n* **VBtnToggle:** render selected in forced-colors mode ([#22279](https://github.com/vuetifyjs/vuetify/issues/22279)) ([06b](https://github.com/06b))\n* **VCalendar:** calculate week numbers using current locale ([#22341](https://github.com/vuetifyjs/vuetify/issues/22341)) ([J-Sek](https://github.com/J-Sek))\n* **VCalendar:** correct interval and event offset with custom firstTime ([#22343](https://github.com/vuetifyjs/vuetify/issues/22343)) ([KaelWD](https://github.com/KaelWD))\n* **VCalendar:** day button font size and no active state ([#22336](https://github.com/vuetifyjs/vuetify/issues/22336)) ([J-Sek](https://github.com/J-Sek))\n* **VDateInput:** min/max with built-in adapter ([#22295](https://github.com/vuetifyjs/vuetify/issues/22295)) ([J-Sek](https://github.com/J-Sek))\n* **VDatePicker:** support landscape mode ([#22305](https://github.com/vuetifyjs/vuetify/issues/22305)) ([ikushum](https://github.com/ikushum))\n* **VField:** hide progress border in forced-colors mode ([#22316](https://github.com/vuetifyjs/vuetify/issues/22316)) ([06b](https://github.com/06b))\n* **VField:** remove details prop from makeVFieldProps ([#22268](https://github.com/vuetifyjs/vuetify/issues/22268)) ([pgalhardo](https://github.com/pgalhardo))\n* **VHotkey:** inline alignment, sizing consistency, slash separator ([#22321](https://github.com/vuetifyjs/vuetify/issues/22321)) ([J-Sek](https://github.com/J-Sek))\n* **VInfiniteScroll:** hide side element when empty ([#21749](https://github.com/vuetifyjs/vuetify/issues/21749)) ([J-Sek](https://github.com/J-Sek))\n* **VList:** correct styles for spacing with `nav` prop ([#22254](https://github.com/vuetifyjs/vuetify/issues/22254)) ([J-Sek](https://github.com/J-Sek))\n* **VMaskInput:** Fixes error when mask input is cleared ([#22176](https://github.com/vuetifyjs/vuetify/issues/22176)) ([ikushum](https://github.com/ikushum))\n* **VRating:** correct keyboard controls ([#22314](https://github.com/vuetifyjs/vuetify/issues/22314)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect:** Use hidden select for native form submissions ([#22330](https://github.com/vuetifyjs/vuetify/issues/22330)) ([ikushum](https://github.com/ikushum))\n* **VTab:** render selected in forced-colors mode ([#22271](https://github.com/vuetifyjs/vuetify/issues/22271)) ([06b](https://github.com/06b))\n* **VTreeview:** faster interactions with large trees ([#22255](https://github.com/vuetifyjs/vuetify/issues/22255)) ([J-Sek](https://github.com/J-Sek))\n\n### :test_tube: Labs\n\n* **VCalendar:** promoted to core component\n* **VHotkey:** promoted to core component\n\n
\n\n## What's Next{ #whats-next .mt-4 }\n\nDecember will see continued refinement of v3.11.x as we stabilize the new features and address community feedback. Work on VCommandPalette progresses toward an initial labs release, and we're expanding the v0 library with additional headless primitives.\n\nThe Vuetify CLI is approaching its first public release, which will streamline project setup and component generation for both Vuetify 3 and the upcoming v0-based workflows. We're also planning end-of-year webinars covering the v3.11 release highlights and a preview of what's coming in 2026.\n\nThank you for being part of the Vuetify community. See you in December!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/october-2025-update.md":"---\nlayout: blog\nmeta:\n title: October 2025 Update\n description: October focused on refinement, delivering focus trap improvements, component enhancements, and v0 composables progress for v3.11 and v4.0.\n keywords: Vuetify October 2025, v3.11 LTS, Focus trap, Component enhancements, v0 composables, v4.0\n---\n\n\n\n# October 2025 Update\n\nWelcome to the October 2025 Vuetify update! This month, our team focused on refinement and reliability, delivering significant **focus trap improvements** across multiple components and advancing key features in development.\n\n![Hero image for October update](https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/october-hero.png \"October hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 November 11th, 2025\n\n\n\n---\n\n## Moving along\n\nOctober's development cycle focused on polish and developer experience. We delivered critical accessibility improvements with enhanced focus trap functionality, optimized VDataTable performance for large datasets, and refined components across the board. The month also saw the launch of **Vuetify Link**, our new URL shortening service, and significant updates to the **Vuetify MCP server** with HTTP transport support, making it easier than ever to integrate Vuetify's documentation and API intelligence into AI-powered development workflows. We also made substantial progress on our **v0 composables**, laying the groundwork for the upcoming Vuetify 4.0 release.\n\n::: success\n\nCool example of the month: [VTreeview footer](https://play.vuetifyjs.com/playgrounds/foNl1A) by [J-Sek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Ecosystem Spotlight: Vuetify Link](#ecosystem-spotlight-vuetify-link)\n* [Framework Updates](#framework-updates)\n * [Focus Trap Enhancements](#focus-trap-enhancements)\n * [Component Refinements](#component-refinements)\n * [In Development](#in-development)\n* [Vuetify MCP: HTTP Transport Support](#vuetify-mcp-http-transport-support)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [October 2025 Changelog](#october-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nOctober delivered five releases focused on stability, performance, and accessibility. We merged numerous bug fixes across components, improved focus trap behavior, enhanced form field handling, and optimized performance for large data sets.\n\n![October Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/releases.png \"October Releases Banner\")\n\n### Key Improvements\n\n* Enhanced focus trap functionality across VDialog and VMenu with better invisible/inert element handling\n* Performance optimizations for VDataTable with select-all improvements and reduced lag in large datasets\n* Multiple VMenu fixes improving keyboard navigation, scroll behavior, and ARIA attributes\n* VCombobox and VAutocomplete refinements with consistent transitions and better open/close behavior\n* Accessibility improvements with forced-colors mode support for multiple components\n* Labs components updates including VCalendar, VDateInput, and VMaskInput enhancements\n\nView the complete list of changes in the [Full Changelog](#october-2025-changelog)\n\n**Details:**\n\n* [v3.10.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.4)\n* [v3.10.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.5)\n* [v3.10.6](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.6)\n* [v3.10.7](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.7)\n* [v3.10.8](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.8)\n\n---\n\n## Ecosystem Spotlight: Vuetify Link { #ecosystem-spotlight-vuetify-link }\n\n\n\nSharing code examples and playground demos is fundamental to how our community learns and collaborates. **Vuetify Link** is now live—a URL shortening service purpose-built for the Vuetify ecosystem. It makes sharing your playgrounds, reporting issues with reproducible examples, and showcasing your latest components effortless.\n\n\n\nCreating links is free for everyone. Vuetify One users get additional features such as redirect timer, password protection, and custom slug generation.\n\n**Details:**\n\n* [Vuetify Link](https://link.vuetifyjs.com/)\n\n---\n\n## Framework Updates\n\n\n\nOctober was all about refinement and reliability. Our team focused on enhancing existing components with new features and improving the overall developer experience across the framework.\n\n### Focus Trap Enhancements\n\nWe've made significant improvements to focus trap functionality across components, ensuring better keyboard navigation and accessibility compliance. These enhancements improve the experience for users relying on keyboard navigation and assistive technologies.\n\n**Details:**\n\n* [PR#22105](https://github.com/vuetifyjs/vuetify/pull/22105)\n* [PR#22044](https://github.com/vuetifyjs/vuetify/pull/22044)\n\n### Component Refinements\n\nThe team has been working diligently to enhance component reliability and functionality:\n\n**Navigation & Selection**\n\n* **VTreeview & VList**: Improved node selection reliability for more predictable behavior in complex tree structures\n* **VBreadcrumbs**: Added `item-props` support to enable text truncation for long breadcrumb items\n\n**Form Components**\n\n* **VAutocomplete & VCombobox**: Refined menu transitions and resolved edge-case issues\n* **VMenu**: Various fixes improving stability and user experience\n\n**Data & Display**\n\n* **VTreeview**: New footer slot plus minor bug fixes\n* **VDataTable**: Multi-sort enhancements for more powerful data manipulation\n\n**Details:**\n\n* [VTreeview PR#22130](https://github.com/vuetifyjs/vuetify/pull/22130)\n* [VBreadcrumbs PR#22213](https://github.com/vuetifyjs/vuetify/pull/22213)\n* [VAutocomplete/VCombobox PR#22144](https://github.com/vuetifyjs/vuetify/pull/22144)\n* [VMenu PR#22242](https://github.com/vuetifyjs/vuetify/pull/22242)\n* [VMenu PR#22240](https://github.com/vuetifyjs/vuetify/pull/22240)\n* [VDataTable PR#22133](https://github.com/vuetifyjs/vuetify/pull/22133)\n\n### In Development\n\nWe have multiple new features and components in active development that are continuing to make progress:\n\n#### VCommandPalette\n\n**VCommandPalette Development**: Work continues on scoping and developing this highly-requested component. Command-driven interfaces are perfect for power users and keyboard-first workflows, and we're excited to bring this pattern to Vuetify applications.\n\n![VCommandPalette Component](https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/vcommandpalette.png \"VCommandPalette Component\")\n\n#### VTabs Enhancements\n\nWe're working on a new **inset variant** for `VTabs`. This variant provides a more subtle tab design that works beautifully in dense layouts and secondary navigation contexts.\n\n\n\n**Details:**\n\n* [VCommandPalette PR#22217](https://github.com/vuetifyjs/vuetify/pull/22217)\n* [VList a11y PR#21444](https://github.com/vuetifyjs/vuetify/pull/21444)\n* [VTabs inset variant PR#22221](https://github.com/vuetifyjs/vuetify/pull/22221)\n\n---\n\n## Vuetify MCP: HTTP Transport Support { #vuetify-mcp-http-transport-support }\n\n\n\nOctober brought significant updates to the **Vuetify MCP (Model Context Protocol) server**, expanding how developers can integrate Vuetify's comprehensive documentation and API intelligence into AI-powered coding assistants like Claude Code, Cline, and other MCP-compatible tools.\n\n### What's New\n\n**HTTP Transport Support**: The Vuetify MCP server now supports HTTP transport in addition to the standard stdio transport. This makes it easier to deploy and connect to the server across different environments and use cases.\n\n**Official Hosted Server**: We've launched an official hosted MCP server at **[https://mcp.vuetifyjs.com](https://mcp.vuetifyjs.com)**, allowing you to access Vuetify's documentation, component APIs, installation guides, and feature documentation without running a local server.\n\n### Getting Started\n\nTo use the hosted MCP server with Claude Desktop or other MCP clients, add the following to your MCP configuration:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\nThe Vuetify MCP server provides AI assistants with direct access to:\n\n* **Component APIs**: Detailed prop, slot, and event documentation for all Vuetify components\n* **Directive APIs**: Complete directive documentation including v-ripple, v-scroll, and more\n* **Installation Guides**: Platform-specific setup instructions for Vite, Nuxt, Laravel, and others\n* **Feature Guides**: In-depth documentation on theming, internationalization, accessibility, and more\n* **Release Notes**: Version-specific changelogs and migration information\n* **FAQ**: Frequently asked questions and common solutions\n\nThis integration enables your AI coding assistant to provide accurate, up-to-date Vuetify guidance directly within your development workflow.\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [HTTP Transport Commit](https://github.com/vuetifyjs/mcp/commit/66a3802951294f7610562d949dbdd51db879d50a)\n* [Model Context Protocol Documentation](https://modelcontextprotocol.io/)\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\nOctober was all about testing and iteration and we covered a lot of ground. All composables received a tuning pass to improve type safety and Intellisense support:\n\n![TypeScript Intellisense](https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/v0.png \"Vuetify0 TypeScript Intellisense\")\n\nAll composables now follow consistent naming conventions and patterns and we are now beginning to iterate on the component variations of each composable (where applicable). These components will marry various composables together to provide full-featured UI elements built on the v0 foundation.\n\nWe've also started to add interactive examples to the documentation site to showcase usage patterns and best practices. One component that received a lot of work last month was the **ExpansionPanel** which is now available as of the [v0.0.10](https://github.com/vuetifyjs/0/releases/tag/v0.0.10) release.\n\n```html\n\n\n\n```\n\nNovember will focus on continuing to build out components based on the v0 composables, along with additional documentation and examples as we prepare for Vuetify integration.\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [ExpansionPanel](https://0.vuetifyjs.com/components/expansion-panel/)\n\n---\n\n## October 2025 Changelog\n\nThe following section provides an overview of the changes made in October 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* Focus trap enhancements: Better keyboard navigation, invisible/inert element handling, and aria-owns support\n* Performance optimizations: Select-all optimization in VDataTable, reduced lag with large datasets\n* Form field reliability: Fixed duplicated emits, improved validation rules, better field control refs\n* Component polish: VMenu scroll/focus fixes, VCombobox/VAutocomplete transition improvements, VDatePicker range fixes\n* Accessibility: Forced-colors mode support for VBadge, VListItem, VSkeletonLoader, and VIconBtn\n* Labs updates: VCalendar scrolling fixes, VMaskInput inheritance, VDateInput min/max support\n\n**Expand** this section to see the detailed changelog for October 2025:\n\n
\n\n### :rocket: Features\n\n* **locationStrategies:** support CSS zoom ([#21878](https://github.com/vuetifyjs/vuetify/issues/21878)) ([32242a3](https://github.com/vuetifyjs/vuetify/commit/32242a353b1313b35f18bfc7c0ac7a72ed2196bb)), closes [#20719](https://github.com/vuetifyjs/vuetify/issues/20719)\n* **VCombobox:** add `always-filter` prop ([#22093](https://github.com/vuetifyjs/vuetify/issues/22093)) ([8853f4d](https://github.com/vuetifyjs/vuetify/commit/8853f4da7a6600af3587dcc54f18e5b06a2d1ff9)), closes [#22060](https://github.com/vuetifyjs/vuetify/issues/22060)\n\n### :wrench: Bug Fixes\n\n* catch querySelector errors in focusableChildren() ([ae2af38](https://github.com/vuetifyjs/vuetify/commit/ae2af38f982dc83c662bfa84ce7189c4c08ff16b)), closes [#22238](https://github.com/vuetifyjs/vuetify/issues/22238)\n* **group:** avoid errors when comparing recursive items ([#22246](https://github.com/vuetifyjs/vuetify/issues/22246)) ([8ac9c67](https://github.com/vuetifyjs/vuetify/commit/8ac9c67a50653147b9d1003546a45cfea206aab3)), closes [#19322](https://github.com/vuetifyjs/vuetify/issues/19322)\n* **nested:** avoid console warnings when updating items order ([#21987](https://github.com/vuetifyjs/vuetify/issues/21987)) ([1dac082](https://github.com/vuetifyjs/vuetify/commit/1dac0826eea90668bf760ea8c43a01a092c6f28e)), closes [#20934](https://github.com/vuetifyjs/vuetify/issues/20934)\n* **nested:** selection should react to items changes ([#22236](https://github.com/vuetifyjs/vuetify/issues/22236)) ([6bcdbea](https://github.com/vuetifyjs/vuetify/commit/6bcdbea3800c03bdf3ae736969c423bcd7e54672)), closes [#21733](https://github.com/vuetifyjs/vuetify/issues/21733)\n* **validation:** 'number' rule should accept 0 and empty string ([#22204](https://github.com/vuetifyjs/vuetify/issues/22204)) ([1b52724](https://github.com/vuetifyjs/vuetify/commit/1b52724dfeb17c6fb6dd6e50002dec33994ecd51)), closes [#22192](https://github.com/vuetifyjs/vuetify/issues/22192)\n* **validation:** correct translation template arguments ([#22146](https://github.com/vuetifyjs/vuetify/issues/22146)) ([a8e17c9](https://github.com/vuetifyjs/vuetify/commit/a8e17c9966c6333d30c092b3c931ab6afff2b03a))\n* **VBadge:** background highlight in forced-colors mode ([#22148](https://github.com/vuetifyjs/vuetify/issues/22148)) ([65f6bb7](https://github.com/vuetifyjs/vuetify/commit/65f6bb708b6cdc72c4a0e2828ef3d917f2a78559))\n* **VBtn:** set group state for non-router links ([4eeb514](https://github.com/vuetifyjs/vuetify/commit/4eeb514c675b2eeef16f994cac7d37fe1a516b65)), closes [#22085](https://github.com/vuetifyjs/vuetify/issues/22085)\n* **VChipGroup:** disable auto-scroll to the last selected ([360203a](https://github.com/vuetifyjs/vuetify/commit/360203aa3e97d84d2aea76f46a6a2062b7a7b879)), closes [#22223](https://github.com/vuetifyjs/vuetify/issues/22223)\n* **VChipGroup:** support `center-active` ([#22050](https://github.com/vuetifyjs/vuetify/issues/22050)) ([4a95697](https://github.com/vuetifyjs/vuetify/commit/4a95697c58665ed53b7c23ab6864318b59a371e9)), closes [#22046](https://github.com/vuetifyjs/vuetify/issues/22046)\n* **VCombobox:** open menu when `chips` and typing after clear ([d200f22](https://github.com/vuetifyjs/vuetify/commit/d200f227a12ba14aeb5b0a0ce0fd77ce95da52dc))\n* **VCombobox:** show full list on reopen unless `always-filter` is used ([83d0073](https://github.com/vuetifyjs/vuetify/commit/83d00737566fd1df7d043d97d6c93dde5237162e))\n* **VCombobox, VAutocomplete:** avoid glitches when opening with click ([9a1dd83](https://github.com/vuetifyjs/vuetify/commit/9a1dd8363ff59d91257236b126cb5d89c92ebb61)), closes [#22228](https://github.com/vuetifyjs/vuetify/issues/22228)\n* **VAutocomplete/VCombobox:** consistent open/close transition ([#22144](https://github.com/vuetifyjs/vuetify/issues/22144)) ([96f6479](https://github.com/vuetifyjs/vuetify/commit/96f6479d2aa82bcf8f75de51c9dce557fba981bd))\n* **VConfirmEdit:** deeply unwrap refs before cloning values ([a507171](https://github.com/vuetifyjs/vuetify/commit/a507171d25b0d41a4be0d74095ac69afbc413922)), closes [#22232](https://github.com/vuetifyjs/vuetify/issues/22232)\n* **VDataTable:** avoid lag when selecting rows in large tables ([#22163](https://github.com/vuetifyjs/vuetify/issues/22163)) ([92f8a3c](https://github.com/vuetifyjs/vuetify/commit/92f8a3c5c75e84ab79377e9c26a74576f36e6bbc)), closes [#21767](https://github.com/vuetifyjs/vuetify/issues/21767)\n* **VDataTable:** optimize select-all performance ([#22252](https://github.com/vuetifyjs/vuetify/issues/22252)) ([2ad1a38](https://github.com/vuetifyjs/vuetify/commit/2ad1a385a06d94405aa3497b079498f08c870e83)), closes [#19447](https://github.com/vuetifyjs/vuetify/issues/19447)\n* **VDatePicker:** correct range for `allowed-dates` ([#22167](https://github.com/vuetifyjs/vuetify/issues/22167)) ([e678f0e](https://github.com/vuetifyjs/vuetify/commit/e678f0e0d6c45018c611785d932c51db4068a8ef)), closes [#22160](https://github.com/vuetifyjs/vuetify/issues/22160)\n* **VDatePicker:** correct range selection for Luxon adapter ([20b2bf4](https://github.com/vuetifyjs/vuetify/commit/20b2bf425353f6a4d5edf6f1c63d5c35b0ecd165)), closes [#22262](https://github.com/vuetifyjs/vuetify/issues/22262)\n* **VDatePicker:** return correct range for DST ([#22187](https://github.com/vuetifyjs/vuetify/issues/22187)) ([a3ddcf1](https://github.com/vuetifyjs/vuetify/commit/a3ddcf16cca785abcfbc1a922c6e44f6e2acc576)), closes [#22186](https://github.com/vuetifyjs/vuetify/issues/22186)\n* **VDialog:** fix focus trap when tabbing forward ([#22101](https://github.com/vuetifyjs/vuetify/issues/22101)) ([50a150b](https://github.com/vuetifyjs/vuetify/commit/50a150bf0eb8abf6129958e6b11355a1315bfb5b)), closes [#21945](https://github.com/vuetifyjs/vuetify/issues/21945)\n* **VDialog:** focus trap should ignore invisible and inert elements ([#22105](https://github.com/vuetifyjs/vuetify/issues/22105)) ([adf3f91](https://github.com/vuetifyjs/vuetify/commit/adf3f919c6fa1efd6aacde0686a0fb5d5dc0e0bb)), closes [#18400](https://github.com/vuetifyjs/vuetify/issues/18400)\n* **VDivider:** inherit color in colored containers ([bb54a7d](https://github.com/vuetifyjs/vuetify/commit/bb54a7ded40156e24b670c83e826caca1740b74a))\n* **VField:** missing `controlRef` assignment ([#22171](https://github.com/vuetifyjs/vuetify/issues/22171)) ([b89f568](https://github.com/vuetifyjs/vuetify/commit/b89f56819302649463482ce2776557e371b9ec75)), closes [#22034](https://github.com/vuetifyjs/vuetify/issues/22034)\n* **VFileInput, VFileUpload:** avoid invalid `accept` when not defined ([e6c39bc](https://github.com/vuetifyjs/vuetify/commit/e6c39bcbeb750ce4b1a5da91edb4a940dcc4fd38)), closes [#22131](https://github.com/vuetifyjs/vuetify/issues/22131)\n* **VKbd:** use `$body-font-family` as default ([3f61102](https://github.com/vuetifyjs/vuetify/commit/3f6110237d3a0fb5e65dae6358dc4d04d11e7338))\n* **VListItem:** correct role when item is a link ([#22137](https://github.com/vuetifyjs/vuetify/issues/22137)) ([80e154b](https://github.com/vuetifyjs/vuetify/commit/80e154b8c295458b9ced262b3e20403fe07376c3)), closes [#22086](https://github.com/vuetifyjs/vuetify/issues/22086)\n* **VListItem:** respect link & canvas colors in forced-colors mode ([#22032](https://github.com/vuetifyjs/vuetify/issues/22032)) ([84a7bff](https://github.com/vuetifyjs/vuetify/commit/84a7bffc9d721c2bc2deca6b93c6d08e4e77f534))\n* **VMenu:** add aria-owns to activator ([#22240](https://github.com/vuetifyjs/vuetify/issues/22240)) ([975a18c](https://github.com/vuetifyjs/vuetify/commit/975a18cc2dd4ef197a6ab6ca49f81788f9b4f638)), closes [#22226](https://github.com/vuetifyjs/vuetify/issues/22226)\n* **VMenu:** avoid scrolling to the off-screen menu ([#22044](https://github.com/vuetifyjs/vuetify/issues/22044)) ([d1dafff](https://github.com/vuetifyjs/vuetify/commit/d1dafffd729590f1c873da20fb6b09f6d53c38e4)), closes [#21775](https://github.com/vuetifyjs/vuetify/issues/21775) [#20569](https://github.com/vuetifyjs/vuetify/issues/20569) [#21015](https://github.com/vuetifyjs/vuetify/issues/21015) [#16819](https://github.com/vuetifyjs/vuetify/issues/16819)\n* **VMenu:** ignore focus on root element ([fe1214f](https://github.com/vuetifyjs/vuetify/commit/fe1214fb1cbfe021b7db50e88ea091b4ef39e707)), closes [#22263](https://github.com/vuetifyjs/vuetify/issues/22263)\n* **VMenu:** keep open with keyboard and open-delay=\"0\" ([#22242](https://github.com/vuetifyjs/vuetify/issues/22242)) ([8e810e5](https://github.com/vuetifyjs/vuetify/commit/8e810e54b12c58a525bf2efb149f0f03a3769448)), closes [#21591](https://github.com/vuetifyjs/vuetify/issues/21591)\n* **VNumberInput:** align stacked controls in underlined variant ([#22185](https://github.com/vuetifyjs/vuetify/issues/22185)) ([e10ffea](https://github.com/vuetifyjs/vuetify/commit/e10ffea80e6cedbdfbf14912f7587aaabd221779)), closes [#22184](https://github.com/vuetifyjs/vuetify/issues/22184)\n* **VNumberInput:** allow typing negative decimal values with a comma separator ([#22199](https://github.com/vuetifyjs/vuetify/issues/22199)) ([f0fec8f](https://github.com/vuetifyjs/vuetify/commit/f0fec8fb39ec5bbc82bd02c70a17bdc1d1746995)), closes [#22183](https://github.com/vuetifyjs/vuetify/issues/22183)\n* **VNumberInput:** emit pasted value without waiting for blur ([6034a73](https://github.com/vuetifyjs/vuetify/commit/6034a73a09c649140af726dbd7dbc13a7871a245)), closes [#22182](https://github.com/vuetifyjs/vuetify/issues/22182)\n* **VOverlay:** `stick-to-target` content visible until target overflows ([#22233](https://github.com/vuetifyjs/vuetify/issues/22233)) ([0e1dff0](https://github.com/vuetifyjs/vuetify/commit/0e1dff0be1cbcc05985bd6f50c58e70ccc0ceea8)), closes [#22055](https://github.com/vuetifyjs/vuetify/issues/22055)\n* **VProgressCircular:** hide overflow to avoid height changes ([#22245](https://github.com/vuetifyjs/vuetify/issues/22245)) ([d5cfb7b](https://github.com/vuetifyjs/vuetify/commit/d5cfb7bf14cbafe57a4043a6427d21ab21d84a45)), closes [#22244](https://github.com/vuetifyjs/vuetify/issues/22244)\n* **VRangeSlider:** inherit readonly/disabled from form ([d071e24](https://github.com/vuetifyjs/vuetify/commit/d071e241c82fca7c65405174623014989f2d3985)), closes [#22054](https://github.com/vuetifyjs/vuetify/issues/22054)\n* **VSelect:** item checkbox gets out of sync ([#22181](https://github.com/vuetifyjs/vuetify/issues/22181)) ([f257802](https://github.com/vuetifyjs/vuetify/commit/f2578024e948ff24faea7275b3d0d808e0afa02e))\n* **VSkeletonLoader:** accept scoped styles ([#22201](https://github.com/vuetifyjs/vuetify/issues/22201)) ([c20031b](https://github.com/vuetifyjs/vuetify/commit/c20031be5347d17286acadf29d12d5edddc6bcb3)), closes [#22198](https://github.com/vuetifyjs/vuetify/issues/22198)\n* **VSkeletonLoader:** render background in forced-colors mode ([#22216](https://github.com/vuetifyjs/vuetify/issues/22216)) ([26e0b6d](https://github.com/vuetifyjs/vuetify/commit/26e0b6d623bcc154cc14db4958c2c3204c0dff0a))\n* **VSlider:** prevent thumb movement when disabled mid-interaction ([#22257](https://github.com/vuetifyjs/vuetify/issues/22257)) ([4506459](https://github.com/vuetifyjs/vuetify/commit/45064595260f6644e09fdfc9712547fc321e83e6)), closes [#22248](https://github.com/vuetifyjs/vuetify/issues/22248)\n* **VTabs:** correct link state in Nuxt app ([7068ce1](https://github.com/vuetifyjs/vuetify/commit/7068ce141ee11dc70d237960ea78480cf97922c6)), closes [#22188](https://github.com/vuetifyjs/vuetify/issues/22188)\n* **VTextarea:** mask should not clip scrollbar ([#22001](https://github.com/vuetifyjs/vuetify/issues/22001)) ([e8e7234](https://github.com/vuetifyjs/vuetify/commit/e8e72349a985d1ede8a4c8500114e237f1cd742d)), closes [#21283](https://github.com/vuetifyjs/vuetify/issues/21283)\n* **VTextField:** keep counter in one line ([78e053f](https://github.com/vuetifyjs/vuetify/commit/78e053f58375b07c1a636e70fdb733dda447a99e)), closes [#19620](https://github.com/vuetifyjs/vuetify/issues/19620)\n* **VTextField, VCombobox:** avoid duplicated emits on clear ([#22219](https://github.com/vuetifyjs/vuetify/issues/22219)) ([3e92de3](https://github.com/vuetifyjs/vuetify/commit/3e92de31a3d1df808710606c687f114e81df08cc)), closes [#21417](https://github.com/vuetifyjs/vuetify/issues/21417)\n* **VTreeview:** pass `indent-lines` to `header` slot ([8e964c7](https://github.com/vuetifyjs/vuetify/commit/8e964c72d00600f29202bee782eb11bb571627ad))\n* **VVirtualScroll:** scroll to last element ([#22166](https://github.com/vuetifyjs/vuetify/issues/22166)) ([1cc009f](https://github.com/vuetifyjs/vuetify/commit/1cc009f3f1387c2530d044c9bd3b6a12fdc18f1d)), closes [#20931](https://github.com/vuetifyjs/vuetify/issues/20931)\n* **VWindow:** fix exception due to missing scrollable parent in unit test ([7b122b7](https://github.com/vuetifyjs/vuetify/commit/7b122b735428e736808177cb84a39a5bb3f9b7f1))\n* **VWindow:** Maintain scroll position on window change ([#22191](https://github.com/vuetifyjs/vuetify/issues/22191)) ([fb7d36b](https://github.com/vuetifyjs/vuetify/commit/fb7d36bf66bfc67adb607c7ac0f222c9181251b8))\n\n### :arrows_counterclockwise: Reverts\n\n* Revert \"fix(VOverlay): ignore mouseenter events from touch devices\" ([d448e0e](https://github.com/vuetifyjs/vuetify/commit/d448e0eb4f958967cea632e6af2140a8847f860e)), closes [#17640](https://github.com/vuetifyjs/vuetify/issues/17640) [#22237](https://github.com/vuetifyjs/vuetify/issues/22237)\n\n### :test_tube: Labs\n\n* **VCalendar:** avoid selecting day button ([da4f99a](https://github.com/vuetifyjs/vuetify/commit/da4f99a5f35af7e664d7a5e0d100aeb43b07ddac)), closes [#22141](https://github.com/vuetifyjs/vuetify/issues/22141)\n* **VCalendar:** import directives ([1c7896d](https://github.com/vuetifyjs/vuetify/commit/1c7896dc96abbf45f58d819663fa87ec00ae7127)), closes [#22122](https://github.com/vuetifyjs/vuetify/issues/22122)\n* **VCalendar:** use scrollAreaRef from base ([#22253](https://github.com/vuetifyjs/vuetify/issues/22253)) ([16dc1d2](https://github.com/vuetifyjs/vuetify/commit/16dc1d290f5759bb1d5a6f495aae4641fc60d125)), closes [#22251](https://github.com/vuetifyjs/vuetify/issues/22251)\n* **VColorInput:** avoid VField, VInput props leaking to VPicker ([14b74d1](https://github.com/vuetifyjs/vuetify/commit/14b74d15557371baafefa8479a9ad77b00ada6af))\n* **VDateInput:** apply min/max to text input ([#22196](https://github.com/vuetifyjs/vuetify/issues/22196)) ([201e6d2](https://github.com/vuetifyjs/vuetify/commit/201e6d27f884ac6077bc8c2cef14eb12a1a28c45)), closes [#22179](https://github.com/vuetifyjs/vuetify/issues/22179)\n* **VDateInput:** avoid `color` prop leaking to VPicker ([6bddea1](https://github.com/vuetifyjs/vuetify/commit/6bddea14a7e22e6eea804a6cf8f0fb0dd807b793))\n* **VDateInput:** avoid VField, VInput props leaking to VPicker ([253e75e](https://github.com/vuetifyjs/vuetify/commit/253e75e4894fa40e069b4032dfe3bab22aa05d48))\n* **VIconBtn:** render interaction highlights in forced-colors mode ([#22211](https://github.com/vuetifyjs/vuetify/issues/22211)) ([37bd57d](https://github.com/vuetifyjs/vuetify/commit/37bd57d7400d716830ddbe0ced85754e2cd334f5))\n* **VMaskInput:** handle null value when clearing input ([#22175](https://github.com/vuetifyjs/vuetify/issues/22175)) ([46e3a84](https://github.com/vuetifyjs/vuetify/commit/46e3a84b582aa0c8f7e8aba4e00be3b1a6f7bddd)), closes [#22174](https://github.com/vuetifyjs/vuetify/issues/22174)\n* **VMaskInput:** inherit class and style ([#22247](https://github.com/vuetifyjs/vuetify/issues/22247)) ([01f5e6f](https://github.com/vuetifyjs/vuetify/commit/01f5e6f29d83d3e4c477eb1cfe92262b8186150e))\n* **VPie:** consistent avatar size in tooltip ([6cefd46](https://github.com/vuetifyjs/vuetify/commit/6cefd4663ba1c6dfee02eea3a35ae76e0793b44e))\n\n
\n\n## What's Next{ #whats-next .mt-4 }\n\nNovember brings us closer to the Vuetify v3.11 release as we continue stabilizing the framework and polishing components. Work continues on v0 composables with expanded documentation and integration testing, while in-development features like VCommandPalette and the VTabs inset variant move toward completion.\n\nThe Vuetify MCP server will continue evolving based on community feedback, and we're exploring additional AI-powered developer tools to streamline the Vuetify development experience. As always, your bug reports, feature requests, and community contributions drive our roadmap forward.\n\nThank you for being part of the Vuetify community. See you in November!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/september-2025-update.md":"---\nlayout: blog\nmeta:\n title: September 2025 Update\n description: September assembles the building blocks for Vuetify's next phase — from the new Figma UI Kit and design-to-development workflows to foundational v0 composables.\n keywords: Vuetify September 2025, Figma UI Kit, Vuetify0\n---\n\n\n\n# September 2025 Update\n\nWelcome 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.\n\n![Hero image for September update](https://cdn.vuetifyjs.com/docs/images/blog/september-2025-update/september-hero.png \"September hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 October 12th, 2025\n\n\n\n---\n\n## Assembling the Future\n\nI'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.\n\nHaving 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.\n\n::: success\n\nCool example of the month: [Gradient VProgressLinear](https://play.vuetifyjs.com/playgrounds/AIVKig) by [J-Sek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Updated Official Figma UI Kit](#updated-official-figma-ui-kit)\n * [What's Included](#whats-included)\n * [Why This Matters](#why-this-matters)\n * [Pro Version Available](#pro-version-available)\n* [September Webinar Recap: Performance Crisis](#september-webinar-recap-performance-crisis)\n * [Next Event: v0 Live Coding with John](#next-event-v0-live-coding-with-john)\n* [Vuetify0: Composables Taking Shape](#vuetify0-composables-taking-shape)\n * [New Composables This Month](#new-composables-this-month)\n* [Framework & Security Updates](#framework-security-updates)\n * [Build System Modernization](#build-system-modernization)\n* [Ecosystem Spotlight: Vuetify Link](#ecosystem-spotlight-vuetify-link)\n * [Key Features](#key-features)\n* [September 2025 Changelog](#september-2025-changelog)\n* [The Pieces Come Together](#the-pieces-come-together)\n\n---\n\n## Releases\n\nSeptember focused on stabilization and quality improvements across the Vuetify 3 series, including iterating to the next minor version with [v3.10.0 (Argo)](/getting-started/release-notes/?version=v3.10.0). We've addressed numerous bugs, enhanced accessibility, and refined component behaviors to ensure a robust experience for developers and users alike.\n\n![September Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/september-2025-update/v310_release.png \"September Releases Banner\")\n\n### Key Improvements\n\n* A direct [VCalendar](/components/calendars) port from Vuetify 2, bringing back familiar calendar functionalities with modern enhancements.\n* Added support for `prefers-reduced-motion` to respect user accessibility settings\n* Added multiple new slots for [VTreeview](/components/treeview) and [VDataTable](/components/data-tables/introduction/) for greater customization\n\nView the complete list of changes in the [Full Changelog](#september-2025-changelog)\n\n**Details:**\n\n* [v3.9.7](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.7)\n* [v3.10.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.0)\n* [v3.10.1](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.1)\n* [v3.10.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.2)\n* [v3.10.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.3)\n\n## Updated Official Figma UI Kit\n\nWe're thrilled to announce the release of our **[updated Vuetify 3 UI Kit for Figma](https://store.vuetifyjs.com/products/vuetify-ui-kit-figma)**! This comprehensive design system brings Vuetify's Material Design implementation directly to your design workflow, completely free.\n\n![Vuetify Figma UI Kit Update](https://cdn.vuetifyjs.com/docs/images/blog/september-2025-update/figma.png \"Vuetify Figma UI Kit Update\")\n\n### What's Included { #whats-included }\n\n* **Complete Component Library**: Every Vuetify 3 component meticulously recreated in Figma\n* **Material Design 3 Foundation**: Built on the latest Material Design specifications\n* **Design Tokens**: Consistent spacing, typography, and color systems\n* **Responsive Variants**: Components optimized for all screen sizes\n* **Dark Mode Support**: Full theme switching capabilities\n* **Auto-Layout**: Modern Figma features for flexible, maintainable designs\n\n### Why This Matters\n\nThis 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.\n\n### Pro Version Available\n\nDesign 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.\n\n#### Why PRO\n\n* ✅ 150+ components with 1:1 names and structure with Vuetify\n* ✅ All variants (elevated, flat, tonal, outlined, text, plain…) and complete states\n* ✅ Advanced foundations: 7 color roles, densities, radius, borders (color/width/opacity)\n* ✅ +4 modes by variables to scale brands and themes\n* ✅ Updates synchronized with the library and direct support\n\n**Ideal for:**\n\n* Teams & Startups — Faster delivery, total consistency and less rework\n* Freelancers — Winning proposals and clean handoff with devs\n* Design Systems — Variables, tokens and real theme scalability\n* Dev Teams — 1:1 parity with Vuetify components to implement without friction.\n\n#### Comparison Table\n\n| Feature | PRO | FREE |\n|---------|-----|------|\n| **Foundations** | Includes complete **Material Design Colors** | Does not include MD color palette |\n| **Themes** | Light / Dark (+ extra modes by variables) | Light / Dark |\n| **Color Roles** | Default, Primary, Secondary, Custom, Error, Warning, Info, Success | Default, Primary, Secondary, Custom, Error, Warning, Info, Success |\n| **States** | Enabled, Disabled, Active/Focus, Hover | Enabled, Disabled |\n| **Sizes** | Default, Small, X/Small, Large, X/Large | Default, Small, Large |\n| **Density** | Default, Comfortable, Compact | Only Default |\n| **Border Color** | Current + Primary, Secondary, Error, Warning, Info, Success | Only Current |\n| **Border Width** | default, 0, xs (thin), sm, md, lg, xl | default, 0 |\n| **Border Opacity** | default, 0, 25, 50, 75, 100 | Not available |\n| **Border Radius** | default, square, xs, sm, md, lg, xl, pill, circle | default, square, pill, circle |\n| **Error State** | Full support | Basic inputs |\n| **Others** | Individual color control in `VField` | No individual control |\n| **Components** | All components | Missing components |\n| **Variants** | All variants | Only elevated • flat • outlined |\n| **Variants in Inputs** | All variants | Only filled • outlined |\n| **Updates & Support** | Synchronized with library + support | Not guaranteed • no support |\n| **Modes by variables** | 4+ modes | 4 or less |\n\n**Details:**\n\n* [Free Figma UI Kit](https://store.vuetifyjs.com/products/vuetify-ui-kit-figma)\n* [Go PRO](https://store.vuetifyjs.com/products/official-vuetify-3-ui-kit-for-figma)\n\n## September Webinar Recap: Performance Crisis { #september-webinar-recap-performance-crisis }\n\nThank 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:\n\n* Disable [unused CSS utilities](/features/sass-variables/#disabling-utility-classes) with SASS variables\n* Use [vite-plugin-vuetify](/features/treeshaking/) for automatic treeshaking and code splitting\n* Reduce page load time with [VLazy](/components/lazy/)\n* Use [VVirtualScroll](/components/virtual-scroll/) for expensive lists\n\nNever miss another event by joining our [Discord Community](https://community.vuetifyjs.com/) and following us on [X](https://x.com/vuetifyjs)!.\n\n### Next Event: v0 Live Coding with John { #next-event-v0-live-coding-with-john }\n\n**Wednesday, October 29th**: Join John for an exclusive live coding session where he'll build a complete application using Vuetify0 from scratch!\n\n#### What to Expect\n\n* **Real-time Development**: Watch as John tackles real-world challenges\n* **Composables in Action**: See how usePermissions, useFeatures, and other v0 composables work together\n* **Architecture Decisions**: Learn the reasoning behind v0's design patterns\n* **Live Q&A**: Get your questions answered as we code\n* **Early Access Insights**: First detailed look at v0's developer experience\n\nThis 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.\n\n**Details**:\n\n* Date: Wednesday, October 29th\n* Start Time: 9:00 AM CST\n* [See what Vuetify0 is all about](https://discord.gg/vuetify-340160225338195969?event=1426220686162268311)\n\n## Vuetify0: Composables Taking Shape { #vuetify0-composables-taking-shape }\n\n\n\nSeptember 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.\n\n### New Composables This Month\n\n* **usePermissions**: A composable for managing RBAC permissions:\n\n```ts { resource=\"src/main.ts\" }\nimport { createApp } from 'vue'\nimport { createPermissionsPlugin } from '@vuetify/0'\n\nconst app = createApp()\n\napp.use(\n createPermissionsPlugin({\n permissions: {\n super: [\n ['create', 'Post'],\n ['read', 'Post'],\n ['update', 'Post'],\n ['delete', 'Post'],\n ['use', 'Dev'],\n ],\n editor: [\n ['create', 'Post'],\n ['read', 'Post'],\n ['update', 'Post']\n ],\n },\n })\n)\n\napp.mount('#app')\n```\n\n```html { resource=\"src/components/SomeComponent.vue\" }\n\n\n\n```\n\n* **useFeatures**: A composable for managing available features and feature flags w/ variants support.\n\n```ts { resource=\"src/main.ts\" }\nimport { createApp } from 'vue'\nimport { createFeaturesPlugin } from '@vuetify/0'\n\nconst app = createApp()\n\napp.use(\n createFeaturesPlugin({\n features: {\n comments: true,\n dev: false,\n search: {\n $value: true,\n $variation: 'v2',\n $description: 'The new and improved search experience',\n },\n },\n })\n)\n\napp.mount('#app')\n```\n\n```html { resource=\"src/components/SomeComponent.vue\" }\n\n\n\n```\n\n* **useTimeline**: A composable for sequence management with undo/redo support.\n\n```html { resource=\"src/components/SomeComponent.vue\" }\n\n```\n\n::: info\n\nSee all available composables on the [Vuetify0 documentation site](https://0.vuetifyjs.com/composables/).\n\n:::\n\n**Details:**\n\n* [usePermissions Documentation](https://0.vuetifyjs.com/composables/plugins/use-permissions/)\n* [useFeatures Documentation](https://0.vuetifyjs.com/composables/plugins/use-features/)\n* [useTimeline Documentation](https://0.vuetifyjs.com/composables/registration/use-timeline/)\n\n## Framework & Security Updates { #framework-security-updates }\n\nWith 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.\n\n### Build System Modernization\n\nThis month brought significant improvements to our build infrastructure in Vuetify and across the ecosystem. Key updates include:\n\n* **Vite 7 Support**: Full migration completed with improved build performance\n* **Vue-TSC 3**: Updated TypeScript tooling for better type checking\n* **Trusted Publishing**: Enhanced security for all package releases with the pnpm's **minimumReleaseAge** setting\n* **TSGO:** Replaced our TSC usage with TSGO for faster builds and better DX\n\n**Details:**\n\n* [Commit: af9a9bf](https://github.com/vuetifyjs/vuetify/commit/af9a9bfc63fa44721f89076431fbe004e70d7c1c)\n* [Commit: c78f8aa](https://github.com/vuetifyjs/vuetify/commit/c78f8aa066164f6ee5f2e1f106ed121963faffe5)\n\n## Ecosystem Spotlight: Vuetify Link { #ecosystem-spotlight-vuetify-link }\n\n\n\nVuetify 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.\n\n### Key Features\n\n* **Custom Slugs**: Create memorable and branded short links\n* **Link Management**: Edit, delete, and track your links from a simple dashboard\n* **Analytics**: Monitor link performance with detailed statistics\n* **Free & Pro Plans**: Basic link shortening is free, with advanced features available for Vuetify One subscribers\n\n![Vuetify Link Landing Screenshot](https://cdn.vuetifyjs.com/docs/images/blog/september-2025-update/vlink_banner.png \"Vuetify Link Landing\")\n\nWe anticipate launching this new service **this month!** Stay tuned for the official release announcement with all the details.\n\n## September 2025 Changelog\n\nThe following section provides an overview of the changes made in September 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* Introduced `spaced` prop for VBtn to enhance button spacing options.\n* Added `truncate-length` prop to VFileInput for better filename management.\n* Implemented `stick-to-target` prop in VOverlay for improved overlay positioning.\n* Enhanced accessibility with `aria-controls` and `aria-expanded` in VSelects.\n* Re-converted `VCalendar` based off of Vuetify 2 implementation.\n\n**Expand** this section to see the detailed changelog for September 2025:\n\n
\n\n### :rocket: Features\n\n* **filter:** keep dividers and subheaders ([#21822](https://github.com/vuetifyjs/vuetify/issues/21822)) ([18ac731](https://github.com/vuetifyjs/vuetify/commit/18ac7319a04df9645861977b723173c376655c2f)), closes [#7424](https://github.com/vuetifyjs/vuetify/issues/7424)\n* **framework:** respect prefers-reduced-motion ([#21530](https://github.com/vuetifyjs/vuetify/issues/21530)) ([01c9e91](https://github.com/vuetifyjs/vuetify/commit/01c9e9115898118535865197660dd7399ae1626c)), closes [#19622](https://github.com/vuetifyjs/vuetify/issues/19622)\n* **VBtn:** add `spaced` prop ([#21663](https://github.com/vuetifyjs/vuetify/issues/21663)) ([819605c](https://github.com/vuetifyjs/vuetify/commit/819605c6b4606bf45d33ea9c431c4e97a1bbd3b7)), closes [#21652](https://github.com/vuetifyjs/vuetify/issues/21652)\n* **VCard:** allow semantic HTML tags for content parts ([#21943](https://github.com/vuetifyjs/vuetify/issues/21943)) ([5f8abb6](https://github.com/vuetifyjs/vuetify/commit/5f8abb6c5cece7fea660a7f4811e3c0108a4f402))\n* **VColorPicker:** add `hide-eye-dropper` prop ([be452a5](https://github.com/vuetifyjs/vuetify/commit/be452a547f7efeb773fa8173695c6463137281a0)), closes [#19154](https://github.com/vuetifyjs/vuetify/issues/19154) [#19150](https://github.com/vuetifyjs/vuetify/issues/19150)\n* **VColorPicker:** customizable eyeDropper icon ([#21656](https://github.com/vuetifyjs/vuetify/issues/21656)) ([71377a6](https://github.com/vuetifyjs/vuetify/commit/71377a69079ccdb258ead9dcee2bcd355d6ce6d3)), closes [#21406](https://github.com/vuetifyjs/vuetify/issues/21406)\n* **VDataIterator:** add filtered items count to slot data ([#18641](https://github.com/vuetifyjs/vuetify/issues/18641)) ([7d51302](https://github.com/vuetifyjs/vuetify/commit/7d51302c8e609b78854934586dafef41ba188428))\n* **VDataTable:** customizable expand/collapse icons ([#21698](https://github.com/vuetifyjs/vuetify/issues/21698)) ([1636f63](https://github.com/vuetifyjs/vuetify/commit/1636f632027255bdbc33a989ce667f9c9b352793))\n* **VDataTable:** re-introduce `group-summary` slot ([#21802](https://github.com/vuetifyjs/vuetify/issues/21802)) ([a19cd87](https://github.com/vuetifyjs/vuetify/commit/a19cd8778ac21e9c050649d570e726ac11fa0008)), closes [#21800](https://github.com/vuetifyjs/vuetify/issues/21800)\n* **VDatePicker:** re-introduce `first-day-of-year` prop ([#21760](https://github.com/vuetifyjs/vuetify/issues/21760)) ([af74f62](https://github.com/vuetifyjs/vuetify/commit/af74f62a1d57a63bcad835a4a2aded2ff03b419c)), closes [#20270](https://github.com/vuetifyjs/vuetify/issues/20270)\n* **VFileInput:** add `truncate-length` prop ([#17972](https://github.com/vuetifyjs/vuetify/issues/17972)) ([28ef26c](https://github.com/vuetifyjs/vuetify/commit/28ef26c59b5e1991c469adbd567f305d88bac904)), closes [#17635](https://github.com/vuetifyjs/vuetify/issues/17635)\n* **VFileUpload, VFileInput:** add `filter-by-type` prop ([#21576](https://github.com/vuetifyjs/vuetify/issues/21576)) ([1b78b06](https://github.com/vuetifyjs/vuetify/commit/1b78b06a40470186c83c88f95ec00ba71d36171d)), closes [#21150](https://github.com/vuetifyjs/vuetify/issues/21150)\n* **VOverlay:** add `stick-to-target` prop ([#21704](https://github.com/vuetifyjs/vuetify/issues/21704)) ([8552779](https://github.com/vuetifyjs/vuetify/commit/855277993131333d57359dadbf1511532a98cc68)), closes [#19856](https://github.com/vuetifyjs/vuetify/issues/19856) [#19732](https://github.com/vuetifyjs/vuetify/issues/19732) [#17125](https://github.com/vuetifyjs/vuetify/issues/17125)\n* **VProgressLinear:** ability to separate chunks ([#21744](https://github.com/vuetifyjs/vuetify/issues/21744)) ([4c66aa0](https://github.com/vuetifyjs/vuetify/commit/4c66aa0bda8763d31a5d61a1eff77e873cd4b4c1))\n* **VTextField, VTextarea:** add `autocomplete` prop ([#21359](https://github.com/vuetifyjs/vuetify/issues/21359)) ([d94c003](https://github.com/vuetifyjs/vuetify/commit/d94c00309e6e744e267275cc179bbdfc61fdd848)), closes [#21353](https://github.com/vuetifyjs/vuetify/issues/21353)\n* **VTimePicker:** add `period` prop ([#21823](https://github.com/vuetifyjs/vuetify/issues/21823)) ([8df7685](https://github.com/vuetifyjs/vuetify/commit/8df76851aff28dcfc8b73eee18d5613557aafce8)), closes [#15405](https://github.com/vuetifyjs/vuetify/issues/15405)\n* **VTreeview:** add `header` slot ([fc86d05](https://github.com/vuetifyjs/vuetify/commit/fc86d05d0b72fb27ebc6bd2017d8684a3aa148a9))\n* **VTreeview:** add `toggle` slot ([#21018](https://github.com/vuetifyjs/vuetify/issues/21018)) ([4ec13f2](https://github.com/vuetifyjs/vuetify/commit/4ec13f2841839d482ee38c9e7f0d72dc006d4090)), closes [#20307](https://github.com/vuetifyjs/vuetify/issues/20307)\n* **VWindow, VCarousel:** add `crossfade` and `transition-duration` ([#21850](https://github.com/vuetifyjs/vuetify/issues/21850)) ([15a5c96](https://github.com/vuetifyjs/vuetify/commit/15a5c96933db148d568a88855d6ba3df53815001))\n\n### :wrench: Bug Fixes\n\n* **framework:** don't use multi-line :not() ([a15edec](https://github.com/vuetifyjs/vuetify/commit/a15edecc8313d13158d62776d4532eb9cc2e583a)), closes [#21995](https://github.com/vuetifyjs/vuetify/issues/21995)\n* **goto:** always check for window.matchMedia support ([7d11a39](https://github.com/vuetifyjs/vuetify/commit/7d11a39d16262c867bcd1d760dee05758b95a398)), closes [#22059](https://github.com/vuetifyjs/vuetify/issues/22059)\n* **group:** support `null` values ([#21743](https://github.com/vuetifyjs/vuetify/issues/21743)) ([facd4af](https://github.com/vuetifyjs/vuetify/commit/facd4af2e90a80c80c512b8a2df46cd6d48be5e2)), closes [#20550](https://github.com/vuetifyjs/vuetify/issues/20550)\n* **nested:** detect and warn about multiple `null` values ([#21940](https://github.com/vuetifyjs/vuetify/issues/21940)) ([0960aa6](https://github.com/vuetifyjs/vuetify/commit/0960aa607835c63950976c570b880feb3f3ae358)), closes [#21815](https://github.com/vuetifyjs/vuetify/issues/21815)\n* **rounded:** prioritize `tile` prop (like in v2) ([6b13382](https://github.com/vuetifyjs/vuetify/commit/6b13382f7784dfa47b0def7b7a80d184063bf392)), closes [#21844](https://github.com/vuetifyjs/vuetify/issues/21844)\n* **selects:** open menu when items is mutated not just replaced ([#22067](https://github.com/vuetifyjs/vuetify/issues/22067)) ([a3f8b17](https://github.com/vuetifyjs/vuetify/commit/a3f8b17e66c1e12a14c80376b0ad7ad7c42cd4cd)), closes [#22066](https://github.com/vuetifyjs/vuetify/issues/22066)\n* **v-touch:** set event handlers on root components ([#21997](https://github.com/vuetifyjs/vuetify/issues/21997)) ([1da3451](https://github.com/vuetifyjs/vuetify/commit/1da3451724ca97de6a95082c0a39736ef89a4906)), closes [#21768](https://github.com/vuetifyjs/vuetify/issues/21768)\n* **VAlert:** use outline instead of background in forced-colors mode ([#21946](https://github.com/vuetifyjs/vuetify/issues/21946)) ([7560323](https://github.com/vuetifyjs/vuetify/commit/7560323d9d33a9d71d2975ab25537cc7bfe493ec))\n* **VAutocomplete:** restore placeholder on blur ([#22114](https://github.com/vuetifyjs/vuetify/issues/22114)) ([d0ebeec](https://github.com/vuetifyjs/vuetify/commit/d0ebeec88485e3579967e073b0f17136cfd84eac)), closes [#21762](https://github.com/vuetifyjs/vuetify/issues/21762)\n* **VBtn, VChip:** correct link active state after navigation cancellation ([#21651](https://github.com/vuetifyjs/vuetify/issues/21651)) ([bce7046](https://github.com/vuetifyjs/vuetify/commit/bce70460ea7e7c9243c5bbe7e0c384202a2c402f)), closes [#21594](https://github.com/vuetifyjs/vuetify/issues/21594)\n* **VBtn:** add aria-disabled and tabindex to disabled links ([#22082](https://github.com/vuetifyjs/vuetify/issues/22082)) ([6e92383](https://github.com/vuetifyjs/vuetify/commit/6e92383726ee33cbb20cfa1e8c44e7d6f089a7fa)), closes [#22061](https://github.com/vuetifyjs/vuetify/issues/22061)\n* **VBtn:** don't set group state on link click ([e292171](https://github.com/vuetifyjs/vuetify/commit/e292171a593020b3eeb02cf8fa377cca8f48235a)), closes [#21594](https://github.com/vuetifyjs/vuetify/issues/21594)\n* **VBtn:** set group state for non-router links ([6bb3fce](https://github.com/vuetifyjs/vuetify/commit/6bb3fce6a165da8cd895ceba66690af3ab7422ef)), closes [#22085](https://github.com/vuetifyjs/vuetify/issues/22085)\n* **VCard:** render border in forced-colors mode ([#21968](https://github.com/vuetifyjs/vuetify/issues/21968)) ([b30d5c8](https://github.com/vuetifyjs/vuetify/commit/b30d5c851947cb214927b7e6bd9288de9d4b15fa))\n* **VChip:** correct opacity for plain variant ([#22005](https://github.com/vuetifyjs/vuetify/issues/22005)) ([48d20f3](https://github.com/vuetifyjs/vuetify/commit/48d20f3095b3b103c791b759dbbf28a751b374f5))\n* **VChip:** render border in forced-colors mode ([#21970](https://github.com/vuetifyjs/vuetify/issues/21970)) ([59aeadc](https://github.com/vuetifyjs/vuetify/commit/59aeadc4337bd3273eebb31cb220728cf0aadac3))\n* **VChipGroup:** render selected in forced-colors mode ([#21973](https://github.com/vuetifyjs/vuetify/issues/21973)) ([997dd56](https://github.com/vuetifyjs/vuetify/commit/997dd5668fe71994e11b4a406ea472697591ac6a))\n* **VCombobox:** filter matching items when opening first time ([#21901](https://github.com/vuetifyjs/vuetify/issues/21901)) ([eeb9d14](https://github.com/vuetifyjs/vuetify/commit/eeb9d145be9f8fb0984ab8a82fc0b561c530cb17)), closes [#21900](https://github.com/vuetifyjs/vuetify/issues/21900)\n* **VCombobox:** unstable menu state while typing ([#22045](https://github.com/vuetifyjs/vuetify/issues/22045)) ([3983af9](https://github.com/vuetifyjs/vuetify/commit/3983af946d49e9eab6c523777510871aa0b5d563))\n* **VDataTable:** allow filters on all columns ([#21876](https://github.com/vuetifyjs/vuetify/issues/21876)) ([af20234](https://github.com/vuetifyjs/vuetify/commit/af20234e3642ff0cff82f546390eca7412c594d0))\n* **VDataTable:** correct alignment of checkboxes ([402257d](https://github.com/vuetifyjs/vuetify/commit/402257d8490a43bb888203ddbb57b82773ad3c0b))\n* **VDataTable:** expand rows when items are plain array ([#22109](https://github.com/vuetifyjs/vuetify/issues/22109)) ([d8b5c4a](https://github.com/vuetifyjs/vuetify/commit/d8b5c4ad009cb27a0dcee6a0c0ee8d3a0a3dd939)), closes [#22080](https://github.com/vuetifyjs/vuetify/issues/22080)\n* **VDataTable:** more flexible alignment with grouping ([#21862](https://github.com/vuetifyjs/vuetify/issues/21862)) ([6d802d3](https://github.com/vuetifyjs/vuetify/commit/6d802d3c8e87752f601414141ce0ee843592535f)), closes [#17863](https://github.com/vuetifyjs/vuetify/issues/17863)\n* **VDataTable:** should allow expanding rows when `return-object` is true ([#21128](https://github.com/vuetifyjs/vuetify/issues/21128)) ([a586965](https://github.com/vuetifyjs/vuetify/commit/a586965cf351aa34e632fe753c43ffd6e9304e4d)), closes [#21096](https://github.com/vuetifyjs/vuetify/issues/21096)\n* **VList, VTreeview:** avoid locked active state when navigating ([#21725](https://github.com/vuetifyjs/vuetify/issues/21725)) ([bdbe15a](https://github.com/vuetifyjs/vuetify/commit/bdbe15ae1a6882dbfa48f620752eba9f26578d3b))\n* **VList:** outline and selection in forced-colors mode ([#21958](https://github.com/vuetifyjs/vuetify/issues/21958)) ([a8eac52](https://github.com/vuetifyjs/vuetify/commit/a8eac52195d894b5a6f3f3c1a93de4f59a2dba7a))\n* **VList:** use proper accessibility attributes ([#21444](https://github.com/vuetifyjs/vuetify/issues/21444)) ([9b2541e](https://github.com/vuetifyjs/vuetify/commit/9b2541e1085dd69295a23fd501d44dc51730638e)), closes [#20978](https://github.com/vuetifyjs/vuetify/issues/20978)\n* **VListGroup:** fit the navigation drawer rail ([2ebc7fa](https://github.com/vuetifyjs/vuetify/commit/2ebc7fa5b4b395337faadf4a8dfbf09edac6b247)), closes [#22047](https://github.com/vuetifyjs/vuetify/issues/22047)\n* **VListItem:** fix `rounded` prop ([9ec5a0d](https://github.com/vuetifyjs/vuetify/commit/9ec5a0d624dceb659f746d11263bb53298f2bdc5)), closes [#22015](https://github.com/vuetifyjs/vuetify/issues/22015)\n* **VMenu, VTooltip:** default to `stick-to-target` false ([263ca4b](https://github.com/vuetifyjs/vuetify/commit/263ca4b9eee3b1f4acc201d255a88ea1c2c222d4)), closes [#22055](https://github.com/vuetifyjs/vuetify/issues/22055)\n* **VNumberInput:** accept external changes when focused ([#21827](https://github.com/vuetifyjs/vuetify/issues/21827)) ([d0340e7](https://github.com/vuetifyjs/vuetify/commit/d0340e7ea0925dc9995a299cd61b6b91de30e239)), closes [#21735](https://github.com/vuetifyjs/vuetify/issues/21735) [#21804](https://github.com/vuetifyjs/vuetify/issues/21804)\n* **VNumberInput:** ignore custom `type` ([c535f1a](https://github.com/vuetifyjs/vuetify/commit/c535f1a17ba2fa15ae182dc0aeeef8df985b0d91)), closes [#22110](https://github.com/vuetifyjs/vuetify/issues/22110)\n* **VOtpInput:** focus next field when correcting values ([#21781](https://github.com/vuetifyjs/vuetify/issues/21781)) ([fc91e6d](https://github.com/vuetifyjs/vuetify/commit/fc91e6d7ee632437fb376b8169a88c593e436716)), closes [#21680](https://github.com/vuetifyjs/vuetify/issues/21680)\n* **VProgressLinear:** ensure visibility when using custom colors ([#21949](https://github.com/vuetifyjs/vuetify/issues/21949)) ([e3fdb53](https://github.com/vuetifyjs/vuetify/commit/e3fdb53a1fe5bb332ad981012cfdf8cab79faa1a))\n* **VSelects:** add `aria-controls` and `aria-expanded` ([#22025](https://github.com/vuetifyjs/vuetify/issues/22025)) ([a5abe89](https://github.com/vuetifyjs/vuetify/commit/a5abe893d7d3c9f93d69f60ece5a93185f74bb9a)), closes [#22017](https://github.com/vuetifyjs/vuetify/issues/22017)\n* **VSelects/VCombobox/VAutocomplete:** use rounding from Sass variable ([d3e56de](https://github.com/vuetifyjs/vuetify/commit/d3e56def269205bb84cd26a0c8c24e433045f71a)), closes [#21956](https://github.com/vuetifyjs/vuetify/issues/21956)\n* **VSkeletonLoader:** no wrapper for content ([#21637](https://github.com/vuetifyjs/vuetify/issues/21637)) ([17ae110](https://github.com/vuetifyjs/vuetify/commit/17ae11093e0ff21a0d0d16aa4559bedf86615236)), closes [#21286](https://github.com/vuetifyjs/vuetify/issues/21286)\n* **VSlideGroup:** correct hasNext after resize ([#21124](https://github.com/vuetifyjs/vuetify/issues/21124)) ([0633aef](https://github.com/vuetifyjs/vuetify/commit/0633aef52540f5e9853e25d0ef2ad94e134fe8b2)), closes [#21115](https://github.com/vuetifyjs/vuetify/issues/21115)\n* **VSlider:** respect disabled and readonly from form ([0bbf362](https://github.com/vuetifyjs/vuetify/commit/0bbf3623ae0a66743ead2b23fb7a0dc197a035f2)), closes [#22054](https://github.com/vuetifyjs/vuetify/issues/22054)\n* **VSnackbar:** render border in forced-colors mode ([#21977](https://github.com/vuetifyjs/vuetify/issues/21977)) ([a2249c2](https://github.com/vuetifyjs/vuetify/commit/a2249c24aaed5cce0cc926993829c405b5d11296))\n* **VTimeline:** render lines in forced-colors mode ([#21974](https://github.com/vuetifyjs/vuetify/issues/21974)) ([dc7417c](https://github.com/vuetifyjs/vuetify/commit/dc7417c60c95b34b2f8375eb2269955d846427d9))\n* **VTreeview:** indent lines should support RTL ([1733666](https://github.com/vuetifyjs/vuetify/commit/1733666d5364819b78605185c00deeeef3f2f2a4)), closes [#21952](https://github.com/vuetifyjs/vuetify/issues/21952)\n* **VTreeview:** match type of update:opened with VList ([#22092](https://github.com/vuetifyjs/vuetify/issues/22092)) ([8924b4d](https://github.com/vuetifyjs/vuetify/commit/8924b4d4230cba102f3293fca0fa4c569909eb3c)), closes [#22091](https://github.com/vuetifyjs/vuetify/issues/22091)\n* **VTreeview:** support prepend icon and avatar ([#21813](https://github.com/vuetifyjs/vuetify/issues/21813)) ([478230a](https://github.com/vuetifyjs/vuetify/commit/478230abcdc0fb156523cc9edd4d5f10eea3e069)), closes [#21812](https://github.com/vuetifyjs/vuetify/issues/21812)\n* **VWindow:** override `transition-duration` to respect user preference ([27fe364](https://github.com/vuetifyjs/vuetify/commit/27fe36478ae161b7758a08c8dd4b70e7068a8f06))\n\n### :test_tube: Labs\n\n* **mask:** create useMask composable ([#21736](https://github.com/vuetifyjs/vuetify/issues/21736)) ([a687f7a](https://github.com/vuetifyjs/vuetify/commit/a687f7a38f4377421f47660564fe7f02d6e0231c))\n* **VCalendar:** correct effective weekdays determination ([#22042](https://github.com/vuetifyjs/vuetify/issues/22042)) ([54e6674](https://github.com/vuetifyjs/vuetify/commit/54e667426d5ddefbab951d240511cfc74afa0233))\n* **VCalendar:** directly port from v2 ([#21910](https://github.com/vuetifyjs/vuetify/issues/21910)) ([2e6f72b](https://github.com/vuetifyjs/vuetify/commit/2e6f72baf3a8337dee76e321ed5e18910159c5f6)), closes [#19065](https://github.com/vuetifyjs/vuetify/issues/19065) [#20098](https://github.com/vuetifyjs/vuetify/issues/20098) [#20947](https://github.com/vuetifyjs/vuetify/issues/20947) [#20970](https://github.com/vuetifyjs/vuetify/issues/20970) [#21379](https://github.com/vuetifyjs/vuetify/issues/21379) [#21783](https://github.com/vuetifyjs/vuetify/issues/21783) [#21964](https://github.com/vuetifyjs/vuetify/issues/21964) [#22016](https://github.com/vuetifyjs/vuetify/issues/22016) [#22018](https://github.com/vuetifyjs/vuetify/issues/22018)\n* **VCalendar:** fix click:date event error ([97d3a3e](https://github.com/vuetifyjs/vuetify/commit/97d3a3eed1add2b3957bb65916ebf234e9bf8e67)), closes [#22079](https://github.com/vuetifyjs/vuetify/issues/22079)\n* **VCalendar:** prevent month view event duplication ([977a7e2](https://github.com/vuetifyjs/vuetify/commit/977a7e2a2e400092723e44024c23a2f56947ac77)), closes [#22062](https://github.com/vuetifyjs/vuetify/issues/22062)\n* **VCalendar:** translate eventMoreText ([e41e091](https://github.com/vuetifyjs/vuetify/commit/e41e091f10a13aa55b14b567272412391617ff1a)), closes [#22062](https://github.com/vuetifyjs/vuetify/issues/22062)\n* **VCalendar:** use camelCase event names ([8b2fae3](https://github.com/vuetifyjs/vuetify/commit/8b2fae3428d2228660c8c8d80721da5bb9a9db6d)), closes [#22063](https://github.com/vuetifyjs/vuetify/issues/22063)\n* **VDateInput:** pass-through picker slots ([#21975](https://github.com/vuetifyjs/vuetify/issues/21975)) ([d91dad0](https://github.com/vuetifyjs/vuetify/commit/d91dad08751717ca2097932774485a939e2d9ca7))\n* **VMaskInput:** fix caret position while editing ([#21925](https://github.com/vuetifyjs/vuetify/issues/21925)) ([27dc68c](https://github.com/vuetifyjs/vuetify/commit/27dc68caec935395fdd0d713e106db06f7e00404)), closes [#21776](https://github.com/vuetifyjs/vuetify/issues/21776)\n* **VPicker:** add `hide-title` prop ([#21657](https://github.com/vuetifyjs/vuetify/issues/21657)) ([8d7eac3](https://github.com/vuetifyjs/vuetify/commit/8d7eac3dcd80387e4d3118f1660d7fb25251f66a)), closes [#21545](https://github.com/vuetifyjs/vuetify/issues/21545)\n* **VVideo:** avoid interaction conflicts with VOverlay ([10a1821](https://github.com/vuetifyjs/vuetify/commit/10a18215226793f2832a5b68ebec52241f8db2c7)), closes [#21962](https://github.com/vuetifyjs/vuetify/issues/21962)\n* **VVideo:** background variant should fill the container ([b766424](https://github.com/vuetifyjs/vuetify/commit/b76642493c7144df3573e6bedf4a62c7ea5c94e7))\n\n### :arrows_counterclockwise: Reverts\n\n* Revert \"fix(VSelect): use selected text instead of value (#21902)\" ([95dea2c](https://github.com/vuetifyjs/vuetify/commit/95dea2c3934d58fbebb50cde6314f19e8305cb1d)), closes [#22006](https://github.com/vuetifyjs/vuetify/issues/22006)\n* Revert \"fix(VBtn, VChip): correct link active state after navigation cancellation (#21651)\" ([ab28070](https://github.com/vuetifyjs/vuetify/commit/ab28070a432a15ab8ae0aeba8faa0ab0cb0b4d38)), closes [#22072](https://github.com/vuetifyjs/vuetify/issues/22072) [#22065](https://github.com/vuetifyjs/vuetify/issues/22065)\n* Revert \"fix(VCombobox): filter matching items when opening first time\" ([44002f6](https://github.com/vuetifyjs/vuetify/commit/44002f65364c524953a955479cd5badb3d926cf9)), closes [#22077](https://github.com/vuetifyjs/vuetify/issues/22077)\n\n
\n\n## The Pieces Come Together{ .mt-4 }\n\nThis 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.\n\nOctober 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.\n\n---\n\n*The Vuetify Team*\n","packages/docs/src/pages/en/blog/september-2026-update.md":"","packages/docs/src/pages/en/blog/state-of-the-union-2024-post-mortem.md":"","packages/docs/src/pages/en/blog/state-of-the-union-2024.md":"","packages/docs/src/pages/en/blog/vuetify-herodevs-partnership.md":"","packages/docs/src/pages/en/components/alerts.md":"","packages/docs/src/pages/en/components/all.md":"","packages/docs/src/pages/en/components/app-bars.md":"","packages/docs/src/pages/en/components/application.md":"","packages/docs/src/pages/en/components/aspect-ratios.md":"","packages/docs/src/pages/en/components/audio-players.md":"","packages/docs/src/pages/en/components/autocompletes.md":"","packages/docs/src/pages/en/components/avatar-groups.md":"","packages/docs/src/pages/en/components/avatars.md":"","packages/docs/src/pages/en/components/badges.md":"","packages/docs/src/pages/en/components/banners.md":"","packages/docs/src/pages/en/components/bottom-navigation.md":"","packages/docs/src/pages/en/components/bottom-sheets.md":"","packages/docs/src/pages/en/components/breadcrumbs.md":"","packages/docs/src/pages/en/components/button-groups.md":"","packages/docs/src/pages/en/components/buttons.md":"","packages/docs/src/pages/en/components/calendars.md":"","packages/docs/src/pages/en/components/cards.md":"","packages/docs/src/pages/en/components/carousels.md":"","packages/docs/src/pages/en/components/checkboxes.md":"","packages/docs/src/pages/en/components/chip-groups.md":"","packages/docs/src/pages/en/components/chips.md":"","packages/docs/src/pages/en/components/color-inputs.md":"","packages/docs/src/pages/en/components/color-pickers.md":"","packages/docs/src/pages/en/components/combobox.md":"","packages/docs/src/pages/en/components/command-palettes.md":"","packages/docs/src/pages/en/components/confirm-edit.md":"","packages/docs/src/pages/en/components/data-iterators.md":"","packages/docs/src/pages/en/components/data-tables/basics.md":"","packages/docs/src/pages/en/components/data-tables/data-and-display.md":"","packages/docs/src/pages/en/components/data-tables/introduction.md":"","packages/docs/src/pages/en/components/data-tables/server-side-tables.md":"","packages/docs/src/pages/en/components/data-tables/virtual-tables.md":"","packages/docs/src/pages/en/components/date-inputs.md":"","packages/docs/src/pages/en/components/date-pickers-month.md":"","packages/docs/src/pages/en/components/date-pickers.md":"","packages/docs/src/pages/en/components/date-range-pickers.md":"","packages/docs/src/pages/en/components/defaults-providers.md":"","packages/docs/src/pages/en/components/dialogs.md":"","packages/docs/src/pages/en/components/dividers.md":"","packages/docs/src/pages/en/components/empty-states.md":"","packages/docs/src/pages/en/components/expansion-panels.md":"","packages/docs/src/pages/en/components/explorer/[...name].md":"","packages/docs/src/pages/en/components/file-inputs.md":"","packages/docs/src/pages/en/components/file-upload.md":"","packages/docs/src/pages/en/components/floating-action-buttons.md":"","packages/docs/src/pages/en/components/footers.md":"","packages/docs/src/pages/en/components/forms.md":"","packages/docs/src/pages/en/components/grids.md":"","packages/docs/src/pages/en/components/heatmaps.md":"","packages/docs/src/pages/en/components/highlights.md":"","packages/docs/src/pages/en/components/hotkeys.md":"","packages/docs/src/pages/en/components/hover.md":"","packages/docs/src/pages/en/components/icon-buttons.md":"","packages/docs/src/pages/en/components/icons.md":"","packages/docs/src/pages/en/components/images.md":"","packages/docs/src/pages/en/components/infinite-carousels.md":"","packages/docs/src/pages/en/components/infinite-scroller.md":"","packages/docs/src/pages/en/components/inputs.md":"","packages/docs/src/pages/en/components/item-groups.md":"","packages/docs/src/pages/en/components/lazy.md":"","packages/docs/src/pages/en/components/lists.md":"","packages/docs/src/pages/en/components/loading-indicators.md":"","packages/docs/src/pages/en/components/locale-providers.md":"","packages/docs/src/pages/en/components/mask-inputs.md":"","packages/docs/src/pages/en/components/menus.md":"","packages/docs/src/pages/en/components/month-pickers.md":"","packages/docs/src/pages/en/components/navigation-drawers.md":"","packages/docs/src/pages/en/components/no-ssr.md":"","packages/docs/src/pages/en/components/number-inputs.md":"","packages/docs/src/pages/en/components/otp-input.md":"","packages/docs/src/pages/en/components/overlays.md":"","packages/docs/src/pages/en/components/paginations.md":"","packages/docs/src/pages/en/components/parallax.md":"","packages/docs/src/pages/en/components/pie-charts.md":"","packages/docs/src/pages/en/components/progress-circular.md":"","packages/docs/src/pages/en/components/progress-linear.md":"","packages/docs/src/pages/en/components/progress.md":"","packages/docs/src/pages/en/components/pull-to-refresh.md":"","packages/docs/src/pages/en/components/radio-buttons.md":"","packages/docs/src/pages/en/components/range-sliders.md":"","packages/docs/src/pages/en/components/ratings.md":"","packages/docs/src/pages/en/components/selects.md":"","packages/docs/src/pages/en/components/sheets.md":"","packages/docs/src/pages/en/components/skeleton-loaders.md":"","packages/docs/src/pages/en/components/slide-groups.md":"","packages/docs/src/pages/en/components/sliders.md":"","packages/docs/src/pages/en/components/snackbar-queue.md":"","packages/docs/src/pages/en/components/snackbars.md":"","packages/docs/src/pages/en/components/sparklines.md":"","packages/docs/src/pages/en/components/speed-dials.md":"","packages/docs/src/pages/en/components/split-buttons.md":"","packages/docs/src/pages/en/components/steppers.md":"","packages/docs/src/pages/en/components/switches.md":"","packages/docs/src/pages/en/components/system-bars.md":"","packages/docs/src/pages/en/components/tables.md":"","packages/docs/src/pages/en/components/tabs.md":"","packages/docs/src/pages/en/components/text-fields.md":"","packages/docs/src/pages/en/components/textareas.md":"","packages/docs/src/pages/en/components/theme-providers.md":"","packages/docs/src/pages/en/components/time-inputs.md":"","packages/docs/src/pages/en/components/time-pickers.md":"","packages/docs/src/pages/en/components/timelines.md":"","packages/docs/src/pages/en/components/toolbars.md":"","packages/docs/src/pages/en/components/tooltips.md":"","packages/docs/src/pages/en/components/treeview.md":"","packages/docs/src/pages/en/components/vertical-steppers.md":"","packages/docs/src/pages/en/components/videos.md":"","packages/docs/src/pages/en/components/virtual-scroller.md":"","packages/docs/src/pages/en/components/windows.md":"","packages/docs/src/pages/en/concepts/density-and-sizing.md":"","packages/docs/src/pages/en/concepts/items.md":"","packages/docs/src/pages/en/concepts/routing.md":"","packages/docs/src/pages/en/concepts/v-model.md":"","packages/docs/src/pages/en/concepts/variants.md":"","packages/docs/src/pages/en/directives/click-outside.md":"","packages/docs/src/pages/en/directives/intersect.md":"","packages/docs/src/pages/en/directives/mutate.md":"","packages/docs/src/pages/en/directives/resize.md":"","packages/docs/src/pages/en/directives/ripple.md":"","packages/docs/src/pages/en/directives/scroll.md":"","packages/docs/src/pages/en/directives/tooltip.md":"","packages/docs/src/pages/en/directives/touch-hold.md":"","packages/docs/src/pages/en/directives/touch.md":"","packages/docs/src/pages/en/features/accessibility.md":"","packages/docs/src/pages/en/features/aliasing.md":"","packages/docs/src/pages/en/features/application-layout.md":"","packages/docs/src/pages/en/features/blueprints.md":"","packages/docs/src/pages/en/features/css-utilities/overview.md":"","packages/docs/src/pages/en/features/css-utilities/tailwindcss.md":"","packages/docs/src/pages/en/features/css-utilities/unocss-tailwind-preset.md":"","packages/docs/src/pages/en/features/css-utilities/unocss-vuetify-preset.md":"","packages/docs/src/pages/en/features/dates.md":"","packages/docs/src/pages/en/features/display-and-platform.md":"","packages/docs/src/pages/en/features/global-configuration.md":"","packages/docs/src/pages/en/features/hotkey.md":"","packages/docs/src/pages/en/features/icon-fonts.md":"","packages/docs/src/pages/en/features/internationalization.md":"","packages/docs/src/pages/en/features/md3-button-sizes.md":"","packages/docs/src/pages/en/features/rules.md":"","packages/docs/src/pages/en/features/sass-variables.md":"","packages/docs/src/pages/en/features/scrolling.md":"","packages/docs/src/pages/en/features/theme.md":"","packages/docs/src/pages/en/features/treeshaking.md":"","packages/docs/src/pages/en/getting-started/browser-support.md":"","packages/docs/src/pages/en/getting-started/contributing.md":"","packages/docs/src/pages/en/getting-started/elevation-migration.md":"","packages/docs/src/pages/en/getting-started/frequently-asked-questions.md":"","packages/docs/src/pages/en/getting-started/grid-legacy-mode.md":"","packages/docs/src/pages/en/getting-started/installation.md":"","packages/docs/src/pages/en/getting-started/mcp.md":"","packages/docs/src/pages/en/getting-started/release-notes.md":"","packages/docs/src/pages/en/getting-started/typography-migration.md":"","packages/docs/src/pages/en/getting-started/unit-testing.md":"","packages/docs/src/pages/en/getting-started/unused-sass-variables.md":"","packages/docs/src/pages/en/getting-started/upgrade-guide.md":"","packages/docs/src/pages/en/getting-started/wireframes.md":"","packages/docs/src/pages/en/index.md":"","packages/docs/src/pages/en/introduction/enterprise-support.md":"","packages/docs/src/pages/en/introduction/long-term-support.md":"","packages/docs/src/pages/en/introduction/roadmap.md":"","packages/docs/src/pages/en/introduction/sponsors-and-backers.md":"","packages/docs/src/pages/en/introduction/why-vuetify.md":"","packages/docs/src/pages/en/labs/introduction.md":"","packages/docs/src/pages/en/legal/mcp-privacy.md":"","packages/docs/src/pages/en/one.md":"","packages/docs/src/pages/en/resources/brand-kit.md":"","packages/docs/src/pages/en/resources/jobs-for-vue.md":"","packages/docs/src/pages/en/resources/made-with-vuetify.md":"","packages/docs/src/pages/en/resources/search-engine.md":"","packages/docs/src/pages/en/resources/themes.md":"","packages/docs/src/pages/en/resources/ui-kits.md":"","packages/docs/src/pages/en/sponsor.md":"","packages/docs/src/pages/en/styles/border-radius.md":"","packages/docs/src/pages/en/styles/borders.md":"","packages/docs/src/pages/en/styles/colors.md":"","packages/docs/src/pages/en/styles/content.md":"","packages/docs/src/pages/en/styles/css-reset.md":"","packages/docs/src/pages/en/styles/cursor.md":"","packages/docs/src/pages/en/styles/display.md":"","packages/docs/src/pages/en/styles/elevation.md":"","packages/docs/src/pages/en/styles/entry-points.md":"","packages/docs/src/pages/en/styles/flex.md":"","packages/docs/src/pages/en/styles/float.md":"","packages/docs/src/pages/en/styles/layers.md":"","packages/docs/src/pages/en/styles/opacity.md":"","packages/docs/src/pages/en/styles/overflow.md":"","packages/docs/src/pages/en/styles/position.md":"","packages/docs/src/pages/en/styles/sizing.md":"","packages/docs/src/pages/en/styles/spacing.md":"","packages/docs/src/pages/en/styles/text-and-typography.md":"","packages/docs/src/pages/en/styles/transitions.md":"","packages/docs/src/pages/en/user/dashboard.md":"","packages/docs/src/pages/en/wireframes/baseline.md":"","packages/docs/src/pages/en/wireframes/constrained.md":"","packages/docs/src/pages/en/wireframes/discord.md":"","packages/docs/src/pages/en/wireframes/extended-toolbar.md":"","packages/docs/src/pages/en/wireframes/inbox.md":"","packages/docs/src/pages/en/wireframes/side-navigation.md":"","packages/docs/src/pages/en/wireframes/steam.md":"","packages/docs/src/pages/en/wireframes/system-bar.md":"","packages/docs/src/pages/en/wireframes/three-column.md":"","packages/docs/tsconfig.json":"","packages/vuetify/README.md":""},"files":{".claude/rules/code-readability.md":"---\npaths: ['packages/vuetify/src/**']\n---\n\n# Code Readability\n\nRun `pnpm lint:fix` first (in `packages/vuetify`), then review your own diff against this list. Anything ESLint enforces is not repeated here. Only touch lines the change needs — no drive-by renames, reordering or reformatting.\n\n## Comments\n\nDefault to none. Most AI-written comments narrate what the next line does and get deleted in review.\n\nWrite one only when the reason can't be read from the code: a browser quirk, an ordering constraint, a footgun that bites if someone \"simplifies\" it. One line, plain wording.\n\nNever:\n\n- restate the code (`// set open to false`)\n- narrate intent or history (`// fixed the bug where…`, `// new approach`)\n- link or reference issues (`// see #12345`, GitHub URLs) — that belongs in the commit message\n- add JSDoc to internal functions\n\nImport group headers (`// Components`, `// Composables`, `// Utilities`, `// Types`) are the file convention — keep them.\n\n## Naming\n\nNo abbreviations in variables, params or functions:\n\n```ts\n// ❌\nconst idx = items.indexOf(item)\nconst opts = { ...defaults, ...options }\nfunction handleKeydown (e: KeyboardEvent) {}\n\n// ✅\nconst index = items.indexOf(item)\nconst merged = { ...defaults, ...options }\nfunction onKeydown (e: KeyboardEvent) {}\n```\n\nShort lambda params are fine: `items.map(v => v.value)`, `(a, b) => a - b`. Established names stay too: `e` for events, `vm`, the `El` suffix for element refs (`activatorEl`, `contentEl`). Older code in `util` still has `val`/`cb`/`obj` — don't copy it.\n\nPrefer single words when context makes them unambiguous: `open` over `isMenuOpen` inside VMenu. `on` for handlers, never `handle`.\n\n## Functions\n\nFunction declarations over `const` arrows in `setup` and modules:\n\n```ts\n// ❌\nconst toggle = () => { … }\n\n// ✅\nfunction toggle () { … }\n```\n\n## Abstractions\n\n- No helper for a single call site — inline it\n- Grep `src/util` and `src/composables` before writing a new helper\n- No wrapper that only renames or forwards arguments\n- Derive instead of syncing: a `toRef`/`computed` over a `watch` that writes into another ref\n",".claude/rules/components.md":"---\npaths: ['packages/vuetify/src/components/**', 'packages/vuetify/src/labs/**']\n---\n\n# Components\n\n## Direction\n\nThe `.tsx` file holds markup, coordination and light logic. Heavy logic (data shaping, selection rules, calculations) goes into local composables next to the component, and later moves to `@vuetify/v0`. Logic in a plain function is testable without mounting. Follow this for new components and when a change grows an existing component's `setup`.\n\n## Anatomy\n\n```\ncomponents/VExample/\n├── VExample.tsx\n├── VExample.sass\n├── _variables.scss\n├── example.ts # local composable: useExample(props)\n├── index.ts\n└── __tests__/\n```\n\nSub-components (`VExampleItem`, `VExampleGroup`) live in the same folder and share its `index.ts`. Local composables are not exported from `index.ts`.\n\n## Skeleton\n\n```tsx\nexport const makeVExampleProps = propsFactory({\n label: String,\n modelValue: Boolean,\n items: {\n type: Array as PropType,\n default: () => ([]),\n },\n\n ...makeComponentProps(),\n ...makeTagProps(),\n ...makeThemeProps(),\n}, 'VExample')\n\nexport const VExample = genericComponent()({\n name: 'VExample',\n\n props: makeVExampleProps(),\n\n emits: {\n 'update:modelValue': (value: boolean) => true,\n },\n\n setup (props, { slots }) {\n const { themeClasses } = provideTheme(props)\n const model = useProxiedModel(props, 'modelValue')\n\n useRender(() => (\n \n { slots.default?.() ?? props.label }\n \n ))\n\n return {}\n },\n})\n```\n\n- `genericComponent` applies global and `VDefaultsProvider` defaults — don't call `useDefaults` in a component\n- `useProxiedModel` for every v-model, controlled or not\n- Prop type assertions go inline: `type: X as PropType<…>`\n- No utility classes (`d-flex`, `ma-2`, `text-center`) in component markup — users can disable or override utilities. Style through the component's own `.sass`\n\n## Passing props down\n\nComposables and children need the reactive source, not a snapshot. An unwrapped value is read once in `setup` and never updates.\n\n```ts\n// ❌ reads once\nuseTextColor(props.color)\nprovideDefaults({ VExampleItem: { color: props.color } })\n\n// ✅\nuseTextColor(() => props.color)\nuseDensity(props)\nprovideDefaults({ VExampleItem: { color: toRef(() => props.color) } })\n```\n\nForward props to a wrapped component with its `filterProps`:\n\n```tsx\nconst fieldProps = VExampleField.filterProps(props)\n// …\n\n```\n\n## Parent ↔ child\n\n- `provide`/`inject` with an exported `Symbol.for('vuetify:v-example-group')` key, never a string\n- Selection between parent and items: `useGroup` / `useGroupItem` before building anything new\n- Pushing props to nested components: `provideDefaults` or ``\n\n## Adding a prop\n\n- `packages/docs/src/data/new-in.json` — add `\"propName\": \"\"` under the component (`props`, `slots`, `events` or `exposed`)\n- `packages/api-generator/src/locale/en/VExample.json` — description. Props from a shared composable go in that composable's file (`border.json`, `elevation.json`). Don't restate the default, the API table already shows it\n- Docs example when the prop needs one: `packages/docs/src/examples/v-example/prop-.vue`, referenced from the page with `\" />`\n\n## Adding a component\n\nNew components start in labs.\n\n- `src/labs/VExample/` with the anatomy above\n- `src/labs/VExample/index.ts` — **components only**. Re-exporting composables, utils or types from a component barrel breaks api-generator\n- `src/labs/components.ts` — `export * from './VExample'`\n- New translation keys in **every** `src/locale/*.ts` — recent commits ship real translations, not English copies\n- `packages/api-generator/src/locale/en/VExample.json`\n- Docs:\n - page in `packages/docs/src/pages/en/components/`\n - examples in `packages/docs/src/examples/v-example/`: `usage.vue`, `prop-*`, `slot-*`, `event-*`, `misc-*`\n - `packages/docs/src/data/nav.json`\n - `packages/docs/src/data/page-to-api.json`\n - list it in `packages/docs/src/pages/en/labs/introduction.md`\n",".claude/rules/composables.md":"---\npaths: ['packages/vuetify/src/composables/**']\n---\n\n# Shared Composables\n\nShared composables are used by many components — a signature or reactivity slip spreads everywhere. Component-specific logic belongs in a local composable next to the component (see `components.md`).\n\n## Reuse first\n\nGrep `src/composables` and `src/util` before adding one. `@vuetify/v0` enters through `src/util/v0.ts`: import from `@/util`, and add new v0 exports to that file instead of importing `@vuetify/v0` at call sites.\n\n## Prop-driven shape\n\nMost composables. Props factory plus a `use` function taking `props` and the component name:\n\n```ts\n// Utilities\nimport { computed } from 'vue'\nimport { getCurrentInstanceName, propsFactory } from '@/util'\n\n// Types\nexport interface ExampleProps {\n example?: boolean | string\n}\n\n// Composables\nexport const makeExampleProps = propsFactory({\n example: [Boolean, String],\n}, 'example')\n\nexport function useExample (\n props: ExampleProps,\n name = getCurrentInstanceName(),\n) {\n const exampleClasses = computed(() => props.example ? `${name}--example` : [])\n\n return { exampleClasses }\n}\n```\n\n- Take `props` or `MaybeRefOrGetter`, read with `toValue` inside `computed`/`toRef`. Never destructure props in the signature\n- Return a plain object of refs, never `reactive`. Prefix names with the composable (`exampleClasses`, `exampleStyles`) — components destructure several side by side\n- Modifier classes follow `${name}--x`\n\n## Plugin shape\n\nGlobal services (display, theme, locale). `createExample(options)` is called from `framework.ts`, provided under an `InjectionKey`, and `useExample()` injects it:\n\n```ts\nexport const ExampleSymbol: InjectionKey = Symbol.for('vuetify:example')\n\nexport function useExample () {\n const example = inject(ExampleSymbol)\n\n if (!example) throw new Error('[Vuetify] Could not find example injection')\n\n return example\n}\n```\n\n## Instance, scope, SSR\n\n- `getCurrentInstance('useExample')` from `@/util` when the composable needs the vm — the name ends up in the error\n- `useToggleScope(source, fn)` for effects that should only exist while something is active\n- Remove listeners and observers in `onScopeDispose`\n- Guard browser APIs with `IN_BROWSER` / `SUPPORTS_*` from `@/util/globals`\n\n## Public API\n\n- `composables/index.ts` is public — exports there are documented by api-generator\n- Internal code imports `@/composables/example`, never the barrel\n- New exposed members of a public composable go in `packages/docs/src/data/new-in.json`\n- Changing the return shape or arguments of a public composable is breaking — `next` branch\n- Props coming from a shared composable are described once in `packages/api-generator/src/locale/en/example.json`, not in each component's file\n\n## Tests\n\nUnit project: `composables/__tests__/example.spec.ts`. See the `tests` skill.\n",".claude/rules/sass.md":"---\npaths: ['packages/vuetify/src/**/*.sass', 'packages/vuetify/src/**/*.scss']\n---\n\n# Styles\n\nNo stylelint — nothing below is enforced mechanically.\n\n## Files\n\n- `VExample.sass` — rules, inside `@include tools.layer('components')` so users override without fighting specificity\n- `_variables.scss` — `$example-*: … !default`\n\n## Values\n\n- Anything a user may want to tune gets a `$example-*` variable\n- Values that change at runtime or cascade into children are custom properties (`--v-example-*`)\n- Colors from `rgb(var(--v-theme-*))`, never literals\n- Shared tokens from `settings.$*` (rounded, typography, border, easing)\n\n## Tools before hand-rolling\n\n`tools.states`, `rounded`, `elevation`, `density`, `border`, `variant`, `typography`, `absolute`. Grep an existing component using the mixin before inventing a variant of it.\n\n## RTL\n\nLogical properties first (`margin-inline-start`, `inset-inline-end`, `padding-inline`). `tools.rtl` / `tools.ltr` only for what logical properties can't express — transforms, icon flips, gradients.\n\n## Forced colors\n\nBackgrounds, shadows and overlays disappear in forced-colors mode. Anything relying on them to be visible (surfaces, selected/active states, focus, progress fills, dividers drawn with background) needs a fallback:\n\n```sass\n@media (forced-colors: active)\n .v-example\n &:not(&--variant-text, &--variant-plain)\n border: thin solid\n\n &:focus-visible\n outline: 2px solid\n outline-offset: 2px\n```\n\nPrefer `currentColor` / plain `solid`; system colors (`Highlight`, `Canvas`) only when state must be distinguishable.\n\n## Motion\n\nTransitions and animations that move or resize need `@media (prefers-reduced-motion: reduce)` handling.\n\n`transition` followed by `transition-*` in the same rule is merged into one shorthand by newest Vite. The source looks fine in review while the shipped CSS differs. Use only longhands or only the shorthand:\n\n```sass\n// ❌\ntransition: .2s settings.$standard-easing\ntransition-property: width, height\n\n// ✅ longhands only\ntransition-property: width, height\ntransition-duration: .2s\ntransition-timing-function: settings.$standard-easing\n\n// ✅ full shorthand\ntransition: width .2s settings.$standard-easing, height .2s settings.$standard-easing\n```\n\nExisting files still use the two-line form — don't copy it.\n\n## Direction\n\nKeep CSS per visual variant minimal. Prefer toggling a custom property over another block of generated modifier classes — future design systems drop MD-only CSS.\n\n## Hand-off\n\nYou can't see the result. After a style change, tell the dev what to check in the Playground instead of claiming it looks right:\n\n- affected variants, densities, sizes\n- dark theme and RTL\n- forced colors: DevTools → Rendering → Emulate CSS media feature `forced-colors: active`\n- reduced motion, when transitions changed\n",".claude/rules/utilities.md":"---\npaths: ['packages/vuetify/src/util/**']\n---\n\n# Utilities\n\n`@/util` is imported by nearly every component — a changed signature or semantics ripples everywhere.\n\n## Before adding\n\nGrep `helpers.ts`, `dom.ts` and `v0.ts` first. Most requests already exist: `wrapInArray`, `pick` / `omit`, `mergeDeep`, `debounce`, `clamp`, `focusableChildren`, `getActiveElement` (Shadow DOM-safe — use it instead of `document.activeElement`).\n\n## Where things go\n\n- Framework plumbing (`propsFactory`, `defineComponent`, `useRender`, `getCurrentInstance`) — its own file\n- Generic helpers — `helpers.ts`\n- DOM helpers — `dom.ts`\n- Environment flags — `globals.ts` (`IN_BROWSER`, `SUPPORTS_*`)\n- A new file needs `export *` in `util/index.ts`\n\n## v0 first\n\n- Type guards (`isString`, `isNullOrUndefined`, …) come from `v0.ts` — no raw `typeof x === 'string'` or `x == null`\n- A new framework-agnostic helper is a v0 candidate — mention it to the dev instead of growing `helpers.ts`\n- When core adopts a v0 helper: add it to `v0.ts`, rename on export if it would shadow common local names (`range as createRange`), delete the core copy\n\n## Changing an existing helper\n\nGrep call sites first. Don't change behavior under an existing name — add a new function or update every caller in the same change.\n\n## Console\n\n- Debugging: raw `console.*` is fine, even preferred — lint flags leftovers before they can merge\n- Messages shipped to app developers: `consoleWarn`, `consoleError`, `deprecate`, `breaking`, `removed`\n\n## Tests\n\n`util/__tests__/`, unit project by default. Browser project only for layout or DOM measurement.\n",".claude/skills/playground/SKILL.md":"---\nname: playground\ndescription: Use when working with packages/vuetify/dev/Playground.vue\n---\n\n# Playground\n\n`packages/vuetify/dev/Playground.vue` (gitignored). `pnpm install` creates it from `Playground.template.vue` when missing; `pnpm dev` from the repo root serves it at localhost:8090.\n\nGoals, in order:\n\n1. Hands-on reproduction for the human authoring the change\n2. A demo the author copy-pastes into the PR description for reviewers — keep it brief, no lengthy descriptions, it usually helps to resemble a realistic use case\n\n## Ownership\n\nDo not overwrite Playground content unless explicitly asked. The human is a co-author and may have pasted an old use case to focus on. When asked to change it, keep what the request doesn't touch.\n\nThese guidelines exist so AI edits look like what a human would write and expect.\n\n## Setup\n\n- No build step — `@/` resolves to `src`, changes to components, composables, sass and utilities hot-reload\n- All components are auto-registered, labs included\n- Other files in `dev/` are tracked but fair game when the reproduction needs them: `dev/vuetify.js` (createVuetify options), `dev/vuetify/{defaults,locale,icons,date}.js`\n\n## Shape\n\n```vue\n\n\n\n```\n\n- Block order: template → script → style\n- Dark theme, `v-container`; `max-width=\"600\"` for smaller components\n- Avoid `v-row` / `v-col` as general layout — devs debug in split screen, so it wraps anyway. Stack with `d-flex flex-column ga-4`\n- Cover neighbouring combinations (variant, density, disabled/readonly, RTL), not just the reported case. Label each case with a short `` line, not prose\n- Deterministic local data, no fetches\n\n## Running\n\nOnly when asked, or when the scope of changes needs a visual check.\n\nThe vite process often gets stuck holding port 8090. Before starting:\n\n```bash\nlsof -ti :8090 | xargs -r kill\npnpm dev\n```\n\nRTL / locale checks — fresh Chrome profile with a forced locale (`ar`, `he`, `fa` are RTL):\n\n```bash\nLANGUAGE=ar-EG google-chrome --lang=ar-EG --user-data-dir=/tmp/chrome-ar-EG \\\n --no-first-run --no-default-browser-check http://localhost:8090/\n```\n\nSame thing as a VS Code task (`.vscode/` is gitignored, add it locally):\n\n```json\n{\n \"type\": \"shell\",\n \"label\": \"Open Playground in Chrome (locale)\",\n \"command\": \"LANGUAGE=${input:locale} google-chrome --lang=${input:locale} --user-data-dir=/tmp/chrome-${input:locale} --no-first-run --no-default-browser-check http://localhost:8090/\",\n \"problemMatcher\": []\n}\n```\n\n```json\n\"inputs\": [{\n \"id\": \"locale\",\n \"type\": \"pickString\",\n \"description\": \"Browser locale (ar/he/fa are RTL)\",\n \"options\": [\"ar-EG\", \"ar\", \"el-GR\", \"he\", \"fa\", \"en-US\", \"de\", \"ja\", \"ko-KR\", \"zh-MO\"],\n \"default\": \"ar-EG\"\n}]\n```\n",".claude/skills/tests/SKILL.md":"---\nname: tests\ndescription: Use when writing, fixing or debugging tests in packages/vuetify (unit or browser specs, flaky tests, screenshot stories).\n---\n\n# Tests\n\n## When\n\nWrite tests unless the change is trivial — the bar for trivial is higher than in most projects. A bug fix gets a test that fails without the fix: write it first, see it red, then fix.\n\n## Where\n\nColocated in `__tests__/` next to the source.\n\n| File | Project | For |\n| -------------------- | ------------------------------- | ---------------------------------------------------------- |\n| `*.spec.ts(x)` | `unit` (jsdom) | pure logic: composables, util, local composables |\n| `*.spec.browser.tsx` | `browser` (Playwright Chromium) | anything with layout, focus, keyboard, overlays, scrolling |\n\nPrefer extracting logic into a local composable and unit-testing it over mounting a component for a calculation.\n\n## Running\n\nIn `packages/vuetify`:\n\n```bash\npnpm test # both projects\npnpm test --project browser\npnpm test:open # headed browser with devtools, bails on first failure\n```\n\n## Writing\n\n- Vitest globals (`describe`, `it`, `expect`, `vi`) are auto-imported\n- Helpers from `@test`: `render`, `screen`, `userEvent`, `page`, `commands`, `wait*`, `click`, `waitForClickable`, `scroll`\n- Assert what users observe: roles, ARIA attributes, text, emitted events, focus. Classes only when they are public API (`v-btn--active`)\n- Test names describe behavior: `it('should close on Escape')`\n- No comments referencing issues or URLs — older specs have them, don't copy\n\n## Console\n\nAny unexpected `console.warn` / `console.error` fails the test. Assert expected ones:\n\n```ts\nexpect(\"is not a valid value\").toHaveBeenTipped(); // console.warn — consoleWarn/consoleError/deprecate go through Vue's warn\nexpect(\"…\").toHaveBeenWarned(); // console.error\n```\n\n## Stability\n\nFlaky tests get fixed in follow-up commits regularly — avoid the usual causes:\n\n- `expect.poll(() => …)` or `waitForClickable` instead of fixed `await wait(100)`\n- Focus or clipboard work runs parallel with other tests — take the lock before focusing:\n\n ```ts\n const lock = await commands.getLock();\n input.focus();\n await userEvent.paste();\n await commands.releaseLock(lock);\n ```\n\n- Opening submenus with arrow keys is racy — press the key again until focus lands\n- Reduced motion is on by default; `commands.setReduceMotionDisabled()` when a transition matters, re-enable in `afterEach`\n\n## Screenshots\n\nVisual stories use `showcase({ stories, props, component })` with `gridOn(rows, columns, render)`, captured by Vizzly (`pnpm tdd`, then `pnpm test:screen`). Add them only for visual changes; never commit updated baselines unless asked.\n","AGENTS.md":"# Vuetify\n\nVuetify 4 component framework. Ships Material Design as the default look, but is meant to fit non-material design systems too. `@vuetify/v0` (headless primitives) has been a direct dependency since 4.2.0 and gets adopted gradually. The next major builds fully on it to split design systems out and stop shipping CSS for every visual variant.\n\nThis file and `.claude/` help AI tooling tuned for fast output deliver results closer to what maintainers expect, and lower the barrier for contributions.\n\nMonorepo:\n\n- `packages/vuetify` — the `vuetify` npm package\n- `packages/api-generator` — builds API data (props, events, slots, descriptions) for docs\n- `packages/docs` — documentation site\n\nContributor guide: `packages/docs/src/pages/en/getting-started/contributing.md`\nSupported browsers: `packages/docs/src/pages/en/getting-started/browser-support.md`\n\n## Branches\n\n| Base | For | Docs |\n|----------|-------------------------------------------------------|--------------------|\n| `master` | safe bug fixes, docs | vuetifyjs.com |\n| `dev` | new props/features, fixes that risk visual regression | dev.vuetifyjs.com |\n| `next` | breaking changes | next.vuetifyjs.com |\n\n## Commands\n\n```bash\npnpm dev # root: playground at localhost:8090\npnpm dev docs # root: docs at localhost:8095\n\n# in packages/vuetify\npnpm test # single file or folder\npnpm lint:fix # tsgo typecheck + eslint --fix\n```\n\n## Workflow\n\n1. Reproduce in `packages/vuetify/dev/Playground.vue` — see `.claude/skills/playground/SKILL.md`\n2. Change code, observe the impact in the playground\n3. Write tests unless the change is trivial. The bar for trivial is higher than in most projects — see `.claude/skills/tests/SKILL.md`\n4. Lint, fix, refactor — see `.claude/rules/code-readability.md`\n5. Consider a11y and i18n/RTL. They are usually the implementation's concern; leaving them to framework users is the rare exception\n\n## Principles\n\n- `shallowRef` / `toRef` by default; `ref` / `computed` only when the cost is justified\n- When passing props down to composables or children, usually pass the reactive source (getter or `toRef`), not the unwrapped value — see `.claude/rules/components.md`\n- Less is more, until it isn't. A minimal patch that fixes the reported case often breaks or ignores neighbouring prop combinations. Extend the playground to cover those combinations before calling it done\n\n## Rules\n\nPath-scoped rules in `.claude/rules/`. Claude Code loads them automatically; other tools should read the ones matching the touched paths:\n\n| Rule | Paths |\n|-----------------------|-----------------------------------------------------|\n| `components.md` | `packages/vuetify/src/components/**`, `src/labs/**` |\n| `composables.md` | `packages/vuetify/src/composables/**` |\n| `sass.md` | `packages/vuetify/src/**/*.{sass,scss}` |\n| `utilities.md` | `packages/vuetify/src/util/**` |\n| `code-readability.md` | `packages/vuetify/src/**` |\n\n## Review rubric\n\nEach item is a real finding when a diff violates it. Details in the rule named at the end.\n\n- Comments that narrate code, or reference issues/URLs — `code-readability.md`\n- Abbreviated names outside short lambdas (`idx`, `opts`, `handleX`) — `code-readability.md`\n- Props passed down unwrapped instead of as getter / `toRef` — `components.md`\n- Utility classes in component markup — `components.md`\n- Non-component exports from a component `index.ts` (breaks api-generator) — `components.md`\n- New prop without `new-in.json` entry or api-generator description — `components.md`\n- Changed arguments or return shape of a public composable outside `next` — `composables.md`\n- Raw `typeof` / `== null` checks instead of `@/util` guards — `utilities.md`\n- Hardcoded tunable values instead of `!default` variables, styles outside `tools.layer`, physical `left`/`right` where logical properties work — `sass.md`\n- Surfaces or states invisible in forced-colors mode — `sass.md`\n- `transition` followed by `transition-*` in one rule — `sass.md`\n- Missing tests for a non-trivial change; fixed `wait(ms)` where polling works\n- Base branch not matching the change type (see Branches)\n\nNot findings: legacy patterns in lines the diff doesn't touch, and a11y/RTL gaps the PR explicitly scopes out.\n","CLAUDE.md":"@AGENTS.md\n","packages/README.md":"","packages/docs/package.json":"{\n \"name\": \"vuetifyjs.com\",\n \"type\": \"module\",\n \"description\": \"A Vue.js project\",\n \"private\": true,\n \"author\": \"John Leider \",\n \"version\": \"4.3.0\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/vuetifyjs/vuetify.git\",\n \"directory\": \"packages/docs\"\n },\n \"scripts\": {\n \"dev\": \"vite --force\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\",\n \"preview-https\": \"HTTPS=true vite preview\",\n \"lint\": \"concurrently 'vue-tsc --noEmit --pretty' 'pnpm lint:md' 'node ../../scripts/eslint.js src --concurrency 4' -n 'tsc,md,eslint' --kill-others-on-fail -gr\",\n \"lint:fix\": \"pnpm fix:md && node ../../scripts/eslint.js src --concurrency 4 --fix\",\n \"lint:md\": \"markdownlint --config .markdownlintrc --rules build/markdownlint-rules/meta-length.cjs src/pages/en\",\n \"fix:md\": \"markdownlint --config .markdownlintrc --rules build/markdownlint-rules/meta-length.cjs src/pages/en --fix\"\n },\n \"dependencies\": {\n \"@cosmicjs/sdk\": \"catalog:\",\n \"@sentry/vue\": \"catalog:\",\n \"@vue/compiler-dom\": \"catalog:\",\n \"@vuelidate/core\": \"catalog:\",\n \"@vuelidate/validators\": \"catalog:\",\n \"@vuetify/one\": \"catalog:\",\n \"algoliasearch\": \"catalog:\",\n \"fflate\": \"catalog:\",\n \"isomorphic-fetch\": \"catalog:\",\n \"markdown-it-multimd-table\": \"catalog:\",\n \"pinia\": \"catalog:\",\n \"prism-theme-vars\": \"catalog:\",\n \"prismjs\": \"catalog:\",\n \"roboto-fontface\": \"catalog:\",\n \"swetrix\": \"catalog:\",\n \"vee-validate\": \"catalog:\",\n \"vue\": \"catalog:\",\n \"vue-i18n\": \"catalog:\",\n \"vue-instantsearch\": \"catalog:\",\n \"vue-router\": \"catalog:\",\n \"vuetify\": \"workspace:*\"\n },\n \"devDependencies\": {\n \"@babel/generator\": \"catalog:\",\n \"@babel/types\": \"catalog:\",\n \"@emailjs/browser\": \"catalog:\",\n \"@intlify/unplugin-vue-i18n\": \"catalog:\",\n \"@mdi/js\": \"catalog:\",\n \"@mdi/svg\": \"catalog:\",\n \"@octokit/openapi-types\": \"catalog:\",\n \"@resvg/resvg-js\": \"catalog:\",\n \"@types/babel__generator\": \"catalog:\",\n \"@types/markdown-it\": \"catalog:\",\n \"@types/markdown-it-container\": \"catalog:\",\n \"@types/prismjs\": \"catalog:\",\n \"@vitejs/plugin-basic-ssl\": \"catalog:\",\n \"@vue/compiler-sfc\": \"catalog:\",\n \"@vuetify/api-generator\": \"workspace:*\",\n \"@yankeeinlondon/builder-api\": \"catalog:\",\n \"ajv\": \"catalog:\",\n \"algoliasearch-helper\": \"catalog:\",\n \"async-es\": \"catalog:\",\n \"date-fns\": \"catalog:\",\n \"eslint\": \"catalog:\",\n \"eslint-formatter-codeframe\": \"catalog:\",\n \"front-matter\": \"catalog:\",\n \"markdown-it\": \"catalog:\",\n \"markdown-it-anchor\": \"catalog:\",\n \"markdown-it-attrs\": \"catalog:\",\n \"markdown-it-container\": \"catalog:\",\n \"markdown-it-emoji\": \"catalog:\",\n \"markdown-it-header-sections\": \"catalog:\",\n \"markdown-it-link-attributes\": \"catalog:\",\n \"markdown-it-prism\": \"catalog:\",\n \"markdownlint-cli\": \"catalog:\",\n \"satori\": \"catalog:\",\n \"unplugin-auto-import\": \"catalog:\",\n \"unplugin-fonts\": \"catalog:\",\n \"unplugin-vue-components\": \"catalog:\",\n \"vite-plugin-md\": \"catalog:\",\n \"vite-plugin-pages\": \"catalog:\",\n \"vite-plugin-pwa\": \"catalog:\",\n \"vite-plugin-vue-layouts\": \"catalog:\",\n \"vite-plugin-vuetify\": \"catalog:\",\n \"vue-tsc\": \"catalog:\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n","packages/docs/src/data/301.json":"{\n \"components/dropdowns\": \"/components/menus\",\n \"quick-start\": \"/getting-started/installation\",\n \"vuetify/quick-start\": \"/getting-started/installation\",\n \"getting-started/quick-start/\": \"/getting-started/installation\",\n \"motion\": \"/styles/transitions\",\n \"components/sidebars\": \"/components/navigation-drawers\",\n \"components/v-navigation-drawer\": \"/components/navigation-drawers\",\n \"components/collapsible\": \"/components/expansion-panels\",\n \"components/navbars\": \"/components/toolbars\",\n \"components/toasts\": \"/components/snackbars\",\n \"components/carousel\": \"/components/carousels\",\n \"components/datatables\": \"/components/data-tables/basics\",\n \"components/expansion-panel\": \"/components/expansion-panels\",\n \"components/footer\": \"/components/footers\",\n \"directives/badges\": \"/components/badges\",\n \"vuetify/why-vuetify\": \"/getting-started/why-vuetify\",\n \"vuetify/frequently-asked-questions\": \"/getting-started/frequently-asked-questions\",\n \"vuetify/sponsors-and-backers\": \"/introduction/sponsors-and-backers\",\n \"getting-started/releases-and-migrations/\": \"/getting-started/upgrade-guide\",\n \"vuetify/releases-and-migrations\": \"/getting-started/upgrade-guide\",\n \"vuetify/contributing\": \"/getting-started/contributing\",\n \"vuetify/roadmap\": \"/getting-started/roadmap\",\n \"vuetify/a-la-carte\": \"/features/treeshaking\",\n \"getting-started/a-la-carte\": \"/features/treeshaking\",\n \"guides/a-la-carte\": \"/features/treeshaking\",\n \"customization/a-la-carte\": \"/features/treeshaking\",\n \"pre-made-themes\": \"/resources/themes\",\n \"layout/pre-made-themes\": \"/resources/themes\",\n \"themes/premium\": \"/resources/themes\",\n \"layout/grid\": \"/components/grids\",\n \"layout/pre-defined\": \"/getting-started/wireframes\",\n \"getting-started/pre-made-layouts\": \"/getting-started/wireframes\",\n \"layout/breakpoints\": \"/features/display-and-platform\",\n \"layout/aspect-ratios\": \"/components/aspect-ratios\",\n \"layout/spacing\": \"/styles/spacing\",\n \"layout/alignment\": \"/styles/alignment\",\n \"layout/display\": \"/styles/display\",\n \"layout/elevation\": \"/styles/elevation\",\n \"style/colors\": \"/styles/colors\",\n \"style/theme\": \"/customization/theme\",\n \"style/typography\": \"/styles/text-and-typography\",\n \"styles/typography\": \"/styles/text-and-typography\",\n \"styles/text\": \"/styles/text-and-typography\",\n \"style/content\": \"/styles/content\",\n \"motion/scroll\": \"/customization/scrolling\",\n \"styles/scroll\": \"/customization/scrolling\",\n \"motion/transitions\": \"/styles/transitions\",\n \"components/form\": \"/components/forms\",\n \"components/selection-controls\": \"/components/checkboxes\",\n \"components/slide-toggles\": \"/components/switches\",\n \"components/buttons-and-indicators\": \"/components/buttons\",\n \"framework/pre-defined\": \"/getting-started/pre-made-layouts\",\n \"framework/pre-made\": \"/getting-started/pre-made-layouts\",\n \"framework/pre-defined-layouts\": \"/getting-started/pre-made-layouts\",\n \"components/data-iterator\": \"/components/data-iterators\",\n \"framework/a-la-carte\": \"/customization/a-la-carte\",\n \"framework/grid\": \"/components/grids\",\n \"framework/application\": \"/components/application\",\n \"framework/breakpoints\": \"/features/display-and-platform\",\n \"framework/icons\": \"/customization/icons\",\n \"framework/i18n\": \"/customization/internationalization\",\n \"framework/theme\": \"/customization/theme\",\n \"framework/scroll\": \"/customization/scrolling\",\n \"framework/aspect-ratios\": \"/components/aspect-ratios\",\n \"framework/pre-made-layouts\": \"/getting-started/pre-made-layouts\",\n \"framework/colors\": \"/styles/colors\",\n \"framework/content\": \"/styles/content\",\n \"framework/typography\": \"/styles/typography\",\n \"framework/display\": \"/styles/display\",\n \"framework/elevation\": \"/styles/elevation\",\n \"framework/spacing\": \"/styles/spacing\",\n \"styles/alignment\": \"/styles/text\",\n \"framework/text-alignment\": \"/styles/text-and-typography\",\n \"styles/text-alignment\": \"/styles/text-and-typography\",\n \"framework/transitions\": \"/styles/transitions\",\n \"customizing/sandbox\": \"/customization/sandbox\",\n \"customizing/a-la-carte\": \"/customization/a-la-carte\",\n \"customizing/breakpoints\": \"/features/display-and-platform\",\n \"customizing/theme\": \"/customization/theme\",\n \"customizing/icons\": \"/customization/icons\",\n \"customizing/i18n\": \"/customization/internationalization\",\n \"getting-started/why-vuetify\": \"/introduction/why-vuetify\",\n \"getting-started/meet-the-team\": \"/about/meet-the-team\",\n \"getting-started/sponsors-and-backers\": \"/introduction/sponsors-and-backers\",\n \"getting-started/roadmap\": \"/introduction/roadmap\",\n \"getting-started/long-term-support\": \"/introduction/long-term-support\",\n \"getting-started/consulting-and-support\": \"/introduction/enterprise-support\",\n \"getting-started/support/enterprise\": \"/introduction/enterprise-support\",\n \"components/textarea\": \"/components/textareas\",\n \"components/virtual-scrollers\": \"/components/virtual-scroller\",\n \"directives/resizing\": \"/directives/resize\",\n \"directives/ripples\": \"/directives/ripple\",\n \"directives/scrolling\": \"/directives/scroll\",\n \"directives/touch-support\": \"/directives/touch\",\n \"introduction/frequently-asked-questions\": \"/getting-started/frequently-asked-questions\",\n \"professional-support/consulting\": \"/introduction/enterprise-support\",\n \"professional-support/enterprise\": \"/introduction/enterprise-support\",\n \"introduction/support\": \"/introduction/enterprise-support\",\n \"introduction/enterprise\": \"/introduction/enterprise-support\",\n \"introduction/consulting\": \"/introduction/enterprise-support\",\n \"customization/accessibility\": \"/features/accessibility\",\n \"customization/rtl\": \"/features/bidirectionality\",\n \"features/rtl\": \"/features/bidirectionality\",\n \"features/breakpoints\": \"/features/display-and-platform\",\n \"features/bidirectionality\": \"/features/internationalization\",\n \"customization/bidirectionality\": \"/features/bidirectionality\",\n \"customization/breakpoints\": \"/features/display-and-platform\",\n \"customization/global-config\": \"/features/global-config\",\n \"customization/scrolling\": \"/features/scrolling\",\n \"customization/icons\": \"/features/icon-fonts\",\n \"customization/internationalization\": \"/features/internationalization\",\n \"customization/presets\": \"/features/presets\",\n \"customization/sass-variables\": \"/features/sass-variables\",\n \"customization/theme\": \"/features/theme\",\n \"about/sponsors-and-backers\": \"/introduction/sponsors-and-backers\",\n \"components/simple-tables\": \"/components/tables\",\n \"components/data-tables\": \"/components/data-tables/basics\",\n \"components/date-pickers-month\": \"/introduction/roadmap\",\n \"components/server-side-data-tables\": \"/components/data-tables/server-side-tables\",\n \"components/virtual-data-tables\": \"/components/data-tables/virtual-tables\",\n \"api/v-click-outside\": \"/api/v-click-outside-directive\",\n \"api/v-intersect\": \"/api/v-intersect-directive\",\n \"api/v-mutate\": \"/api/v-mutate-directive\",\n \"api/v-resize\": \"/api/v-resize-directive\",\n \"api/v-ripple\": \"/api/v-ripple-directive\",\n \"api/v-scroll\": \"/api/v-scroll-directive\",\n \"api/v-touch\": \"/api/v-touch-directive\"\n}\n","packages/docs/src/data/metadata.json":"{\n \"title\": \"Vuetify — A Vue Component Framework\",\n \"description\": \"Vuetify is a no design skills required UI Component Framework for Vue. It provides you with all of the tools necessary to create beautiful content rich web applications.\",\n \"keywords\": \"vue, material design components, vue components, material design components, vuetify, vuetify, component framework\"\n}\n","packages/docs/src/data/nav.json":"[\n {\n \"title\": \"introduction\",\n \"inactiveIcon\": \"mdi-script-text-outline\",\n \"activeIcon\": \"mdi-script-text\",\n \"items\": [\n \"why-vuetify\",\n \"long-term-support\",\n \"roadmap\",\n \"sponsors-and-backers\",\n { \"divider\": true },\n { \"subheader\": \"professional-support\" },\n \"enterprise-support\"\n ]\n },\n {\n \"title\": \"getting-started\",\n \"inactiveIcon\": \"mdi-speedometer-medium\",\n \"activeIcon\": \"mdi-speedometer\",\n \"items\": [\n \"installation\",\n \"mcp\",\n \"frequently-asked-questions\",\n \"wireframes\",\n \"unit-testing\",\n \"browser-support\",\n \"upgrade-guide\",\n \"release-notes\",\n \"contributing\"\n ]\n },\n {\n \"title\": \"features\",\n \"inactiveIcon\": \"mdi-image-edit-outline\",\n \"activeIcon\": \"mdi-image-edit\",\n \"items\": [\n \"accessibility\",\n \"aliasing\",\n \"application-layout\",\n \"blueprints\",\n {\n \"title\": \"css-utilities\",\n \"subfolder\": \"features\",\n \"activeIcon\": \"\",\n \"inactiveIcon\": \"\",\n \"items\": [\n \"overview\",\n \"unocss-vuetify-preset\",\n \"unocss-tailwind-preset\",\n \"tailwindcss\"\n ]\n },\n \"dates\",\n \"display-and-platform\",\n \"global-configuration\",\n \"hotkey\",\n \"icon-fonts\",\n \"internationalization\",\n \"md3-button-sizes\",\n \"rules\",\n \"scrolling\",\n \"sass-variables\",\n \"theme\",\n \"treeshaking\"\n ]\n },\n {\n \"title\": \"styles\",\n \"inactiveIcon\": \"mdi-palette-outline\",\n \"activeIcon\": \"mdi-palette\",\n \"items\": [\n \"entry-points\",\n \"css-reset\",\n \"layers\",\n \"transitions\",\n \"colors\",\n { \"divider\": true },\n {\n \"subheader\": \"utility-classes\"\n },\n \"borders\",\n \"border-radius\",\n \"content\",\n \"cursor\",\n \"display\",\n \"elevation\",\n \"flex\",\n \"float\",\n \"opacity\",\n \"overflow\",\n \"position\",\n \"sizing\",\n \"spacing\",\n \"text-and-typography\"\n ]\n },\n {\n \"title\": \"concepts\",\n \"inactiveIcon\": \"mdi-puzzle-outline\",\n \"activeIcon\": \"mdi-puzzle\",\n \"items\": [\n \"density-and-sizing\",\n \"items\",\n \"routing\",\n \"v-model\",\n \"variants\"\n ]\n },\n {\n \"title\": \"components\",\n \"inactiveIcon\": \"mdi-view-dashboard-outline\",\n \"activeIcon\": \"mdi-view-dashboard\",\n \"items\": [\n \"all\",\n {\n \"title\": \"explorer\",\n \"routeMatch\": \"explorer/:name(.*)\",\n \"routePath\": \"explorer\",\n \"subtitle\": \"browse-components\"\n },\n \"application\",\n { \"divider\": true },\n { \"subheader\": \"containment\" },\n \"bottom-sheets\",\n \"buttons\",\n \"icon-buttons\",\n \"cards\",\n \"chips\",\n \"dialogs\",\n \"dividers\",\n \"expansion-panels\",\n \"lists\",\n \"menus\",\n \"overlays\",\n \"sheets\",\n \"toolbars\",\n \"tooltips\",\n { \"divider\": true },\n { \"subheader\": \"navigation\" },\n \"app-bars\",\n \"bottom-navigation\",\n \"breadcrumbs\",\n \"floating-action-buttons\",\n \"footers\",\n \"navigation-drawers\",\n \"paginations\",\n \"speed-dials\",\n \"system-bars\",\n \"tabs\",\n { \"divider\": true },\n { \"subheader\": \"form-inputs-and-controls\" },\n \"autocompletes\",\n \"checkboxes\",\n \"color-inputs\",\n \"combobox\",\n \"date-inputs\",\n \"file-inputs\",\n \"file-upload\",\n \"forms\",\n \"inputs\",\n \"number-inputs\",\n \"otp-input\",\n \"radio-buttons\",\n \"range-sliders\",\n \"selects\",\n \"sliders\",\n \"switches\",\n \"text-fields\",\n \"textareas\",\n { \"divider\": true },\n { \"subheader\": \"data-and-display\" },\n \"calendars\",\n \"confirm-edit\",\n \"data-iterators\",\n {\n \"title\": \"data-tables\",\n \"subfolder\": \"components\",\n \"activeIcon\": \"\",\n \"inactiveIcon\": \"\",\n \"items\": [\n \"introduction\",\n { \"subheader\": \"guide\" },\n \"basics\",\n \"data-and-display\",\n { \"subheader\": \"types\" },\n \"server-side-tables\",\n \"virtual-tables\"\n ]\n },\n \"highlights\",\n \"hotkeys\",\n \"sparklines\",\n \"infinite-scroller\",\n \"tables\",\n \"treeview\",\n \"virtual-scroller\",\n { \"divider\": true },\n { \"subheader\": \"grids\" },\n \"grids\",\n { \"divider\": true },\n { \"subheader\": \"selection\" },\n \"button-groups\",\n \"carousels\",\n \"chip-groups\",\n \"item-groups\",\n \"slide-groups\",\n \"steppers\",\n \"vertical-steppers\",\n \"windows\",\n { \"divider\": true },\n { \"subheader\": \"feedback\" },\n \"alerts\",\n \"badges\",\n \"banners\",\n \"empty-states\",\n \"hover\",\n \"progress\",\n \"progress-circular\",\n \"progress-linear\",\n \"ratings\",\n \"skeleton-loaders\",\n \"snackbars\",\n \"snackbar-queue\",\n \"timelines\",\n { \"divider\": true },\n { \"subheader\": \"images-and-icons\" },\n \"aspect-ratios\",\n \"avatars\",\n \"avatar-groups\",\n \"icons\",\n \"images\",\n \"parallax\",\n { \"divider\": true },\n { \"subheader\": \"pickers\" },\n \"color-pickers\",\n \"date-pickers\",\n \"time-pickers\",\n { \"divider\": true },\n { \"subheader\": \"providers\" },\n \"defaults-providers\",\n \"locale-providers\",\n \"theme-providers\",\n { \"divider\": true },\n { \"subheader\": \"miscellaneous\" },\n \"lazy\",\n \"no-ssr\",\n \"pull-to-refresh\"\n ]\n },\n {\n \"title\": \"api\",\n \"inactiveIcon\": \"mdi-flask-empty-outline\",\n \"activeIcon\": \"mdi-flask-outline\",\n \"items\": [\n \"hotkey\"\n ]\n },\n {\n \"title\": \"directives\",\n \"inactiveIcon\": \"mdi-function\",\n \"activeIcon\": \"mdi-function\",\n \"items\": [\n \"click-outside\",\n \"intersect\",\n \"mutate\",\n \"resize\",\n \"ripple\",\n \"scroll\",\n \"tooltip\",\n \"touch\",\n \"touch-hold\"\n ]\n },\n {\n \"title\": \"labs\",\n \"inactiveIcon\": \"mdi-beaker-outline\",\n \"activeIcon\": \"mdi-beaker\",\n \"items\": [\n \"introduction\",\n {\n \"title\": \"audio-players\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"command-palettes\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"date-range-pickers\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"heatmaps\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"infinite-carousels\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"loading-indicators\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"mask-inputs\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"month-pickers\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"pie-charts\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"split-buttons\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"time-inputs\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"videos\",\n \"subfolder\": \"components\"\n }\n ]\n },\n {\n \"title\": \"resources\",\n \"inactiveIcon\": \"mdi-human-male-board\",\n \"activeIcon\": \"mdi-human-male-board\",\n \"items\": [\n \"brand-kit\",\n \"jobs-for-vue\",\n \"made-with-vuetify\",\n \"themes\",\n { \"divider\": true },\n { \"subheader\": \"guides\" },\n \"search-engine\",\n \"ui-kits\"\n ]\n },\n {\n \"title\": \"about\",\n \"inactiveIcon\": \"$vuetify-outline\",\n \"activeIcon\": \"$vuetify\",\n \"items\": [\n \"code-of-conduct\",\n \"licensing\",\n \"meet-the-team\",\n \"security-disclosure\"\n ]\n }\n]\n","packages/docs/src/data/new-in.json":"{\n \"useTheme\": {\n \"exposed\": {\n \"change\": \"3.9.0\",\n \"toggle\": \"3.9.0\",\n \"cycle\": \"3.9.0\"\n }\n },\n \"VAlert\": {\n \"props\": {\n \"timeout\": \"4.3.0\",\n \"timer\": \"4.3.0\",\n \"transition\": \"4.3.0\"\n }\n },\n \"VAppBar\": {\n \"props\": {\n \"scrollBehavior\": \"3.2.0\"\n }\n },\n \"VAutocomplete\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"autocomplete\": \"3.10.0\",\n \"autoSelectFirst\": \"3.3.0\",\n \"clearOnSelect\": \"3.5.0\",\n \"closeOnInputClick\": \"4.2.0\",\n \"filteredOrder\": \"4.3.0\",\n \"form\": \"4.2.0\",\n \"listProps\": \"3.5.0\",\n \"menuElevation\": \"4.0.0\",\n \"openOnFocus\": \"4.2.0\"\n },\n \"slots\": {\n \"menu-header\": \"3.12.0\",\n \"menu-footer\": \"3.12.0\"\n },\n \"events\": {\n \"item:added\": \"4.2.0\",\n \"item:removed\": \"4.2.0\"\n },\n \"examples\": {\n \"slot-menu-footer\": \"3.12.0\",\n \"misc-new-tab\": \"3.3.0\",\n \"prop-filtered-order\": \"4.3.0\",\n \"prop-ignore-accents\": \"4.2.0\"\n }\n },\n \"VAvatar\": {\n \"props\": {\n \"text\": \"3.4.0\",\n \"border\": \"3.7.0\",\n \"badge\": \"4.0.0\"\n },\n \"slots\": {\n \"badge\": \"4.0.0\"\n },\n \"examples\": {\n \"prop-badge\": \"4.0.0\"\n }\n },\n \"VBadge\": {\n \"props\": {\n \"dotSize\": \"4.0.0\"\n }\n },\n \"VBanner\": {\n \"props\": {\n \"bgColor\": \"3.4.0\"\n }\n },\n \"VBottomSheet\": {\n \"props\": {\n \"contextMenu\": \"4.3.0\"\n }\n },\n \"VBreadcrumbsItem\": {\n \"props\": {\n \"width\": \"3.11.0\",\n \"maxWidth\": \"3.11.0\"\n }\n },\n \"VBtn\": {\n \"props\": {\n \"text\": \"3.2.0\",\n \"slim\": \"3.4.0\",\n \"readonly\": \"3.6.0\",\n \"activeColor\": \"3.7.0\",\n \"spaced\": \"3.10.0\"\n },\n \"examples\": {\n \"prop-spaced\": \"3.10.0\",\n \"misc-readonly\": \"3.6.0\"\n }\n },\n \"VBtnGroup\": {\n \"props\": {\n \"connected\": \"4.3.0\",\n \"size\": \"4.2.0\"\n }\n },\n \"VCarousel\": {\n \"props\": {\n \"crossfade\": \"3.10.0\",\n \"transitionDuration\": \"3.10.0\",\n \"pauseOnHover\": \"4.3.0\"\n },\n \"examples\": {\n \"misc-vertical\": \"3.9.0\",\n \"prop-custom-transition\": \"3.10.0\"\n }\n },\n \"VCalendar\": {\n \"props\": {\n \"format\": \"4.1.0\",\n \"intervalHighlight\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-hour24\": \"4.1.0\"\n }\n },\n \"VCheckbox\": {\n \"props\": {\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VCheckboxBtn\": {\n \"props\": {\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VChip\": {\n \"props\": {\n \"baseColor\": \"3.8.0\"\n }\n },\n \"VChipGroup\": {\n \"props\": {\n \"scrollToActive\": \"3.10.6\"\n }\n },\n \"VColorInput\": {\n \"props\": {\n \"openOnFocus\": \"4.2.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"reset\": \"4.3.0\",\n \"resetValidation\": \"4.3.0\",\n \"validate\": \"4.3.0\",\n \"isValid\": \"4.3.0\",\n \"errorMessages\": \"4.3.0\"\n }\n },\n \"VColorPicker\": {\n \"props\": {\n \"hideEyeDropper\": \"3.10.0\",\n \"eyeDropperIcon\": \"3.10.0\",\n \"hideTitle\": \"3.10.0\",\n \"hideInputLabels\": \"4.1.0\"\n }\n },\n \"VCombobox\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"alwaysFilter\": \"3.10.4\",\n \"autocomplete\": \"3.10.0\",\n \"clearOnSelect\": \"3.5.0\",\n \"closeOnInputClick\": \"4.2.0\",\n \"filteredOrder\": \"4.3.0\",\n \"form\": \"4.2.0\",\n \"listProps\": \"3.5.0\",\n \"menuElevation\": \"4.0.0\",\n \"openOnFocus\": \"4.2.0\",\n \"trimValues\": \"4.2.0\"\n },\n \"slots\": {\n \"menu-header\": \"3.12.0\",\n \"menu-footer\": \"3.12.0\"\n },\n \"events\": {\n \"item:added\": \"4.2.0\",\n \"item:removed\": \"4.2.0\",\n \"item:created\": \"4.2.0\"\n },\n \"examples\": {\n \"slot-menu-header\": \"3.12.0\"\n }\n },\n \"VConfirmEdit\": {\n \"props\": {\n \"hideActions\": \"3.8.0\"\n }\n },\n \"VDateInput\": {\n \"props\": {\n \"openOnFocus\": \"4.2.0\"\n }\n },\n \"VDatePicker\": {\n \"props\": {\n \"events\": \"3.11.0\",\n \"eventColor\": \"3.11.0\",\n \"controlHeight\": \"3.8.0\",\n \"controlVariant\": \"3.11.0\",\n \"firstDayOfYear\": \"3.10.0\",\n \"headerColor\": \"3.8.0\",\n \"headerDateFormat\": \"3.11.0\",\n \"hideTitle\": \"3.10.0\",\n \"landscape\": \"3.11.0\",\n \"landscapeHeaderWidth\": \"3.11.0\",\n \"noAutoNavigation\": \"4.1.0\",\n \"noMonthPicker\": \"3.11.0\",\n \"wheel\": \"4.3.0\"\n },\n \"slots\": {\n \"controls\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-landscape\": \"3.11.0\",\n \"prop-events\": \"3.11.0\",\n \"slots-controls\": \"3.11.0\"\n }\n },\n \"VDataIterator\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"groupKey\": \"4.1.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-grouping\": \"4.1.0\"\n }\n },\n \"VDataTable\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"collapseIcon\": \"3.10.0\",\n \"expandIcon\": \"3.10.0\",\n \"expandStrategy\": \"4.1.0\",\n \"expandTransition\": \"4.1.0\",\n \"gridlines\": \"4.1.0\",\n \"groupCollapseIcon\": \"3.10.0\",\n \"groupExpandIcon\": \"3.10.0\",\n \"groupKey\": \"4.1.0\",\n \"headerProps\": \"3.5.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\",\n \"pageBy\": \"3.12.0\",\n \"showFirstLastPage\": \"4.1.0\",\n \"sortIcon\": \"3.12.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\",\n \"expanded\": \"4.1.0\",\n \"group-summary\": \"3.10.0\"\n },\n \"examples\": {\n \"prop-grouping\": \"4.1.0\",\n \"prop-sort-icon\": \"3.12.0\",\n \"slot-expanded\": \"4.1.0\",\n \"slot-group-summary\": \"3.10.0\"\n }\n },\n \"VDataTableServer\": {\n \"props\": {\n \"collapseIcon\": \"3.10.0\",\n \"expandIcon\": \"3.10.0\",\n \"expandStrategy\": \"4.1.0\",\n \"expandTransition\": \"4.1.0\",\n \"gridlines\": \"4.1.0\",\n \"groupCollapseIcon\": \"3.10.0\",\n \"groupExpandIcon\": \"3.10.0\",\n \"groupKey\": \"4.1.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\",\n \"pageBy\": \"3.12.0\",\n \"showFirstLastPage\": \"4.1.0\",\n \"sortIcon\": \"3.12.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\",\n \"expanded\": \"4.1.0\",\n \"group-summary\": \"3.10.0\"\n }\n },\n \"VDataTableVirtual\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"collapseIcon\": \"3.10.0\",\n \"expandIcon\": \"3.10.0\",\n \"expandStrategy\": \"4.1.0\",\n \"expandTransition\": \"4.1.0\",\n \"gridlines\": \"4.1.0\",\n \"groupCollapseIcon\": \"3.10.0\",\n \"groupExpandIcon\": \"3.10.0\",\n \"groupKey\": \"4.1.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\",\n \"sortIcon\": \"3.12.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\",\n \"expanded\": \"4.1.0\",\n \"group-summary\": \"3.10.0\"\n }\n },\n \"VDialog\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"contextMenu\": \"4.3.0\",\n \"retainFocus\": \"3.11.0\",\n \"stickToTarget\": \"3.10.0\",\n \"viewportMargin\": \"3.11.0\"\n }\n },\n \"VDivider\": {\n \"props\": {\n \"gradient\": \"3.11.0\",\n \"contentOffset\": \"3.11.0\",\n \"variant\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-gradient\": \"3.11.0\"\n }\n },\n \"VExpansionPanels\": {\n \"props\": {\n \"static\": \"3.4.0\",\n \"gap\": \"4.1.0\",\n \"hover\": \"4.1.0\",\n \"noDivider\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-rounded-gap\": \"4.1.0\"\n }\n },\n \"VExpansionPanelTitle\": {\n \"props\": {\n \"hover\": \"4.1.0\"\n }\n },\n \"VField\": {\n \"props\": {\n \"iconColor\": \"3.8.0\",\n \"glow\": \"3.8.0\"\n }\n },\n \"VFileInput\": {\n \"props\": {\n \"filterByType\": \"3.10.0\",\n \"truncateLength\": \"3.10.0\"\n }\n },\n \"VFileUpload\": {\n \"props\": {\n \"filterByType\": \"3.10.0\",\n \"loading\": \"4.1.0\"\n },\n \"slots\": {\n \"loader\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-loading\": \"4.1.0\"\n }\n },\n \"VIcon\": {\n \"props\": {\n \"opacity\": \"3.8.0\"\n }\n },\n \"VIconBtn\": {\n \"props\": {\n \"widthVariant\": \"4.3.0\"\n }\n },\n \"VImg\": {\n \"props\": {\n \"position\": \"3.4.0\",\n \"draggable\": \"3.4.0\",\n \"referrerpolicy\": \"3.4.0\",\n \"crossorigin\": \"3.4.0\",\n \"absolute\": \"3.7.0\",\n \"imageClass\": \"3.12.0\"\n },\n \"examples\": {\n \"prop-image-class\": \"3.12.0\"\n }\n },\n \"VInput\": {\n \"props\": {\n \"detailsActive\": \"4.2.0\",\n \"iconColor\": \"3.8.0\",\n \"glow\": \"3.8.0\"\n }\n },\n \"VList\": {\n \"props\": {\n \"indent\": \"3.11.0\",\n \"itemsRegistration\": \"3.11.0\",\n \"prependGap\": \"3.11.0\"\n },\n \"exposed\": {\n \"activeDescendant\": \"4.3.0\"\n }\n },\n \"VListItem\": {\n \"props\": {\n \"baseColor\": \"3.3.0\",\n \"prependGap\": \"3.11.0\",\n \"slim\": \"3.4.0\"\n }\n },\n \"VMenu\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"contextMenu\": \"4.3.0\",\n \"openOnArrow\": \"4.2.0\",\n \"retainFocus\": \"3.11.0\",\n \"stickToTarget\": \"3.10.0\",\n \"submenu\": \"3.7.0\",\n \"viewportMargin\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-context-menu\": \"4.3.0\",\n \"prop-submenu\": \"3.7.0\"\n }\n },\n \"VNavigationDrawer\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"retainFocus\": \"3.11.0\",\n \"persistent\": \"3.6.0\"\n }\n },\n \"VNumberInput\": {\n \"props\": {\n \"autocomplete\": \"3.10.0\",\n \"grouping\": \"4.1.0\",\n \"groupSeparator\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-grouping\": \"4.1.0\"\n }\n },\n \"VOtpInput\": {\n \"props\": {\n \"density\": \"3.12.0\",\n \"masked\": \"3.12.0\",\n \"merged\": \"4.1.0\",\n \"pattern\": \"4.1.0\"\n },\n \"slots\": {\n \"divider\": \"4.1.0\"\n },\n \"examples\": {\n \"misc-custom-layout\": \"4.1.0\",\n \"prop-merged\": \"4.1.0\",\n \"prop-pattern\": \"4.1.0\",\n \"slot-divider\": \"4.1.0\"\n }\n },\n \"VOverlay\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"contextMenu\": \"4.3.0\",\n \"retainFocus\": \"3.11.0\",\n \"stickToTarget\": \"3.10.0\",\n \"viewportMargin\": \"3.11.0\"\n }\n },\n \"VPicker\": {\n \"props\": {\n \"hideTitle\": \"3.10.0\"\n }\n },\n \"VProgress\": {\n \"examples\": {\n \"misc-loading-indicator\": \"4.3.0\"\n }\n },\n \"VProgressCircular\": {\n \"props\": {\n \"reveal\": \"3.12.0\",\n \"rounded\": \"3.11.0\",\n \"shape\": \"4.3.0\",\n \"transition\": \"4.2.0\",\n \"variant\": \"4.3.0\"\n },\n \"examples\": {\n \"prop-reveal\": \"3.12.0\",\n \"prop-transition\": \"4.2.0\"\n }\n },\n \"VProgressLinear\": {\n \"props\": {\n \"chunkCount\": \"3.10.0\",\n \"chunkGap\": \"3.10.0\",\n \"chunkWidth\": \"3.10.0\",\n \"reveal\": \"4.2.0\",\n \"shape\": \"4.3.0\",\n \"stopIndicator\": \"4.3.0\",\n \"transition\": \"4.2.0\",\n \"variant\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-chunks\": \"3.10.0\",\n \"prop-transition\": \"4.2.0\"\n }\n },\n \"VRadio\": {\n \"props\": {\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VRadioGroup\": {\n \"events\": {\n \"update:focused\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VRangeSlider\": {\n \"examples\": {\n \"prop-value-format\": \"4.3.0\"\n },\n \"props\": {\n \"endThumbAriaLabel\": \"4.3.0\",\n \"size\": \"4.3.0\",\n \"startThumbAriaLabel\": \"4.3.0\",\n \"thumbGap\": \"4.3.0\",\n \"valueFormat\": \"4.3.0\",\n \"variant\": \"4.3.0\"\n }\n },\n \"VRating\": {\n \"props\": {\n \"iconSize\": \"4.3.0\"\n }\n },\n \"VRow\": {\n \"props\": {\n \"gapSm\": \"4.3.0\",\n \"gapMd\": \"4.3.0\",\n \"gapLg\": \"4.3.0\",\n \"gapXl\": \"4.3.0\",\n \"gapXxl\": \"4.3.0\",\n \"size\": \"4.0.0\"\n }\n },\n \"VSelect\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"autocomplete\": \"3.10.0\",\n \"form\": \"4.2.0\",\n \"listProps\": \"3.5.0\",\n \"menuElevation\": \"4.0.0\",\n \"noAutoScroll\": \"3.9.0\",\n \"openOnFocus\": \"4.2.0\"\n },\n \"slots\": {\n \"menu-header\": \"3.12.0\",\n \"menu-footer\": \"3.12.0\"\n },\n \"events\": {\n \"item:added\": \"4.2.0\",\n \"item:removed\": \"4.2.0\"\n },\n \"examples\": {\n \"prop-list-props\": \"3.5.0\",\n \"slot-menu-header-and-footer\": \"3.12.0\"\n }\n },\n \"VSelectionControl\": {\n \"props\": {\n \"indeterminate\": \"4.1.0\",\n \"indeterminateIcon\": \"4.1.0\",\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\"\n }\n },\n \"VSelectionControlGroup\": {\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\"\n }\n },\n \"VSkeletonLoader\": {\n \"props\": {\n \"types\": \"4.2.0\"\n },\n \"examples\": {\n \"prop-types\": \"4.2.0\"\n }\n },\n \"VSlider\": {\n \"examples\": {\n \"prop-value-format\": \"4.3.0\"\n },\n \"events\": {\n \"start\": \"3.2.0\",\n \"end\": \"3.2.0\"\n },\n \"props\": {\n \"appendInnerIcon\": \"4.3.0\",\n \"centered\": \"4.3.0\",\n \"prependInnerIcon\": \"4.3.0\",\n \"size\": \"4.3.0\",\n \"thumbGap\": \"4.3.0\",\n \"valueFormat\": \"4.3.0\",\n \"variant\": \"4.3.0\"\n },\n \"slots\": {\n \"append-inner\": \"4.3.0\",\n \"prepend-inner\": \"4.3.0\"\n }\n },\n \"VSlideGroup\": {\n \"props\": {\n \"contentClass\": \"3.9.0\",\n \"gap\": \"4.3.0\",\n \"padding\": \"4.3.0\",\n \"scrollDistance\": \"4.2.0\",\n \"scrollSnap\": \"4.2.0\",\n \"scrollToActive\": \"3.10.6\"\n },\n \"events\": {\n \"edge\": \"4.2.0\"\n },\n \"exposed\": {\n \"hasOverflow\": \"4.2.0\",\n \"slide\": \"4.2.0\"\n },\n \"examples\": {\n \"misc-image-slider\": \"4.3.0\"\n }\n },\n \"VSnackbar\": {\n \"props\": {\n \"loading\": \"4.0.0\",\n \"prependAvatar\": \"4.0.0\",\n \"prependIcon\": \"4.0.0\",\n \"reverseTimer\": \"4.0.0\",\n \"timer\": \"3.4.0\",\n \"timerColor\": \"4.0.0\",\n \"text\": \"3.4.0\"\n },\n \"slots\": {\n \"header\": \"4.0.0\",\n \"prepend\": \"4.0.0\"\n },\n \"examples\": {\n \"prop-prepend-icon\": \"4.0.0\",\n \"prop-prepend-avatar\": \"4.0.0\",\n \"prop-loading\": \"4.0.0\",\n \"prop-timer-position\": \"4.0.0\",\n \"slot-header\": \"4.0.0\",\n \"slot-prepend\": \"4.0.0\"\n }\n },\n \"VSnackbarQueue\": {\n \"props\": {\n \"closable\": \"4.0.0\",\n \"closeText\": \"4.0.0\",\n \"gap\": \"4.0.0\",\n \"totalVisible\": \"4.0.0\"\n },\n \"examples\": {\n \"misc-promise\": \"4.0.0\",\n \"prop-total-visible\": \"3.11.0\",\n \"prop-transition\": \"4.0.0\"\n }\n },\n \"VSpeedDial\": {\n \"props\": {\n \"contextMenu\": \"4.3.0\"\n }\n },\n \"VSparkline\": {\n \"props\": {\n \"animation\": \"4.1.0\",\n \"autoDraw\": \"4.1.0\",\n \"inset\": \"4.1.0\",\n \"interactive\": \"4.1.0\",\n \"markerSize\": \"4.1.0\",\n \"markerStroke\": \"4.1.0\",\n \"showMarkers\": \"4.1.0\",\n \"smoothMode\": \"4.1.0\",\n \"tooltip\": \"4.1.0\"\n },\n \"events\": {\n \"update:currentIndex\": \"4.1.0\"\n },\n \"examples\": {\n \"misc-interactive\": \"4.1.0\",\n \"prop-animation\": \"4.1.0\",\n \"prop-inset\": \"4.1.0\",\n \"prop-smooth-mode\": \"4.1.0\"\n }\n },\n \"VStepper\": {\n \"props\": {\n \"itemProps\": \"3.11.0\"\n }\n },\n \"VSwitch\": {\n \"props\": {\n \"size\": \"4.1.0\",\n \"thumbColor\": \"4.1.0\",\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"thumb\": \"3.5.0\",\n \"track-false\": \"3.5.0\",\n \"track-true\": \"3.5.0\",\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VTab\": {\n \"props\": {\n \"inset\": \"3.11.2\",\n \"text\": \"3.2.0\",\n \"spaced\": \"3.10.0\",\n \"sliderTransition\": \"3.11.0\",\n \"sliderTransitionDuration\": \"3.11.0\",\n \"sliderVariant\": \"4.3.0\"\n }\n },\n \"VTable\": {\n \"props\": {\n \"gridlines\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\"\n }\n },\n \"VTabs\": {\n \"props\": {\n \"inset\": \"3.11.0\",\n \"insetPadding\": \"3.11.0\",\n \"insetRadius\": \"3.11.0\",\n \"spaced\": \"3.10.0\",\n \"sliderTransition\": \"3.11.0\",\n \"sliderTransitionDuration\": \"3.11.0\",\n \"sliderVariant\": \"4.3.0\"\n },\n \"slots\": {\n \"next\": \"3.11.0\",\n \"prev\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-slider-transition\": \"3.11.0\",\n \"prop-spaced\": \"3.10.0\"\n }\n },\n \"VTextarea\": {\n \"props\": {\n \"maxHeight\": \"3.11.0\"\n }\n },\n \"VTextField\": {\n \"props\": {\n \"autocomplete\": \"3.10.0\"\n }\n },\n \"VTimePicker\": {\n \"props\": {\n \"density\": \"3.11.0\",\n \"hideTitle\": \"3.10.0\",\n \"period\": \"3.10.0\",\n \"variant\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-scrollable\": \"4.3.0\"\n }\n },\n \"VTreeview\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"hideActions\": \"3.9.0\",\n \"hideNoData\": \"3.10.0\",\n \"noDataText\": \"3.10.0\",\n \"separateRoots\": \"3.9.0\",\n \"indentLines\": \"3.9.0\",\n \"indentLinesColor\": \"3.12.0\",\n \"indentLinesOpacity\": \"3.12.0\",\n \"itemsRegistration\": \"3.11.0\"\n },\n \"slots\": {\n \"header\": \"3.10.0\",\n \"footer\": \"3.11.0\",\n \"no-data\": \"3.11.0\",\n \"toggle\": \"3.10.0\"\n },\n \"examples\": {\n \"prop-items-registration\": \"3.11.0\",\n \"slot-no-data\": \"3.11.0\",\n \"slot-toggle\": \"3.10.0\"\n }\n },\n \"VTreeviewItem\": {\n \"props\": {\n \"hideActions\": \"3.9.0\",\n \"indentLines\": \"3.9.0\"\n },\n \"slots\": {\n \"toggle\": \"3.10.0\"\n }\n },\n \"VToolbar\": {\n \"props\": {\n \"collapsePosition\": \"3.11.0\",\n \"location\": \"3.12.0\"\n },\n \"examples\": {\n \"prop-location\": \"3.12.0\"\n }\n },\n \"VTooltip\": {\n \"props\": {\n \"eager\": \"3.2.0\",\n \"interactive\": \"3.8.0\",\n \"stickToTarget\": \"3.10.0\",\n \"viewportMargin\": \"3.11.0\",\n \"persistent\": \"3.11.3\"\n },\n \"examples\": {\n \"prop-interactive\": \"3.8.0\"\n }\n },\n \"VVirtualScroll\": {\n \"props\": {\n \"itemKey\": \"3.8.0\"\n }\n },\n \"VWindow\": {\n \"props\": {\n \"crossfade\": \"3.10.0\",\n \"transitionDuration\": \"3.10.0\",\n \"wheel\": \"4.3.0\"\n }\n }\n}\n","packages/docs/src/data/page-to-api.json":"{\n \"components/alerts\": [\"VAlert\", \"VAlertTitle\"],\n \"components/app-bars\": [\n \"VAppBar\",\n \"VAppBarNavIcon\",\n \"VAppBarTitle\"\n ],\n \"components/application\": [\n \"VApp\",\n \"VLayout\",\n \"VLayoutItem\",\n \"VMain\"\n ],\n \"components/aspect-ratios\": [\"VResponsive\"],\n \"components/audio-players\": [\"VAudio\", \"VAudioControls\", \"VAudioWaveform\", \"VMediaProgressBar\", \"VMediaVolume\"],\n \"components/autocompletes\": [\"VAutocomplete\"],\n \"components/avatars\": [\"VAvatar\"],\n \"components/avatar-groups\": [\"VAvatarGroup\"],\n \"components/badges\": [\"VBadge\"],\n \"components/banners\": [\n \"VBanner\",\n \"VBannerActions\",\n \"VBannerText\"\n ],\n \"components/bottom-navigation\": [\"VBottomNavigation\"],\n \"components/bottom-sheets\": [\"VBottomSheet\"],\n \"components/breadcrumbs\": [\n \"VBreadcrumbs\",\n \"VBreadcrumbsDivider\",\n \"VBreadcrumbsItem\"\n ],\n \"components/button-groups\": [\n \"VBtn\",\n \"VBtnGroup\",\n \"VBtnToggle\"\n ],\n \"components/buttons\": [\n \"VBtn\",\n \"VBtnGroup\",\n \"VBtnToggle\"\n ],\n \"components/calendars\": [\n \"VCalendar\",\n \"VCalendarDay\",\n \"VCalendarHeader\",\n \"VCalendarInterval\",\n \"VCalendarIntervalEvent\",\n \"VCalendarMonthDay\"\n ],\n \"components/cards\": [\n \"VCard\",\n \"VCardActions\",\n \"VCardItem\",\n \"VCardSubtitle\",\n \"VCardText\",\n \"VCardTitle\"\n ],\n \"components/carousels\": [\"VCarousel\", \"VCarouselItem\"],\n \"components/checkboxes\": [\"VCheckbox\", \"VCheckboxBtn\"],\n \"components/chip-groups\": [\"VChip\", \"VChipGroup\"],\n \"components/chips\": [\"VChip\", \"VChipGroup\"],\n \"components/color-inputs\": [\"VColorInput\", \"VColorPicker\"],\n \"components/color-pickers\": [\"VColorPicker\"],\n \"components/combobox\": [\"VCombobox\"],\n \"components/command-palettes\": [\"VCommandPalette\", \"VCommandPaletteItem\"],\n \"components/confirm-edit\": [\"VConfirmEdit\"],\n \"components/data-iterators\": [\"VDataIterator\"],\n \"components/date-inputs\": [\"VDateInput\", \"VDatePicker\"],\n \"components/date-pickers-month\": [\"VDatePicker\"],\n \"components/date-pickers\": [\"VDatePicker\", \"VDateInput\"],\n \"components/date-range-pickers\": [\"VDateRangePicker\"],\n \"components/defaults-providers\": [\"VDefaultsProvider\"],\n \"components/data-tables\": [\n \"VDataTable\",\n \"VDataTableFooter\",\n \"VDataTableRow\",\n \"VDataTableRows\",\n \"VDataTableServer\",\n \"VDataTableVirtual\"\n ],\n \"components/data-tables/server-side-tables\": [\n \"VDataTableServer\"\n ],\n \"components/data-tables/virtual-tables\": [\n \"VDataTableVirtual\"\n ],\n \"components/dialogs\": [\"VDialog\", \"VOverlay\"],\n \"components/dividers\": [\"VDivider\"],\n \"components/empty-states\": [\"VEmptyState\"],\n \"components/expansion-panels\": [\n \"VExpansionPanel\",\n \"VExpansionPanels\",\n \"VExpansionPanelText\",\n \"VExpansionPanelTitle\"\n ],\n \"components/file-inputs\": [\"VFileInput\"],\n \"components/file-upload\": [\"VFileUpload\"],\n \"components/floating-action-buttons\": [\"VFab\"],\n \"components/footers\": [\"VFooter\"],\n \"components/forms\": [\"VForm\"],\n \"components/grids\": [\"VCol\", \"VContainer\", \"VRow\", \"VSpacer\"],\n \"components/heatmaps\": [\"VHeatmap\", \"VHeatmapCell\", \"VHeatmapLegend\", \"VHeatmapLegendCell\"],\n \"components/highlights\": [\"VHighlight\"],\n \"components/hotkeys\": [\"VHotkey\"],\n \"components/hover\": [\"VHover\"],\n \"components/icon-buttons\": [\"VIconBtn\"],\n \"components/icons\": [\"VIcon\"],\n \"components/images\": [\"VImg\"],\n \"components/infinite-carousels\": [\"VInfiniteCarousel\"],\n \"components/loading-indicators\": [\"VLoadingIndicator\"],\n \"components/infinite-scroller\": [\"VInfiniteScroll\"],\n \"components/inputs\": [\"VInput\"],\n \"components/item-groups\": [\"VItem\", \"VItemGroup\"],\n \"components/lazy\": [\"VLazy\"],\n \"components/lists\": [\n \"VList\",\n \"VListGroup\",\n \"VListItem\",\n \"VListItemAction\",\n \"VListItemMedia\",\n \"VListItemSubtitle\",\n \"VListItemTitle\",\n \"VListSubheader\",\n \"VListImg\"\n ],\n \"components/locale-providers\": [\"VLocaleProvider\"],\n \"components/mask-inputs\": [\"VMaskInput\"],\n \"components/menus\": [\"VMenu\"],\n \"components/navigation-drawers\": [\"VNavigationDrawer\"],\n \"components/no-ssr\": [\"VNoSsr\"],\n \"components/month-pickers\": [\"VMonthPicker\"],\n \"components/number-inputs\": [\"VNumberInput\"],\n \"components/otp-input\": [\"VOtpInput\", \"VOtpField\", \"VOtpGroup\", \"VOtpSeparator\"],\n \"components/overlays\": [\"VOverlay\"],\n \"components/paginations\": [\"VPagination\"],\n \"components/parallax\": [\"VParallax\"],\n \"components/pie-charts\": [\"VPie\", \"VPieSegment\", \"VPieTooltip\"],\n \"components/progress\": [\"VProgress\"],\n \"components/progress-circular\": [\"VProgressCircular\"],\n \"components/progress-linear\": [\"VProgressLinear\"],\n \"components/pull-to-refresh\": [\"VPullToRefresh\"],\n \"components/radio-buttons\": [\"VRadio\", \"VRadioGroup\"],\n \"components/range-sliders\": [\"VRangeSlider\", \"VSlider\"],\n \"components/ratings\": [\"VRating\"],\n \"components/selects\": [\"VSelect\"],\n \"components/sheets\": [\"VSheet\"],\n \"components/skeleton-loaders\": [\"VSkeletonLoader\"],\n \"components/slide-groups\": [\"VSlideGroup\", \"VSlideGroupItem\"],\n \"components/sliders\": [\"VRangeSlider\", \"VSlider\"],\n \"components/snackbar-queue\": [\"VSnackbarQueue\", \"VSnackbar\"],\n \"components/snackbars\": [\"VSnackbar\"],\n \"components/sparklines\": [\"VSparkline\", \"VSparklineTooltip\"],\n \"components/speed-dials\": [\"VSpeedDial\"],\n \"components/split-buttons\": [\"VSplitBtn\"],\n \"components/steppers\": [\n \"VStepper\",\n \"VStepperHeader\",\n \"VStepperItem\",\n \"VStepperWindow\",\n \"VStepperWindowItem\"\n ],\n \"components/switches\": [\"VSwitch\"],\n \"components/system-bars\": [\"VSystemBar\"],\n \"components/tables\": [\"VTable\"],\n \"components/tabs\": [\"VTabs\", \"VTab\"],\n \"components/text-fields\": [\"VTextField\"],\n \"components/textareas\": [\"VTextarea\"],\n \"components/theme-providers\": [\"VThemeProvider\"],\n \"components/time-pickers\": [\"VTimePicker\"],\n \"components/time-inputs\": [\"VTimeInput\", \"VTimePicker\"],\n \"components/timelines\": [\"VTimeline\", \"VTimelineItem\"],\n \"components/toolbars\": [\"VToolbar\", \"VToolbarItems\", \"VToolbarTitle\"],\n \"components/tooltips\": [\"VTooltip\"],\n \"components/treeview\": [\n \"VTreeview\",\n \"VTreeviewItem\",\n \"VTreeviewChildren\",\n \"VTreeviewGroup\"\n ],\n \"components/vertical-steppers\": [\"VStepperVertical\", \"VStepperVerticalActions\", \"VStepperVerticalItem\"],\n \"components/videos\": [\"VVideo\", \"VVideoControls\", \"VMediaProgressBar\", \"VMediaVolume\"],\n \"components/virtual-scroller\": [\"VVirtualScroll\"],\n \"components/windows\": [\"VWindow\", \"VWindowItem\"],\n \"directives/click-outside\": [\"v-click-outside\"],\n \"directives/intersect\": [\"v-intersect\"],\n \"directives/mutate\": [\"v-mutate\"],\n \"directives/resize\": [\"v-resize\"],\n \"directives/ripple\": [\"v-ripple\"],\n \"directives/scroll\": [\"v-scroll\"],\n \"directives/touch\": [\"v-touch\"],\n \"directives/touch-hold\": [\"v-touch-hold\"],\n \"directives/tooltip\": [\"v-tooltip\"],\n \"features/dates\": [\"useDate\"],\n \"features/display-and-platform\": [\"useDisplay\"],\n \"features/hotkey\": [\"useHotkey\"],\n \"features/scrolling\": [\"useGoTo\"],\n \"features/global-configuration\": [\"VDefaultsProvider\"],\n \"features/internationalization\": [\"useLocale\", \"VLocaleProvider\"],\n \"features/theme\": [\"useTheme\", \"VThemeProvider\"],\n \"styles/transitions\": [\n \"VDialogBottomTransition\",\n \"VDialogTopTransition\",\n \"VDialogTransition\",\n \"VExpandTransition\",\n \"VExpandXTransition\",\n \"VFabTransition\",\n \"VFadeTransition\",\n \"VScaleTransition\",\n \"VScrollXTransition\",\n \"VScrollXReverseTransition\",\n \"VScrollYTransition\",\n \"VScrollYReverseTransition\",\n \"VSlideXTransition\",\n \"VSlideXReverseTransition\",\n \"VSlideYTransition\",\n \"VSlideYReverseTransition\"\n ]\n}\n","packages/docs/src/data/team.json":"{\n \"johnleider\": {\n \"discord\": \"johnleider\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/johnleider)\",\n \"[Paypal](https://paypal.me/vuetify)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"john-leider-626183a2\",\n \"location\": \"Keller, TX, USA\",\n \"name\": \"John Leider\",\n \"team\": \"company\",\n \"twitter\": \"zeroskillz\",\n \"work\": \"Engineer @ Vuetify\",\n \"joined\": \"Jun 2016\"\n },\n \"heatherleider\": {\n \"discord\": \"heatherleider\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Keller, TX, USA\",\n \"name\": \"Heather Leider\",\n \"team\": \"company\",\n \"twitter\": \"grneyedgrl01\",\n \"work\": \"COO @ Vuetify\",\n \"joined\": \"Nov 2019\"\n },\n \"KaelWD\": {\n \"discord\": \"kaelwd\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\",\n \"[vuetify-loader](https://github.com/vuetifyjs/vuetify-loader)\",\n \"[eslint-plugin-vuetify](https://github.com/vuetifyjs/eslint-plugin-vuetify)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/kaelwd)\",\n \"[Patreon](https://patreon.com/kaelwd)\",\n \"[Open Collective](https://opencollective.com/vuetify)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Melbourne, Australia\",\n \"name\": \"Kael Watts-Deuchar\",\n \"team\": \"core\",\n \"joined\": \"Oct 2017\"\n },\n \"nekosaur\": {\n \"discord\": \".nekosaur\",\n \"languages\": [\n \"Swedish\",\n \"English\"\n ],\n \"location\": \"Malmö, Sweden\",\n \"name\": \"Albert Kaaman\",\n \"team\": \"legends\",\n \"joined\": \"Jun 2017\"\n },\n \"MajesticPotatoe\": {\n \"discord\": \"majesticpotatoe\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\",\n \"[vuetifyjs/docs](https://github.com/vuetifyjs/vuetify/tree/master/packages/docs)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/majesticpotatoe)\",\n \"[Open Collective](https://opencollective.com/vuetify)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"andrew-henry-01049830\",\n \"location\": \"Rochester, NY, USA\",\n \"name\": \"Andrew Henry\",\n \"team\": \"core\",\n \"twitter\": \"SeeMWhyK\",\n \"joined\": \"Dec 2018\"\n },\n \"blalan05\": {\n \"discord\": \"blalan05\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"blalan05\",\n \"location\": \"Wisconsin, USA\",\n \"name\": \"Blaine Landowski\",\n \"team\": \"core\",\n \"work\": \"CEO at Foundational Technologies LLC\",\n \"joined\": \"Feb 2021\"\n },\n \"userquin\": {\n \"discord\": \"userquin\",\n \"focus\": [\n \"[vuetifyjs/create](https://github.com/vuetifyjs/create)\",\n \"[Nuxt](https://github.com/userquin/vuetify-nuxt-module)\"\n ],\n \"languages\": [\n \"Spanish\",\n \"English\"\n ],\n \"location\": \"Madrid, Spain\",\n \"name\": \"Joaquín Sánchez\",\n \"twitter\": \"userquin\",\n \"team\": \"core\",\n \"joined\": \"Mar 2024\"\n },\n \"MatthewAry\": {\n \"discord\": \"bitshift_\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Spokane, WA, USA\",\n \"name\": \"Matthew Ary\",\n \"twitter\": \"MatthewAry\",\n \"linkedin\": \"matthewary\",\n \"work\": \"Director of Product Development at Symplsoft Inc.\",\n \"team\": \"core\",\n \"joined\": \"May 2024\"\n },\n \"J-Sek\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/j-sek.png\",\n \"discord\": \"jacek#1420\",\n \"focus\": [\n \"[vuetifyjs/vuetify](https://github.com/vuetifyjs/vuetify)\"\n ],\n \"languages\": [\n \"Polish\",\n \"English\"\n ],\n \"location\": \"Gdańsk, Poland\",\n \"name\": \"Jacek Czarniecki\",\n \"team\": \"core\",\n \"joined\": \"Nov 2024\"\n },\n \"Spatlani\": {\n \"name\": \"Shubham Patlani\",\n \"team\": \"core\",\n \"discord\": \"spatlani\",\n \"focus\": [\"[vuetifyjs/*](https://github.com/vuetifyjs)\"],\n \"languages\": [\"English\", \"Hindi\", \"Punjabi\"],\n \"linkedin\": \"spatlani\",\n \"github\": \"spatlani\",\n \"avatar\": \"https://avatars.githubusercontent.com/u/11574195\",\n \"location\": \"Delhi, India\",\n \"joined\": \"March 2025\"\n },\n \"Haviles04\": {\n \"name\": \"Henry Aviles\",\n \"team\": \"core\",\n \"discord\": \"hankthetank4\",\n \"linkedin\": \"henry-aviles\",\n \"focus\": [\"[One](https://github.com/vuetifyjs/one)\"],\n \"languages\": [\"English\"],\n \"joined\": \"March 2025\",\n \"location\": \"Huntington, NY, USA\"\n },\n \"ikushum\": {\n \"name\": \"Ishan Subedi\",\n \"team\": \"core\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"Nepali\",\n \"English\"\n ],\n \"discord\": \"ikushum\",\n \"linkedin\": \"ikushum\",\n \"joined\": \"March 2025\",\n \"location\": \"Kathmandu, Nepal\",\n \"avatar\": \"https://avatars.githubusercontent.com/u/17315781\"\n },\n \"AndreyYolkin\": {\n \"name\": \"Andrei Elkin\",\n \"team\": \"core\",\n \"discord\": \"yol_kin\",\n \"focus\": [\n \"[vuetifyjs/create](https://github.com/vuetifyjs/create)\",\n \"[vuetify-loader](https://github.com/vuetifyjs/vuetify-loader)\",\n \"[Nuxt](https://github.com/vuetifyjs/nuxt-module)\"\n ],\n \"languages\": [\n \"Polish\",\n \"English\",\n \"Russian\"\n ],\n \"location\": \"Kraków, Poland\",\n \"linkedin\": \"yolkin\",\n \"joined\": \"March 2025\"\n },\n \"jcjp\": {\n \"name\": \"JC Puno\",\n \"team\": \"core\",\n \"discord\": \"psi#8085\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\",\n \"[Nuxt](https://github.com/userquin/vuetify-nuxt-module)\"\n ],\n \"languages\": [\n \"Tagalog / Filipino\",\n \"English\"\n ],\n \"location\": \"Manila, Philipines\",\n \"joined\": \"March 2025\"\n },\n \"oumoussa98\": {\n \"name\": \"Abdelouahed Oumoussa\",\n \"team\": \"core\",\n \"discord\": \"oumoussa\",\n \"twitter\": \"oumoussa_\",\n \"github\": \"oumoussa98\",\n \"linkedin\": \"aoumoussa\",\n \"avatar\": \"https://gravatar.com/avatar/7d1a8ba680ab9d49bd9cdaeff05d0e76\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"Arabic\",\n \"English\"\n ],\n \"joined\": \"March 2025\",\n \"location\": \"Casablanca, Morocco\"\n },\n \"yuwu9145\": {\n \"discord\": \"yuwu9145\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\",\n \"Chinese(Mandarin)\"\n ],\n \"location\": \"Melbourne, Australia\",\n \"name\": \"Yuchao Wu\",\n \"team\": \"legends\",\n \"joined\": \"Mar 2023\"\n },\n \"kieuminhcanh\": {\n \"discord\": \"kieuminhcanh\",\n \"focus\": [\n \"[vuetifyjs/studio](https://github.com/vuetifyjs/studio)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/kieuminhcanh)\",\n \"[Patreon](https://patreon.com/kieuminhcanh)\",\n \"[Open Collective](https://opencollective.com/vuetify)\"\n ],\n \"languages\": [\n \"English\",\n \"Vietnamese\"\n ],\n \"location\": \"California, US\",\n \"name\": \"Ken Kieu\",\n \"team\": \"legends\",\n \"twitter\": \"kieuminhcanh\",\n \"joined\": \"April 2024\"\n },\n \"jacekkarczmarczyk\": {\n \"discord\": \"jacek#3542\",\n \"languages\": [\n \"Polish\",\n \"English\"\n ],\n \"location\": \"Warsaw, Poland\",\n \"name\": \"Jacek Karczmarczyk\",\n \"team\": \"legends\"\n },\n \"chewy94\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/chewy94.jpg\",\n \"discord\": \"Sean Kimball#0001\",\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"sean-kimball-b50922126\",\n \"location\": \"Goodyear, Arizona, USA\",\n \"name\": \"Sean Kimball\",\n \"team\": \"legends\"\n },\n \"bdeo\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/bdeo.jpg\",\n \"discord\": \"brandondeo#0001\",\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"brandondeo\",\n \"location\": \"Philadelphia, PA, USA\",\n \"name\": \"Brandon Deo\",\n \"team\": \"legends\"\n },\n \"ElijahKotyluk\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/ElijahKotyluk.jpg\",\n \"discord\": \"edk#4363\",\n \"languages\": [\n \"English\"\n ],\n \"location\": \"USA\",\n \"name\": \"Elijah Kotyluk\",\n \"team\": \"legends\"\n },\n \"santiagoaloi\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/santiagoaloi.jpg\",\n \"discord\": \"lannnister\",\n \"languages\": [\n \"Swedish\",\n \"English\",\n \"Spanish\"\n ],\n \"linkedin\": \"santiagoaloi\",\n \"location\": \"Stockholm, Sweden\",\n \"name\": \"Santiago Aloi\",\n \"team\": \"legends\",\n \"joined\": \"Feb 2023\"\n },\n \"yooneskh\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/yooneskh.png\",\n \"discord\": \"YoonesKh#7826\",\n \"languages\": [\n \"English\",\n \"Persian\"\n ],\n \"twitter\": \"yooneskh\",\n \"linkedin\": \"yooneskh \",\n \"location\": \"Iran\",\n \"name\": \"Yoones Khoshghadam\",\n \"team\": \"legends\",\n \"joined\": \"January 2023\"\n },\n \"elvinagarcia\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/elvinagarcia.png\",\n \"discord\": \"elvinagarcia\",\n \"focus\": [\n \"Design/Animations\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Virginia, USA\",\n \"name\": \"Elvina Garcia\",\n \"team\": \"legends\",\n \"joined\": \"Feb 2023\"\n }\n}\n","packages/docs/src/pages/en/about/code-of-conduct.md":"---\nmeta:\n title: Code of conduct\n description: Vuetify provides a safe, inclusive, and judgment free community for developers from all walks of life!\n keywords: vuetify code of conduct, vuetify coc, community conduct\n---\n\n# Code of conduct\n\nFor questions or concerns regarding our *Code of Conduct*, please reach out to us at [support@vuetifyjs.com](mailto:support@vuetifyjs.com).\n\n\n\n\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@vuetifyjs.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant](https://contributor-covenant.org), version 1.4, available at [https://contributor-covenant.org/version/1/4](https://contributor-covenant.org/version/1/4/)\n","packages/docs/src/pages/en/about/incidents/2026-06-nyven-infostealer.md":"---\nmeta:\n nav: Discord takeover (June 2026)\n title: 'Incident report: Discord takeover (June 2026)'\n description: An infostealer on a maintainer's machine led to the takeover of the Vuetify Discord account. No Vuetify packages, releases, or user data were affected.\n keywords: vuetify security incident, infostealer, discord account takeover, extortion, incident report, nyven\nrelated:\n - /about/security-disclosure/\n - /introduction/enterprise-support/\n - /introduction/long-term-support/\n---\n\n# Incident report June 2026\n\nThis page documents the June 2026 security incident affecting Vuetify's Discord support account.\n\n\n\n::: info\n**TLDR:** On 2026-06-03, a Vuetify maintainer's personal machine was compromised by a commodity infostealer after a social-engineering lure. The attacker used credentials harvested from the browser to take over the Vuetify Discord support account, added 2FA to lock the owner out, and sent an extortion demand, which was refused. No Vuetify package, source, release, CI pipeline, or user data was affected. The Discord account was recovered on 2026-06-10, but the original community server was deleted and cannot be restored; the community now lives on a replacement server — see [Where to find us now](#where-to-find-us-now).\n:::\n\n## Summary { #summary }\n\nOn 2026-06-03, a Vuetify maintainer ran an unsigned installer that was a packaged infostealer. It harvested the credentials, cookies, and autofill data saved in the browser and exfiltrated them.\n\nThe attacker used those credentials to take over the Vuetify Discord support account. After taking control, the attacker added 2FA to lock the owner out and sent an extortion demand under threat to leak and sell the data. The demand was refused and no payment was made.\n\nThe compromise was limited to one personal machine and the accounts reachable from it. No part of Vuetify's software supply chain was affected.\n\n## What was and was not affected { #scope }\n\n| Asset | Status |\n| - | - |\n| **npm packages & releases** | **Not affected.** No package was modified, tampered with, or published. |\n| **Source & GitHub org** | **Not affected.** No repository, branch, tag, or release was altered. |\n| **CI/CD & infrastructure** | **Not affected.** |\n| **User data & databases** | **Not affected.** |\n| **Google Workspace** | **Not breached.** The `vuetifyjs.com` account was auto-suspended by Google as a precaution; the password was reset and control retained. |\n| **Discord support account** | **Recovered (2026-06-10).** The attacker added 2FA after taking it over; the account was later recovered, but the original community server was deleted and cannot be restored, per Discord support. |\n| **Browser-stored secrets** | **Exposed.** Saved credentials, cookies, and autofill on the affected machine are treated as compromised and have been rotated or removed pending an internal audit. |\n| **Developer tokens & keys** | **Treated as exposed.** Tokens on the host, including those with npm/GitHub access, have been rotated or removed and their sessions revoked, pending an internal audit. No evidence any were used against project infrastructure. |\n\nCredentials and tokens on the machine that could reach npm or GitHub have been rotated or removed pending an internal audit. Vuetify's release pipeline already enforces several layers of protection, including OIDC-based trusted publishing to npm and mandatory two-factor authentication, which limit what any single stolen credential can do. There is no sign any were used against Vuetify's packages, repositories, or releases, and all areas of the ecosystem are being actively monitored for suspicious activity. No action is required of users.\n\n## Timeline { #timeline }\n\nAll times are UTC on 2026-06-03 unless noted. Approximate times are marked with `~`.\n\n| Time (UTC) | Event | Detail |\n| - | - | - |\n| `~17:00` | Installer downloaded | The unsigned installer was downloaded from the throwaway site. |\n| `17:06` | Malware executed | The installer was run; the infostealer harvested browser-stored credentials and cookies and exfiltrated them. |\n| `17:08` | Host isolated | The machine was disconnected from the network. |\n| `17:16` | Extortion email received | The attacker emailed claiming to hold the stolen passwords, cookies, and autofill data. |\n| `17:25` | Refused to engage | The attacker's contact was declined. |\n| `~17:46–17:58` | Discord account takeover | The attacker used the stolen credentials to seize the Vuetify support account and added 2FA to lock the owner out. |\n| `18:06` | Email/GitHub secured | Email and GitHub passwords were changed and all sessions forced to re-authenticate. |\n| `18:10` | OAuth revoked | Third-party OAuth grants were revoked and active sessions cut. |\n| `18:25` | Payment demanded | The attacker demanded payment under threat to leak and sell the data; no payment was made. |\n| `2026-06-04` | Discord recovery blocked | Self-service recovery failed because of the attacker-added 2FA; a recovery case was opened with Discord. |\n| `2026-06-05` | Replacement server opened | A new Vuetify Discord server was opened as the verified home for the community. |\n| `2026-06-10` | Account recovered; server lost | The support account was recovered. Discord support confirmed the original server was deleted and cannot be restored. |\n\n## Root cause { #root-cause }\n\nThe maintainer was led to a throwaway website and ran an unsigned installer that was malware. Because credentials were stored in the browser, a single execution exposed the full set at once.\n\n## Discord outcome { #discord-recovery }\n\nThe Vuetify Discord support account has been recovered. The original community server, however, was deleted, and Discord support has confirmed there is no ability to restore it — the loss of the server, its channels, and its message history is permanent.\n\nA replacement server was opened while recovery was pending and is now the official home of the Vuetify community on Discord. The verified invite is in [Where to find us now](#where-to-find-us-now).\n\nThe exfiltration channel and the attacker's delivery infrastructure have been reported to the relevant platforms.\n\n## Where to find us now { #where-to-find-us-now }\n\n::: warning\nThe original server is permanently gone. We have started rebuilding and you can request an invite by going to [https://community.vuetifyjs.com](https://community.vuetifyjs.com).\n\nIf any other server, or any direct message, claims to be us and asks for money, credentials, or 2FA codes, it is not us.\n:::\n\nChanges to the official channels will be posted here and on [vuetifyjs.com](https://vuetifyjs.com), the [GitHub organization](https://github.com/vuetifyjs), and [@vuetifyjs on X](https://x.com/vuetifyjs).\n\n## For security researchers and organizations { #coordinated-disclosure }\n\nA complete evidence package has been preserved: forensic artifacts, the full set of indicators of compromise, and the malware sample. Security vendors, researchers, CERT/CSIRTs, and platform trust-and-safety teams that can action it can request it at [security@vuetifyjs.com](mailto:security@vuetifyjs.com?subject=INCIDENT) (subject: INCIDENT).\n\nA subset of indicators is published below; the complete set is available on request.\n\n### Indicators (public subset) { #indicators }\n\n- Malware family: a commodity \"Nyven\" infostealer (Electron dropper delivering an obfuscated Java credential grabber).\n- Delivery: an unsigned installer (`NyvenSetupV1.exe`) downloaded from a throwaway `*.pages.dev` site (`nyvanbeta.pages.dev`).\n- Behavior: harvests browser-stored credentials, cookies, and autofill data and exfiltrates them over a Discord channel.\n\nFull indicators (file hashes, exfiltration channel identifiers, and build metadata) are withheld here to avoid interfering with platform recovery, and are shared with vetted parties on request.\n\n## Contact { #contact }\n\nQuestions about this incident, or related information, can be sent to [security@vuetifyjs.com](mailto:security@vuetifyjs.com?subject=INCIDENT)\n\n---\n\n### Updates { #updates }\n\nDated entries are added here rather than editing the report above.\n\n| Date | Update |\n| - | - |\n| 2026-06-05 | Initial publication. |\n| 2026-06-10 | The Discord support account has been recovered. Discord support confirmed the original server was deleted and cannot be restored; the replacement server is now active at [https://community.vuetifyjs.com](https://community.vuetifyjs.com). |\n","packages/docs/src/pages/en/about/licensing.md":"---\nmeta:\n nav: Licensing\n title: Licensing\n description: Vuetify is available under the MIT License — understand your freedoms to use, modify, and distribute it, and how community contributions are licensed.\n keywords: MIT License, open source, Vuetify license, free software\nrelated:\n - /introduction/why-vuetify/\n - /getting-started/contributing/\n - /introduction/enterprise-support/\n---\n\n# Licensing\n\nThis document provides comprehensive details about the licensing of the Vuetify framework.\n\n\n\n\n\n## Overview\n\nVuetify is an open-source project that is free to use. It is licensed under the [MIT License](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md), one of the most permissive and flexible open source licenses available.\n\n## What is the MIT License?\n\nThe MIT License is one of the most widely used licenses in the open-source community, known for its simplicity and permissiveness. This license grants users significant freedom in how they use, modify, and distribute software. Here are its key features and what they mean for Vuetify users:\n\n- **Freedom to Use**: The MIT License allows you to use Vuetify for any purpose - whether it's a private hobby project, a high-scale commercial application, or a public service. This level of freedom ensures that Vuetify is accessible to everyone, regardless of their project's nature or scale.\n- **Freedom to Modify**: Flexibility is at the core of Vuetify, and the MIT License extends this principle. You have the freedom to tweak, customize, and modify Vuetify to suit your project's unique requirements. This feature is particularly beneficial for developers looking to tailor their UI/UX without constraints.\n- **Freedom to Distribute**: The license not only allows you to use and modify Vuetify but also to distribute your version of it. Whether you're distributing your Vuetify-based project openly or commercially, the MIT License supports your endeavors. This aspect is crucial for fostering a culture of sharing and innovation in the developer community.\n- **No Warranty**: Please note that Vuetify is provided \"as is\", without any warranty of any kind. This is a standard clause in open-source licenses, emphasizing that users should test and evaluate the software in their specific contexts. While there's no formal warranty, the Vuetify team is committed to delivering a high-quality, robust framework, continuously working to improve its reliability and functionality.\n\nThe MIT License's simplicity and breadth make it an ideal choice for Vuetify, aligning with our commitment to open-source values and community-driven development.\n\n## Why MIT License for Vuetify?\n\nChoosing the MIT License for Vuetify was a deliberate decision to align with our core values of openness, simplicity, and community collaboration. Here’s why this license is the perfect fit for Vuetify:\n\n- **Simplicity and Permissiveness**: The MIT License is renowned for its simplicity and clarity. It doesn't impose complex restrictions, making it straightforward for developers to use Vuetify in various projects. Whether you're building a small personal project or a large-scale commercial application, the MIT License keeps things simple and unrestricted.\n- **Broad Compatibility**: One of Vuetify's strengths is its compatibility with a wide range of other tools and libraries. The MIT License is known for its broad compatibility with other open-source licenses. This compatibility makes it easier for developers to integrate Vuetify with other software, fostering a more vibrant and versatile ecosystem.\n- **Encourages Open Source Contribution**: Vuetify thrives on community contributions. The permissive nature of the MIT License encourages developers from around the world to contribute to Vuetify, enhancing its features and functionality. This collaborative spirit has been pivotal in shaping Vuetify into the robust and versatile framework it is today.\n\nBy adopting the MIT License, Vuetify remains committed to promoting innovation, collaboration, and freedom in software development. We believe this approach not only benefits Vuetify but also the broader open-source community.\n\n## Using Vuetify in Your Projects\n\nYou are free to use Vuetify in your projects, be it personal, commercial, or for educational purposes. The flexibility of the MIT License allows for a wide range of applications. When redistributing Vuetify or derivative works, the only requirement is to include the original copyright and license notice in any copy of the software/source code.\n\nTo get inspired or see what's possible with Vuetify, check out [Awesome Vuetify](https://github.com/vuetifyjs/awesome-vuetify), a curated list of awesome Vuetify resources, libraries, and tools. Additionally, explore the [Made With Vuetify](/resources/made-with-vuetify/) page to see a showcase of applications and projects built using Vuetify. These resources can provide you with ideas and examples of how Vuetify can enhance your projects.\n\n## Contributions to Vuetify\n\nContributions to Vuetify are also subject to the MIT License. By contributing to the Vuetify project, you agree that your contributions will be licensed under the MIT License. See our [Contributing](/getting-started/contributing/) page for more details.\n\n## Questions and Comments\n\nIf you have any questions or comments about our licensing policy, or if you need clarification on legal aspects of using Vuetify in your projects, please [contact us](mailto:hello@vuetifyjs.com).\n\n## Legal Disclaimer\n\nThe information provided on this page is for general informational purposes only and is not intended as legal advice. For specific legal questions regarding the use of Vuetify, please consult with a qualified attorney.\n","packages/docs/src/pages/en/about/meet-the-team.md":"---\nmeta:\n title: Meet the team\n description: Meet the team responsible for building Vuetify. These are the core individuals who drive the vision of the framework.\n keywords: vuetify dev team, vuetify core team\nrelated:\n - /introduction/enterprise-support/\n - /introduction/long-term-support/\n - /introduction/roadmap/\n---\n\n# Meet the team\n\nVuetify is _not_ a one person show. We have a very active and engaged team that is **constantly striving** to bring developers a better experience. Keep in mind the below is not an exhaustive list of all the individuals that help make Vuetify great.\n\n\n\n\n\n## Company\n\nVuetify (the framework) is [MIT Licensed](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md) and [Open Source](https://opensource.com/resources/what-open-source). You can support the ongoing development of Vuetify by sponsoring the project on [GitHub](https://github.com/sponsors/johnleider).\n\n\n\n## Core Team\n\nThe core development team are Open Source developers that help guide the direction of Vuetify and its ecosystem.\n\n\n\n\n\n## Legends\n\nLegends are inactive members of the core team. They have contributed a significant amount of time and effort to the project and are recognized for their contributions.\n\n\n","packages/docs/src/pages/en/about/security-disclosure.md":"---\nmeta:\n nav: Security disclosure\n title: Security disclosure procedures\n description: This document outlines security procedures and general policies for the Vuetify project.\n keywords: security, security vulnerability, disclosure policy, security disclosure\nrelated:\n - /introduction/enterprise-support/\n - /getting-started/contributing/\n - /introduction/long-term-support/\n---\n\n# Security disclosure procedures\n\nThis document outlines security procedures and general policies for the Vuetify project.\n\n\n\n\n\n## Incidents\n\nIn the interest of transparency, confirmed security incidents that affect Vuetify or its community are logged here, each linking to a full public report.\n\n| Date | Incident | Severity | Status | Report |\n| - | - | - | - | - |\n| 2026-06-03 | Maintainer endpoint compromise → Discord account takeover & extortion | High | Contained — Discord recovery ongoing | [Read the report](/about/incidents/2026-06-nyven-infostealer/) |\n\n::: warning\nThe Vuetify Discord support account was taken over in the June 2026 incident and has not yet been recovered. Until it is restored, the only verified home for our community on Discord is **[vtfy.link/discord-fallback](https://vtfy.link/discord-fallback)**. Anyone using the old server — or a DM — to ask you for money, credentials, or 2FA codes is not us.\n:::\n\n## Reporting a Bug\n\nThe Vuetify team and community take all security bugs in Vuetify seriously. We appreciate your efforts and responsible disclosure and will make every effort to acknowledge your contributions.\n\nTo report a security issue, email [security@vuetifyjs.com](mailto:security@vuetifyjs.com?subject=SECURITY) and include the word **\\\"SECURITY\\\"** in the subject line.\n\nThe Vuetify team will send a response indicating the next steps in handling your report. After the initial reply to your report, the security team will keep you informed of the progress towards a fix and full announcement, and may ask for additional information or guidance.\n\nReport security bugs in third-party modules to the person or team maintaining the module.\n\n## Disclosure Policy\n\nWhen the security team receives a security bug report, they will assign it to a primary handler. This person will coordinate the fix and release process, involving the following steps:\n\n- Confirm the problem and determine the affected versions.\n- Audit code to find any potential similar problems.\n- Prepare fixes for all releases still under maintenance.These fixes will be released as fast as possible to npm.\n\n## Comments on this Policy\n\nIf you have suggestions on how this process could be improved please submit a pull request using the [issue creator](https://issues.vuetifyjs.com).\n","packages/docs/src/pages/en/api/[name].md":"---\nlayout: blank\nmeta:\n title: API\n description: API documentation\n keywords: api, vuetify\n---\n\n\n\n\n\n# {{ name }} API\n\n\n\n\n\n\n\n\n\n\n","packages/docs/src/pages/en/api/use-hotkey.md":"---\nmeta:\n title: useHotkey API\n description: API documentation for the useHotkey composable\n keywords: useHotkey, hotkey, keyboard shortcuts, composable, api\n---\n\n\n\n# useHotkey API\n\nHandle keyboard shortcuts within your application using the **useHotkey** composable.\n\n\n\n\n\n\n\n\n\n## Function Signature\n\n```typescript\nfunction useHotkey(\n keys: MaybeRef,\n callback: (e: KeyboardEvent) => void,\n options?: HotkeyOptions\n): () => void\n```\n\n## Parameters\n\n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n## Options\n\n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n## Return Value\n\n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n","packages/docs/src/pages/en/blog/announcing-vuetify-3.8.md":"---\nlayout: blog\nmeta:\n title: Announcing Vuetify v3.8\n description: Vuetify v3.8 is here! Discover the latest features, improvements, and bug fixes in this minor release, including new components and form input enhancements.\n keywords: Vuetify v3.8, VNumberInput, VSnackbarQueue, VDataTable, VTooltip, VDateInput, useRules, VIconBtn\n---\n\n# Announcing Vuetify v3.8\n\n---\n\n🖊️ John Leider • 📅 April 8th, 2025\n\n\n\n---\n\n## Introduction\n\nToday we are excited to announce the release of Vuetify v3.8 \"Andromeda\"!\n\nThis minor release contains no breaking changes and is packed with new features, improvements, and bug fixes. This blog post will highlight some of the most notable changes—for a full list of changes and new features, please see [the full changelog](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.0).\n\n---\n\n- [Form input improvements](#form-input-improvements)\n - [Multi-word search highlight](#multi-word-search-highlight)\n - [Input icon states](#input-icon-states)\n- [New components](#new-components)\n - [VNumberInput](#vnumberinput)\n - [VSnackbarQueue](#vsnackbarqueue)\n- [Other updates](#other-updates)\n - [VDataTable selection](#vdatatable-selection)\n - [VTooltip interactive](#vtooltip-interactive)\n- [Labs](#labs)\n - [VDateInput](#vdateinput)\n - [useRules composable](#userules-composable)\n - [VIconBtn](#viconbtn)\n\n## Form input improvements\n\nIn v3.8, we have made several improvements to form controls, including new styling options and additional components. These changes are designed to give you more control over the look and feel of inputs.\n\n### Multi-word search highlight\n\nSearch terms that match multiple words in the item text will now be highlighted in VAutocomplete and VCombobox. This enhancement makes it easier for users to see how their search terms match available options, improving the overall search experience.\n\n**Before:**\n![Image of Autocomplete with single word highlighting](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/autocomplete-before.png \"Single-word highlighting\"){ height=300 }\n\n**After:**\n![Image of Autocomplete with multi word highlighting](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/autocomplete-after.png \"Multi-word highlighting\"){ height=300 }\n\n**Details:** [PR#16462](https://github.com/vuetifyjs/vuetify/pull/16462)\n\n### Input icon states\n\nIn earlier versions of Vuetify, focused inputs would add color to their icons. This is now possible using the new **icon-color** and **glow** props. The former allows you to set the default color of the icon, when combined with the latter, the icon will change color when the input is focused.\n\n![Gif of input icon states](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/icon-color-glow-prop.gif \"Input icon states\"){ height=300 }\n\nThis is perfect for drawing attention to active inputs or creating dynamic, responsive forms.\n\n**Details:** [PR#21076](https://github.com/vuetifyjs/vuetify/pull/21076)\n\n## New components\n\nBoth VNumberInput and VSnackbarQueue have been promoted from labs to the core framework. They offer a clean experience and are easy to use.\n\n### VNumberInput\n\nThe [v-number-input](https://vuetifyjs.com/components/number-inputs/) component has moved from Labs to the Core framework in v3.8. It's intended to be a replacement for the standard `` and supports all of the standard Vuetify input variant props.\n\n![Gif of the NumberInput component](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/number-input.gif \"VNumberInput component\"){ height=300 }\n\n**Details:**\n\n- [Documentation](https://vuetifyjs.com/components/number-inputs/)\n- [PR#18162](https://github.com/vuetifyjs/vuetify/pull/18162)\n\n### VSnackbarQueue\n\nThe [v-snackbar-queue](https://vuetifyjs.com/components/snackbar-queue/) component has moved from Labs to the Core framework in v3.8. This component makes it easy to create a queue of snackbars that can be displayed one after the other.\n\nSetting up a queue of snackbars is as simple as creating a store that holds the queue and passing it to the VSnackbarQueue component.\n\n```ts { resource=\"src/stores/queue.ts\" }\nimport { defineStore } from 'pinia'\nimport { Ref } from 'vue'\n\nexport type Snackbar = Record\n\nexport interface SnackbarQueueState {\n queue: Ref\n show: (text: Snackbar | string) => void\n}\n\nexport const useQueueStore = defineStore('Queue', () => {\n const queue = ref([])\n\n function show (text: Snackbar) {\n const record = typeof text === 'string' ? { text } : text\n\n queue.value.push(record)\n }\n\n return {\n queue,\n show,\n } as SnackbarQueueState\n})\n```\n\n```html { resource=\"src/App/AppSnackbarQueue.vue\"}\n\n\n\n```\n\nQueue items support all [v-snackbar](https://vuetifyjs.com/components/snackbars/) props, including **timeout** and **color**.\n\n**Details:**\n\n- [Documentation](https://vuetifyjs.com/components/snackbar-queue/)\n- [PR#19629](https://github.com/vuetifyjs/vuetify/pull/19629)\n\n## Other updates\n\nSome other small updates in v3.8 involve quality of life improvements to existing components such as VDataTable and VTooltip.\n\n### VDataTable selection\n\nIn v3.8, when using the **show-select** property and VDataTable, you can hold the shift key when making a selection to select a range of items.\n\n![Gif of VDataTable selection](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/data-table-select.gif \"v-data-table selection\"){ height=500 }\n\n**Details:** [Commit c9a2a22](https://github.com/vuetifyjs/vuetify/commit/c9a2a2269b0492cc3cd0b757888be9ddd96316ba)\n\n### VTooltip interactive\n\nv3.8 introduces the **interactive** property to the [v-tooltip](https://vuetifyjs.com/components/tooltips/) component. When enabled, this allows users to interact with and select text within the tooltip.\n\n![Gif of v-tooltip interactive](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/tooltip-interactive.gif \"v-tooltip interactive\"){ height=300 }\n\n**Details:** [Commit 1599512](https://github.com/vuetifyjs/vuetify/commit/159951278e9a27309d4d1eb633b426c770989584)\n\n## Labs\n\nThe latest version of Vuetify also includes a number of updates to existing Labs components, including the new VIconBtn. In addition, we're also bringing a new composable for testing named **useRules**.\n\n### VDateInput\n\nThe [v-date-input](https://vuetifyjs.com/components/date-inputs) component received multiple quality of life improvements, including:\n\n- Now has actions hidden by default, reducing screen clutter\n- Improved inputmode usage on mobile\n- Normalized control button sizes giving the component a more consistent look\n\n![Image of v-date-input](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/date-input-enhancements.png \"v-date-input component\"){ height=300 }\n\nThis component is getting close to being ready for production, keep an eye out for it in the next release!\n\n### useRules composable\n\nThe useRules composable is a new way to propagate shared rules through your application with full localization support. After following the [Installation Guide](https://vuetifyjs.com/features/rules/#installation), you can use the composable in your components.\n\n```html\n\n\n\n```\n\nRules also support localization, allowing text strings to change based upon the injected locale. This applies globally, as well as inline:\n\n```html\n\n```\n\nThis simplifies managing validation rules across your app, ensuring consistency and easing localization.\n\n### VIconBtn\n\n[v-icon-btn](https://vuetifyjs.com/components/icon-buttons/) is a new component in testing that's intended to bridge the gap between VBtn and VIcon. Its size is meant to be more intentional and is ideal for compact UI patterns like toolbars, icon-only lists, or action grids.\n\n![Gif of v-icon-btn](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/icon-btn.gif \"v-icon-btn component\"){ height=300 }\n\nWe're also experimenting with a new way of mapping sizes, moving the configuration from SCSS to props.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nimport { createVuetify } from 'vuetify'\n\nexport default createVuetify({\n defaults: {\n VIconBtn: {\n sizes: [\n ['x-small', 16],\n ['small', 20],\n ['medium', 24],\n ['large', 28],\n ['x-large', 32],\n ],\n iconSizes: [\n ['x-small', 10],\n ['small', 12],\n ['medium', 14],\n ['large', 16],\n ['x-large', 18],\n ],\n size: 'small',\n }\n }\n})\n```\n\nMoving to a system like this also opens up the ability to configure your own sizing names:\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\n{\n VIconBtn: {\n sizes: [\n ['xs', 16],\n ['sm', 20],\n ['md', 24],\n ['lg', 28],\n ['xl', 32],\n ['2xl', 36],\n ],\n iconSizes: [\n ['xs', 10],\n ['sm', 12],\n ['md', 14],\n ['lg', 16],\n ['xl', 18],\n ['2xl', 20],\n ],\n size: 'xl',\n }\n}\n```\n\nThis is still in testing so please give us your feedback by dropping a line on our [Discord](https://community.vuetifyjs.com/)\n\n**Details:** [PR#21114](https://github.com/vuetifyjs/vuetify/pull/21114)\n\n---\n\nFor a complete list of all the changes and features in v3.8, please see the [full changelog](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.0).\n","packages/docs/src/pages/en/blog/announcing-vuetify-4.3.md":"---\nlayout: blog\nmeta:\n title: Announcing Vuetify v4.3\n description: Vuetify v4.3 \"Paladin\" brings data table and form controls, new labs components, right-click menus, opt-in MD Expressive styles and a steadier SSR layout.\n keywords: Vuetify v4.3, Vuetify Paladin, VDataTable, VAutocomplete, VMenu, context-menu, Material Design Expressive, VBtn, VSlider, VTabs, VSlideGroup, SSR, v-touch-hold, Vuetify0\n---\n\n# Announcing Vuetify v4.3\n\n---\n\n🖊️ John Leider • 📅 October 20th, 2026\n\n\n\n![Hero image for Vuetify v4.3](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/hero.png \"Vuetify v4.3 Paladin hero image\"){ height=112 }\n\n---\n\n## Introduction\n\nVuetify v4.3 is a minor release with no breaking changes.\n\nIt adds more control over filtering and selection in data tables and forms, a batch of new labs components, right-click menus for VMenu, and opt-in Material Design Expressive styles for 7 components. It also includes new options for carousels and slide groups, and a more stable layout for SSR apps.\n\nThis post covers the highlights. For everything else, see [the full changelog](https://github.com/vuetifyjs/vuetify/releases/tag/v4.3.0).\n\n---\n\n- [Data tables & forms](#data-tables-forms)\n- [Labs preview](#labs-preview)\n- [VMenu context-menu](#vmenu-context-menu)\n- [7 components aligned with Material Design Expressive](#7-components-aligned-with-material-design-expressive)\n - [Button sizes](#button-sizes)\n - [Progress](#progress)\n - [Sliders](#sliders)\n - [Tabs](#tabs)\n- [Carousel alternatives](#carousel-alternatives)\n - [VSlideGroup padding and gap](#vslidegroup-padding-and-gap)\n - [VCarousel pause-on-hover](#vcarousel-pause-on-hover)\n - [Wheel navigation](#wheel-navigation)\n - [VInfiniteCarousel](#vinfinitecarousel)\n- [Stable layout & SSR](#stable-layout-ssr)\n- [Under the hood](#under-the-hood)\n- [v-touch-hold](#v-touch-hold)\n- [Promoted from labs](#promoted-from-labs)\n\n## Data tables & forms\n\nMore control over how lists filter and how rows select.\n\n### Filtered order\n\n`VAutocomplete` and `VCombobox` have a **filtered-order** prop for controlling the order of items after filtering.\n\n**Details:** [PR#23282](https://github.com/vuetifyjs/vuetify/pull/23282)\n\n### Filtered select strategy\n\n`VDataTable` adds a **filtered** select strategy, so select all applies to the rows that match the current filter.\n\n**Details:** [041bb72](https://github.com/vuetifyjs/vuetify/commit/041bb7269d228e97f9dda210362d149a4d0ff709), closes [#22867](https://github.com/vuetifyjs/vuetify/issues/22867)\n\n### Row state in row-props\n\n`isSelected` and `isExpanded` are now passed to **row-props**, and selected and expanded rows are marked with data attributes, so you can style them without extra bookkeeping.\n\n**Details:** [PR#23238](https://github.com/vuetifyjs/vuetify/pull/23238), [1b4a6b4](https://github.com/vuetifyjs/vuetify/commit/1b4a6b430340a5dc32a441b3ba281ae1d874a711), closes [#17670](https://github.com/vuetifyjs/vuetify/issues/17670)\n\n### Descriptions on selection controls\n\nCheckboxes, radios and switches can show a description through the new **description** prop and slot on `VSelectionControl`.\n\n**Details:** [3e734be](https://github.com/vuetifyjs/vuetify/commit/3e734be3d6e9141237f1b57dd32a1010f5a4f7b8), closes [#21773](https://github.com/vuetifyjs/vuetify/issues/21773)\n\n![Image of v-checkbox and v-switch with descriptions](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/selection-control-descriptions.png \"Selection control descriptions\"){ height=150 }\n\n### Smaller form updates\n\n- `VDateInput` shows a localized format hint ([PR#23173](https://github.com/vuetifyjs/vuetify/pull/23173))\n- `VTextarea` keeps native undo history when **auto-grow** is on ([PR#23279](https://github.com/vuetifyjs/vuetify/pull/23279))\n\n## Labs preview\n\nThese are new in labs. You can try them today, but the API may still change before they move to core, so pin your version if you use them in production.\n\n![Image of v-split-btn](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/labs-split-btn.png \"v-split-btn component\"){ height=250 }\n\n![Image of v-time-input](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/labs-time-input.png \"v-time-input component\"){ height=120 }\n\n![Image of v-loading-indicator](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/labs-loading-indicator.png \"v-loading-indicator component\"){ height=120 }\n\n- `VAudio` ([Docs](/components/audio-players/), [PR#23227](https://github.com/vuetifyjs/vuetify/pull/23227))\n- `VSplitBtn` ([Docs](/components/split-buttons/), [PR#23267](https://github.com/vuetifyjs/vuetify/pull/23267))\n- `VTimeInput` ([Docs](/components/time-inputs/), [PR#23141](https://github.com/vuetifyjs/vuetify/pull/23141))\n- `VLoadingIndicator` ([Docs](/components/loading-indicators/), [c5ce339](https://github.com/vuetifyjs/vuetify/commit/c5ce3396e1c3e51c6925aab8f3a63365f7acc42a))\n\n`VVideo` also picked up an **actions** prop and an overhauled progress bar and volume control ([PR#23241](https://github.com/vuetifyjs/vuetify/pull/23241)).\n\nTry them out and let us know what you think on [Discord](https://community.vuetifyjs.com/).\n\n## VMenu context-menu\n\n[v-menu](https://vuetifyjs.com/components/menus/) can now open on right click with the new **context-menu** prop.\n\n![Image of v-menu opened with right click](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/menu-contextmenu.png \"v-menu context menu\"){ height=300 }\n\n```html\n\n```\n\n**Details:** [PR#23196](https://github.com/vuetifyjs/vuetify/pull/23196), closes [#9235](https://github.com/vuetifyjs/vuetify/issues/9235)\n\n## 7 components aligned with Material Design Expressive\n\n`VBtn`, `VIconBtn`, `VBtnGroup`, `VProgressLinear`, `VProgressCircular`, `VSlider` and `VTabs` have new options that follow Material Design Expressive. They are regular props you can use with any blueprint. The `md3` blueprint now turns on the new progress look (split variant, rounded bar, stop indicator) and the primary tab slider by default.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nimport { createVuetify } from 'vuetify'\nimport { md3 } from 'vuetify/blueprints'\n\nexport default createVuetify({\n blueprint: md3,\n})\n```\n\n::: info\nThe `md3` blueprint will make `VSlider` use the pill variant by default in an upcoming patch.\n:::\n\n### Button sizes\n\n`VBtn`, `VIconBtn` and `VBtnGroup` support the Expressive sizes, plus the radius animation on press. There's a new guide that walks through it: [MD3 button sizes](https://vuetifyjs.com/features/md3-button-sizes/).\n\n![Image of MD3 button sizes](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/md3-buttons.png \"MD3 button sizes\")\n\n**Details:** [PR#23253](https://github.com/vuetifyjs/vuetify/pull/23253)\n\n### Progress\n\n[v-progress-linear](https://vuetifyjs.com/components/progress-linear/) and [v-progress-circular](https://vuetifyjs.com/components/progress-circular/) add a split variant, a stop indicator, a rounded bar and a wavy track.\n\n![Image of MD3 progress variants](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/md3-progress.png \"MD3 progress variants\")\n\n**Details:** [PR#23276](https://github.com/vuetifyjs/vuetify/pull/23276)\n\n### Sliders\n\n[v-slider](https://vuetifyjs.com/components/sliders/) has a new **pill** variant and a **centered** prop for values that start from the middle.\n\n```html\n\n\n\n```\n\n![Image of v-slider pill variant](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/md3-sliders.png \"v-slider pill variant\")\n\n**Details:** [PR#22699](https://github.com/vuetifyjs/vuetify/pull/22699), [PR#23277](https://github.com/vuetifyjs/vuetify/pull/23277)\n\n### Tabs\n\n`VTab` gets a **slider-variant** prop for the primary tab indicator style.\n\n\n\n**Details:** [PR#23181](https://github.com/vuetifyjs/vuetify/pull/23181)\n\n## Carousel alternatives\n\nSpacing props for `VSlideGroup`, pausing and wheel navigation for `VCarousel`, and a new looping carousel in labs.\n\n### VSlideGroup padding and gap\n\n[v-slide-group](https://vuetifyjs.com/components/slide-groups/) has **padding** and **gap** props, so you can space items without custom CSS. VTabs and VChipGroup are built on VSlideGroup, so they get these too.\n\n**Example:** [Image slider](https://vuetifyjs.com/components/slide-groups/#image-slider)\n\n**Details:** [PR#23184](https://github.com/vuetifyjs/vuetify/pull/23184), closes [#11972](https://github.com/vuetifyjs/vuetify/issues/11972)\n\n### VCarousel pause-on-hover\n\nThe new **pause-on-hover** prop pauses a cycling carousel while the pointer is over it. Keyboard focus inside the carousel now pauses it too, with or without the prop.\n\n```html\n\n```\n\n**Details:** [e835b88](https://github.com/vuetifyjs/vuetify/commit/e835b885a181052f830f75e80cb716764e634da6), closes [#10544](https://github.com/vuetifyjs/vuetify/issues/10544)\n\n### Wheel navigation\n\n`VWindow` and `VCarousel` support mouse wheel navigation, and the wrap animation is now correct when using arrows or touch.\n\n**Details:** [PR#22906](https://github.com/vuetifyjs/vuetify/pull/22906)\n\n### VInfiniteCarousel\n\n`VInfiniteCarousel` is new in labs, for content that loops continuously. Unlike most marquee implementations, it is fully navigable with arrow keys: focus moves between focusable items and scrolls them into view, otherwise the arrows shift the content. The motion runs on the Web Animations API rather than pure CSS, and keeps its position when paused, reversed or scrubbed with drag and wheel.\n\n**Docs:** [v-infinite-carousel](https://vuetifyjs.com/components/infinite-carousels/)\n\n**Details:** [PR#23116](https://github.com/vuetifyjs/vuetify/pull/23116)\n\n## Stable layout & SSR\n\nLayout item sizes and offsets now render before mount, so SSR apps keep a stable layout on load instead of shifting once the app hydrates.\n\n**Details:** [PR#23250](https://github.com/vuetifyjs/vuetify/pull/23250)\n\nA few other layout updates:\n\n- `VRow` has responsive gap props ([PR#23246](https://github.com/vuetifyjs/vuetify/pull/23246))\n- New `vuetify/styles/layers` entry point with only the default `@layer` order declaration ([ed2dbea](https://github.com/vuetifyjs/vuetify/commit/ed2dbeaa96c944052e85e7bf9678f8b8da9956a3))\n- `VNavigationDrawer` has a **modal** prop and `v-model:expanded` ([PR#23182](https://github.com/vuetifyjs/vuetify/pull/23182))\n\n## Under the hood\n\nWe've started porting core framework features over to use Vuetify0 under the hood. The first pieces are the display, locale, RTL and observer composables ([PR#23210](https://github.com/vuetifyjs/vuetify/pull/23210), [PR#23220](https://github.com/vuetifyjs/vuetify/pull/23220)). You shouldn't notice anything in your app. More of the framework will follow in upcoming releases.\n\n## v-touch-hold\n\n`v-touch-hold` is a new directive for long-press interactions on mobile and other touch devices.\n\n**Details:** [PR#23269](https://github.com/vuetifyjs/vuetify/pull/23269), closes [#5322](https://github.com/vuetifyjs/vuetify/issues/5322)\n\n## Promoted from labs\n\n[v-avatar-group](https://vuetifyjs.com/components/avatar-groups/), [v-highlight](https://vuetifyjs.com/components/highlights/) and [v-progress](https://vuetifyjs.com/components/progress/) graduated from labs to core, so update any `vuetify/labs` imports.\n\n---\n\n::: warning\n\n**Vuetify needs your support.** Open Collective is how we fund the team that builds releases like this one. If your team relies on Vuetify, point your organization at [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider).\n\n:::\n\nFor a complete list of all the changes and features in v4.3, please see the [full changelog](https://github.com/vuetifyjs/vuetify/releases/tag/v4.3.0).\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://community.vuetifyjs.com), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements.*\n","packages/docs/src/pages/en/blog/announcing-vuetify0-alpha.md":"---\nlayout: blog\nmeta:\n title: Announcing the Vuetify0 Alpha\n description: The Vuetify0 alpha is here — a headless Vue framework with 46 components, 63 composables, first-class AI integration, 100% TypeScript, and zero styles.\n keywords: Vuetify0 alpha, headless Vue, Vue component library, AI-native framework, TypeScript components, Vuetify MCP\n---\n\n\n\n# Announcing the Vuetify0 Alpha\n\n**The foundation of the next generation of Vuetify is here.** Vuetify0 is a headless Vue framework — 100% TypeScript, zero styles, built from the ground up to power custom UI libraries, design systems, and the Vuetify ecosystem itself. Today we're releasing the first public alpha.\n\n🖊️ John Leider • 📅 April 7th, 2026\n\n\n\n---\n\n\n\n## What is Vuetify0?\n\nVuetify0 is not a component library — it's a **meta-framework for building component libraries**. Every component is a standard Vue SFC using the latest macros (`defineModel`, `defineSlots`, generics). Every composable is a pure TypeScript function. Nothing ships with styles, opinions about your CSS framework, or assumptions about your design language.\n\nThe primitives handle the hard parts — accessibility, keyboard navigation, focus management, state coordination, form validation — so you can focus on what makes your library yours: the design.\n\n```html { resource=\"src/components/MyButton.vue\" }\n\n\n\n\n\n```\n\nYou bring the styles. Vuetify0 brings everything else.\n\n---\n\n## What's in the Alpha\n\nThe alpha ships with **46 components** and **63 composables** across three maturity levels:\n\n| Maturity | Components | Composables | What it means |\n|----------|-----------|-------------|---------------|\n| **Stable** | 0 | 6 | API locked, production-ready |\n| **Preview** | 34 | 54 | Implemented, API may change |\n| **Draft** | 13 | 3 | Planned or in early development |\n\n::: success\nSee the full breakdown on the [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix) — every component and composable with its current stability level.\n:::\n\n**Components** span six categories — every one headless, accessible, and keyboard-navigable out of the box:\n\n- **Forms** — [Input](https://0.vuetifyjs.com/components/forms/input), [Select](https://0.vuetifyjs.com/components/forms/select), [Combobox](https://0.vuetifyjs.com/components/forms/combobox), [Checkbox](https://0.vuetifyjs.com/components/forms/checkbox), [Radio](https://0.vuetifyjs.com/components/forms/radio), [Switch](https://0.vuetifyjs.com/components/forms/switch), [Slider](https://0.vuetifyjs.com/components/forms/slider), [Rating](https://0.vuetifyjs.com/components/forms/rating)\n- **Disclosure** — [Dialog](https://0.vuetifyjs.com/components/disclosure/dialog), [Popover](https://0.vuetifyjs.com/components/disclosure/popover), [Tabs](https://0.vuetifyjs.com/components/disclosure/tabs), [Collapsible](https://0.vuetifyjs.com/components/disclosure/collapsible), [ExpansionPanel](https://0.vuetifyjs.com/components/disclosure/expansion-panel), [Treeview](https://0.vuetifyjs.com/components/disclosure/treeview)\n- **Navigation** — [Breadcrumbs](https://0.vuetifyjs.com/components/semantic/breadcrumbs), [Pagination](https://0.vuetifyjs.com/components/semantic/pagination)\n- **Layout** — [Splitter](https://0.vuetifyjs.com/components/semantic/splitter)\n- **Feedback** — [Snackbar](https://0.vuetifyjs.com/components/semantic/snackbar)\n- **Primitives** — [Atom](https://0.vuetifyjs.com/components/primitives/atom), [Portal](https://0.vuetifyjs.com/components/primitives/portal), [Presence](https://0.vuetifyjs.com/components/primitives/presence)\n\n[Browse all components](https://0.vuetifyjs.com/components).\n\n**Composables** go even deeper:\n\n- **Selection** — [single](https://0.vuetifyjs.com/composables/selection/create-single), [multi](https://0.vuetifyjs.com/composables/selection/create-group), [grouped](https://0.vuetifyjs.com/composables/selection/create-selection), [stepped](https://0.vuetifyjs.com/composables/selection/create-step), [nested](https://0.vuetifyjs.com/composables/selection/create-nested)\n- **Data** — [filtering](https://0.vuetifyjs.com/composables/data/create-filter), [pagination](https://0.vuetifyjs.com/composables/data/create-pagination), [virtual scrolling](https://0.vuetifyjs.com/composables/data/create-virtual), [data tables](https://0.vuetifyjs.com/composables/data/create-data-table)\n- **Forms** — [validation](https://0.vuetifyjs.com/composables/forms/create-validation) with Standard Schema support, [form coordination](https://0.vuetifyjs.com/composables/forms/create-form), [rules engine](https://0.vuetifyjs.com/composables/plugins/use-rules)\n- **Plugins** — [theme](https://0.vuetifyjs.com/composables/plugins/use-theme), [locale](https://0.vuetifyjs.com/composables/plugins/use-locale), [breakpoints](https://0.vuetifyjs.com/composables/plugins/use-breakpoints), [features](https://0.vuetifyjs.com/composables/plugins/use-features), [permissions](https://0.vuetifyjs.com/composables/plugins/use-permissions), [logger](https://0.vuetifyjs.com/composables/plugins/use-logger), [storage](https://0.vuetifyjs.com/composables/plugins/use-storage), [notifications](https://0.vuetifyjs.com/composables/plugins/use-notifications)\n- **Browser** — [observers](https://0.vuetifyjs.com/composables/system/use-resize-observer), [event listeners](https://0.vuetifyjs.com/composables/system/use-event-listener), [hotkeys](https://0.vuetifyjs.com/composables/system/use-hotkey), [media queries](https://0.vuetifyjs.com/composables/system/use-media-query)\n\n---\n\n## Built for AI\n\n\n\nVuetify0 is the first Vue framework designed from day one to be consumed by AI agents.\n\nEvery documentation page includes **Ask AI** — ask a question about any component or composable and get an answer grounded in the actual source code and API reference. The docs ship with `llms.txt` and `llms-full.txt` files for direct LLM consumption, plus `SKILL.md` files that let AI agents discover and use Vuetify0 capabilities automatically.\n\nThe [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) connects your IDE to the full documentation and API surface. Use it with Claude, Cursor, Copilot, or any MCP-compatible tool to get context-aware assistance while you build.\n\n::: info\n**Try Vuetify0 with Claude.** Our [Vuetify MCP guide](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp#claude-code) walks you through connecting Vuetify MCP to your development environment.\n:::\n\n---\n\n## Progressive Enhancement\n\nVuetify0's plugin system follows a simple principle: **only take what you use**. Every plugin is optional and tree-shakeable. A minimal setup might use nothing at all — just import components and composables directly. As your needs grow, add plugins:\n\n```ts\nimport { createApp } from 'vue'\nimport {\n createBreakpointsPlugin,\n createThemePlugin,\n createLocalePlugin,\n createStoragePlugin,\n} from '@vuetify/v0'\n\nconst app = createApp(App)\n\n// Add only what you need\napp.use(createThemePlugin({ default: 'light', themes: { light, dark } }))\napp.use(createBreakpointsPlugin())\napp.use(createLocalePlugin({ default: 'en', messages: { en, es } }))\napp.use(createStoragePlugin())\n```\n\nAvailable plugins include `useTheme`, `useLocale`, `useBreakpoints`, `useFeatures`, `usePermissions`, `useLogger`, `useStorage`, `useNotifications`, `useRules`, `useRtl`, and `useStack`. Each one follows the same pattern: install the plugin to provide app-wide context, or use the `create*` factory for scoped instances in component subtrees. [Browse all composables](https://0.vuetifyjs.com/composables).\n\n---\n\n## Adapter-Based Architecture\n\nMost plugins accept **adapters** — swappable implementations that let you plug in the tools you already use. Vuetify0 ships with sensible defaults, but you're never locked in.\n\n```ts { resource=\"src/plugins/vuetify0.ts\" }\nimport { createLocalePlugin } from '@vuetify/v0'\nimport { VueI18nLocaleAdapter } from '@vuetify/v0/locale/adapters/vue-i18n'\nimport { createI18n } from 'vue-i18n'\n\nconst i18n = createI18n({ locale: 'en', messages: { en, es } })\n\napp.use(\n createLocalePlugin({\n adapter: new VueI18nLocaleAdapter({ i18n }),\n })\n)\n```\n\nThe adapter pattern extends across the framework:\n\n| Plugin | Default | Third-party adapters |\n|--------|---------|---------------------|\n| Logger | Console | Pino, Consola |\n| Locale | Built-in | VueI18n |\n| Date | Built-in | Custom (implement DateAdapter) |\n| Features | Built-in | LaunchDarkly, Flagsmith, PostHog |\n| Notifications | Built-in | Knock, Novu |\n| Validation | Built-in | Standard Schema (Zod, Valibot, ArkType) |\n| Storage | localStorage | sessionStorage, memory |\n| Theme | CSS variables | Unhead (SSR) |\n\nWrite your own adapter by implementing a single interface. The framework handles the rest.\n\n---\n\n## Performance\n\nPerformance was a priority from the start, not an afterthought. Every composable is independently importable and tree-shakeable. There is no runtime CSS — your bundle includes exactly the JavaScript you use and nothing else.\n\nComponents use lazy mounting (`usePresence`, `useLazy`) so dialogs, popovers, and menus don't render their content until they're opened. Observer composables (`useResizeObserver`, `useIntersectionObserver`, `useMutationObserver`) clean up automatically on scope disposal.\n\nThe registry system — the foundation of every stateful composable — uses cached iterations and batched mutations to minimize reactive overhead. Performance-critical paths include benchmarks (`*.bench.ts`) tracked across releases.\n\n::: info\n**Want the numbers?** Check out our [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) for detailed performance testing guidelines and results.\n:::\n\n---\n\n## Documentation\n\nThe documentation at [0.vuetifyjs.com](https://0.vuetifyjs.com) is designed to be the most complete documentation experience available.\n\n- **Live examples** on every component and composable page with full source code\n- **Auto-generated API reference** extracted directly from TypeScript source — always accurate, never stale\n- **Ask AI** on every page — ask questions grounded in the actual docs and source\n- **Skill-based filtering** — pages are tagged beginner, intermediate, or advanced so you see content matched to your experience\n- **Personalized documentation** — the [Vuetify CLI](https://github.com/vuetifyjs/cli) generates docs context tailored to your project's installed plugins and components\n\n---\n\n## Ecosystem\n\nVuetify0 works with the tools the Vuetify community already uses:\n\n- **[Vuetify CLI](https://github.com/vuetifyjs/cli)** — Scaffold new projects, generate components, and get personalized documentation based on your project setup\n- **[Vuetify Play](https://vtfy.link/vuetify0-play)** — Try components and composables in the browser without installing anything\n- **[Vuetify0 Play](https://v0play.vuetifyjs.com)** (beta) — Vuetify Play built entirely with Vuetify0\n- **[Vuetify MCP](https://mcp.vuetifyjs.com)** — Connect your IDE to the full Vuetify0 API surface for context-aware AI assistance\n\n---\n\n## Road to v1\n\nToday's alpha is the first milestone on the path to a stable release:\n\n- **Alpha** (April 7, 2026) — Open for feedback, APIs mostly stable, expect minor breaking changes\n- **Beta** (June 2026) — API freeze, stability and performance focus\n- **v1.0** (July 2026) — Stable release\n\nSee the full [roadmap](https://0.vuetifyjs.com/roadmap) for milestone details and timelines.\n\n\n\nAfter v1, the next chapter is **[Vuetify Paper](https://github.com/vuetifyjs/0/tree/master/packages/paper)**: complete design systems built on Vuetify0. Paper design systems recreate popular design languages as ready-to-use component libraries powered by v0's headless primitives. We're starting with two original design systems, **Emerald** and **Onyx**, with recreations of well-known design systems to follow.\n\nVuetify0 is the result of over a decade of building component frameworks and learning what works. It's already being integrated into the core Vuetify framework, quietly powering the next generation from the inside out. The alpha is live. [Go break things](https://0.vuetifyjs.com/introduction/getting-started).\n\n::: info\n**Considering building with Vuetify0?** We'd love to hear about your use case. [Get in touch](https://vuetifyjs.com/introduction/enterprise-support/) about enterprise support and consulting.\n:::\n\n---\n\n## Let's Build Something\n\nEnough about what Vuetify0 *can* do — let's see it in action. We're going to build **DevKey**, a developer API dashboard, as a reusable UI library. Three pages, ten components, one composite component that ties it all together.\n\nBy the end, you'll have a publishable package that any Vue app can install and use. The full source is on GitHub: [vuetifyjs/devkey](https://github.com/vuetifyjs/devkey).\n\n> This guide uses plain CSS for styling. Vuetify0 works great with [UnoCSS, Tailwind, or any CSS approach](https://0.vuetifyjs.com/guide/fundamentals/styling) you prefer.\n\n### Project Setup\n\nFirst, install the alpha:\n\n::: tabs\n\n```bash [pnpm]\npnpm add @vuetify/v0\n```\n\n```bash [npm]\nnpm install @vuetify/v0\n```\n\n```bash [yarn]\nyarn add @vuetify/v0\n```\n\n```bash [bun]\nbun add @vuetify/v0\n```\n\n:::\n\nThen create a plugin file that registers the v0 plugins we'll use throughout the project:\n\n```ts { resource=\"src/plugins/devkey.ts\" }\nimport {\n createBreakpointsPlugin,\n createPermissionsPlugin,\n createRulesPlugin,\n} from '@vuetify/v0'\nimport type { App } from 'vue'\n\nexport default function devkey (app: App) {\n app.use(\n createPermissionsPlugin({\n permissions: {\n admin: [['manage', '*']],\n developer: [['read', 'keys'], ['create', 'keys']],\n viewer: [['read', 'keys']],\n },\n })\n )\n\n app.use(\n createRulesPlugin({\n aliases: {\n required: v => !!v || 'Required',\n email: v => /.+@.+\\..+/.test(String(v)) || 'Invalid email',\n },\n })\n )\n\n app.use(createBreakpointsPlugin())\n}\n```\n\nThe theme is configured separately in its own plugin file, using the `V0StyleSheetThemeAdapter` to generate CSS custom properties with a `v0-theme` prefix:\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nimport { createThemePlugin, V0StyleSheetThemeAdapter } from '@vuetify/v0'\n\nexport default createThemePlugin({\n default: 'dark',\n target: 'html',\n adapter: new V0StyleSheetThemeAdapter({ prefix: 'v0-theme' }),\n themes: {\n dark: {\n dark: true,\n colors: {\n 'primary': '#818cf8',\n 'secondary': '#fbbf24',\n 'error': '#f87171',\n 'info': '#38bdf8',\n 'success': '#4ade80',\n 'warning': '#fb923c',\n 'background': '#18181b',\n 'surface': '#1f1f23',\n 'surface-tint': '#2a2a2a',\n 'surface-variant': '#1e1e1e',\n 'text': '#f1f5f9',\n 'muted': '#94a3b8',\n 'border': '#2e2e32',\n 'divider': '#404040',\n 'on-primary': '#1a1a1a',\n 'on-secondary': '#1a1a1a',\n 'on-error': '#1a1a1a',\n 'on-info': '#1a1a1a',\n 'on-success': '#1a1a1a',\n 'on-warning': '#1a1a1a',\n 'on-background': '#e0e0e0',\n 'on-surface': '#e0e0e0',\n 'on-surface-variant': '#a0a0a0',\n },\n },\n },\n})\n```\n\nAnd wire it into your app entry:\n\n```ts { resource=\"src/main.ts\" }\nimport { createApp } from 'vue'\nimport devkey from './plugins/devkey'\nimport vuetify from './plugins/vuetify'\nimport App from './App.vue'\n\nconst app = createApp(App)\ndevkey(app)\napp.use(vuetify)\napp.mount('#app')\n```\n\nFour plugins across two files, each doing one job: `createPermissionsPlugin` sets up RBAC so we can gate dashboard actions by role, `createRulesPlugin` registers validation rule aliases so our form fields can use `'required'` and `'email'` by name, `createThemePlugin` with `V0StyleSheetThemeAdapter` provides DevKey's color tokens as CSS variables (`var(--v0-theme-primary)`, `var(--v0-theme-on-primary)`, etc.), and `createBreakpointsPlugin` gives us reactive viewport detection for the responsive dashboard layout.\n\nHere's what we're building:\n\n**Components:**\n\n| Component | Wraps | Description |\n|-----------|-------|-------------|\n| `DkButton` | [Button](https://0.vuetifyjs.com/components/actions/button) | Styled button with variants |\n| `DkInput` | [Input](https://0.vuetifyjs.com/components/forms/input) | Form field with label and errors |\n| `DkCard` | [Atom](https://0.vuetifyjs.com/components/primitives/atom) | Content container |\n| `DkToggle` | [Single](https://0.vuetifyjs.com/components/providers/single) | Option switcher |\n| `DkTabs` | [Tabs](https://0.vuetifyjs.com/components/disclosure/tabs) | Tab navigation |\n| `DkTable` | [createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table) | Filterable, paginated table |\n| `DkCollapsible` | [Collapsible](https://0.vuetifyjs.com/components/disclosure/collapsible) | Expandable section |\n| `DkLayout` | [useBreakpoints](https://0.vuetifyjs.com/composables/plugins/use-breakpoints) | Responsive shell |\n| `DkCommandPalette` | [Dialog](https://0.vuetifyjs.com/components/disclosure/dialog) + [Input](https://0.vuetifyjs.com/components/forms/input) + [createFilter](https://0.vuetifyjs.com/composables/data/create-filter) + [useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey) + [useVirtualFocus](https://0.vuetifyjs.com/composables/system/use-virtual-focus) | `Cmd+K` search overlay with keyboard navigation |\n\n**Plugins:**\n\n| Plugin | Purpose |\n|--------|---------|\n| [createThemePlugin](https://0.vuetifyjs.com/composables/plugins/use-theme) | Dark theme with V0StyleSheetThemeAdapter for CSS custom properties |\n| [createBreakpointsPlugin](https://0.vuetifyjs.com/composables/plugins/use-breakpoints) | Reactive viewport detection for responsive layout |\n| [createPermissionsPlugin](https://0.vuetifyjs.com/composables/plugins/use-permissions) | RBAC to gate dashboard actions by role |\n| [createRulesPlugin](https://0.vuetifyjs.com/composables/plugins/use-rules) | Built-in validation rules (required, email, minLength) |\n\n---\n\n## Part 1: Landing Page\n\nThe landing page introduces two core patterns in v0:\n\n- **[Button](https://0.vuetifyjs.com/components/actions/button)** uses a compound component pattern — `Button.Root` handles state (loading, disabled, ARIA), `Button.Content` and `Button.Loading` swap visibility automatically. You style the root, v0 handles the behavior.\n- **[Single](https://0.vuetifyjs.com/components/providers/single)** manages single-selection state. `Single.Root` provides the context, `Single.Item` exposes `isSelected` and `toggle` — perfect for our pricing interval toggle. No state management code needed.\n\nBoth patterns show up everywhere in v0: compound components for structure, provider components for state. Once you learn one, you know them all. We'll build `DkButton`, `DkCard`, `DkToggle`, and `DkLayout`.\n\n![DevKey Landing Page](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/landing.png \"DevKey Landing Page\")\n\n### DkButton\n\nOur first component wraps Vuetify0's [Button](https://0.vuetifyjs.com/components/actions/button) with DevKey's visual style. Button uses a compound component pattern — `Button.Root` handles all the state (loading, disabled, selected, ARIA), and we style on top:\n\n```html { resource=\"src/components/DkButton.vue\" }\n\n\n\n\n\n```\n\nNotice what we *didn't* write: loading state management, disabled coordination, toggle group support, or grace period timing. `Button.Root` handles all of that — we just pass `loading` and `disabled` props through. `Button.Content` renders when the button isn't loading, and `Button.Loading` renders when it is — with an absolutely positioned spinner overlay and `[data-loading]` disabling pointer events. We just add our styles on top.\n\n### DkToggle — Pricing Interval Switcher\n\nThe pricing section needs a toggle between monthly and yearly. We use [Single](https://0.vuetifyjs.com/components/providers/single) for single-selection state — `Single.Root` provides the context, and `Single.Item` exposes `isSelected` and `toggle` for each option:\n\n```html { resource=\"src/components/DkToggle.vue\" }\n\n\n\n\n\n```\n\nThe `mandatory` prop on `Single.Root` ensures something is always selected. The `isSelected` and `toggle` slot props from `Single.Item` give us everything we need to render the active state and handle clicks. Zero state management code in our component.\n\n---\n\n## Part 2: Login Page\n\nThe login page is where Vuetify0's form system shines. Three composables work together here:\n\n- **[Form](https://0.vuetifyjs.com/components/forms/form)** coordinates validation across all fields. When the form submits, it validates every registered input and reports whether the form is valid.\n- **[Input](https://0.vuetifyjs.com/components/forms/input)** handles individual field state — value binding, validation errors, ARIA attributes, dirty/pristine tracking — through a compound component pattern (`Input.Root`, `Input.Control`, `Input.Description`, `Input.Error`).\n- **[createRulesPlugin](https://0.vuetifyjs.com/composables/plugins/use-rules)** provides named rule aliases. In our plugin setup we registered `'required'` and `'email'` — now any `Input.Root` with `:rules=\"['required', 'email']\"` resolves those aliases automatically. You can mix aliases with inline functions for custom validation.\n\nWe'll build `DkInput` — a styled wrapper around Input — and assemble the login page.\n\n![DevKey Login Page](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/login.png \"DevKey Login Page\")\n\n### DkInput\n\nWrapping Vuetify0's [Input](https://0.vuetifyjs.com/components/forms/input) compound component. `Input.Root` handles validation, ARIA attributes, and field state. `Input.Control` renders the native ``. `Input.Description` and `Input.Error` are automatically wired to `aria-describedby` and `aria-errormessage`:\n\n```html { resource=\"src/components/DkInput.vue\" }\n\n\n\n\n\n```\n\n### Login Page Assembly\n\nNow we compose the login page using Vuetify0's [Form](https://0.vuetifyjs.com/components/forms/form) component. Form coordinates all child validations automatically — the `submit` slot prop is a function that validates every registered field and returns a boolean. We pass it to our `onSubmit` handler via `@click=\"onSubmit(submit)\"`, which manages the loading state with a try/finally pattern. The `:rules` prop on `DkInput` accepts both string aliases (`'required'`, `'email'`) from the [rules plugin](https://0.vuetifyjs.com/composables/plugins/use-rules) and inline functions:\n\n```html { resource=\"src/pages/LoginPage.vue\" }\n\n\n\n\n\n```\n\n---\n\n## Part 3: Dashboard\n\nThis is where v0 really shows its depth. The dashboard composes more primitives than the previous two pages combined, and demonstrates how they stay out of each other's way:\n\n- **[createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table)** handles the API key list — filtering, pagination, and column definitions in a single composable. We wire a search input to its `search()` method and let it manage the data pipeline.\n- **[useBreakpoints](https://0.vuetifyjs.com/composables/plugins/use-breakpoints)** powers the responsive layout — sidebar visible on desktop, hidden on mobile — through the plugin we registered earlier.\n- **The command palette** is the showcase piece: five v0 primitives ([Dialog](https://0.vuetifyjs.com/components/disclosure/dialog), [Input](https://0.vuetifyjs.com/components/forms/input), [createFilter](https://0.vuetifyjs.com/composables/data/create-filter), [useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey), [useVirtualFocus](https://0.vuetifyjs.com/composables/system/use-virtual-focus)) composed into a single interaction.\n\n![DevKey Dashboard](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/dashboard.png \"DevKey Dashboard\")\n\n### DkTable — API Key Management\n\nThe API key table uses [createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table), which composes filtering, pagination, and sorting into a single reactive state:\n\n```html { resource=\"src/components/DkTable.vue\" }\n\n\n\n\n\n```\n\nThe `createDataTable` composable handles all the data wrangling — filtering rows by the search query, computing page counts, slicing the visible rows — while our component handles only the rendering.\n\n### DkCommandPalette — The Showcase\n\nThis is the component that shows what composing Vuetify0 primitives really looks like. A `Cmd+K` command palette that combines five v0 primitives into a single, polished interaction:\n\n- [Dialog](https://0.vuetifyjs.com/components/disclosure/dialog) — modal overlay with focus trapping\n- [Input](https://0.vuetifyjs.com/components/forms/input) — search field with ARIA\n- [createFilter](https://0.vuetifyjs.com/composables/data/create-filter) — live filtering\n- [useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey) — `Cmd+K` activation\n- [useVirtualFocus](https://0.vuetifyjs.com/composables/system/use-virtual-focus) — keyboard navigation with `scrollIntoView`\n\n```html { resource=\"src/components/DkCommandPalette.vue\" }\n\n\n\n\n\n```\n\nThat's roughly 100 lines of template and script for a fully functional command palette with keyboard navigation, live filtering, grouped results, and a hotkey trigger. Five Vuetify0 primitives, each doing one thing well, composed into something greater than the sum of its parts.\n\n\n\n![DevKey Command Palette](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/command-palette.png \"DevKey Command Palette\")\n\n---\n\n## Ship It\n\nThe full DevKey source is on GitHub: [vuetifyjs/devkey](https://github.com/vuetifyjs/devkey). Clone it, run `pnpm dev`, and you have a working app.\n\nTo deploy to production, build the project and preview it locally:\n\n::: tabs\n\n```bash [pnpm]\npnpm build\nnpx http-server dist\n```\n\n```bash [npm]\nnpm run build\nnpx http-server dist\n```\n\n```bash [yarn]\nyarn build\nnpx http-server dist\n```\n\n```bash [bun]\nbun run build\nbunx http-server dist\n```\n\n:::\n\nThe `dist/` directory contains everything you need. Deploy it anywhere that serves static files — Vercel, Netlify, Cloudflare Pages, or your own server. The entire app, including all Vuetify0 primitives, builds to **~235 kB JS** (84 kB gzipped).\n\n::: info\n**Want to package your components as a reusable library?** We'll cover publishing and consuming a v0-based component library in an upcoming blog post. In the meantime, the [Building Frameworks](https://0.vuetifyjs.com/guide/fundamentals/building-frameworks) guide walks through using v0 as a dependency for your own library.\n:::\n\n---\n\n## FAQ\n\n### How is Vuetify0 different from Reka UI or other headless libraries?\n\nMost headless libraries give you components. v0 gives you both the components *and* the underlying composables used to build them — so when a component doesn't fit your exact need, you're not stuck. The plugin system is also distinct: framework-level features like theme, locale, permissions, and notifications ship with fallbacks, so any component works standalone without requiring the full plugin to be installed. And v0 is built from a decade of Vuetify production experience by the same team — not a port of a React library.\n\n### Is this only for teams building design systems?\n\nNo. Import a `Select` and stop there — you don't need the plugin system, the composables, or any of it. The advanced layer is there when you need it, invisible when you don't.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They don't conflict. You can start adopting v0 components and composables in a Vuetify 4 project today. The migration path to future Vuetify versions is expected to require trivial changes at most.\n\n### Do I have to use all the plugins?\n\nNo. Every plugin is optional and tree-shakeable. A component import is just an import — no required setup. Add plugins as your needs grow.\n\n### Is the alpha API stable enough to build on?\n\nMostly, yes. We ship ~5,000 unit tests and over 300 benchmark scenarios across the framework. The alpha label reflects completeness, not instability — expect minor breaking changes until beta, but nothing requiring rewrites.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\nThe alpha is open for feedback. File issues, ask questions in Discord, or just build something and tell us about it. This is the foundation — help us shape it.\n\n::: info\n**Try Vuetify0 with Claude.** Connect the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/ai-tools) to get AI-assisted development with full access to the v0 docs and API reference.\n:::\n\n---\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Follow us on [Twitter](https://twitter.com/vuetifyjs), join the conversation on [Discord](https://community.vuetifyjs.com), and star us on [GitHub](https://github.com/vuetifyjs/0).*\n","packages/docs/src/pages/en/blog/announcing-vuetify0-beta.md":"---\nlayout: blog\nmeta:\n title: Announcing the Vuetify0 Beta\n description: Vuetify0 hits beta and freezes its public API — 49 components, 68 composables, a headless drag-and-drop family, and the testing work leading to v1.\n keywords: Vuetify0 beta, headless Vue, API freeze, Vue drag and drop, createSortable, createKanban, TypeScript components, Vuetify0 v1\n---\n\n\n\n# Announcing the Vuetify0 Beta\n\nVuetify0 has reached beta. The main change from the alpha is that the public API is now frozen: the existing composables and components keep their current names and signatures, and we don't expect them to change before v1. Work from here is focused on stability, documentation, and edge cases.\n\n🖊️ John Leider • 📅 June 2nd, 2026\n\n\n\n---\n\n\n\n## What beta means\n\nThe alpha, released in April, came with the caveat that APIs were mostly stable but could still shift between releases. Beta removes that caveat for the existing surface. From here to v1.0:\n\n- Existing composables and components keep their names, signatures, and behavior. A breaking change would only happen if a critical issue required one, and it would be documented in the release notes.\n- Development shifts toward edge cases, documentation, accessibility, and performance rather than new API.\n- v0 is the headless layer being built into Vuetify itself. Freezing it gives that migration a fixed target to build against.\n\n---\n\n## Where things stand\n\nSince the [alpha](/blog/announcing-vuetify0-alpha/) in April, the totals went from 46 components and 63 composables to **49 components and 68 composables**. The maturity mix also changed: at alpha, three composables and thirteen components were still marked draft. Now no composables are in draft, and ten components remain there.\n\n| Maturity | Components | Composables | What it means |\n|----------|-----------|-------------|---------------|\n| **Stable** | 0 | 6 | In use across releases, no planned breaking changes |\n| **Preview** | 39 | 62 | Feature-complete and documented |\n| **Draft** | 10 | 0 | Experimental or planned for a future release |\n\n::: info\nThe full list is on the [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix), with the current level for every component and composable.\n:::\n\nThe preview label describes how long a primitive has been in use, not whether its API is settled. With the freeze, the existing preview surface is not expected to change before v1.\n\n---\n\n## Drag and drop\n\nThe largest addition since the alpha is a group of three composables for drag-and-drop. Like the rest of v0, they handle state and behavior only, with no markup or styling.\n\n- **[useDragDrop](https://0.vuetifyjs.com/composables/system/use-drag-drop)** ([#225](https://github.com/vuetifyjs/0/pull/225)) — the base primitive: a pointer and keyboard input adapter that owns two registries (draggables and drop zones) and the active-drag state.\n- **[createSortable](https://0.vuetifyjs.com/composables/data/create-sortable)** ([#231](https://github.com/vuetifyjs/0/pull/231)) — ordered-list state, with `move`, `swap`, and `reorder` mutations and a typed `move:ticket` event. It has no DOM or input handling of its own, so it can be driven from buttons, gestures, or server updates.\n- **[createKanban](https://0.vuetifyjs.com/composables/data/create-kanban)** ([#234](https://github.com/vuetifyjs/0/pull/234)) — two levels of `createSortable` (columns and their items) plus a `transfer` method for moving items between columns.\n\nBecause `createSortable` is state only, a pair of buttons can drive it without any drag handling:\n\n```ts\nimport { createSortable } from '@vuetify/v0'\nimport type { SortableTicketInput } from '@vuetify/v0'\n\ninterface TaskTicket extends SortableTicketInput {\n value: { id: number, label: string }\n}\n\nconst sortable = createSortable()\n\nconst [a, b, c] = sortable.onboard([\n { value: { id: 1, label: 'Cut alpha' } },\n { value: { id: 2, label: 'Ship docs' } },\n { value: { id: 3, label: 'Tweet' } },\n])\n\nsortable.move(a.id, 2) // move a ticket to a new index\nsortable.swap(a.id, b.id) // swap two tickets\nsortable.reorder([b.id, a.id, c.id]) // apply a full permutation\n```\n\nThe same state rendered as a list — this is the example from the documentation:\n\n```html { resource=\"src/components/ReorderList.vue\" }\n\n\n\n```\n\n`useDragDrop` adds pointer and keyboard dragging on top, calling the same `move`, `swap`, and `reorder` methods.\n\n---\n\n## Other additions\n\nOther primitives added since the alpha:\n\n- **[createOtp](https://0.vuetifyjs.com/composables/forms/create-otp)** ([#238](https://github.com/vuetifyjs/0/pull/238)) — state and focus management for one-time-code and verification inputs.\n- **[Overflow](https://0.vuetifyjs.com/components/semantic/overflow)** ([#220](https://github.com/vuetifyjs/0/pull/220)) — a container that detects overflow and exposes scroll state to its children.\n- **useDelay** — debounce and delayed-execution timing.\n- **[toHighlight](https://0.vuetifyjs.com/composables/transformers/to-highlight)** ([#222](https://github.com/vuetifyjs/0/pull/222)) — a transformer that marks matched substrings, for search results and filters.\n\n`createRegistry`, which the stateful composables build on, also gained a bulk `reorder` primitive and an `offboard` that returns removed entries. The latter is what `createKanban` uses to move items between columns.\n\n---\n\n## Testing and performance\n\nCurrent numbers:\n\n- 5,700+ unit tests across 142 spec files.\n- 98.7% average test coverage across the 105 primitives with recorded metrics.\n- 12 benchmark suites covering performance-sensitive paths such as `createDataTable`, `createFilter`, and the registry core. `createSortable`'s reorder was rewritten to use the registry's bulk operation rather than a per-item loop.\n- 100% TypeScript and no runtime CSS. The package ships no styles, and exports are annotated so bundlers can drop unused composables.\n\n::: info\nThe [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) documents the methodology and per-primitive results.\n:::\n\nOne change since the alpha: `useTheme`, `useLocale`, and `useFeatures` use a reactive registry by default ([#210](https://github.com/vuetifyjs/0/pull/210)), so switching a theme or feature flag updates consumers without extra setup. The convention is [documented](https://0.vuetifyjs.com/guide/fundamentals/reactivity) for plugin authors.\n\n---\n\n## AI tooling\n\n\n\nAs in the alpha, each documentation page has an Ask AI option, the docs publish `llms.txt` and `llms-full.txt`, and the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) connects an editor to the API reference. The MCP data is synced to the beta.\n\n::: info\nThe [Vuetify MCP guide](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp#claude-code) covers connecting it to an editor.\n:::\n\n---\n\n## Road to v1\n\nThe beta is the second of three milestones:\n\n- **Alpha** (April 7, 2026) — open for feedback, APIs mostly stable\n- **Beta** (June 2, 2026) — API freeze; stability, documentation, and edge cases\n- **v1.0** (July 2026) — milestone-driven; ships when the milestones are met\n\nSee the [roadmap](https://0.vuetifyjs.com/roadmap) for details.\n\n---\n\n## FAQ\n\n### What changes at beta?\n\nThe public API stops changing. During alpha, names and signatures could change between releases; from beta to v1.0 they don't, unless a critical fix requires it. The stable, preview, and draft labels still indicate how long each primitive has been in use.\n\n### Can I use the beta in production?\n\nCode written against the beta API should keep working through v1, since the API is frozen. The remaining work is hardening and documentation.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They don't conflict, and v0 is already used inside Vuetify's internals. The path to future Vuetify versions is expected to need minimal changes.\n\n### Will there be breaking changes between beta and v1?\n\nNone are planned. If a critical bug or accessibility issue requires one, it will be noted in the release notes.\n\n### Do I have to use the whole framework?\n\nNo. You can import a single component or composable on its own. The plugins and other layers are optional.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Documentation is at [0.vuetifyjs.com](https://0.vuetifyjs.com); source is on [GitHub](https://github.com/vuetifyjs/0).*\n","packages/docs/src/pages/en/blog/announcing-vuetify0-rc.md":"---\nlayout: blog\nmeta:\n title: Announcing the Vuetify0 Release Candidate\n description: Vuetify0 reaches release candidate. The API freeze held through five beta releases and 60 fixes — 50 components, 71 composables, and the last stretch to v1.\n keywords: Vuetify0 RC, release candidate, headless Vue, API freeze, accessibility, WCAG, useReducedMotion, Vuetify0 v1\n---\n\n\n\n# Announcing the Vuetify0 Release Candidate\n\nVuetify0 has reached release candidate. The API freeze announced at [beta](/blog/announcing-vuetify0-beta/) held through six beta releases: nothing was renamed, nothing was removed, and the only additions were additive — a reduced-motion plugin and an accessibility helper on the locale system. From here to v1.0, the work is final testing and documentation. No new features.\n\n🖊️ John Leider • 📅 July 2nd, 2026\n\n\n\n---\n\n\n\n## Table of Contents\n\n- [What a release candidate means](#what-a-release-candidate-means)\n- [Where things stand](#where-things-stand)\n- [A month of hardening](#a-month-of-hardening)\n- [Accessible by default](#accessible-by-default)\n- [Testing and benchmarks](#testing-and-benchmarks)\n- [A reference implementation](#a-reference-implementation)\n- [Documentation](#documentation)\n- [AI tooling](#ai-tooling)\n- [Road to v1](#road-to-v1)\n- [FAQ](#faq)\n\n---\n\n## What a release candidate means\n\nThe beta froze the public API and promised that existing composables and components would keep their names, signatures, and behavior. A month and six releases later, that promise held — and it is now enforced mechanically: a repository check fails any pull request that changes the public surface ([#409](https://github.com/vuetifyjs/0/pull/409)).\n\nThe release candidate narrows scope further. Between now and v1.0:\n\n- **No breaking changes and no new features.** The beta still accepted additive changes; the RC does not. The single exception is a critical security vulnerability that cannot be fixed any other way — and it would be documented in the release notes.\n- **The time goes to testing.** Exercising the frozen surface against edge cases, accessibility passes, and security testing on top of the hardening the betas already shipped.\n- **Documentation and feedback.** The rest of the effort is documentation, and the RC window is the last chance for feedback to catch a problem before the API locks in for the whole 1.x line. An API that fights you, a doc that misleads, a behavior that surprises — report it at [issues.vuetifyjs.com](https://issues.vuetifyjs.com) or on [Discord](https://community.vuetifyjs.com).\n- **v1.0 is milestone-driven**, targeted for Q3 2026. Barring release-blocking discoveries, the RC is what v1.0 ships as — it releases when the milestones are met, not on a date.\n\nAfter v1.0, the surface is governed by semver: breaking changes only in major releases.\n\n---\n\n## Where things stand\n\nAt the beta announcement the totals were 49 components and 68 composables. Beta.0 itself shipped the [Tooltip](https://0.vuetifyjs.com/components/disclosure/tooltip) component with its [useTooltip](https://0.vuetifyjs.com/composables/plugins/use-tooltip) plugin and [createDataGrid](https://0.vuetifyjs.com/composables/data/create-data-grid); the freeze window added [useReducedMotion](https://0.vuetifyjs.com/composables/plugins/use-reduced-motion) in beta.2. The RC surface is **50 components, 71 composables, and 24 utilities**.\n\nThe RC also promotes the v1 stable set ([#470](https://github.com/vuetifyjs/0/pull/470)): the selection family — `createModel`, `createSelection`, `createSingle`, `createStep`, `createGroup`, `createNested` — plus `createRegistry` and the `useTheme`, `useStorage`, and `useBreakpoints` plugins are now API-locked for 1.0. They join the already-stable foundation and observer composables, bringing the stable surface to 16 composables and 17 utilities.\n\n| Maturity | Components | Composables | Utilities | What it means |\n|----------|-----------|-------------|-----------|---------------|\n| **Stable** | 0 | 16 | 17 | In use across releases, no planned breaking changes |\n| **Preview** | 40 | 55 | 7 | Feature-complete and documented |\n| **Draft** | 10 | 0 | 0 | Experimental or planned for a future release |\n\n::: info\nThe full list is on the [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix), with the current level for every component and composable.\n:::\n\nThe ten draft components — DatePicker, DateRangePicker, TimePicker, Otp, Alert, DataGrid, DataTable, Kanban, Virtualizer, and Tour — are experimental and sit outside the frozen surface. They are not committed to v1 and promote individually when ready.\n\n---\n\n## A month of hardening\n\nThe beta cycle ran on a weekly cadence — five follow-up releases between June 9 and the RC cut — and produced 184 commits: 60 fixes, 5 performance rewrites, and 66 documentation commits. The fixes cluster into a few themes:\n\n- **Security and input hardening** — composables were hardened against prototype pollution, CSS injection, and unbounded allocation ([#271](https://github.com/vuetifyjs/0/pull/271)); theme adapters now validate their CSS prefix ([#440](https://github.com/vuetifyjs/0/pull/440)) and popover anchor names are coerced to a safe charset ([#416](https://github.com/vuetifyjs/0/pull/416)).\n- **Overlays and the top layer** — a native modal `` paints above all z-index, so overlays teleported to `body` rendered underneath it. Snackbar and Portal can now teleport into the topmost open modal instead ([#397](https://github.com/vuetifyjs/0/pull/397)), and non-modal overlays no longer count toward stack blocking or scrim state ([#354](https://github.com/vuetifyjs/0/pull/354), [#352](https://github.com/vuetifyjs/0/pull/352)).\n- **SSR and adapter lifecycle** — CSP nonces are applied to server-rendered theme styles ([#441](https://github.com/vuetifyjs/0/pull/441)), adopted stylesheets are removed on dispose ([#424](https://github.com/vuetifyjs/0/pull/424)), and plugins defer factory work to install time so unused plugins no longer allocate resources ([#343](https://github.com/vuetifyjs/0/pull/343)).\n- **Selection and registry contracts** — disabled items can no longer slip in through the v-model sync path ([#426](https://github.com/vuetifyjs/0/pull/426)) or be toggled off ([#311](https://github.com/vuetifyjs/0/pull/311)), circular tree references are guarded ([#316](https://github.com/vuetifyjs/0/pull/316)), and registry cache consistency was tightened ([#331](https://github.com/vuetifyjs/0/pull/331)).\n- **Forms edge cases** — submitting a form with a field id of `0` ([#288](https://github.com/vuetifyjs/0/pull/288)), invalidating in-flight async validation ([#294](https://github.com/vuetifyjs/0/pull/294)), and committing parsed NumberField values before the reactivity round-trip completes ([#371](https://github.com/vuetifyjs/0/pull/371)).\n- **Renderless mode** — the element and handler contracts are now exposed through slot attributes across dialogs, form controls, Scrim, and Snackbar ([#327](https://github.com/vuetifyjs/0/pull/327)), so the consumer-owned-DOM path carries the same guarantees as the rendered one.\n\nPerformance work landed alongside: registry reordering moved from a Map rebuild to an order-array splice with windowed reindexing ([#273](https://github.com/vuetifyjs/0/pull/273)), proxy registry snapshots rebuild lazily on read ([#280](https://github.com/vuetifyjs/0/pull/280)), `createDataTable` replaced its reactive row registry with an event-driven version signal ([#328](https://github.com/vuetifyjs/0/pull/328)), and Overflow visibility checks dropped from O(n²) to O(n) per resize ([#417](https://github.com/vuetifyjs/0/pull/417)).\n\n---\n\n## Accessible by default\n\nThe largest user-facing change of the cycle is invisible until you turn on a screen reader. Every v0 component now ships a built-in English aria label through the locale system's new `ti` method ([#372](https://github.com/vuetifyjs/0/pull/372)) — \"translate if exists\" — which returns the translation or `undefined` instead of echoing the key:\n\n```ts\nconst label = locale.ti('Button.label') ?? 'Button'\n```\n\nApps with no locale plugin get meaningful accessible names (WCAG 4.1.2) with zero locale strings bundled into the runtime. The canonical English catalog is exposed as an optional `@vuetify/v0/locale/messages/en` export for seeding translations.\n\nThe RC audit of the project's [PHILOSOPHY](https://github.com/vuetifyjs/0/blob/master/packages/0/PHILOSOPHY.md) document surfaced two more attribute-compliance bugs, fixed in the same pass ([#451](https://github.com/vuetifyjs/0/pull/451)): ExpansionPanel emitted `data-selected=\"false\"` instead of dropping the attribute, and Slider and Rating dropped `aria-disabled` entirely when enabled instead of emitting a concrete boolean for assistive tech.\n\nBeta.2 also added the [useReducedMotion](https://0.vuetifyjs.com/composables/plugins/use-reduced-motion) plugin ([#278](https://github.com/vuetifyjs/0/pull/278)) — a three-way `system` / `always` / `never` mode over `prefers-reduced-motion`, with a reactive flag and a body data attribute for CSS-only consumers:\n\n```ts\nimport { useReducedMotion } from '@vuetify/v0'\n\nconst motion = useReducedMotion()\n\nmotion.isReduced.value // should motion be minimized right now?\nmotion.select('always') // force reduce\nmotion.select('system') // follow the OS setting\n```\n\n---\n\n## Testing and benchmarks\n\nCurrent numbers:\n\n- 6,338 passing unit tests across 159 test files.\n- 97.8% average test coverage across the 113 primitives with recorded metrics; 78 of them sit at 100%.\n- 13 benchmark suites with 399 recorded cases. Benchmark history is now regenerated on every release against a fixed apparatus ([#394](https://github.com/vuetifyjs/0/pull/394), [#422](https://github.com/vuetifyjs/0/pull/422)), so regressions show up as history, not anecdotes.\n- 100% TypeScript and no runtime CSS. The package ships no styles, and exports are annotated so bundlers can drop unused composables.\n\n::: info\nThe [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) documents the methodology and per-primitive results.\n:::\n\n---\n\n## A reference implementation\n\nNumbers describe the surface; [DevKey](https://devkey.vuetifyjs.com) shows it in use. The developer API dashboard from the [alpha tutorial](/blog/announcing-vuetify0-alpha/) is maintained as the reference v0 implementation and is updated in lockstep with releases — including this RC. Its command palette is a good picture of how the primitives compose: a `Dialog`, an `Input`, `createFilter`, `useHotkey`, and `useVirtualFocus` in one component (condensed from the source):\n\n```html { resource=\"src/components/DkCommandPalette.vue\" }\n\n```\n\nNo positioning math, no key-event switch statements, no filter re-implementation — the component is mostly wiring. The full source is at [vuetifyjs/devkey](https://github.com/vuetifyjs/devkey), and the [integration guide](https://0.vuetifyjs.com/guide/integration/devkey) walks through the architecture.\n\n---\n\n## Documentation\n\nThe 61 documentation commits were mostly one push: a full audit of the guide pages. Component and composable pages were normalized to one structure ([#392](https://github.com/vuetifyjs/0/pull/392)), FAQ sections homogenized ([#395](https://github.com/vuetifyjs/0/pull/395)), examples converted to multi-file copy-paste blocks ([#382](https://github.com/vuetifyjs/0/pull/382)), and stale data corrected across the board ([#458](https://github.com/vuetifyjs/0/pull/458), [#461](https://github.com/vuetifyjs/0/pull/461)).\n\nNew pages landed for [testing](https://0.vuetifyjs.com/guide/tooling/testing) ([#283](https://github.com/vuetifyjs/0/pull/283)) and a [core terminology glossary](https://0.vuetifyjs.com/guide/essentials/glossary) ([#410](https://github.com/vuetifyjs/0/pull/410)). The release pipeline moved to [Changesets](https://github.com/changesets/changesets) ([#365](https://github.com/vuetifyjs/0/pull/365)), and the docs now derive feature counts directly from the maturity manifest instead of hand-maintained numbers ([#378](https://github.com/vuetifyjs/0/pull/378)).\n\nFor learning the framework, [Vuetify0 Skillz](https://0.vuetifyjs.com/skillz) — interactive, hands-on tutorials built into the docs, itself in beta — now counts three guided tours: Using the Docs, Using Search, and Using Examples, the newest landing alongside the RC ([#459](https://github.com/vuetifyjs/0/pull/459)) to walk through live examples, the Playground, and multi-file recipes. Every page is also tagged Beginner, Intermediate, or Advanced, and the [skill filter](https://0.vuetifyjs.com/guide/essentials/using-the-docs#skill-levels-learning-tracks) trims the navigation to the levels you choose.\n\n---\n\n## AI tooling\n\n\n\nAs before, each documentation page has an Ask AI option, the docs publish `llms.txt` and `llms-full.txt`, and the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) connects an editor to the API reference. The MCP data is synced to the RC.\n\n::: info\nThe [Vuetify MCP guide](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp#claude-code) covers connecting it to an editor.\n:::\n\n---\n\n## Road to v1\n\nThe release candidate is the last milestone before v1.0:\n\n- **Alpha** (April 7, 2026) — open for feedback, APIs mostly stable\n- **Beta** (June 2, 2026) — API freeze; stability, documentation, and edge cases\n- **RC** (July 2, 2026) — final testing and documentation; no new features\n- **v1.0** (Q3 2026) — milestone-driven; ships when the milestones are met\n\nSee the [roadmap](https://0.vuetifyjs.com/roadmap) for details.\n\n---\n\n## FAQ\n\n### What changes at RC?\n\nScope, not API. The beta froze names and signatures but still accepted additive features; the RC accepts none. Between now and v1.0 only release-blocking fixes and documentation land — the focus is testing, security review, and feedback. New features resume after v1.\n\n### Can I use the RC in production?\n\nCode written against the beta API ran through six beta releases and the RC without changes, and the same guarantee carries to v1: the surface is frozen and the freeze is enforced by a repository check on every pull request.\n\n### Will the draft components ship in v1?\n\nThe ten draft components are experimental and outside the frozen surface, and each is already plotted on the public [milestones](https://github.com/vuetifyjs/0/milestones): table components in v1.1, product tours in v1.2, virtualized lists, Kanban, and OTP input in v1.3, then time and date pickers in v1.4 and v1.5. Each promotes when it meets the bar.\n\n### Will there be breaking changes between RC and v1?\n\nNone are planned. The only thing that could force one is a critical security vulnerability with no other fix, and it would be documented in the release notes.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They don't conflict, and you can adopt v0 primitives inside a Vuetify 4 app today. Meanwhile, Vuetify 5's internals are being refactored to use v0 directly — the frozen surface is the foundation that work builds on.\n\n### How do I report a problem or contribute?\n\nBug reports go through [issues.vuetifyjs.com](https://issues.vuetifyjs.com) — issues opened outside the generator are closed automatically. The [contributing guide](https://0.vuetifyjs.com/introduction/contributing) covers local setup and conventions, and [Discord](https://community.vuetifyjs.com) is the place to discuss before you build.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Report an issue** — [issues.vuetifyjs.com](https://issues.vuetifyjs.com)\n- **Contributing** — [Contributing guide](https://0.vuetifyjs.com/introduction/contributing)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Documentation is at [0.vuetifyjs.com](https://0.vuetifyjs.com); source is on [GitHub](https://github.com/vuetifyjs/0).*\n","packages/docs/src/pages/en/blog/announcing-vuetify0-v1.md":"---\nlayout: blog\nmeta:\n title: Announcing Vuetify0 1.0\n description: Vuetify0 1.0 — a headless meta-framework for Vue 3. Its foundation is now locked under semver — the logic layer plus a stable component spine.\n keywords: Vuetify0 1.0, Vuetify0 v1, headless Vue, meta-framework, composables, WAI-ARIA, semver\n---\n\n\n\n# Announcing Vuetify0 1.0\n\nI've built Vuetify0 — the framework, its documentation, and everything surrounding it — with one express intent: to take everything I've learned over a decade of building Vuetify and pour it into something that will stand the test of time. The principles and the underlying functionality that drive v0 weren't invented for this release; they were honed over ten years of Vuetify, tested against real applications, and only then extracted into a foundation you can build on directly.\n\nVuetify0 is 1.0. The release candidate held — the frozen surface shipped through the validation window without a breaking change — and the package is now `@vuetify/v0`, no tag required. For most projects, 1.0 is the signal that a library is safe to build on. For a framework whose job is to build other frameworks, it means something more precise: the contracts are locked.\n\n🖊️ John Leider • 📅 July 22nd, 2026\n\n\n\n---\n\n\n\n## Table of Contents\n\n- [What 1.0 means](#what-1-0-means)\n- [What Vuetify0 is](#what-vuetify0-is)\n- [Headless, accessible by default](#headless-accessible-by-default)\n- [The whole logic layer](#the-whole-logic-layer)\n- [Where it sits in the stack](#where-it-sits-in-the-stack)\n- [Logic without components](#logic-without-components)\n- [Proven, not promised](#proven-not-promised)\n- [The road to v1.x](#the-road-to-v1-x)\n- [Get started](#get-started)\n- [FAQ](#faq)\n\n---\n\n## What 1.0 means { #what-1-0-means }\n\nI want to be precise about what shipped, because it is easy to read \"1.0\" as \"every component is finished.\" Not all of them are — and for a meta-framework, that is by design.\n\nVuetify0 is a headless meta-framework — a logic layer you build UI libraries *on top of*. Its value is not a catalog of buttons; it is the guarantee that the primitives underneath your buttons will not move. So 1.0 is a promise about the foundation:\n\n- **The stable set is locked under semver.** Nineteen composables, seventeen utilities, and thirteen components — the selection family, the registry, the foundation and observer primitives, the `useTheme`, `useStorage`, and `useBreakpoints` plugins, and the structural spine the rest of the library is built from (Tabs, Checkbox, Radio, Switch, the providers, and more) — carry a no-breaking-changes guarantee for the entire 1.x line. Breaking changes wait for a major.\n- **The freeze is enforced mechanically.** A repository check fails any pull request that alters the public surface. The guarantee is not a promise in a blog post; it is CI.\n- **The rest of the components promote individually.** Beyond that stable spine, the remaining components are `preview` and graduate onto the frozen foundation one at a time, each on its own milestone rather than gated behind a single number. Stabilizing the engine and its load-bearing components first is exactly the right order for a meta-framework — everything downstream inherits that stability.\n\nIf you have used Vuetify at any point in the last decade, you have relied on this logic without seeing it — selection, registries, focus management, theming. 1.0 is that logic, extracted, hardened, and frozen, so you can build on it directly.\n\n![The Vuetify0 maturity matrix — 49 stable primitives across 15 categories at 1.0](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-v1/maturity-matrix-dark.png \"The Vuetify0 maturity matrix\"){ width=100% }\n\n::: info\nThe [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix) lists the current level for every component, composable, and utility.\n:::\n\n---\n\n## What Vuetify0 is\n\nIf this is your first time hearing about it: **Vuetify0 (v0) is a headless meta-framework for Vue 3.** Logic only, zero styling. You do not install v0 to get a button — you install it to *build* the button your design system paints.\n\nThat distinction is the whole point. Most component libraries hand you finished, opinionated UI and ask you to fight the defaults when they do not fit. Most headless libraries hand you a dozen primitives and leave the rest to you. v0 aims at the layer underneath both: the complete state, accessibility, and behavior of a UI library, exposed as composables and unstyled compound components, with nothing rendered until you say so.\n\nThe acid test v0 holds itself to: strip every stylesheet from the page, and the components still work — still manage focus, still enforce selection rules, still announce their state to a screen reader. If styling is load-bearing, it is not headless.\n\nThere is no plugin to register and nothing is global. Everything is a tree-shakeable import:\n\n```ts\nimport { createSelection, useBreakpoints } from '@vuetify/v0'\nimport { Tabs, Dialog } from '@vuetify/v0/components'\n```\n\n---\n\n## Headless, accessible by default\n\nHeadless is not an excuse to ship less. Every v0 component is WAI-ARIA correct out of the box, SSR-safe by default, and exposes each piece of its state as a `data-*` attribute so a stylesheet — or a design system — can react to it without touching the logic.\n\nAccessibility does not wait for a locale plugin, either. Every component ships a built-in English aria label through the locale system's `ti` method — \"translate if exists\" — which returns a translation when one is registered and falls back to the inline default otherwise:\n\n```ts\nconst label = locale.ti('Button.label') ?? 'Button'\n```\n\nAn app with no i18n configured still gets meaningful accessible names (WCAG 4.1.2), with zero locale strings bundled into the runtime. Add a locale plugin later and the same components localize with no code change. That is the pattern throughout v0: correct defaults for the beginner, full control for the framework author.\n\nThe release cycle closed with a dedicated accessibility pass — carousel autoplay that pauses on focus (WCAG 2.2.2), `aria-current` on tree items, explicit group labels on sliders and splitters, and more — so the guarantee holds in the details, not just the headline.\n\n---\n\n## The whole logic layer\n\nThe number that matters is not how many buttons v0 draws — it is how much of the hard logic you never have to write again. At 1.0, v0 ships **40 components, 71 composables, and 24 utilities** across fifteen categories, with ten more components already scheduled through v1.5.\n\nBefore you write custom logic, the odds are v0 already has the primitive:\n\n| You need | Reach for |\n|----------|-----------|\n| Single, multi, grouped, or nested selection | `createSingle`, `createSelection`, `createGroup`, `createNested` |\n| Wizard / carousel / step tracking | `createStep` |\n| Form validation with async + dirty tracking | `createForm`, `createValidation` |\n| Autocomplete / combobox | `createCombobox` |\n| Paginated, virtualized, sortable, filterable data | `createPagination`, `createVirtual`, `createSortable`, `createFilter`, `createDataTable` |\n| Floating UI — popover, tooltip, menu | `usePopover` |\n| Roving tabindex / virtual focus | `useRovingFocus`, `useVirtualFocus` |\n| Breakpoints, theme, RTL, locale, storage | `useBreakpoints`, `useTheme`, `useRtl`, `useLocale`, `useStorage` |\n\nThis is where \"meta-framework\" stops being marketing. The goal is breadth no point-solution can match — the selection, forms, data, and system primitives that every serious UI library re-implements, written once, tested once, and shared. See how that stacks up against a typical headless library in [Beyond a Component Library](https://0.vuetifyjs.com/introduction/why-vuetify0#beyond-a-component-library).\n\n---\n\n## Where it sits in the stack\n\nv0 is the bottom of a three-layer stack, and each layer only depends on the one below it:\n\n- **Vuetify0** — headless logic (this release)\n- **Design systems** — Material, and the in-development Emerald, Helix, and Onyx — each a *complete framework* with its own visual language, built directly on the v0 primitives\n- **Vuetify** — orchestration and the defaults system that ties it together\n\nThe clearest proof that the foundation is solid is that we are rebuilding on it ourselves. Vuetify's own internals are being refactored to consume v0 directly — the frozen 1.0 surface is exactly what that work stands on. A decade of Vuetify — 41k+ GitHub stars, millions of monthly downloads, MIT-licensed with nothing gated behind a paid tier — is being rebuilt from this layer up.\n\n---\n\n## Logic without components\n\nThe fastest way to understand v0 is to use a composable with nothing rendered. `createSelection` is a complete multi-selection engine — mandatory rules, batch operations, enrollment — and it does not care whether you ever draw a list:\n\n```ts\nimport { createSelection } from '@vuetify/v0'\n\nconst selection = createSelection({ mandatory: true })\n\nconst home = selection.register({ value: 'home' })\nconst search = selection.register({ value: 'search' })\n\nhome.select() // ticket self-method — select this item\nhome.isSelected.value // -> true\nselection.selectedIds // -> reactive Set of selected ids\nselection.selectedValues.value // -> reactive Set { 'home' }\n```\n\nWhen you *do* want UI, the same logic backs a headless compound component. The root owns state; the sub-components read it through context — no prop-drilling between siblings:\n\n```html\n\n\n\n```\n\nBoth examples run live in the docs — [createSelection](https://0.vuetifyjs.com/composables/selection/create-selection) and [Tabs](https://0.vuetifyjs.com/components/disclosure/tabs) — and every example on the site is a multi-file, copy-paste recipe you can open in the playground.\n\nWhere it gets interesting is at application scale. [DevKey](https://devkey.vuetifyjs.com), a developer API dashboard, is the reference implementation — maintained in lockstep with every release. Its dashboard is almost entirely wiring: a `Tabs` view over a data layer that is `useStorage` and nothing more, driving the components that render it.\n\n![The DevKey dashboard — API-key management built on Vuetify0](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-v1/devkey-dashboard.png \"DevKey — the Vuetify0 reference implementation\"){ width=100% }\n\nThe code behind that view is mostly this:\n\n```html\n\n\n\n```\n\nThe stable spine here — `Tabs` and the `useStorage`-backed data layer — is exactly what 1.0 freezes. The components it orchestrates (`DkTable`, the create-key dialog, the command palette) are built on preview primitives today; the data-table components promote to stable in v1.1, and the rest follow across the 1.x line. The wiring above doesn't change when they do. Build it yourself with the [DevKey integration guide](https://0.vuetifyjs.com/guide/integration/devkey).\n\n---\n\n## Proven, not promised\n\nThe 1.x guarantee is only worth as much as the testing behind it. Heading into 1.0:\n\n- **6,200+ passing unit tests** across the primitives, with average coverage above 98% and 80 of them at 100%.\n- **16 benchmark suites** regenerated on every release against a fixed apparatus, so regressions surface as history rather than anecdotes — `mergeDeep`, for instance, clears 1.7M+ ops/sec on a shallow merge, and a recent rewrite cut large-grid sort time by roughly 28×. The [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) documents the methodology and per-primitive results.\n- **A dedicated security pass** hardened the composables against prototype pollution and CSS injection, and validated theme, locale, and feature-flag inputs against safe charsets.\n- **100% TypeScript, zero runtime CSS.** The package ships no styles, and exports are annotated so bundlers drop anything you do not import.\n\nv0 is also built to be understood by the tools people now build with: every documentation page has an Ask AI option, the docs publish `llms.txt` and `llms-full.txt`, and the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) wires the full API reference into your editor.\n\n---\n\n## The road to v1.x { #the-road-to-v1-x }\n\n1.0 locks the engine. Everything on the roadmap from here is components promoting onto that stable foundation — and because the logic already shipped and is already frozen, each one is assembly over a proven primitive, not a rewrite. The milestones are public:\n\n- **v1.1** — DataTable and DataGrid components over the shipped `createDataTable` and `createDataGrid`, plus the Alert component\n- **v1.2** — Tour, a headless primitive for guided product tours and feature discovery\n- **v1.3** — Virtualizer, Kanban, and Otp over the shipped `createVirtual`, `createKanban`, and `createOtp`\n- **v1.4** — TimePicker, headless and accessible time selection\n- **v1.5** — DatePicker and DateRangePicker for single dates and ranges\n\nBeyond the components, the first design systems — Emerald and Onyx — come next, and the whole surface is authored for forward-compatibility with Vue Vapor. Track it on the [roadmap](https://0.vuetifyjs.com/roadmap) and the [milestones](https://github.com/vuetifyjs/0/milestones).\n\n---\n\n## Get started\n\n```bash\npnpm install @vuetify/v0\n```\n\nNo plugin to register, nothing global. Import what you need:\n\n```ts\nimport { createSelection } from '@vuetify/v0'\nimport { Dialog } from '@vuetify/v0/components'\n```\n\nThe [getting-started guide](https://0.vuetifyjs.com/introduction/getting-started) covers setup, and [Vuetify0 Skillz](https://0.vuetifyjs.com/skillz) walks through the docs, search, and examples interactively.\n\n---\n\n## FAQ\n\n### Does 1.0 mean the components are stable?\n\nThe spine is. Thirteen components — the structural and selection primitives the rest of the library builds on, like Tabs, Checkbox, Radio, and Switch — are stable and semver-locked at 1.0, alongside nineteen composables and seventeen utilities. The remaining components are `preview` and promote individually as they meet the bar. For a meta-framework, the engine and its load-bearing components are what must not move first; everything downstream inherits that stability.\n\n### Can I use it in production?\n\nYes. Code written against the beta API ran through six beta releases, the release candidate, and into 1.0 without changes, and the surface freeze is enforced by CI on every pull request. The stable set will not break under you within 1.x.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They do not conflict, and you can adopt v0 primitives inside a Vuetify 4 app today. Vuetify's own internals are being refactored to consume v0 directly.\n\n### When do the draft components ship?\n\nEach is plotted on the public [milestones](https://github.com/vuetifyjs/0/milestones): table components in v1.1, tours in v1.2, virtualized lists, Kanban, and OTP in v1.3, then time and date pickers in v1.4 and v1.5. Each promotes when it is ready.\n\n### How do I report a problem or contribute?\n\nBug reports go through [issues.vuetifyjs.com](https://issues.vuetifyjs.com). The [contributing guide](https://0.vuetifyjs.com/introduction/contributing) covers local setup, and [Discord](https://community.vuetifyjs.com) is the place to discuss before you build.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Report an issue** — [issues.vuetifyjs.com](https://issues.vuetifyjs.com)\n- **Contributing** — [Contributing guide](https://0.vuetifyjs.com/introduction/contributing)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Documentation is at [0.vuetifyjs.com](https://0.vuetifyjs.com); source is on [GitHub](https://github.com/vuetifyjs/0).*\n","packages/docs/src/pages/en/blog/april-2025-update.md":"---\nlayout: blog\nmeta:\n title: April 2025 Update\n description: April delivered tangible progress on MCP, the new theming engine, component refinements, docs, ESLint v4, and tooling across the Vuetify ecosystem.\n keywords: Vuetify April 2025, Model Context Protocol, Vuetify theming, ESLint flat config, Vuetify Playground, Tailwind integration\n---\n\n# April 2025 Update\n\nThis month is packed full of exciting updates and progress across the Vuetify ecosystem.\n\n---\n\n🖊️ John Leider • 📅 May 1st, 2025\n\n\n\n---\n\n## Building Momentum\n\nApril was a month of execution. Multiple long-standing features landed, foundational work for future flexibility accelerated, and we’re seeing clearer paths emerge around how Vuetify can scale—technically, visually, and in terms of contributor access.\n\nFrom labs promotions like VNumberInput and VSnackbarQueue, to the start of public-facing infrastructure like @vuetify/mcp, the team is pushing forward on all fronts. This kind of momentum is what sets up big things for the summer and fall—especially as we close in on shipping the new theming engine and continue to clean up performance bottlenecks.\n\n::: success\n\nCool example of the month: [VScrollSelect](https://play.vuetifyjs.com/playgrounds/CS5a9g) by [J-Sek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n- [Building Momentum](#building-momentum)\n - [Releases](#releases)\n - [MCP soon](#mcp-soon)\n - [Theming evolved](#theming-evolved)\n - [Performance improvements](#performance-improvements)\n- [Ecosystem updates](#ecosystem-updates)\n - [DX Efforts](#dx-efforts)\n - [Unvuetify](#unvuetify)\n - [Vuetify One teams](#vuetify-one-teams)\n - [Vuetify Play](#vuetify-play)\n - [Vuetify Issues](#vuetify-issues)\n- [The Road Ahead](#the-road-ahead)\n\n### Releases\n\nThe month of April saw the release of \"Andromeda\", the latest version of Vuetify, which includes a host of new features, improvements, and bug fixes. Most notably, [VNumberInput](https://vuetifyjs.com/components/number-inputs/) and [VSnackbarQueue](https://vuetifyjs.com/components/snackbar-queue/) were promoted from Labs to the Core framework! We've also followed up with several patch releases to address bugs and improve stability.\n\n![Hero image for andromeda release notes](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/andromeda-release-banner.png \"Andromeda release notes hero image\"){ height=150}\n\n**Details:**\n\n- [v3.8.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.0)\n- [v3.8.1](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.1)\n- [v3.8.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.2)\n- [v3.8.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.3)\n\n### MCP soon\n\nOne of the most exciting developments underway is the creation of [MCP: Model Context Protocol](https://modelcontextprotocol.io/introduction) and our efforts to provide LLMs with the most up to date framework information using it. The **@vuetify/mcp** package represents our attempt to improve how developers interact with Vuetify through AI and LLM-powered tools.\n\n![Image of outdated LLM response showing Vuetify 2](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/outdated-llm-responses.png \"Outdated LLM response\"){ height=500 }\n\nToday, developers often receive outdated or inaccurate help from AI chatbots because these models aren't trained on Vuetify’s latest updates and new innovations we're building. MCP is our answer to that problem.\n\nWe want to ensure developers have access to contextually accurate, up-to-date, and deeply integrated Vuetify tools, documentation, snippets and much more right when they need it.\n\n![Image of VSCode in Agent mode](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/vuetify-mcp.png \"VSCode agent querying vuetify-mcp\"){ height=550 }\n\nThis initiative won't just improve AI responses—it will fundamentally change how accessible and powerful Vuetify development can be.\n\nMCP is a major step towards empowering our community even further and we look forward to making the package public soon (like very soon).\n\n**Details:** [@vuetify/mcp](https://github.com/vuetifyjs/mcp)\n\n### Theming evolved\n\nAlongside MCP, another major focus has been Vuetify’s theming system. Our goal is to enable full customization of Vuetify — allowing developers to use any UI library, support long-awaited Material Design 3, and adapt the framework effortlessly to a wide variety of design systems. This includes things such as:\n\n- First party Tailwind integration.\n- Support for unstyled mode that includes only the necessary styles for components to function.\n- New and improved ways of interacting with the theme system.\n\nThe work happening right now is a foundational step toward that vision. We're targeting an October reveal for this theming overhaul and will be teasing more about it in the months ahead. Here's a small preview of the new theming API in action:\n\n```html\n\n\n\n```\n\nThese changes focus on expanding Vuetify’s flexibility, making it an even more powerful tool for projects of every scale and style.\n\n**Details:**\n\n- [PR#21244](https://github.com/vuetifyjs/vuetify/pull/21244)\n- [PR#21224](https://github.com/vuetifyjs/vuetify/pull/21224)\n- [Commit 3190331](https://github.com/vuetifyjs/vuetify/commit/3190331e70f42b7fdf4d7ee04f662b15eefde026)\n- [Commit abfdb77](https://github.com/vuetifyjs/vuetify/commit/abfdb777e0e00d4a1798f52d7e4c118e7409fcb9)\n\n### Performance improvements\n\nThis month, we focused on performance improvements across the board, including saving a bunch of overhead associated with computed caching and call frequency.\n\nFor those anticipating the release of [VTreeview](https://vuetifyjs.com/components/treeview), there has been movement on an [upstream](https://github.com/vuejs/babel-plugin-jsx/issues/712) issue that was bottlenecking performance. Once released, we will be able to wrap up the component and move it to the Core framework 🎉.\n\n**Details:**\n\n- [PR#21167](https://github.com/vuetifyjs/vuetify/pull/21167)\n- [Commit 8d798e3](https://github.com/vuetifyjs/vuetify/commit/8d798e36baf86f04eebf2828be0cffa0dc31053a)\n- [vue-macros#942](https://github.com/vue-macros/vue-macros/pull/942)\n\n## Ecosystem updates\n\nFrom the release of team subscriptions for Vuetify One, to major rewrites of tools like Vuetify Create and the modernized Vuetify Issues site, April was about refining the developer experience across the board. New tooling like @unvuetify is pushing boundaries with Nuxt and auto-import support, and MCP continues to bridge the gap between AI and accurate Vuetify usage.\n\n### DX efforts\n\nA major focus has been making Vuetify more accessible to developers at all levels.\n\n- **MCP**: Coding companion that provides contextually accurate, up-to-date, and deeply integrated Vuetify tools, documentation, snippets and much more right when you need it.\n- **Vuetify Create**: Multiple updates with improvements and planning for 3.0 representing a total rewrite of our project scaffolding tool.\n- **Labs Components**: Added auto-import support by default for labs components.\n- **Internationalization**: Expansion of translations including Spanish additions to the documentation.\n- **Modern ESLint Configuration**: Complete rewrite of our ESLint configuration with a functional approach, being rolled out across all repositories.\n\n**Details:**\n\n- [create/releases](https://github.com/vuetifyjs/create/releases)\n- [ESLint configuration](https://github.com/vuetifyjs/eslint-config-vuetify)\n- [Commit 98ef110](https://github.com/vuetifyjs/vuetify-loader/commit/98ef1106fb3875a5079d309986de61e12cd5683d)\n\n### Unvuetify\n\nThe motivation behind @unvuetify is simple: existing plugins aren’t keeping up with the evolving capabilities of Vue and Nuxt. Features like lazy hydration, auto-importing, and tree shaking are either missing or cumbersome in older tools.\n\nThis monorepo isn’t a hard replacement — you can still use vite-plugin-vuetify or webpack-plugin-vuetify if they suit your needs. But if you're working with Nuxt 3, Vue 3.5, or want more flexibility and performance, @unvuetify is built for you.\n\nCreated [@unvuetify](https://github.com/userquin/unvuetify-monorepo) repository to enable:\n\n- Vue Lazy Hydration support: ready to use Vue Lazy Hydration with Vuetify components and Nuxt 3/4.\n- Extensible: allow prefixing Vuetify components, directives and composables with Vuetify prefix.\n- VSCode directives suggestions.\n- Nuxt 3/4 utilities: drop a simple Nuxt module and it will auto-import all Vuetify components, directives and composables for you.\n- and more...\n\n**Details:**\n\n- [@unvuetify/shared](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/shared): utilities to resolve Vuetify components and directives\n- [@unvuetify/unimport-presets](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/unimport-presets): presets to auto-import Vuetify composables and directives\n- [@unvuetify/unplugin-vue-components-resolvers](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/unplugin-vue-components-resolvers): resolvers to auto-import Vuetify components and directives\n- [@unvuetify/vite-styles-plugin](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/styles-plugin): Vite plugin to load Vuetify sass/scss styles with Nuxt 3 SSR support\n- [@unvuetify/nuxt-utils](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/nuxt-utils): utilities to configure Vuetify composables, directives, components and styles in your Nuxt 3 application\n\n### Vuetify One teams\n\nWe have recently updated Vuetify One to support teams, which allows you to invite up to 25 members to collaborate on your Vuetify projects. This update is designed to share subscription benefits across your team.\n\n![Image of Vuetify One teams subscription panel](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/one-teams.png \"Vuetify One teams subscription panel\"){ height=400 }\n\nSubscribe by logging into Vuetify One (top right) and clicking on **Subscriptions**. If you have any issues or questions, please reach out to us on [Discord](https://community.vuetifyjs.com).\n\n**Details:** [PR#15](https://github.com/vuetifyjs/one/pull/15)\n\n### Vuetify Play\n\nOf the many changes coming to [Vuetify Play](https://play.vuetifyjs.com/), one of the longest requested features is finally here: **router support**! This means you can now create and share Vuetify Play projects that include Vue Router, allowing for more complex and interactive examples.\n\n![Image of Vuetify Play with router support](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/play-router.png \"Vuetify Play with router support\"){ height=250 }\n\nWe are also in the process of updating the entire Vuetify Play interface to be more intuitive and user-friendly. This includes a new design, improved navigation, and better organization of examples and components. We look forward to sharing more details in the coming months.\n\n**Details:**\n\n- [PR#7](https://github.com/vuetifyjs/play/pull/7)\n- [Commit 0e89a33](https://github.com/vuetifyjs/play/commit/0e89a334f241d440987908a456c205bed53e96d6)\n\n### Vuetify Issues\n\nWe are wrapping up the new [Vuetify Issue Generator](https://issues.vuetifyjs.com/), which will replace the current system (still on Vuetify v1.5!).\n\n\n\nThe new interface is faster, clearer, and built with Vuetify 3 from the ground up.\n\n## The Road Ahead\n\nMay is all about delivery. MCP will ship publicly, and early previews of the new theming system will start rolling out with documentation and migration guides. We're also beginning to lay the foundation for Vuetify 4. The focus is simple: ship real features, reduce friction, and keep moving fast.\n\nMore to come next month—stay tuned.\n","packages/docs/src/pages/en/blog/april-2026-update.md":"---\nlayout: blog\nmeta:\n title: April 2026 Update\n description: April shipped the Vuetify0 v1.0.0 public alpha — 46 headless components, 63 composables — plus 3 Vuetify patches, MCP v0.7.0, and ESLint 10 support.\n keywords: Vuetify April 2026, Vuetify0 v1.0.0 alpha, VTooltip cursor, VVideo controls, VNumberInput grouping, MCP playground tools, useTheme reactive\n---\n\n\n\n# April 2026 Update\n\n**Vuetify0 went public this month.** On April 7, v0 published its first 1.0 alpha alongside a [public announcement](/blog/announcing-vuetify0-alpha/) — 46 components, 63 composables, and a complete picture of where v0 fits in the next-generation stack. Two more alphas followed in the same month, the framework shipped three patches, and the MCP server gained playground and link tools.\n\n![Hero image for April update](https://cdn.vuetifyjs.com/docs/images/blog/april-2026-update/april-hero.png \"April hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 May 4th, 2026\n\n\n\n---\n\n## Going public\n\nApril was the alpha launch. **847 commits** across 14 active repositories, **52 merged PRs**, and **14 releases**, with [Vuetify0 v1.0.0-alpha.0](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.0) (April 7) at the center of it all. v0 alone shipped **756 commits** across four releases — v0.2.1, v1.0.0-alpha.0, v1.0.0-alpha.1, and v1.0.0-alpha.2 — culminating with reactive-by-default theming and locale, and with new headless Carousel, Image, NumberField, and Progress components. On the framework side, [J-Sek](https://github.com/J-Sek) drove most of April's 13 merged PRs alongside contributions from [userquin](https://github.com/userquin), [joatansampaio](https://github.com/joatansampaio), [12rambau](https://github.com/12rambau), [mueller-jens](https://github.com/mueller-jens), and [AriPerkkio](https://github.com/AriPerkkio). And the [Vuetify → Vuetify0 migration](https://vuetifyjs.com/blog/march-2026-update/) crossed its first finish line, with `display` now delegating to v0's `createBreakpoints`.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Spotlight: Vuetify0 Alpha](#vuetify0-alpha)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Vuetify MCP v0.7.0](#vuetify-mcp)\n* [Tooling Updates](#tooling-updates)\n* [Snips v2.0.0](#snips-v2)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [Product Updates](#product-updates)\n* [April 2026 Changelog](#april-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nApril shipped **14 releases across 6 repositories**. The framework patched twice (v4.0.5, v4.0.6) on the v4 line and once (v3.12.5) on the v3 line. v0 published four — including its first **v1.0.0-alpha.0** on April 7. The MCP server hit **v0.7.0**, ESLint Config landed four (**v4.5.0** through **v4.6.2**) including ESLint 10 support, the UnoCSS preset shipped **v0.3.0**, and the codemods CLI shipped **v1.0.6**.\n\n\n\n### Key Improvements\n\n* **[Vuetify0 v1.0.0-alpha.0](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.0)** — public alpha with 46 components and 63 composables ([announcement](/blog/announcing-vuetify0-alpha/))\n* **[VTooltip](/components/tooltips/)** — `target=\"cursor\"` now works for hoverable tooltips (pending v4.0.7)\n* **[VVideo](/components/videos/)** — Standalone `VVideoControls` component and progress bar shown by default (v4.0.6 Labs)\n* **[VPagination](/components/paginations/) / [VDataTableFooter](/components/data-tables/basics/)** — Ability to hide the last page (pending v4.0.7)\n* **[VNumberInput](/components/number-inputs/)** — `grouping` prop for thousands separator (pending v4.0.7)\n* **[VExpansionPanels](/components/expansion-panels/)** — Additional customization props (pending v4.0.7)\n* **display** — Migrated to v0's `createBreakpoints` (pending v4.0.7)\n* **[Vuetify MCP v0.7.0](https://github.com/vuetifyjs/mcp/releases/tag/v0.7.0)** — Playground and link CRUD tools\n\nView the complete list of changes in the [Full Changelog](#april-2026-changelog).\n\n**Details:**\n\n* [v4.0.6](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.6)\n* [v4.0.5](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.5)\n* [v3.12.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.5)\n* [Vuetify0 v1.0.0-alpha.2](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.2)\n* [Vuetify0 v1.0.0-alpha.1](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.1)\n* [Vuetify0 v1.0.0-alpha.0](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.0)\n\n---\n\n## Spotlight: Vuetify0 Alpha { #vuetify0-alpha }\n\n\n\n
\n\nAfter almost two years of building, **Vuetify0 published its first 1.0 alpha on April 7**. The release ships **46 components** and **63 composables** of headless Vue primitives — 100% TypeScript, zero styles, and built from the ground up to power custom UI libraries, design systems, and the Vuetify ecosystem itself.\n\nThe alpha was [announced in a dedicated post](/blog/announcing-vuetify0-alpha/) the same day, covering what v0 is, who it's for, what it ships with, and how it fits into the stack underneath the upcoming **Vuetify 5**, design systems built on Paper, and the existing **Vuetify 4** framework.\n\n**Maturity at alpha:**\n\n| Maturity | Components | Composables | What it means |\n|----------|------------|-------------|----------------------------|\n| Stable | 0 | 6 | API locked, production-ready |\n| Preview | 34 | 54 | Implemented, API may change |\n| Draft | 13 | 3 | Planned or in early development |\n\n**What followed:** Two more alpha releases shipped in the same month. **v1.0.0-alpha.1** (April 21) added the headless **Carousel** and **Image** components plus security-audit fixes across foundational composables. **v1.0.0-alpha.2** (April 28) made `useTheme`, `useLocale`, and `useFeatures` reactive-by-default, widened `SplitterPanel` size props, and codified the [reactive-default convention](https://0.vuetifyjs.com/guide/fundamentals/reactivity/) for plugins.\n\n**Details:**\n\n* [Announcing the Vuetify0 Alpha](/blog/announcing-vuetify0-alpha/)\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v1.0.0-alpha.2 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.2)\n* [v1.0.0-alpha.1 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.1)\n* [v1.0.0-alpha.0 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.0)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nApril merged **13 PRs** across the framework, with most landing after v4.0.6 and pending the next release. The headline pattern: feature work picked back up after March's stabilization sprint, with new props on existing components and a first cross-cut from v0 into Vuetify 4 mainline.\n\n### New Features\n\n**[VTooltip](/components/tooltips/)** — `target=\"cursor\"` now works for hoverable tooltips, anchoring the tooltip to the pointer position while still allowing the user to mouse onto the tooltip itself ([#22728](https://github.com/vuetifyjs/vuetify/pull/22728)).\n\n**[VExpansionPanels](/components/expansion-panels/)** — Additional customization props for finer control over the panel surface and transitions ([#22723](https://github.com/vuetifyjs/vuetify/pull/22723)).\n\n**[VPagination](/components/paginations/) and [VDataTableFooter](/components/data-tables/basics/)** — Ability to hide the last page in pagination controls, contributed by [userquin](https://github.com/userquin) ([#22788](https://github.com/vuetifyjs/vuetify/pull/22788)).\n\n**[VNumberInput](/components/number-inputs/)** — New `grouping` prop adds locale-aware thousands separators to numeric input ([#22134](https://github.com/vuetifyjs/vuetify/pull/22134)).\n\n**[VVideo](/components/videos/)** — Three Labs improvements landed in v4.0.6: `VVideoControls` is now usable as a standalone component, the progress bar is shown by default, and a fix prevents the volume tooltip from obstructing the slider.\n\n**display → v0** — The first internal Vuetify composable migrated to its v0 equivalent. The `display` plugin now delegates breakpoint management to v0's `createBreakpoints` ([#22710](https://github.com/vuetifyjs/vuetify/pull/22710)). This is the first cross-cut from v0 into Vuetify 4 mainline — the bridge between today's framework and tomorrow's headless layer.\n\n**Details:**\n\n* [VTooltip cursor target PR#22728](https://github.com/vuetifyjs/vuetify/pull/22728)\n* [VExpansionPanels customization PR#22723](https://github.com/vuetifyjs/vuetify/pull/22723)\n* [VPagination/VDataTableFooter hide-last-page PR#22788](https://github.com/vuetifyjs/vuetify/pull/22788)\n* [VNumberInput grouping PR#22134](https://github.com/vuetifyjs/vuetify/pull/22134)\n* [display → v0 createBreakpoints PR#22710](https://github.com/vuetifyjs/vuetify/pull/22710)\n\n### Bug Fixes\n\n| Component | Fix | Version | PR |\n|-----------|-----|---------|----|\n| **useActivator** | Avoid closing a hovered menu when its tooltip hides | v3.12.5 / v4.0.5 | — |\n| **SSR** | Avoid errors when rendering with the latest Vue | v4.0.5 | [#22764](https://github.com/vuetifyjs/vuetify/pull/22764) |\n| **types** | Support `noUncheckedSideEffectImports` | v4.0.5 | [#22766](https://github.com/vuetifyjs/vuetify/issues/22766) |\n| **VSnackbar** | Avoid blocking navigation | v4.0.5 | — |\n| **VPie** | Shrink hovered slices back on `mouseleave` | v4.0.5 Labs | — |\n| **VBadge** | Do not accept clicks within disabled elements | v4.0.6 | — |\n| **VField** | Pass color to `icon-color` when `glow` prop is true | v4.0.6 | [#21547](https://github.com/vuetifyjs/vuetify/pull/21547) |\n| **VOtpInput** | Remove stray semicolon from sass file | v4.0.6 | — |\n| **VSelectionControl** | `readonly` should not suppress `focus-visible` | v4.0.6 | [#22527](https://github.com/vuetifyjs/vuetify/pull/22527) |\n| **VVideo** | Avoid tooltip obstructing volume slider | v4.0.6 Labs | — |\n| **VSnackbarQueue** | Avoid stale z-index | v4.0.7 | [#22796](https://github.com/vuetifyjs/vuetify/pull/22796) |\n| **VField** | Correct baseline alignment | v4.0.7 | [#22812](https://github.com/vuetifyjs/vuetify/pull/22812) |\n| **VCheckbox** | Align indeterminate opacity and color with MD3 | v4.0.7 | [#22804](https://github.com/vuetifyjs/vuetify/pull/22804) |\n| **VProgressLinear** | Correct calculation for filled chunks | v4.0.7 | — |\n| **VBtnToggle** | Correct background when active | v4.0.7 | — |\n| **VList** | Invisibly focus first element after open | v4.0.7 | — |\n| **VSelects** | Merge `menuProps.contentClass` correctly | v4.0.7 | — |\n\n**Details:**\n\n* [VSelectionControl focus-visible PR#22527](https://github.com/vuetifyjs/vuetify/pull/22527)\n* [VField glow color PR#21547](https://github.com/vuetifyjs/vuetify/pull/21547)\n* [VSnackbarQueue z-index PR#22796](https://github.com/vuetifyjs/vuetify/pull/22796)\n* [VField baseline PR#22812](https://github.com/vuetifyjs/vuetify/pull/22812)\n* [VCheckbox MD3 alignment PR#22804](https://github.com/vuetifyjs/vuetify/pull/22804)\n\n### In Development\n\nA handful of significant features moved forward in April but remain open as the month closed:\n\n#### VHighlight\n\n[J-Sek](https://github.com/J-Sek) opened [#22817](https://github.com/vuetifyjs/vuetify/pull/22817) for **VHighlight**, a new component for highlighting matches in text — useful for search results, filtering, and command palettes. A complementary `toHighlight` utility is also being added in v0 ([#222](https://github.com/vuetifyjs/0/pull/222)).\n\n#### VSparkline Markers and Tooltips\n\n[#22748](https://github.com/vuetifyjs/vuetify/pull/22748) — Interactive markers and hover tooltips for the data visualization component, carrying over from March.\n\n#### VSlider Pill Variant\n\n[#22699](https://github.com/vuetifyjs/vuetify/pull/22699) — A `pill` variant for VSlider aligned with Material Design 3's rounded slider track design.\n\n#### Solar Iconset\n\n[#22706](https://github.com/vuetifyjs/vuetify/pull/22706) — Adding the Solar iconset via UnoCSS, expanding the icon options shipped through the iconify ecosystem.\n\n#### VOverlay GPU Compositing\n\n[#22800](https://github.com/vuetifyjs/vuetify/pull/22800) — Promote `VOverlay` to a GPU compositing layer to prevent flicker on WebKit, contributed by [e1berd](https://github.com/e1berd).\n\n#### Continued v0 Migration\n\nThe Vuetify → Vuetify0 refactor continues with the remaining core systems open for review:\n\n* **Theme** — Migrate the entire theme system to v0 ([#22765](https://github.com/vuetifyjs/vuetify/pull/22765))\n* **Locale/RTL** — Delegate locale and RTL management to v0 ([#22753](https://github.com/vuetifyjs/vuetify/pull/22753))\n* **Date** — Delegate to v0's `createDate` runtime ([#22768](https://github.com/vuetifyjs/vuetify/pull/22768))\n\nThe display migration ([#22710](https://github.com/vuetifyjs/vuetify/pull/22710)) merged in April and is the first of these to land.\n\n**Details:**\n\n* [VHighlight PR#22817](https://github.com/vuetifyjs/vuetify/pull/22817)\n* [VSparkline markers PR#22748](https://github.com/vuetifyjs/vuetify/pull/22748)\n* [VSlider pill PR#22699](https://github.com/vuetifyjs/vuetify/pull/22699)\n* [Solar iconset PR#22706](https://github.com/vuetifyjs/vuetify/pull/22706)\n* [VOverlay GPU compositing PR#22800](https://github.com/vuetifyjs/vuetify/pull/22800)\n* [Theme migration PR#22765](https://github.com/vuetifyjs/vuetify/pull/22765)\n* [Locale/RTL migration PR#22753](https://github.com/vuetifyjs/vuetify/pull/22753)\n* [Date migration PR#22768](https://github.com/vuetifyjs/vuetify/pull/22768)\n\n---\n\n## Vuetify MCP v0.7.0 { #vuetify-mcp }\n\n\n\n
\n\nThe MCP server released **v0.7.0** on April 28, shipping the [playground CRUD tools](/blog/march-2026-update/#mcp-playground-crud) that merged in late March alongside a new set of link tools.\n\n### What's New { #mcp-whats-new }\n\n**Playground CRUD** — 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 ([PR#19](https://github.com/vuetifyjs/mcp/pull/19)).\n\n**Link Tools** — A new set of tools for managing short links via [vtfy.link](https://vtfy.link). Generate, list, and update branded short URLs from inside the editor — useful for sharing playground demos, doc references, and AI-generated examples in support threads ([PR#20](https://github.com/vuetifyjs/mcp/pull/20)).\n\n**v0 Alpha Sync** — Composables, components, and exports synced for `v1.0.0-alpha.0`, so any AI assistant using the MCP server now generates accurate code against the latest v0 alpha API surface.\n\n### Setup\n\nInstall with the Vuetify CLI:\n\n::: tabs\n\n```bash [pnpm]\npnpm dlx @vuetify/cli add mcp\n```\n\n```bash [npm]\nnpx @vuetify/cli add mcp\n```\n\n```bash [yarn]\nyarn dlx @vuetify/cli add mcp\n```\n\n```bash [bun]\nbunx @vuetify/cli add mcp\n```\n\n:::\n\nOr configure manually:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [v0.7.0 Release](https://github.com/vuetifyjs/mcp/releases/tag/v0.7.0)\n* [Link Tools PR#20](https://github.com/vuetifyjs/mcp/pull/20)\n* [Playground CRUD PR#19](https://github.com/vuetifyjs/mcp/pull/19)\n\n---\n\n## Tooling Updates { #tooling-updates }\n\n### ESLint Config\n\n\n\n
\n\nThe shared ESLint config — used internally across the ecosystem and by teams that want Vuetify's house style out of the box — shipped **four releases** in April.\n\n**v4.5.0** — Added support for **ESLint 10**, matching the ecosystem-wide bump that began in March's eslint-plugin-vuetify v2.7.0 release.\n\n**v4.6.0** — Introduces a new Vue rule that **enforces blank lines between multiline sibling tags**, surfacing inconsistent template formatting that the autoformatter would otherwise leave alone.\n\n**v4.6.1, v4.6.2** — Refinement releases. v4.6.1 switched the new rule to use the `:multi-line` pseudo-class so single-line siblings aren't required to have separators, and v4.6.2 bumped dependencies.\n\n**Details:**\n\n* [ESLint Config GitHub Repository](https://github.com/vuetifyjs/eslint-config-vuetify)\n* [v4.6.2](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.6.2)\n* [v4.6.0](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.6.0)\n* [v4.5.0](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.5.0)\n\n### UnoCSS Preset\n\nThe UnoCSS preset shipped **v0.3.0** on April 23, addressing two issues from teams adopting the v4 + UnoCSS stack:\n\n* **Drop grid styles** — The grid utility variants no longer ship from the preset, since v4's CSS layers and UnoCSS Wind4 cover the same ground without conflicts ([#14](https://github.com/vuetifyjs/unocss-preset-vuetify/pull/14)).\n* **Breakpoint variant scoping** — Breakpoint variants now apply only to the rules owned by the preset, preventing accidental side effects on user rules ([#17](https://github.com/vuetifyjs/unocss-preset-vuetify/pull/17)).\n\nBoth fixes were authored by [J-Sek](https://github.com/J-Sek), and the preset is now the recommended companion for [Vuetify 4 + UnoCSS](https://vuetifyjs.com/blog/building-with-nuxt-and-unocss/) projects.\n\n**Details:**\n\n* [UnoCSS Preset GitHub Repository](https://github.com/vuetifyjs/unocss-preset-vuetify)\n* [v0.3.0 Release](https://github.com/vuetifyjs/unocss-preset-vuetify/releases/tag/v0.3.0)\n\n### Vuetify Codemods\n\nThe migration codemod CLI shipped **v1.0.6** on April 28 with a single but impactful fix: typography migrations now **preserve original font sizes** rather than mapping every legacy class to MD3 defaults. This addresses a regression in the v3-to-v4 migration tooling that surfaced as teams ran the codemod against larger codebases.\n\n**Details:**\n\n* [Vuetify Codemods GitHub Repository](https://github.com/vuetifyjs/vuetify-codemods)\n* [v1.0.6](https://github.com/vuetifyjs/vuetify-codemods/releases/tag/v1.0.6)\n\n---\n\n## Snips v2.0.0 { #snips-v2 }\n\n\n\n
\n\n**[Vuetify Snips](https://snips.vuetifyjs.com/)** shipped **v2.0.0** on April 23, completing its **Vuetify 3 → 4 migration**. Snips is now running on the v4 stack alongside the rest of the property line.\n\n::: success\n\n**Save 40% on Snips v4** — use code `SNIPS40` at checkout to celebrate the v4 release.\n\n:::\n\n**Details:**\n\n* [Vuetify Snips](https://snips.vuetifyjs.com/)\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\nApril was Vuetify0's most productive month yet — **756 commits**, **25 merged PRs**, and **4 releases** culminating in the public alpha. Beyond the alpha launch itself, the headline shifts were a wave of new components, a foundational change in plugin reactivity, and a security-audit pass across the core composables.\n\n\n\n### New Components\n\nSix new headless components were merged into v0 during April, each with a composable layer and compound component pattern:\n\n* **[Carousel](https://0.vuetifyjs.com/components/semantic/carousel/)** — Swipeable slide container with horizontal and vertical orientations, shift+wheel discrete navigation, and auto-mirrored scroll padding ([#190](https://github.com/vuetifyjs/0/pull/190), in v1.0.0-alpha.1)\n* **[Image](https://0.vuetifyjs.com/components/semantic/image/)** — Headless image component with lazy-loading and a dedicated `useImage` composable ([#191](https://github.com/vuetifyjs/0/pull/191), in v1.0.0-alpha.1)\n* **[NumberField](https://0.vuetifyjs.com/components/forms/number-field/)** — Numeric input with stepper, min/max, and locale-aware grouping ([#183](https://github.com/vuetifyjs/0/pull/183), in v0.2.1)\n* **[Progress](https://0.vuetifyjs.com/components/semantic/progress/)** — Progress indicator with indeterminate, determinate, and buffer states ([#180](https://github.com/vuetifyjs/0/pull/180), in v0.2.1)\n* **[Toggle](https://0.vuetifyjs.com/components/actions/toggle/)** — Dual-mode toggle button with group support (in v0.2.1)\n* **[Overflow](https://0.vuetifyjs.com/components/semantic/overflow/)** — Container that detects overflow and exposes scroll state to children ([#220](https://github.com/vuetifyjs/0/pull/220), pending v1.0.0-alpha.3)\n\nPlus **[AlertDialog](https://0.vuetifyjs.com/components/disclosure/alert-dialog/)**, **[Collapsible](https://0.vuetifyjs.com/components/disclosure/collapsible/)**, **[Portal](https://0.vuetifyjs.com/components/primitives/portal/)**, and **[Presence](https://0.vuetifyjs.com/components/primitives/presence/)** all landed alongside the alpha in v0.2.1.\n\n### New Composables\n\n* **[createNumeric](https://0.vuetifyjs.com/composables/forms/create-numeric/) / [createInput](https://0.vuetifyjs.com/composables/forms/create-input/)** — Foundational input composables that NumberField, Slider, and other form primitives now build on ([#181](https://github.com/vuetifyjs/0/pull/181))\n* **[useImage](https://0.vuetifyjs.com/composables/system/use-image/)** — Image loading state, srcset, and intersection-based lazy loading ([#191](https://github.com/vuetifyjs/0/pull/191))\n* **[createRating](https://0.vuetifyjs.com/composables/forms/create-rating/)** — Rating composable with compound component pattern\n* **[usePresence](https://0.vuetifyjs.com/composables/system/use-presence/)** — Mount/unmount lifecycle helper for transitions\n\n### Reactive-Default Plugins\n\nThe biggest architectural change of the month: **`useTheme`, `useLocale`, and `useFeatures` now use a reactive registry by default** ([#210](https://github.com/vuetifyjs/0/pull/210), [#211](https://github.com/vuetifyjs/0/pull/211)). This eliminates the workarounds previously needed to keep theme colors and feature flags reactive after switching, and the convention is now [codified in the docs](https://0.vuetifyjs.com/guide/fundamentals/reactivity/) for all plugin authors ([#213](https://github.com/vuetifyjs/0/pull/213)).\n\nA companion fix in `createRegistry` skips the `values`/`keys`/`entries` cache when the registry is reactive, so consumers get fresh reads every access ([#209](https://github.com/vuetifyjs/0/pull/209)).\n\n### Security and Performance\n\n* **Security audit** — Foundational composables received a sweep of security-audit fixes ([30cc5e1](https://github.com/vuetifyjs/0/commit/30cc5e1118187c412d416d1ef2c6c7c2d73349f2)), including `useTheme` sanitizing theme names and color values in CSS generation.\n* **Tree-shaking** — Module-level allocations annotated with `/* @__PURE__ */` and exports marked with `/* #__NO_SIDE_EFFECTS__ */` so bundlers can eliminate unused composables more aggressively.\n* **Test infrastructure** — Test coverage raised to **97.2%**, vitest pool switched to vmThreads, and tsdown + web-types generation now run in parallel.\n\n```html { resource=\"src/components/Gallery.vue\" }\n\n\n\n```\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n### Coming Next in v0\n\n* **[useDragDrop](https://github.com/vuetifyjs/0/pull/225)** — Headless drag-and-drop primitive\n* **[Tooltip](https://github.com/vuetifyjs/0/pull/226)** — Headless tooltip with region coordination\n* **[Tour](https://github.com/vuetifyjs/0/pull/178)** — Tour component and `useTour` composable for product walkthroughs\n* **[createDataGrid](https://github.com/vuetifyjs/0/pull/174)** — Data grid composable for advanced table layouts\n* **[Emerald Paper Design System](https://github.com/vuetifyjs/0/pull/167)** — Phase 0 of the first commercial design system built on Paper\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v1.0.0-alpha.2 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.2)\n* [Carousel PR#190](https://github.com/vuetifyjs/0/pull/190)\n* [Image PR#191](https://github.com/vuetifyjs/0/pull/191)\n* [Overflow PR#220](https://github.com/vuetifyjs/0/pull/220)\n* [NumberField PR#183](https://github.com/vuetifyjs/0/pull/183)\n* [Reactive-default useTheme PR#210](https://github.com/vuetifyjs/0/pull/210)\n* [Reactive-default useLocale/useFeatures PR#211](https://github.com/vuetifyjs/0/pull/211)\n\n---\n\n## Product Updates { #product-updates }\n\n### DevKey\n\n\n\n
\n\n**[DevKey](https://github.com/vuetifyjs/devkey)** is a small Vuetify0 demo project — the same reference app used as the [implementation walkthrough in the alpha announcement](/blog/announcing-vuetify0-alpha/). It's not a real product; the public repo exists so anyone learning v0 can read along and see how the headless primitives compose into a credible-looking app shell.\n\nApril brought a brand pass to make the demo presentable: a Coolify deploy workflow, a Geist-based wordmark, a `DkLogo` component, an asset-generation script for favicons and og images, and branded landing, login, and dashboard pages.\n\n![DevKey demo](https://cdn.vuetifyjs.com/docs/images/blog/april-2026-update/devkey.png \"DevKey — Vuetify0 demo project\")\n\n**Details:**\n\n* [DevKey GitHub Repository](https://github.com/vuetifyjs/devkey)\n* [Implementation walkthrough (in the alpha announcement)](/blog/announcing-vuetify0-alpha/)\n\n### Vuetify One\n\n\n\n
\n\n**[Vuetify One](https://one.vuetifyjs.com/)** received a **v4.0.6 update** alongside two CSS layer ordering fixes that resolved a class of issues where utility classes were being overridden by the framework reset. The same fix pattern was applied across **issues** (the issue triage app) earlier in the month, completing the v4 migration cleanup that began in February.\n\n---\n\n## April 2026 Changelog { #april-2026-changelog }\n\nThe following section provides an overview of the changes made in April 2026, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* v3.12.5 / v4.0.5: SSR compatibility with the latest Vue, useActivator menu/tooltip fix, VSnackbar navigation fix, VPie hover Labs fix\n* v4.0.6: VBadge clicks within disabled, VField glow icon-color, VSelectionControl focus-visible, VVideo standalone controls and progress-bar default\n* Pending v4.0.7: VTooltip cursor target, VExpansionPanels customization, VPagination/VDataTableFooter hide-last-page, VNumberInput grouping, VField baseline, VCheckbox MD3 alignment, display → v0 migration\n\n**Expand** this section to see the detailed changelog for April 2026:\n\n
\nApril 2026 Full Changelog\n\n### v3.12.5 (2026-04-02)\n\n**:wrench: Bug Fixes**\n\n* **useActivator:** avoid closing hovered menu when tooltip hides ([71d657b](https://github.com/vuetifyjs/vuetify/commit/71d657b))\n\n---\n\n### v4.0.5 (2026-04-02)\n\n**:wrench: Bug Fixes**\n\n* **SSR:** avoid errors when rendering with latest Vue ([#22764](https://github.com/vuetifyjs/vuetify/issues/22764)) ([ecbe030](https://github.com/vuetifyjs/vuetify/commit/ecbe030)), closes [#22762](https://github.com/vuetifyjs/vuetify/issues/22762)\n* **types:** support noUncheckedSideEffectImports ([2098fb1](https://github.com/vuetifyjs/vuetify/commit/2098fb1)), closes [#22766](https://github.com/vuetifyjs/vuetify/issues/22766)\n* **useActivator:** avoid closing hovered menu when tooltip hides ([131e659](https://github.com/vuetifyjs/vuetify/commit/131e659)), closes [#22759](https://github.com/vuetifyjs/vuetify/issues/22759)\n* **VSnackbar:** avoid blocking navigation ([143ceaa](https://github.com/vuetifyjs/vuetify/commit/143ceaa)), closes [#18283](https://github.com/vuetifyjs/vuetify/issues/18283)\n\n**:test_tube: Labs**\n\n* **VPie:** shrink back hovered slices on mouseleave ([1893748](https://github.com/vuetifyjs/vuetify/commit/1893748))\n\n---\n\n### v4.0.6 (2026-04-22)\n\n**:wrench: Bug Fixes**\n\n* **VBadge:** do not accept clicks within disabled elements ([996cd6e](https://github.com/vuetifyjs/vuetify/commit/996cd6e)), closes [#22172](https://github.com/vuetifyjs/vuetify/issues/22172)\n* **VField:** pass color to icon-color if glow prop is true ([#21547](https://github.com/vuetifyjs/vuetify/issues/21547)) ([10125b7](https://github.com/vuetifyjs/vuetify/commit/10125b7)), closes [#21388](https://github.com/vuetifyjs/vuetify/issues/21388)\n* **VOtpInput:** remove semicolon from sass file ([bf53f9e](https://github.com/vuetifyjs/vuetify/commit/bf53f9e)), closes [#22798](https://github.com/vuetifyjs/vuetify/issues/22798)\n* **VSelectionControl:** readonly should not suppress focus-visible ([#22527](https://github.com/vuetifyjs/vuetify/issues/22527)) ([ce234a8](https://github.com/vuetifyjs/vuetify/commit/ce234a8)), closes [#22513](https://github.com/vuetifyjs/vuetify/issues/22513)\n\n**:test_tube: Labs**\n\n* **VVideo:** avoid tooltip obstructing volume slider ([add2a7e](https://github.com/vuetifyjs/vuetify/commit/add2a7e))\n* **VVideo:** support VVideoControls as standalone component ([aaf9cf5](https://github.com/vuetifyjs/vuetify/commit/aaf9cf5)), closes [#22529](https://github.com/vuetifyjs/vuetify/issues/22529)\n* **VVideo:** show progress bar by default ([1be0091](https://github.com/vuetifyjs/vuetify/commit/1be0091))\n\n
\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nMay continues on three fronts. **Vuetify4** has a queue of merged PRs awaiting v4.0.7 — VTooltip cursor target, VExpansionPanels customization, VPagination/VDataTableFooter hide-last-page, VNumberInput grouping, the display → v0 migration, and a stack of fixes from J-Sek. **Vuetify0** has v1.0.0-alpha.3 work in flight, including useDragDrop, the headless Tooltip, the Tour component, createDataGrid, and the first phase of the **Emerald Paper Design System**. And the **theme**, **locale**, and **date** v0 migrations all have open PRs in vuetify ready to follow display through to merge.\n\n* The [Vuetify0 alpha](/blog/announcing-vuetify0-alpha/) is live — try it in a new project or via [v0play](https://v0play.vuetifyjs.com)\n* The [Vuetify MCP server](https://github.com/vuetifyjs/mcp) now ships playground and link tools for [Vuetify One](/one/) subscribers — manage demos and short links from your editor\n\n::: error\n\n**Vuetify needs your support.** OpenCollective funds are exhausted and we're currently unable to compensate contributors for ongoing work on the framework and ecosystem tools. If your team relies on Vuetify, please consider sponsoring us via [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution keeps Vuetify shipping.\n\n:::\n\nVuetify is and always will be free and open source. If your team builds on the framework, the v0 alpha, the MCP, the CLI, the Nuxt module, the ESLint plugin, or any of the design systems coming behind them, your support directly funds continued development. [Vuetify One](https://one.vuetifyjs.com/) and [GitHub Sponsors](https://github.com/sponsors/johnleider) are the most direct ways to help.\n\nThank you for being part of the Vuetify community. See you in May!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/august-2025-update.md":"---\nlayout: blog\nmeta:\n title: August 2025 Update\n description: August prepares the Vuetify0 pre-alpha, launches the redesigned issues page, and continues delivering powerful components and improvements.\n keywords: Vuetify August 2025, Vuetify0, v0 pre-alpha, VEditor, issues page redesign, theming webinar, performance optimization\n---\n\n# August 2025 Update\n\nWelcome to our August update! This month marks a pivotal moment in Vuetify's evolution as we prepare to release the pre-alpha of Vuetify0, launch our redesigned issues page, and continue delivering powerful components and improvements.\n\n![Hero image for August update](https://cdn.vuetifyjs.com/docs/images/blog/august-2025-update/august-hero.png \"August hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 September 9th, 2025\n\n\n\n---\n\n## From Zero\n\nVuetify0 reached pre-alpha status this month, delivering the first public release of our meta-framework for UI library development. The release includes foundational composables for registration and selection, plus core plugins for breakpoints, hydration, locale management, storage, and theming. These framework-agnostic tools represent the extracted intelligence that powers Vuetify, now available as standalone packages for any development environment.\n\nEcosystem improvements continued throughout August with significant team-community collaboration driving advances in foundational architecture, component refinements, and developer experience enhancements. The 87 pull requests merged this month reflect ongoing contributions that strengthen not just Vuetify0, but the entire ecosystem. This pre-alpha milestone sets the foundation for broader adoption while maintaining our commitment to developer productivity and framework flexibility.\n\n::: success\n\nCool example of the month: [VVideo Card](https://play.vuetifyjs.com/playgrounds/-10f7g) by [Vuetify](https://github.com/vuetifyjs)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n* [\"Mastering Vuetify Theming\" Webinar Recap](#mastering-vuetify-theming-webinar-recap)\n* [Vuetify0 in Pre-Alpha](#vuetify0-in-pre-alpha)\n* [Framework Updates](#framework-updates)\n* [Ecosystem Spotlight: Vuetify Issues](#ecosystem-spotlight-vuetify-issues)\n* [Free Premium Themes](#free-premium-themes)\n* [Building the Future](#building-the-future)\n\n---\n\n## Releases\n\nAugust focused on general component stability and bug fixes. View the complete list of changes in the [Full Changelog](#august-2025-changelog).\n\n**Details:**\n\n* [v3.9.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.4)\n* [v3.9.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.5)\n* [v3.9.6](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.6)\n\n## \"Mastering Vuetify Theming\" Webinar Recap { #mastering-vuetify-theming-webinar-recap }\n\nOn August 27th, we hosted our second community webinar: **\"Mastering Vuetify's Theming Engine\"**. Following the success of July's migration webinar, this session dove deep into one of Vuetify's most powerful features.\n\n### What We Covered\n\n* **Theme Architecture**: Understanding how Vuetify's theming system works under the hood\n* **Custom Theme Creation**: Step-by-step guide to building professional themes\n* **Dynamic Theming**: Implementing runtime theme switching and user preferences\n* **Performance Optimization**: Best practices for theme efficiency\n* **Advanced Techniques**: CSS variables, theme inheritance, and component-specific theming\n\n### Community Response\n\nThe turnout exceeded our expectations, with developers from around the world joining to level up their theming skills. The Q&A session revealed common challenges that we're already addressing in our documentation and tooling improvements.\n\n### Recording\n\nWe have the event recorded and are working on what the process looks like to bring it to you. More than likely will end up on our [YouTube Channel](https://www.youtube.com/@vuetifyjs), make sure to subscribe if you haven't already.\n\n### Upcoming Webinar: \"Performance Crisis\"\n\nBased on your feedback, our September webinar will tackle one of the most requested topics: **\"Performance Crisis: Slash Your Bundle Size\"**. This session will show you how to dramatically reduce your Vuetify application's footprint through:\n\n* Advanced tree-shaking techniques\n* Component lazy loading strategies\n* Build optimization configurations\n* Real-world case studies with measurable results\n\n![Webinar highlights](https://cdn.vuetifyjs.com/docs/images/blog/august-2025-update/webinar.png \"Performance Crisis Webinar\"){ height=135 }\n\n**Details:**\n\n* Tuesday, September 30th at 9:00 AM CST\n* [Performance Crisis Sign-up](https://discord.gg/vuetify-340160225338195969?event=1414654608541749308)\n\n## Vuetify0 in Pre-Alpha\n\nIf you missed my initial mentions of it, [Vuetify0](https://0.vuetifyjs.com/) is a **meta framework** for building UI libraries. We've distilled the core of Vuetify into a collection of highly optimized, framework-agnostic composables. This means the power that drives Vuetify—its layout system, theming engine, localization setup, and component logic—will be available as a standalone package.\n\n**Modern Development Experience**: Built from the ground up for Vue 3, TypeScript, and modern build tools, v0 embraces the latest web platform features while maintaining broad compatibility.\n\n### What to Expect in the Pre-Alpha\n\nThe initial Vuetify0 release will focus on the foundational pillars of the framework. Some pages are still receiving their initial content so please pardon our dust. Here's what you'll be able to explore:\n\n**Composables:**\n\n* **Foundational** composables are the backbone of Vuetify0 and are the basic building blocks for creating a UI library.\n* **Registration** composables are the foundational pieces for selection and tokenization.\n* **Selection** composables serve as the core logic for managing selectable items, including single and multiple selection modes.\n* **Plugins**: [Breakpoints](https://0.vuetifyjs.com/composables/plugin/use-breakpoints), [Hydration](https://0.vuetifyjs.com/composables/plugin/use-hydration), [Locale](https://0.vuetifyjs.com/composables/plugin/use-locale), [Storage](https://0.vuetifyjs.com/composables/plugin/use-storage), and [Theme](https://0.vuetifyjs.com/composables/plugin/use-theme) plugins to manage global application state.\n\n::: info\n\nIf you're wondering how Vuetify0 will affect you as a Vuetify user, the short answer is: it won't—at least not immediately.\n\n:::\n\nThe long-term plan is to incrementally integrate Vuetify0 composables into Vuetify over time, starting with new components and gradually refactoring existing ones. This approach allows us to enhance the framework's architecture without disrupting your current projects. If you're wondering how Vuetify0 will affect you as a Vuetify user, the short answer is: it won't—at least not immediately. What it *will* do is open the door for new libraries and tools to be built on the same fundamentals that drive Vuetify. Allowing developers to opt into the Vuetify ecosystem without having to commit to \"Big Vuetify\" as we've started calling it internally.\n\n**Details:**\n\n* [Vuetify0 Composables](https://0.vuetifyjs.com/composables)\n* [v0.0.2 Release Notes](https://github.com/vuetifyjs/0/releases/tag/v0.0.2)\n* [Discussion on Discord](https://discord.gg/vK6T89eNP7)\n\n## Framework Updates\n\nWe've made significant progress on several key components and features this month. The team merged **87 pull requests** in August alone, primarily focusing on component enhancements, bug fixes, and developer experience improvements.\n\n### VEditor: Final Testing, Coming Soon\n\nVEditor is in the final stages of testing and will be available soon. This rich text editor brings professional content editing capabilities to Vuetify applications, including:\n\n![VEditor showcase](https://cdn.vuetifyjs.com/docs/images/blog/august-2025-update/veditor.png \"VEditor rich text formatting features\"){ height=135 }\n\n* **Rich Text Formatting:** Comprehensive formatting options like bold, italic, underline, strikethrough, code blocks, heading levels (H1-H6), subscript, superscript, and blockquotes\n* **Customizable Toolbar:** Choose which formatting options to display, hide the toolbar completely, or configure it dynamically at runtime with Material Design Icons\n* **Form Integration:** Full v-model support with Vuetify's validation system, including rules for required content, character limits, and seamless v-form compatibility\n* **Flexible Styling:** Configurable height, multiple variants (outlined, solo, underlined), responsive design, and full Vuetify theme integration\n* **Advanced Features:** Clearable content functionality, proper focus management, accessibility support with ARIA labels, and cross-browser contentEditable implementation\n\n**Details:**\n\n* [VEditor PR#21653](https://github.com/vuetifyjs/vuetify/pull/21653)\n\n## Ecosystem Spotlight: Vuetify Issues { #ecosystem-spotlight-vuetify-issues }\n\nThe redesigned issues experience is now live at [issues.vuetifyjs.com](https://issues.vuetifyjs.com). This release focused on migrating the app from Vuetify v1.5 to v3 for a modern, consistent UI and better developer ergonomics. We also integrated Vuetify One to enable future enhancements—like special labels for subscribers—to streamline triage and improve visibility.\n\n\n\n::: info\n\nThe previous issues page was originally built with Vuetify v1.5 in 2018\n\n:::\n\n**Details:**\n\n* [New Issues Page](https://issues.vuetifyjs.com)\n* [Contributing Guide](https://vuetifyjs.com/about/contributing/)\n* [Community Discord](https://community.vuetifyjs.com)\n\n## Free Premium Themes\n\nAll Vuetify‑made themes—designed, built, and maintained by the Vuetify team—are now free for **personal** use. Enjoy polished, production‑ready starting points to learn best practices, explore ideas, and accelerate side projects without licensing friction.\n\n### Now Available for Free\n\nThis move reflects our commitment to lowering barriers to entry and helping developers create beautiful applications faster. Visit the [Vuetify Store](https://store.vuetifyjs.com) to explore the expanded free collection.\n\n![Vuetify Store showcase](https://cdn.vuetifyjs.com/docs/images/blog/august-2025-update/store.png \"Free premium themes now available\"){ height=600 }\n\n**Details:**\n\n* [Crypto Coin Theme](https://store.vuetifyjs.com/products/crypto-coin-theme)\n* [Flairo Theme Pro](https://store.vuetifyjs.com/products/flairo-theme-pro)\n* [Vuetify 3 Nebula UI Kit](https://store.vuetifyjs.com/products/vuetify-3-nebula-ui-kit)\n* [Zero Theme Pro](https://store.vuetifyjs.com/products/zero-theme-pro)\n* [Made by Vuetify Bundle](https://store.vuetifyjs.com/products/made-by-vuetify-bundle)\n\n## August 2025 Changelog\n\nThe following section provides an overview of the changes made in August 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* Accessibility and high-contrast: forced-colors fixes in VBtn/VCard, ARIA labels in VColorPicker, role added to VTextField input\n* Smarter selection UX: VSelect fixes placeholder overlap and shows selected text\n* More reliable date picking: VDatePicker prioritizes allowed months/years and fixes year scroll/focus\n* Tables/inputs polish: VDataTable row/stripe fixes, VNumberInput focus/icons, VField clear, menu/tooltip reposition\n* Labs upgrades: VVideo aspect-ratio and visuals, VPie touch segments, VColorInput pip/focus, VIconBtn icon-color\n\n**Expand** this section to see the detailed changelog for August 2025:\n\n
\n\n### :wrench: Bug Fixes\n\n* **validation:** return aliases when called without arguments ([#21868](https://github.com/vuetifyjs/vuetify/issues/21868)) ([64a82d4](https://github.com/vuetifyjs/vuetify/commit/64a82d4776d22628db5d3a55fc070ce2463eb602)), closes [#21477](https://github.com/vuetifyjs/vuetify/issues/21477)\n* **VAlert:** restore unit-less support in Sass variable for title line-height ([#21843](https://github.com/vuetifyjs/vuetify/issues/21843)) ([8c1778a](https://github.com/vuetifyjs/vuetify/commit/8c1778a26a08d9d663681d83d6dd9160e3cb5c74)), closes [#21841](https://github.com/vuetifyjs/vuetify/issues/21841)\n* **VBtn:** render border in forced-colors mode ([#21848](https://github.com/vuetifyjs/vuetify/issues/21848)) ([25af169](https://github.com/vuetifyjs/vuetify/commit/25af169ae03c28bc6472f00347edaeaefb73aeb3))\n* **VCard:** hide progress border in forced-colors mode ([#21836](https://github.com/vuetifyjs/vuetify/issues/21836)) ([4335576](https://github.com/vuetifyjs/vuetify/commit/43355769444e256eed6111d23b75d7dc2838a093)), closes [#21835](https://github.com/vuetifyjs/vuetify/issues/21835)\n* **VColorPicker:** aria labels for main controls ([#21839](https://github.com/vuetifyjs/vuetify/issues/21839)) ([e2ab73a](https://github.com/vuetifyjs/vuetify/commit/e2ab73a7aafb1c443ad30b28134e41b4662c27fe)), closes [#21834](https://github.com/vuetifyjs/vuetify/issues/21834)\n* **VColorPicker:** keep canvas visible when width is not px ([22b828f](https://github.com/vuetifyjs/vuetify/commit/22b828f5cc625adeeb206e20746154dd79f33e0c))\n* **VColorPicker:** prevent sass nested deprecation warning ([8083db9](https://github.com/vuetifyjs/vuetify/commit/8083db971f7fe51151241447f90a4cd14cff32be)), closes [#21909](https://github.com/vuetifyjs/vuetify/issues/21909)\n* **VDataTable:** correct row height when with show-select and compact ([#21829](https://github.com/vuetifyjs/vuetify/issues/21829)) ([29b3bb0](https://github.com/vuetifyjs/vuetify/commit/29b3bb0b3363e8c295cf16286ed500e8ae269e98)), closes [#21767](https://github.com/vuetifyjs/vuetify/issues/21767)\n* **VDataTable:** missing stripes on fixed columns ([#21715](https://github.com/vuetifyjs/vuetify/issues/21715)) ([739a6c9](https://github.com/vuetifyjs/vuetify/commit/739a6c9aa8ac6064d7484e1e40dbf111d2ab75c5))\n* **VDatePicker:** prioritize allowed-months and allowed-years ([#21916](https://github.com/vuetifyjs/vuetify/issues/21916)) ([810645c](https://github.com/vuetifyjs/vuetify/commit/810645c5c37aeeb3aec1a575763c5e836b7bb8b6)), closes [#21911](https://github.com/vuetifyjs/vuetify/issues/21911)\n* **VDatePickerYears:** fix scroll/focus of selected year ([#21951](https://github.com/vuetifyjs/vuetify/issues/21951)) ([b531dbf](https://github.com/vuetifyjs/vuetify/commit/b531dbfa1ae6e08dddea41f965912b8cf60a55ce)), closes [#21950](https://github.com/vuetifyjs/vuetify/issues/21950)\n* **VField:** avoid duplicated emits on clear ([#21865](https://github.com/vuetifyjs/vuetify/issues/21865)) ([a97f103](https://github.com/vuetifyjs/vuetify/commit/a97f10306bd32e739c4cd52f4939e2b6d3b648d1)), closes [#21417](https://github.com/vuetifyjs/vuetify/issues/21417)\n* **VMenu, VTooltip:** apply scroll-strategy reposition for horizontal overflow ([#21309](https://github.com/vuetifyjs/vuetify/issues/21309)) ([bd48658](https://github.com/vuetifyjs/vuetify/commit/bd486588ae665014abe9a2af09bee12868e8574f)), closes [#20625](https://github.com/vuetifyjs/vuetify/issues/20625)\n* **VNumberInput:** consistent color of control icons ([#21936](https://github.com/vuetifyjs/vuetify/issues/21936)) ([6a50b44](https://github.com/vuetifyjs/vuetify/commit/6a50b44bf48b11f975c52c78074f99f52e34ab10)), closes [#21931](https://github.com/vuetifyjs/vuetify/issues/21931)\n* **VNumberInput:** keep focus when incrementing in the list ([#21824](https://github.com/vuetifyjs/vuetify/issues/21824)) ([d6b3384](https://github.com/vuetifyjs/vuetify/commit/d6b338465a1c55fa72838c668276dcc9855b4f54)), closes [#17083](https://github.com/vuetifyjs/vuetify/issues/17083)\n* **VOtpInput:** support composing character with IME ([42e15a3](https://github.com/vuetifyjs/vuetify/commit/42e15a349c1de7721c754d9aee2b437144b1a89b)), closes [#21918](https://github.com/vuetifyjs/vuetify/issues/21918)\n* **VOverlay:** don't use content element as scroll parent ([06c4c91](https://github.com/vuetifyjs/vuetify/commit/06c4c91f94d18af53041961f2c9fb0cc7e364cb2))\n* **VSelect:** select placeholder overlap ([#21923](https://github.com/vuetifyjs/vuetify/issues/21923)) ([5c06ba7](https://github.com/vuetifyjs/vuetify/commit/5c06ba7bd76bca370320433e7a0f058362d6028f)), closes [#21922](https://github.com/vuetifyjs/vuetify/issues/21922)\n* **VSelect:** use selected text instead of value ([#21902](https://github.com/vuetifyjs/vuetify/issues/21902)) ([d0ef001](https://github.com/vuetifyjs/vuetify/commit/d0ef0016adf8517620ce14c5e1e50e800195fb95)), closes [#21097](https://github.com/vuetifyjs/vuetify/issues/21097)\n* **VSlider:** avoid thumb label wedge gap ([#21847](https://github.com/vuetifyjs/vuetify/issues/21847)) ([059e578](https://github.com/vuetifyjs/vuetify/commit/059e578e21f376bf1059c59fbf72eb278664ed93))\n* **VSparkline:** accept a single number ([#21944](https://github.com/vuetifyjs/vuetify/issues/21944)) ([d7b0e34](https://github.com/vuetifyjs/vuetify/commit/d7b0e34e9d717ce96c898875c4e480ab89d81eea)), closes [#19697](https://github.com/vuetifyjs/vuetify/issues/19697)\n* **VStepper:** align title and subtitle to the avatar ([12735e6](https://github.com/vuetifyjs/vuetify/commit/12735e6797e1c482db74fd7615af7b484e282614)), closes [#21884](https://github.com/vuetifyjs/vuetify/issues/21884)\n* **VStepper:** correct cursor for readonly item ([aeb6f4d](https://github.com/vuetifyjs/vuetify/commit/aeb6f4d70291ebb5c907ebe86490bb622f2929ea)), closes [#21867](https://github.com/vuetifyjs/vuetify/issues/21867)\n* **VStepper:** keep correct alignment with alt-labels ([1a0a9e6](https://github.com/vuetifyjs/vuetify/commit/1a0a9e6f19d776fe104caaae4c659a3f6d3d3e55))\n* **VTextField:** assign role to input element ([#21903](https://github.com/vuetifyjs/vuetify/issues/21903)) ([d77285f](https://github.com/vuetifyjs/vuetify/commit/d77285fcae70522dfafbc66c775f72b03684bb38)), closes [#18125](https://github.com/vuetifyjs/vuetify/issues/18125)\n* **VTreeview:** allow expanding disabled nodes ([ed4d8cf](https://github.com/vuetifyjs/vuetify/commit/ed4d8cfb06079a231064dbc6ebedb05d3ad6ef06)), closes [#21075](https://github.com/vuetifyjs/vuetify/issues/21075) [#21116](https://github.com/vuetifyjs/vuetify/issues/21116)\n* **VWindow:** correctly reveal vertical arrows on hover ([521ba7b](https://github.com/vuetifyjs/vuetify/commit/521ba7b7a5749f495b13face6fabca7b971e56bf))\n\n### :microscope: Code Refactoring\n\n* **VDataTable:** avoid Array.toReversed() ([3894f98](https://github.com/vuetifyjs/vuetify/commit/3894f98c333abaad63fc2a651ae558ffbb75d620))\n\n### :test_tube: Labs\n\n* **VColorInput:** pip customization ([#21820](https://github.com/vuetifyjs/vuetify/issues/21820)) ([db389d5](https://github.com/vuetifyjs/vuetify/commit/db389d5bb0386eccb00302c0b3134f39c201a35a))\n* **VColorInput:** allow inner fields focus using mouse ([7657d52](https://github.com/vuetifyjs/vuetify/commit/7657d522ba5604ce53fad877e84033f7bf5ad960)), closes [#21897](https://github.com/vuetifyjs/vuetify/issues/21897)\n* **VIconBtn:** correctly apply `icon-color` ([b2ece2c](https://github.com/vuetifyjs/vuetify/commit/b2ece2c033ec8cc097f644cda912bb915d1df84e)), closes [#21930](https://github.com/vuetifyjs/vuetify/issues/21930)\n* **VPie:** support touch for segment interaction ([#21871](https://github.com/vuetifyjs/vuetify/issues/21871)) ([93f4218](https://github.com/vuetifyjs/vuetify/commit/93f421848601fe6f24e32395a7810c41790f92cf))\n* **VVideo:** prefer `max-width`, default to 100% ([22d5dd5](https://github.com/vuetifyjs/vuetify/commit/22d5dd5e5814c9aea59a5d4778c2d4ea6c3c9ba6))\n* **VVideo:** add `aspect-ratio` prop ([83e67d1](https://github.com/vuetifyjs/vuetify/commit/83e67d137b2659535da355ac23d9a24d8345537b))\n* **VVideo:** correct default track color with pills ([e98919d](https://github.com/vuetifyjs/vuetify/commit/e98919d0c3ec9ed128bc58fe5678b1821f7f5478))\n* **VVideo:** correct color customization ([13da3e1](https://github.com/vuetifyjs/vuetify/commit/13da3e1b33b7dfee1d506c4d47782ab47a3f7f6c))\n* **VVideo:** correctly move elevation to pills ([3df9494](https://github.com/vuetifyjs/vuetify/commit/3df9494480b80f091bef6e0f1e65066dbe4b5642))\n* **VVideo:** hide overlays for background variant ([466dc6f](https://github.com/vuetifyjs/vuetify/commit/466dc6fb87acf5a0e6e2d67f9196eaf3f6705e9f))\n\n
\n\n## Building the Future{ .mt-4 }\n\nAugust is about laying the foundation to begin integrating Vuetify0 into Vuetify. The pre‑alpha work is shaping the path for incremental adoption of Zero‑powered primitives across the framework.\n\nIn parallel, the ecosystem continues to be polished and expanded:\n\n* VEditor is nearing release with robust formatting and form integration.\n* VVideo and related media features are progressing.\n* Improvements to performance, theming, docs, and the redesigned issues experience are landing steadily.\n\nThanks for the feedback and contributions—these foundations will turn into practical wins shipping over the next few releases.\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/eXubxyJ), and upcoming webinar series announcements.*\n","packages/docs/src/pages/en/blog/august-2026-update.md":"---\nlayout: blog\nmeta:\n title: August 2026 Update\n description: This August team delivered Vuetify 4.2 beta, which made @vuetify/v0 a runtime dependency of the framework.\n keywords: Vuetify August 2026, Vuetify 4.2, @vuetify/v0, open-on-focus, Sass variables, Vuetify0 1.2, Emerald, Vuetify MCP\n---\n\n\n\n# August 2026 Update\n\n**August was about v4.2.** The features and fixes have been steadily merged to `dev` branch eventually shipped as [v4.2.0-beta.0](/getting-started/release-notes/?version=v4.2.0-beta.0) on August 27 and as stable [v4.2.0](/getting-started/release-notes/?version=v4.2.0) week after. The v4.1 line got five additional patches along the way, and v3.13 got its first two LTS patches. Most notable change: starting with 4.2, `vuetify` depends on `@vuetify/v0` at runtime.\n\n![Hero image for August update](https://cdn.vuetifyjs.com/docs/images/blog/august-2026-update/august-hero.png \"August hero image\"){ height=112 }\n\n🖊️ Jacek Czarniecki • 📅 September 14th, 2026\n\n\n\n---\n\n## August in numbers\n\n**33 merged PRs** in the framework repo, **16 features and 47 fixes** (unique commits) and **8 releases**. Open issues went from 351 to 286: 96 closed, and 31 new opened. [Vuetify0](https://0.vuetifyjs.com/) merged 163 PRs (33 features, 42 fixes, 62 for docs) and shipped 5 releases, headlined by v1.2.0.\n\n---\n\n## Table of Contents\n\n* [Key Improvements](#key-improvements)\n* [Spotlight: Vuetify 4.2](#vuetify-4-2)\n * [Before you upgrade](#before-you-upgrade)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [Tooling Updates](#ecosystem-tooling)\n* [What's Next](#whats-next)\n\n---\n\n## Key Improvements\n\n**In Vuetify 4.2** ([beta](/getting-started/release-notes/?version=v4.2.0-beta.0) on August 27, [stable](/getting-started/release-notes/?version=v4.2.0) on September 2):\n\n* **[VSelect / VAutocomplete / VCombobox](/components/selects/)** — `open-on-focus`, persistent menus, `close-on-input-click`, and keyboard navigation that no longer breaks in long lists ([#23126](https://github.com/vuetifyjs/vuetify/pull/23126), [#23008](https://github.com/vuetifyjs/vuetify/pull/23008), [#23023](https://github.com/vuetifyjs/vuetify/pull/23023), [#23031](https://github.com/vuetifyjs/vuetify/pull/23031))\n* **Defaults** — nested defaults can change the sizes and variants components hardcode on their inner controls ([#23108](https://github.com/vuetifyjs/vuetify/pull/23108))\n* **[VDateInput](/components/date-inputs/)** — separators are inserted as user types ([#23052](https://github.com/vuetifyjs/vuetify/pull/23052))\n* **[VSlideGroup](/components/slide-groups/)** — `scroll-snap`, `scroll-distance`, an `edge` event and an exposed `slide()` for programmatic control\n* **Sass** — 125 variables that had no effect are gone in v4.2.0, and those might make your CI red if you did define them ([#23136](https://github.com/vuetifyjs/vuetify/issues/23136))\n\n**Beyond Vuetify core:**\n\n* **[Vuetify0 1.2](https://0.vuetifyjs.com/releases/?version=v1.2.0)** — headless DataTable, DataGrid and Alert, plus a floating-ui adapter for browsers without CSS anchor positioning ([#825](https://github.com/vuetifyjs/0/pull/825), [#826](https://github.com/vuetifyjs/0/pull/826), [#823](https://github.com/vuetifyjs/0/pull/823), [#917](https://github.com/vuetifyjs/0/pull/917))\n* **[Emerald](https://0.vuetifyjs.com/systems/emerald)** — first public release of the styled design system on v0, with a [live demo](https://0.vuetifyjs.com/demo/emerald/) and a [Figma UI kit](https://store.vuetifyjs.com/products/official-emerald-ui-kit-for-figma)\n* **[Bulma](https://0.vuetifyjs.com/systems/bulma)** — Vue behavior for the `bulma.css` you already load ([#760](https://github.com/vuetifyjs/0/pull/760))\n* **Vuetify MCP** — hosted server works without an account at `https://mcp.vuetifyjs.com/mcp`, and v0.11.0 adds a v2 → v3 upgrade toolkit ([#41](https://github.com/vuetifyjs/mcp/pull/41), [#43](https://github.com/vuetifyjs/mcp/pull/43))\n* **[v0 playground](https://v0play.vuetifyjs.com)** — saves playgrounds to Vuetify One and switches Vuetify versions, nightly included ([#817](https://github.com/vuetifyjs/0/pull/817), [#836](https://github.com/vuetifyjs/0/pull/836))\n\n**Details:**\n\n* Vuetify v4.2: [v4.2.0](/getting-started/release-notes/?version=v4.2.0) · [v4.2.0-beta.0](/getting-started/release-notes/?version=v4.2.0-beta.0)\n* Vuetify v4.1: [v4.1.12](/getting-started/release-notes/?version=v4.1.12) · [v4.1.11](/getting-started/release-notes/?version=v4.1.11) · [v4.1.10](/getting-started/release-notes/?version=v4.1.10) · [v4.1.9](/getting-started/release-notes/?version=v4.1.9) · [v4.1.8](/getting-started/release-notes/?version=v4.1.8)\n* Vuetify v3 LTS: [v3.13.2](/getting-started/release-notes/?version=v3.13.2) · [v3.13.1](/getting-started/release-notes/?version=v3.13.1)\n* Vuetify0: [v1.2.0](https://0.vuetifyjs.com/releases/?version=v1.2.0) · [v1.1.0](https://0.vuetifyjs.com/releases/?version=v1.1.0) · [v1.0.5](https://0.vuetifyjs.com/releases/?version=v1.0.5) · [v1.0.4](https://0.vuetifyjs.com/releases/?version=v1.0.4) · [v1.0.3](https://0.vuetifyjs.com/releases/?version=v1.0.3)\n\n---\n\n## Spotlight: Vuetify 4.2 { #vuetify-4-2 }\n\n\n\n
\n\n[v4.2.0](/getting-started/release-notes/?version=v4.2.0) is the second minor of the v4 line. It collects everything merged to `dev` branch since June. That includes the work covered in the [July update](/blog/july-2026-update/): multi-selection events, `VSkeletonLoader` types, `size` on VBtnGroup, VTreeview keyboard navigation and a11y improvements to name a few. It adds the features [below](#new-features), and [`validation rules`](/features/rules/) are finally out of Labs.\n\n### Before you upgrade\n\nThree changes that aren't new props.\n\n**`@vuetify/v0` is now a dependency.** Before 4.2, `vuetify` did not require any direct dependencies. v4.2.0 depends on `@vuetify/v0@^1.2.1` but for now, the surface is limited to safe and simple utilities (`isString`, `isObject`, …), `range` and the `toHighlight` transformer from it ([#23039](https://github.com/vuetifyjs/vuetify/pull/23039)). We expect v0 to slowly take over more and more of responsibility within the Vuetify codebase.\n\n**Sass variables cleanup.** 125 variables across 39 components were declared but never read by any stylesheet ([2d01fae](https://github.com/vuetifyjs/vuetify/commit/2d01fae)). Setting them did not have any effect. Cleanup make it clear these were never part of the intended API of v3 and v4. If your `settings.scss` did include them, you might be prompted to remove them by the compiler:\n\n```txt\nError: This variable was not declared with !default in the @used module.\n```\n\nThe full list is posted in the dedicated page: [Unused Sass variables](/getting-started/unused-sass-variables/).\n\n**Buttons clip their overlay.** VBtn and VIconBtn now set `overflow: hidden`, so hover overlays and tonal underlays do not have any gaps when combined with thick borders ([#22992](https://github.com/vuetifyjs/vuetify/pull/22992)). We anticipated it may susprise some developers and some of them already shared that VBadge placed inside button is clipped. There are at least 3 easy solutions to this and you only need to pick one that suites your project (see [#23179](https://github.com/vuetifyjs/vuetify/issues/23179)).\n\n---\n\n## Framework Updates\n\n### New Features\n\nEverything in this section shipped in v4.2.0.\n\n**The select family.** VSelect, VAutocomplete and VCombobox received four additions:\n\n* **Persistent menus.** `:menu-props=\"{ persistent: true }\"` keeps the menu open, and `closeOnContentClick: false` keeps it open after a selection. Both were ignored before ([#23008](https://github.com/vuetifyjs/vuetify/pull/23008), closes [#20590](https://github.com/vuetifyjs/vuetify/issues/20590)).\n* **`trim-values`** on VCombobox trims typed values and drops whitespace-only entries ([#22895](https://github.com/vuetifyjs/vuetify/pull/22895), closes [#14874](https://github.com/vuetifyjs/vuetify/issues/14874)).\n* **`open-on-focus`** opens the menu when the field gets focus, from Tab as well as a click ([#23126](https://github.com/vuetifyjs/vuetify/pull/23126), closes [#22934](https://github.com/vuetifyjs/vuetify/issues/22934)). Focus returning to the field after the menu closes does not reopen it. VDateInput and VColorInput have the same prop.\n* **`close-on-input-click`** on VAutocomplete and VCombobox makes a click on the input toggle the menu instead of always opening it ([#23023](https://github.com/vuetifyjs/vuetify/pull/23023)).\n\nThe last two help improve experience if end-users are used to clicking the input to dismiss/toggle the menu.\n\n```html\n\n```\n\nKeyboard navigation in these menus was reworked around the virtual list ([#23031](https://github.com/vuetifyjs/vuetify/pull/23031), [aae8fc4](https://github.com/vuetifyjs/vuetify/commit/aae8fc4)). The problem was haunting any list longer than 50 elements. While not very noticable in general it most certainly impacted form-heavy apps especially if users rely on the keyboard to navigate and update selections ([#18383](https://github.com/vuetifyjs/vuetify/issues/18383), [#22770](https://github.com/vuetifyjs/vuetify/issues/22770)).\n\n**Defaults for inner controls.** Some components render inner controls with hardcoded props: chips in VSelect are `size=\"small\"`, VStepperActions buttons are `text` and `tonal`, the items-per-page select in the data table footer has a fixed variant. Customizing those was previously very had and involved deep CSS overrides or forced developers to use slots. Now it is a straightforward nested object structure in using the standard configuration system ([#23108](https://github.com/vuetifyjs/vuetify/pull/23108)):\n\n```js { resource=\"src/plugins/vuetify.js\" }\ncreateVuetify({\n defaults: {\n VSelect: { VChip: { size: 'large' } }, // also VAutocomplete, VCombobox, VFileInput\n VStepperActions: { VBtn: { variant: 'outlined' } },\n VDataTableFooter: { VSelect: { variant: 'solo-filled' } },\n },\n})\n```\n\nVisit [Global configuration](/features/global-configuration/) to inspect the full list of nested keys, where we listed new `VStepperActionsPrevBtn` and `VStepperActionsNextBtn` role names as well.\n\n**[VDateInput](/components/date-inputs/)** now types like a masked input ([#23052](https://github.com/vuetifyjs/vuetify/pull/23052), closes [#23051](https://github.com/vuetifyjs/vuetify/issues/23051)) while making sure user won't input invalid dates. Separators are inserted/enforced following current locale, range format and RTL. Further improvements are planned for v4.3.0 - input will show localized placeholders marking major i18n improvement ([#23173](https://github.com/vuetifyjs/vuetify/pull/23173)).\n\n**[VSlideGroup](/components/slide-groups/)** got three long-standing issues closed:\n\n* `scroll-snap` (`start`, `center` or `end`) enables CSS scroll snapping, and the prev/next arrows stop on item boundaries ([#15916](https://github.com/vuetifyjs/vuetify/issues/15916))\n* `scroll-distance` sets how far the arrows scroll, in pixels or as a percentage\n* `slide()` is exposed for scrolling programmatically: `slide('next')`, `slide({ by: 200 })`, `slide({ index: 3 })` ([#21250](https://github.com/vuetifyjs/vuetify/issues/21250))\n* the `edge` event fires with `'start'` or `'end'` when scrolling reaches either end ([#11364](https://github.com/vuetifyjs/vuetify/issues/11364))\n\n**[VProgressLinear](/components/progress-linear/) and [VProgressCircular](/components/progress-circular/)** take a `transition` prop: `false` turns off the value animation, and `{ duration: 600 }` makes it slower ([#22442](https://github.com/vuetifyjs/vuetify/issues/22442)). New `reveal` prop has been shipped to align with the circular counterpart.\n\nSmaller additions:\n\n* **[VNavigationDrawer](/components/navigation-drawers/)** — `width` accepts percentages ([#16150](https://github.com/vuetifyjs/vuetify/issues/16150)).\n* **[VRadio](/components/radio-buttons/)** — `v-model` works on a radio without VRadioGroup ([#16245](https://github.com/vuetifyjs/vuetify/issues/16245))\n* **[VFileInput](/components/file-inputs/)** — supports `placeholder` and `persistent-placeholder` ([#23048](https://github.com/vuetifyjs/vuetify/pull/23048)), and shows dashed outline while dragging files over it ([#22909](https://github.com/vuetifyjs/vuetify/pull/22909))\n* **[VVirtualScroll](/components/virtual-scroller/)** — `scrollToIndex(index, position)` accepts second argument with `'start'`, `'center'` or `'end'` ([#18574](https://github.com/vuetifyjs/vuetify/pull/18574))\n\n### Bug Fixes\n\nMost of August's fixes landed in overlays, virtual scrolling and the select family. Three worth reading about:\n\n**Dialogs opened from menus.** Clicking inside a VDialog opened from a VMenu closed the whole menu chain ([#20468](https://github.com/vuetifyjs/vuetify/issues/20468), from 2024). Non-menu overlays now stop the close cascade ([e30eb47](https://github.com/vuetifyjs/vuetify/commit/e30eb47cc5999f4a26a32dcd472f4ea19e2820f0)), and custom overlays and tooltips no longer keep a menu from closing ([#22993](https://github.com/vuetifyjs/vuetify/pull/22993)).\n\n**Android \"desktop site\" mode.** Overlays should now be correctly positioned in \"desktop site\" mode ([#22124](https://github.com/vuetifyjs/vuetify/issues/22124)) since v4.1.8 and v3.13.1, and on pages using CSS `zoom` again since v4.2.1.\n\n**Active links on refresh.** In Nuxt, links with `to` could flash as active on a hard refresh while the router was still resolving the first navigation ([#23131](https://github.com/vuetifyjs/vuetify/pull/23131)).\n\n| Component | Fix | Version | PR / commit |\n|---------------------------|-------------------------------------------------------------------------|---------|-----------------------------------------------------------------|\n| **VNumberInput** | Strip the grouping separator before parsing (German locale) | v4.1.8 | [94e94a9](https://github.com/vuetifyjs/vuetify/commit/94e94a9) |\n| **theme** | Emit `color-scheme: light` so native scrollbars follow a theme switch | v4.1.8 | [#23071](https://github.com/vuetifyjs/vuetify/pull/23071) |\n| **VFileUpload** | No SSR crash with an empty file list | v4.1.8 | [4cd5288](https://github.com/vuetifyjs/vuetify/commit/4cd5288) |\n| **package** | Accept Vue 3.6 prereleases in the peer range | v4.1.8 | [#23040](https://github.com/vuetifyjs/vuetify/pull/23040) |\n| **rounded** | Restore classes for per-side values containing `0` | v4.1.9 | [27962f3](https://github.com/vuetifyjs/vuetify/commit/27962f3) |\n| **validation** | Run rules as soon as a field is cleared, not on blur | v4.1.9 | [58b5537](https://github.com/vuetifyjs/vuetify/commit/58b5537) |\n| **VDataTableVirtual** | Correct height with several expanded rows per item | v4.1.9 | [6f5f04b](https://github.com/vuetifyjs/vuetify/commit/6f5f04b) |\n| **VSelect** | Focus the right item when opened with the keyboard in Shadow DOM | v4.1.9 | [#23102](https://github.com/vuetifyjs/vuetify/pull/23102) |\n| **VDataTable** | Key cells so slot props don't leak between columns | v4.1.10 | [#23124](https://github.com/vuetifyjs/vuetify/pull/23124) |\n| **VNumberInput** | Spin buttons snap an out-of-range value to `min`/`max` | v4.1.10 | [#23109](https://github.com/vuetifyjs/vuetify/pull/23109) |\n| **VDialog** | No error when unmounted while closing | v4.1.10 | [#23054](https://github.com/vuetifyjs/vuetify/pull/23054) |\n| **VProgressLinear** | Keep indeterminate bars visible in Firefox | v4.1.10 | [694fcdb](https://github.com/vuetifyjs/vuetify/commit/694fcdb) |\n| **VProgressLinear** | Restore the `split` variant animation, broken in v4.1.7 | v4.1.10 | [537a5f7](https://github.com/vuetifyjs/vuetify/commit/537a5f7) |\n| **VDatePicker** | Restore the hover preview in range selection | v4.1.10 | [6c1dee2](https://github.com/vuetifyjs/vuetify/commit/6c1dee2) |\n| **VOverlay** | Return focus to the activator when `eager` | v4.1.10 | [c879795](https://github.com/vuetifyjs/vuetify/commit/c879795) |\n| **VBtn / VDivider / VImg**| No `value` on links, no redundant `role` on `
`, no empty `aria-label` | v4.1.10 | [#23122](https://github.com/vuetifyjs/vuetify/pull/23122), [#23107](https://github.com/vuetifyjs/vuetify/pull/23107), [#23112](https://github.com/vuetifyjs/vuetify/pull/23112) |\n| **VVirtualScroll** | Measure dividers and subheaders, estimate item height by median | v4.1.11 | [cb60a1f](https://github.com/vuetifyjs/vuetify/commit/cb60a1f) |\n| **VVirtualScroll** | Scrolling no longer locks up when items contain a divider | v4.1.11 | [f1cf0b0](https://github.com/vuetifyjs/vuetify/commit/f1cf0b0) |\n| **VRow** | Restore 8px gutters for `dense` | v4.1.11 | [ea6c628](https://github.com/vuetifyjs/vuetify/commit/ea6c628) |\n| **VOverlay** | Correct position when the activator changes mid-transition | v4.1.12 | [63cccbb](https://github.com/vuetifyjs/vuetify/commit/63cccbb) |\n| **VProgressLinear** | `rounded-bar` with `reverse` and buffer | v4.1.12 | [55fed01](https://github.com/vuetifyjs/vuetify/commit/55fed01) |\n| **locale** | Ukrainian translation fixes, missing Arabic keys | v4.1.12 | [#23139](https://github.com/vuetifyjs/vuetify/pull/23139) |\n| **VIconBtn** | Default color matches VBtn (icons disappeared on colored backgrounds) | v4.2.0 | [1695a49](https://github.com/vuetifyjs/vuetify/commit/1695a49) |\n| **VMenu** | One open submenu per level; Tab and ArrowLeft return focus to the activator | v4.2.0 | [#22904](https://github.com/vuetifyjs/vuetify/pull/22904) |\n| **VTextField** | Keep caret and selection when toggling `type` in Chrome | v4.2.0 | [47c9cc1](https://github.com/vuetifyjs/vuetify/commit/47c9cc1) |\n| **VTreeview** | Open matching nodes when searching | v4.2.0 | [#22983](https://github.com/vuetifyjs/vuetify/pull/22983) |\n| **VInput** | Consistent transitions for messages, details and counter | v4.2.0 | [#23049](https://github.com/vuetifyjs/vuetify/pull/23049) |\n| **v-touch** | Ignore scrolling inside the element | v4.2.0 | [19ee74e](https://github.com/vuetifyjs/vuetify/commit/19ee74e) |\n| **VSlideGroup** | A click on a partially visible item selects it instead of scrolling it | v4.2.0 | [55d8e80](https://github.com/vuetifyjs/vuetify/commit/55d8e80) |\n\nThe VTextField fix covers the password reveal pattern: toggling `type` from an `append-inner` icon put the caret back at the start. It had been open since 2022 ([#16109](https://github.com/vuetifyjs/vuetify/issues/16109)).\n\n### In Development\n\nThe July update listed six PRs for 4.2: VSlider `pill` ([#22699](https://github.com/vuetifyjs/vuetify/pull/22699)), VMaskInput dynamic masks ([#22501](https://github.com/vuetifyjs/vuetify/pull/22501)), VTimePicker keyboard controls ([#22604](https://github.com/vuetifyjs/vuetify/pull/22604)), VBtn/VIconBtn MD3 sizing ([#21831](https://github.com/vuetifyjs/vuetify/pull/21831)), VDatePicker week selection ([#20867](https://github.com/vuetifyjs/vuetify/pull/20867)) and a VField `border` prop ([#19819](https://github.com/vuetifyjs/vuetify/pull/19819)). None of them made it. VSlider, VMaskInput and VDatePicker moved to the v4.3.0 milestone together with the VBreadcrumbs accessibility PR ([#22358](https://github.com/vuetifyjs/vuetify/pull/22358)). The other three have no target yet.\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\n163 merged PRs, three patches ([v1.0.3](https://0.vuetifyjs.com/releases/?version=v1.0.3) on August 4, [v1.0.4](https://0.vuetifyjs.com/releases/?version=v1.0.4) on August 12, [v1.0.5](https://0.vuetifyjs.com/releases/?version=v1.0.5) on August 18) and [v1.2.0](https://0.vuetifyjs.com/releases/?version=v1.2.0) on August 25. A release tooling slip published a partial v1.1.0 an hour earlier; 1.2.0 includes all of it.\n\n### New in 1.2\n\n* **[DataTable](https://0.vuetifyjs.com/components/data/data-table)** and **[DataGrid](https://0.vuetifyjs.com/components/data/data-grid)** — headless compounds over `createDataTable` and `createDataGrid`. DataTable renders semantic `
NameTypeDefaultDescription
\n keys\n \n MaybeRef<string | undefined>\n \n required\n \n

The key combination string or reactive reference to a key combination. Supports modifiers (ctrl, cmd, alt, shift, meta) and key sequences separated by dashes. Changes to reactive refs are automatically applied.

\n
\n callback\n \n (e: KeyboardEvent) => void\n \n required\n \n

Function to execute when the hotkey is triggered. Receives the KeyboardEvent as a parameter.

\n
\n options\n \n HotkeyOptions\n \n {}\n \n

Optional configuration object to customize hotkey behavior. All options support reactive refs and will update automatically when changed.

\n
NameTypeDefaultDescription
\n event\n \n MaybeRef<'keydown' | 'keyup'>\n \n 'keydown'\n \n

The keyboard event type to listen for. Can be reactive - changing this will automatically re-register the event listener.

\n
\n inputs\n \n MaybeRef<boolean>\n \n false\n \n

Whether to trigger hotkeys when input elements (input, textarea, contenteditable) are focused. When false, hotkeys are disabled in input contexts. Changes to reactive refs take effect immediately.

\n
\n preventDefault\n \n MaybeRef<boolean>\n \n true\n \n

Whether to call preventDefault() on the keyboard event when the hotkey matches. Can be reactive to dynamically control event prevention.

\n
\n sequenceTimeout\n \n MaybeRef<number>\n \n 1000\n \n

Timeout in milliseconds for key sequences. If the next key in a sequence isn't pressed within this time, the sequence resets. Changes to reactive refs apply to new sequences.

\n
TypeDescription
\n () => void\n \n

Cleanup function that removes the keyboard event listener. Automatically called when the component unmounts if used within a Vue component setup context.

\n
` markup with `aria-sort` and `aria-rowcount`; DataGrid adds column pinning and resizing, cell editing and row spanning ([#825](https://github.com/vuetifyjs/0/pull/825), [#826](https://github.com/vuetifyjs/0/pull/826))\n* **[Alert](https://0.vuetifyjs.com/components/semantic/alert)** — a live region, `role=\"alert\"` by default and `role=\"status\"` for messages that shouldn't interrupt ([#823](https://github.com/vuetifyjs/0/pull/823))\n* **[usePopover](https://0.vuetifyjs.com/composables/system/use-popover)** — positioning adapters. CSS anchor positioning stays the default. Firefox ESR and Safari before 26 don't support it, so there is now a first-party floating-ui adapter at `@vuetify/v0/popover/adapters/floating-ui` (with `@floating-ui/dom` as a peer), and `createPopoverPlugin` sets an adapter for the whole app ([#846](https://github.com/vuetifyjs/0/pull/846), [#917](https://github.com/vuetifyjs/0/pull/917))\n* **useTheme** — `system: { light, dark }` follows `prefers-color-scheme` until the user picks a theme ([#872](https://github.com/vuetifyjs/0/pull/872))\n* **`persist`** for `createFeaturesPlugin` and `createNotificationsPlugin`. Features store only the flags the user changed; notifications store read/seen/archived/snoozed state, never content ([#388](https://github.com/vuetifyjs/0/pull/388), [#384](https://github.com/vuetifyjs/0/pull/384))\n* **NumberField** — `commitOn: 'input'` writes the model on every keystroke and leaves clamping for blur. The same PR found that `NumberField.Root` never clamped unless you passed `:clamp=\"true\"` ([#786](https://github.com/vuetifyjs/0/pull/786))\n\n### Fixes\n\n* **useDate** — every locale got Sunday-start weeks in Firefox, and server and client could disagree when Node and browser ICU versions differ. Week data now comes from CLDR 48 on every runtime ([#796](https://github.com/vuetifyjs/0/pull/796)). This matters for Vuetify too, since the framework's date composables are moving onto v0.\n* **`getActiveElement()`** walks open shadow roots, the same fix Vuetify made for Shadow DOM in July. `useHotkey`, `useClickOutside` and `useDragDrop` use it ([#693](https://github.com/vuetifyjs/0/pull/693)).\n* **Snackbar** — NVDA skipped toasts injected into a fresh `role=\"status\"` region. `Snackbar.Portal` now renders persistent polite and assertive live regions and mirrors each toast into them ([#774](https://github.com/vuetifyjs/0/pull/774)).\n* **AlertDialog** focuses the Cancel action on open, per the APG pattern ([#630](https://github.com/vuetifyjs/0/pull/630)).\n\n### Design systems on v0\n\n**[Emerald](https://0.vuetifyjs.com/systems/emerald)** (`@paper/emerald` 0.1.0) is a styled design system on v0: 28 component families, Figma-sourced tokens, light and dark themes that follow the OS, and an icon set addressed by role. There's a [live demo](https://0.vuetifyjs.com/demo/emerald/) and a [Figma UI kit](https://store.vuetifyjs.com/products/official-emerald-ui-kit-for-figma).\n\n**[Bulma](https://0.vuetifyjs.com/systems/bulma)** (`@paper/bulma` 0.1.0) goes the other way. Its components render the markup Bulma documents against the `bulma.css` you already load, and add the JavaScript Bulma never had: open state, click-outside, Escape, focus and form wiring. The package ships no CSS.\n\nThe [v0 playground](https://v0play.vuetifyjs.com) can save playgrounds to Vuetify One ([#817](https://github.com/vuetifyjs/0/pull/817)) and switch Vuetify versions (incl. nightly releases ([#836](https://github.com/vuetifyjs/0/pull/836))).\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v1.1.0 Release](https://0.vuetifyjs.com/releases/?version=v1.1.0)\n* [v1.2.0 Release](https://0.vuetifyjs.com/releases/?version=v1.2.0)\n* [v0play](https://v0play.vuetifyjs.com)\n\n---\n\n## Tooling Updates { #ecosystem-tooling }\n\n### Vuetify MCP\n\n\n\n
\n\nFour releases: v0.9.0 and v0.9.1 (August 13), v0.10.0 (August 27) and v0.11.0 (August 28). The hosted server now has two endpoints ([#41](https://github.com/vuetifyjs/mcp/pull/41)):\n\n| URL | Auth | Tools |\n|-----------------------------------|-----------------------|----------------------------------------------|\n| `https://mcp.vuetifyjs.com/mcp` | none | docs, API, issues |\n| `https://mcp.vuetifyjs.com/one` | OAuth (Vuetify One) | the same, plus bins, playgrounds and links |\n\nv0.11.0 adds a Vuetify 2 → 3 upgrade toolkit that targets 3.13 LTS ([#43](https://github.com/vuetifyjs/mcp/pull/43)): `get_v3_upgrade_playbook` (ordered phases, starting with a Playwright baseline), `get_v2_to_v3_component_map`, `get_v3_breaking_changes` and an `upgrade-v2-to-v3` prompt. Before this, `get_upgrade_guide('v2.7')` returned the v4 guide. The v3 upgrade guide got an MCP quick start to go with it ([#23154](https://github.com/vuetifyjs/vuetify/pull/23154)).\n\n### Vuetify CLI\n\nNo release in August. Two features are merged and wait for the next one: `vuetify add` copies v0 examples from the docs registry into your project and tracks them in `vuetify.json`, with `diff` and `refresh` against the source ([#27](https://github.com/vuetifyjs/cli/pull/27)), and `create --features=mcp` writes client config for Cursor, Claude Code and Grok pointing at the hosted server ([#29](https://github.com/vuetifyjs/cli/pull/29)).\n\n### Nuxt Module\n\n[v1.0.0-rc.4](https://github.com/vuetifyjs/nuxt-module/releases/tag/v1.0.0-rc.4) (August 2) and [rc.5](https://github.com/vuetifyjs/nuxt-module/releases/tag/v1.0.0-rc.5) (August 22) are dependency updates (Nuxt 4.5.1) and a documented workaround for the `useLayout` auto-import collision.\n\n### Upgrade guide\n\nTwo v3 → v4 migration problems from a production migration are now documented ([#22848](https://github.com/vuetifyjs/vuetify/pull/22848)). In Vite dev mode the dependency pre-bundler can create two `useStack` instances, and menus opened inside a dialog end up behind it; the fix is `optimizeDeps.include`. The guide digs deeper into the `@layer` order that is a typical friction point for developers trying to upgrade existing projects.\n\n### Snips\n\n[Snips](https://snips.vuetifyjs.com/) prices are cut by half with no end date: category packs $74, all-access $149, team all-access $399.\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\n[v4.2.0](/getting-started/release-notes/?version=v4.2.0) went stable on September 2 and [v4.2.1](/getting-started/release-notes/?version=v4.2.1) followed on September 9. If you set Sass variables, read [Before you upgrade](#before-you-upgrade) first. Three of the PRs that missed 4.2 are on the v4.3.0 milestone, and more of v0 will move into the framework through 4.x minors.\n\n* [Vuetify 4.2](/getting-started/release-notes/?version=v4.2.0) is stable, and it installs `@vuetify/v0` with it\n* [Vuetify0 1.2](https://0.vuetifyjs.com/releases/?version=v1.2.0) adds headless DataTable, DataGrid and Alert\n* The hosted MCP works without an account at `https://mcp.vuetifyjs.com/mcp`\n\n::: warning\n\n**Vuetify needs your support.** Open Collective funds are running low, the team has scaled down, and contributors are barely compensated for their work. If your team relies on Vuetify, point your organization at [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider).\n\n:::\n\nThanks to everyone who sent a PR in August: [lazerg](https://github.com/lazerg), [BatLeDev](https://github.com/BatLeDev), [waterWang](https://github.com/waterWang), [vianmangal](https://github.com/vianmangal), [userquin](https://github.com/userquin), [mahsarajabpour](https://github.com/mahsarajabpour), [klivak](https://github.com/klivak), [jcollins1983](https://github.com/jcollins1983) and [jaketig](https://github.com/jaketig) in the framework, and [sridhar-3009](https://github.com/sridhar-3009), [MuslumYilmaz](https://github.com/MuslumYilmaz) and [Haviles04](https://github.com/Haviles04) in Vuetify0 and the MCP.\n\nSee you in September!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://community.vuetifyjs.com), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements.*\n","packages/docs/src/pages/en/blog/building-a-basic-nuxt-application-with-vuetify.md":"---\nlayout: blog\nmeta:\n title: Vuetify — Building a Basic Nuxt App with Vuetify\n description: Learn how to build a basic Nuxt app with Vuetify\n keywords: Vuetify, Nuxt, Vue, JavaScript, Web Development\n---\n\n# Building a Basic Nuxt Application with Vuetify\n\n---\n\n🖊️ Eric Sarrion • 📅 February 21st, 2025\n\n\n\n---\n\n## Introduction\n\nIn this article, we will build a basic application using Vue.js and Vuetify, leveraging the Nuxt framework.\n\nWhy do we use the Nuxt framework?\n\n1. It allows us to easily create new pages in our application using URLs such as /contact to access the contact page, or /products to access the products page.\n1. It simplifies the use of Vuetify components through a simple configuration in the nuxt.config.ts file.\n1. It automatically loads Vue.js methods and the components of our application without the need to import them manually each time. No more instructions like import { ref } from \"vue\".\n\nFor the mere simplification of the code enabled by the automatic loading of Vue.js methods and our application’s components, using Nuxt in our projects is highly recommended.\n\nWhy do we use Vuetify?\n\n1. Vuetify was created in 2016 and has been regularly updated and improved since then. Version 3 fully utilizes the latest version of Vue.js, with the `\n```\n\nVuetify offers the v-spacer component, which allows \"pushing\" the elements that follow it to the right. The buttons will therefore be positioned on the right side of the toolbar.\n\nTo display the buttons, we use the v-btn component with the icon attribute. This attribute allows the button to be displayed in a circular shape, according to the icon it contains. The @click attribute is also used to handle navigation to the desired page, just as we did in the navigation menu.\n\nThe application is now displayed:\n\n![Toolbar with additional navigation buttons for quick page access.](https://cdn.vuetifyjs.com/docs/images/blog/building-a-basic-nuxt-application-with-vuetify/14.png){ height=500 }\n\nClicking on the buttons displays the desired page. For example, the /contact page:\n\n![Contact page displayed after selecting it from the navigation menu.](https://cdn.vuetifyjs.com/docs/images/blog/building-a-basic-nuxt-application-with-vuetify/15.png){ height=500 }\n\n## Conclusion\n\nIn this article, we have covered fundamental aspects of using Vue.js and Vuetify in a Nuxt application.\n\nWe explored several Vuetify components that help design the application, and we learned how to break down the application into different pages, through which we navigated.\n","packages/docs/src/pages/en/blog/building-with-nuxt-and-unocss.md":"---\nlayout: blog\nmeta:\n title: Build with Nuxt and UnoCSS\n description: Learn how to effectively integrate Vuetify v3 with UnoCSS taking into consideration breakpoints, theme, typography and CSS layers.\n keywords: UnoCSS, TailwindCSS, Theme, CSS Layers\n---\n\n# Creating a highly optimized Vuetify 3 project with Nuxt and UnoCSS\n\nAlthough traditionally we tend to think about Vuetify as a great fit for large projects, it can also serve smaller projects that tend to prioritize performance. When scaffolding new projects it comes with tree-shaking out-of-the-box, but there is still some room for improvement as main CSS bundle ships hundreds of kB of CSS we might not need. If the users like your page loading animation and you can afford a bit of overhead, there is nothing wrong with simplified setup that does the job and lets you focus on the business logic or UX. That said, integrating UnoCSS (atomic CSS engine) will help us trim the bundle and enable dynamic utilities. With its superpowers we not only avoid writing plain CSS (most of the time), but can also make use of TailwindCSS tooling (IDE extensions) or standardize certain utilities.\n\nThe article will walk through scaffolding a starter project, installing and wiring UnoCSS, customizing fonts, handling light/dark mode and aligning breakpoints. Finally, \"CSS layers\" section shows how to order Vuetify, UnoCSS, and app‑specific styles to avoid specificity conflicts.\n\n🖊️ Jacek Czarniecki • 📅 December 22nd, 2025\n\n\n\n---\n\n## Table of Contents\n\n* [The steps ahead](#the-steps-ahead)\n* [Scaffold a new project](#scaffold-a-new-project)\n* [Keep an eye on the outputs](#keep-an-eye-on-the-outputs)\n* [Disable CSS for utilities](#disable-css-for-utilities)\n * [Shortest way to setup UnoCSS](#shortest-way-to-setup-unocss)\n * [Migrating to utilities from TailwindCSS v4](#migrating-to-utilities-from-tailwindcss-v4)\n * [Resolve specificity issues (quickly)](#resolve-specificity-issues-quickly)\n * [Font family configuration](#font-family-configuration)\n * [Light/dark mode compatibility](#light-dark-mode-compatibility)\n * [Custom typography (text variants)](#custom-typography-text-variants)\n * [Customize breakpoints](#customize-breakpoints)\n* [Using CSS layers](#using-css-layers)\n\n---\n\n## The steps ahead\n\nRight after generating starter project we are going to disable all CSS for non-theme colors (Material colors palette) and CSS utilities. This leaves out styles for \"reset\", transitions and components. UnoCSS is going to generate them on the fly making sure we only bundle CSS we actually use.\n\nAlong the way we will keep in mind that successful integration has to correctly match following aspects:\n\n* themes (light / dark mode)\n* custom typography\n* responsive breakpoints\n\nLastly, we will enable CSS layers to establish order. This part is meant for advanced frontend developers and teams that have a solid knowledge of CSS and the layers can impact day to day work. It is not a free lunch and it might not always fit the workflow or the way you write CSS.\n\n## Scaffold a new project\n\n::: tabs\n\n```bash [pnpm]\npnpm create vuetify@2.8.0\n```\n\n```bash [yarn]\nyarn create vuetify@2.8.0\n```\n\n```bash [npm]\nnpm create vuetify@2.8.0\n```\n\n```bash [bun]\nbun create vuetify@2.8.0\n```\n\n:::\n\n...choose \"Nuxt Recommended\". Following questions don't matter much.\n\nStart the project on localhost\n\n::: tabs\n\n```bash [pnpm]\npnpm dev\n```\n\n```bash [yarn]\nyarn dev\n```\n\n```bash [npm]\nnpm run dev\n```\n\n```bash [bun]\nbun run dev\n```\n\n:::\n\n## Keep an eye on the outputs\n\nNuxt uses Vite under the hood to build assets for production. Sizes are all layed out in the logs.\n\n::: tabs\n\n```bash [pnpm]\npnpm build\n```\n\n```bash [yarn]\nyarn build\n```\n\n```bash [npm]\nnpm run build\n```\n\n```bash [bun]\nbun run build\n```\n\n:::\n\n![Log from Nuxt build showing entry bundle exceeding 500kB (unminified)](https://cdn.vuetifyjs.com/docs/images/blog/building-with-nuxt-and-unocss/nuxt-build-log.png)\n\nAnytime you build the project, bundle files are right there in the `.output/public/_nuxt` directory. The CSS bundle file named `entry{hash}.css` is one that might be particularly interesting.\n\n::: tip\nWhen inspecting bundles, keep in mind VSCode might refuse to format large files, freeze or even crash. I recommend Zed editor for the optimal experience.\n:::\n\n## Disable CSS for utilities\n\nLet's adjust the `app/assets/settings.scss`:\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $utilities: false,\n);\n```\n\nIf you run `pnpm build` again, you may observe that `entry.*.css` bundle is significantly smaller. We could get even further by replacing MDI font icons with SVG icons or UnoCSS preset for icons, but it is out of scope for this article.\n\n### Shortest way to setup UnoCSS\n\n::: tabs\n\n```bash [pnpm]\npnpm add -D unocss unocss-preset-vuetify @unocss/nuxt\n```\n\n```bash [yarn]\nyarn add -D unocss unocss-preset-vuetify @unocss/nuxt\n```\n\n```bash [npm]\nnpm i -D unocss unocss-preset-vuetify @unocss/nuxt\n```\n\n```bash [bun]\nbun add -D unocss unocss-preset-vuetify @unocss/nuxt\n```\n\n:::\n\nRegister the module in `nuxt.config.ts` and paste initial configuration nearby:\n\n```ts { resource=\"nuxt.config.ts\" }\nimport { presetVuetify } from 'unocss-preset-vuetify'\n\nexport default defineNuxtConfig({\n // ...\n\n modules: [\n '@unocss/nuxt',\n // ... keep other modules\n ],\n\n // vuetify: { ... }\n\n unocss: {\n presets: [\n presetVuetify(),\n ],\n safelist: [/* classes that have to be always generated */],\n },\n})\n```\n\nWith the dedicated preset for Vuetify, we get all the utilities back. Except this time, UnoCSS scans the project files and generates CSS only for the classes we actually use.\n\nKeep in mind that this library was released fairly recently. If you notice any problem or limitation, reach out on [Discord](https://community.vuetifyjs.com) or post the issue on [GitHub](https://github.com/vuetifyjs/unocss-preset-vuetify).\n\n### Migrating to utilities from TailwindCSS v4\n\n::: tabs\n\n```bash [pnpm]\npnpm remove unocss-preset-vuetify\npnpm add -D @unocss/preset-wind4\n```\n\n```bash [yarn]\nyarn remove unocss-preset-vuetify\nyarn add -D @unocss/preset-wind4\n```\n\n```bash [npm]\nnpm un unocss-preset-vuetify\nnpm i -D @unocss/preset-wind4\n```\n\n```bash [bun]\nbun remove unocss-preset-vuetify\nbun add -D @unocss/preset-wind4\n```\n\n:::\n\nThe preset called [Wind4](https://unocss.dev/presets/wind4) is an official configuration builder providing making it easy to expose all the utilities from TailwindCSS v4 in your project. There are 2 configuration points - an object passed to the main `presetWind4` method and `theme` field next to the `presets`. Unlike using pure TailwindCSS v4 it lets us configure stuff in JavaScript code.\n\n```ts { resource=\"nuxt.config.ts\" }\nimport presetWind4 from '@unocss/preset-wind4'\n\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [\n presetWind4({\n preflights: {\n reset: false,\n },\n }),\n ],\n theme: {},\n },\n})\n```\n\nThe code above ensures we use only CSS reset from Vuetify and won't experience conflicts.\n\nSince TailwindCSS preset comes with its color palette we can use it instead of the Material palette from Vuetify. It is not an equivalent replacement, but if you want to go all-in with TailwindCSS utilities, you probably know what to expect ahead. Let's change the `app/assets/settings.scss`:\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $color-pack: false, // <- disable colors from Material palette\n $utilities: false,\n);\n```\n\nWe can finish this part with small adjustment to the example content in `HelloWorld.vue` and `AppFooter.vue`\n\n* replace `fill-height` with `h-full`\n* replace `font-weight-` with `font-`\n* replace `mb-n1` with `-mb-1`\n\nOptionally replace typography classes if you intend to use utilities from TailwindCSS. Further in the article, we will configure UnoCSS to provide typography aligned with Vuetify conventions. If you already know you won't need it, these are the closest equivalents (for the font size only):\n\n* `text-h2` » `text-5xl`\n* `text-h5` » `text-2xl`\n* `text-subtitle-1` » `text-base`\n* `text-body-2` » `text-sm`\n\nTurns out `v-container` paired with `fill-height` class gets special additional styles when `v-row` is also on the page. So we need to add some more utility classes to move the content to the center:\n\n```html\n\n```\n\nThere is one more component that relies on utility classes - `v-row`. Convenient props named `justify` and `align` rely on the utilitity classes for CSS properties `justify-content` and `align-items` respectively. TailwindCSS won't detect them though and even if we could force it to generate them, the classes in TailwindCSS are named slightly differently (e.g. `justify-space-between` vs `justify-between`). There are couple of ways to get around it.\n\n* just paste the classes in any CSS/SCSS file meant for global styles (e.g. `main.scss`)\n* spread `$utilites` to selectively disable most of them while keeping `justify-content` and `align-items`\n* don't use VRow/VCol or ban just those two problematic props (can be achieved by patching `vuetify-eslint-plugin`)\n\nIf you go with the first option, you can copy the classes below.\n\n```scss\n.justify-start { justify-content: flex-start }\n.justify-end { justify-content: flex-end }\n.justify-center { justify-content: center }\n.justify-space-between { justify-content: space-between }\n.justify-space-around { justify-content: space-around }\n.justify-space-evenly { justify-content: space-evenly }\n\n.align-start { align-items: flex-start }\n.align-end { align-items: flex-end }\n.align-center { align-items: center }\n.align-baseline { align-items: baseline }\n.align-stretch { align-items: stretch }\n\n.order-1 { order: 1 }\n// repeat until 12...\n.order-last { order: 13 }\n```\n\nSecond option is trading hardcoded styles for some noise in the Sass configuration.\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $utilities: (\n \"align-items\": (responsive: false, unimportant: (align-items)),\n \"justify-content\": (responsive: false, unimportant: (justify-content)),\n \"order\": (responsive: false, unimportant: (order)),\n // followed by 80+ lines with all other utilities set to `false`\n ),\n);\n```\n\nBy default, those utilities have `responsive: true` and `!important`. The example above is something I would recommend if you plan on using `@layer` which we will go over in the last section of this article.\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $utilities: (\n // \"align-items\" // keep default\n // \"justify-content\" // keep default\n // \"order\" // keep default\n // followed by 80+ lines with all other utilities set to `false`\n ),\n);\n```\n\nThe important thing to note here is that we did not use CSS layers so you might see that utility classes from TailwindCSS do not override default styles. An example would be:\n\n```scss { resource=\"app/components/HelloWorld.vue\" }\n...\n```\n\nSomething that is not really noticable at first glance is the card rounding. `rounded=\"lg\"` is not recognized by UnoCSS with TailwindCSS preset and `.rounded-lg` class won't appear in the output CSS.\n\n```scss\n.rounded-0 { border-radius: 0 }\n.rounded-sm { border-radius: 2px }\n.rounded { border-radius: 4px }\n.rounded-lg { border-radius: 8px }\n.rounded-xl { border-radius: 24px }\n.rounded-pill { border-radius: 9999px }\n.rounded-circle { border-radius: 50% }\n.rounded-shaped { border-radius: 24px 0 }\n```\n\nor\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $utilities: (\n // ...\n \"rounded\": (responsive: false, unimportant: (border-radius)),\n // ...\n ),\n);\n```\n\nDid I mention we have the same problem with `border`? ...ugh... same story, let's move on.\n\nAssuming you want to use VRow and VCol and `$utilities` is no longer `false`, you might be surprised to notice that utilities like `elevation-*`, `hidden-*` (and 2 more) got re-enabled. Those do not have their dedicated flags in the `$utilities` configuration map and only get removed when using strictly `$utilities: false`. It will be resolved in the future - keep an eye on ([#22405](https://github.com/vuetifyjs/vuetify/pull/22405)).\n\n### Resolve specificity issues (quickly)\n\nIn our current configuration order in which the styles are loaded matters - which might make our application look differently after deployment, as usually Vite \"just loads\" assets when working on localhost. This means the order may be quite different for the production bundle.\n\nUsually the easiest fix would be to make UnoCSS generate all the styles with `!important`. This would make them equivalent to original Vuetify utility classes that all had `!important` by default. It is not very elegant, but get's the job done and is easy to reason about. If you are interested in using CSS layers instead, skip to the [final](#using-css-layers) part of this article.\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [\n presetWind4({\n important: true, // <- utility classes always win\n preflights: { ... },\n }),\n ],\n theme: {},\n },\n})\n```\n\n### Font family configuration\n\nTo customize fonts we will rely on `@nuxt/fonts` to minimize the amount of configuration required to set up custom font family. Beware, it scans the output CSS - doing a magic trick similar to TailwindCSS, but for the fonts. So you might want to inspect the build logs and make sure there is no mention of Roboto after applying the changes described below.\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [ ... ],\n theme: {\n font: {\n heading: \"'Bricolage Grotesque', sans-serif\",\n body: \"Sen, sans-serif\",\n mono: \"'Sometype Mono', monospace\",\n },\n },\n safelist: ['font-heading', 'font-body', 'font-mono'],\n },\n fonts: {\n defaults: {\n weights: [300, 400, 500, 700],\n styles: ['normal', 'italic'],\n subsets: ['latin'],\n },\n },\n})\n```\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $heading-font-family: var(--font-heading),\n $body-font-family: var(--font-body),\n // ...\n);\n```\n\nWe can also create `/assets/main.scss` to make use of monospace font in global styles. It is not strictly necessary, but apps usually need some custom global styles anyway.\n\n```scss { resource=\"app/assets/main.scss\" }\ncode,\npre,\n.v-code {\n font-family: var(--font-mono);\n}\n```\n\nNew file has to be referenced or imported. Go ahead and include it in `nuxt.config.ts`:\n\n```ts { resource=\"nuxt.config.ts\" }\n css: ['assets/main.scss'],\n```\n\n### Light/dark mode compatibility\n\nLet's add some colors and try using `dark:*` prefix for some classes to see what happens.\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [ ... ],\n theme: {\n font: { ... },\n colors: {\n primary: {\n 800: '#003256',\n },\n secondary: {\n 600: '#00677e',\n 800: '#003543',\n },\n },\n },\n },\n})\n```\n\nNow we can try `dark:bg-primary-800` to one of the cards, and `dark:bg-linear-to-r dark:from-secondary-800 dark:to-secondary-600` to another.\n\nIn order to toggle themes we can add a quick button in the corner of the page. Simply paste the following code anywhere (e.g. in `default.vue` layout file).\n\n```html\n\n```\n\n> When adding new colors in `nuxt.config.ts` you might need to occasionally restart the Dev server.\n\nAt this point, toggling dark mode won't apply the background and gradient from classes generated by UnoCSS.\n\nUpon inspection of Elements tab in the browser DevTools, we can find the generated code by searching for `.dark\\:`\n\n```css\n.dark .dark\\:from-secondary-800 { ... }\n.dark .dark\\:to-secondary-600 { ... }\n.dark .dark\\:bg-linear-to-r { ... }\n```\n\nWhat we actually want there is `.v-theme--dark` not `.dark`.\n\nTo align UnoCSS with Vuetify we need add some more code inside `presetWind4({ ... })`\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n //...\n unocss: {\n presets: [\n presetWind4({\n preflights: { ... },\n dark: {\n dark: '.v-theme--dark',\n light: '.v-theme--light',\n },\n }),\n ],\n },\n})\n```\n\n### Custom typography (text variants)\n\n> If you intend to fully rely on TailwindCSS classes or have some specific typography requirements, you can skip to the next part.\n\nLet's add a quick preview page for all the typography options that used to be provided by Vuetify.\n\n```html\n\n\n\n```\n\nWe can see none of the usual helper classes work because we disabled `$utilities`. Theoretically we could opt out more granularly, but those classes won't work with responsive prefixes (`sm:*`, `md:*`, etc) - by default they are generated with responsive variants stuffed in the middle (e.g. `*-sm-*`, `*-md-*`, etc.). Having both conventions may be considered an unnecessary mental overhead, so the recommended approach would is to recreate the helpers in UnoCSS configuration `shortcuts`.\n\nFollowing configuration is aligned with defaults from Vuetify v3.11.x\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n //...\n unocss: {\n presets: [ ... ],\n theme: { ... },\n shortcuts: {\n 'text-h1': 'font-heading normal-case text-[6rem] font-[300] leading-[1] tracking-[-.015625em]',\n 'text-h2': 'font-heading normal-case text-[3.75rem] font-[300] leading-[1] tracking-[-.0083333333em]',\n 'text-h3': 'font-heading normal-case text-[3rem] font-[400] leading-[1.05] tracking-[normal]',\n 'text-h4': 'font-heading normal-case text-[2.125rem] font-[400] leading-[1.175] tracking-[.0073529412em]',\n 'text-h5': 'font-heading normal-case text-[1.5rem] font-[400] leading-[1.333] tracking-[normal]',\n 'text-h6': 'font-heading normal-case text-[1.25rem] font-[500] leading-[1.6] tracking-[.0125em]',\n 'text-subtitle-1': 'font-body normal-case text-[1rem] font-[400] leading-[1.75] tracking-[.009375em]',\n 'text-subtitle-2': 'font-body normal-case text-[.875rem] font-[500] leading-[1.6] tracking-[.0071428571em]',\n 'text-body-1': 'font-body normal-case text-[1rem] font-[400] leading-[1.5] tracking-[.03125em]',\n 'text-body-2': 'font-body normal-case text-[.875rem] font-[400] leading-[1.425] tracking-[.0178571429em]',\n 'text-button': 'font-body uppercase text-[.875rem] font-[500] leading-[2.6] tracking-[.0892857143em]',\n 'text-caption': 'font-body normal-case text-[.75rem] font-[400] leading-[1.667] tracking-[.0333333333em]',\n 'text-overline': 'font-body uppercase text-[.75rem] font-[500] leading-[2.667] tracking-[.1666666667em]',\n },\n },\n})\n```\n\n### Customize breakpoints\n\nDefault breakpoints provided by TailwindCSS preset are not compatible with Vuetify. This mismatch can lead to confusing layout bugs, so let's address this right away.\n\nUnlike other aspects of configuration, it is more challenging to have a squicky cleanup with a single definition. When we customize vanilla Vuetify project we end up having some duplication. This is true even without integrating Vuetify with UnoCSS or Tailwind. It is usually not a big deal, and we can add comments that remind us to keep both places in sync.\n\n* `settings.scss` - breakpoints for VContainer, VCol and responsive utilities (if we would keep any)\n* general Vuetify configuration `display` » `thresholds` for responsive logic in some components, `useDisplay` and `$vuetify.display.*`\n\nUnoCSS needs its own values and expects slightly different format, but we can still define them in a separate TS file and, so we won't end up with 3 places to maintain. As a side-note, integration with TailwindCSS v4 (without UnoCSS) would mean we are back with 3 definitions, because latest TailwindCSS expects pure CSS variables. Anyway, enough talking - let's jump right into the code.\n\nCreate `breakpoints.ts` under `./app/theme` (create new `theme` folder) with the following content:\n\n```ts { resource=\"app/theme/breakpoints.ts\" }\nimport type { DisplayThresholds } from 'vuetify'\n\n// repeated in settings.scss\nconst breakpoints: DisplayThresholds = {\n xs: 0,\n sm: 400,\n md: 840,\n lg: 1145,\n xl: 1545,\n xxl: 2138,\n}\n\nexport const forVuetify = breakpoints\n\nexport const forTailwind = Object.entries(breakpoints)\n .reduce(\n (o, [key, value]) => ({ ...o, [key]: `${value}px` }),\n {} as Record,\n )\n```\n\nImport and apply it to both Vuetify in UnoCSS in `nuxt.config.ts`\n\n```ts { resource=\"nuxt.config.ts\" }\nimport * as breakpoints from './app/theme/breakpoints'\n\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [ ... ],\n theme: {\n font: { ... },\n colors: { ... },\n breakpoint: breakpoints.forTailwind,\n },\n shortcuts: { ... },\n },\n\n vuetify: {\n moduleOptions: { ... },\n vuetifyOptions: {\n display: {\n mobileBreakpoint: 'md',\n thresholds: breakpoints.forVuetify,\n },\n },\n },\n}),\n```\n\nNow adjust the SCSS variables for Vuetify. Note that in **v3.x** the `$container-max-widths` would be calculated from breakpoints without rounding the values. If you prefer those values to be stable and rounded to `100px`, you can simply define them right below.\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $grid-breakpoints: (\n // repeated in breakpoints.ts\n 'xs': 0,\n 'sm': 400px,\n 'md': 840px,\n 'lg': 1145px,\n 'xl': 1545px,\n 'xxl': 2138px,\n ),\n $container-max-widths: (\n // manually calculated (optional after https://github.com/vuetifyjs/vuetify/pull/19759)\n 'md': 700px,\n 'lg': 1000px,\n 'xl': 1400px,\n 'xxl': 2000px,\n ),\n);\n```\n\nThe important next step is to verify the changes. I recommend creating and keeping a hidden technical page that will help verify changes or quickly troubleshoot the regression. Here is what you can paste into `app/pages/breakpoints.ts`:\n\n```html\n\n\n\n```\n\nRestart the Dev server and open `localhost:3000/breakpoints`.\n\n## Using CSS layers\n\nCSS `@layer` is a relatively new feature designed to scope blocks of CSS and avoid conflicts over specificity. Layers establish a defined order and quite easy to reason about. Anything that is not wrapped in `@layer my-name { ... }` is applied on top. The only tricky part is how browser handles `!important`. If you never used them, you can read more on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer) or an [excellent article from CSS Tricks](https://css-tricks.com/css-cascade-layers/).\n\nIn our example, all we want from CSS layers is to separate utility classes and ensure they get applied on top of base and components CSS without using `!important`. We will start by ensuring we don't have any leftover configuration in `nuxt.config.ts`:\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [\n presetWind4({\n // important: true, // <- we won't need it\n preflights: { ... },\n }),\n ],\n },\n})\n```\n\nCSS layers are going to be enabled by default in Vuetify v4. If you still use version 3.x, you can opt-in by changing two places: Sass variables and theme configuration.\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $layers: true, // <- enable layers for CSS generated with Sass\n // ...\n);\n```\n\nThis will ensure CSS reset, base styles, transitions, component-specific styles and utilities are all wrapped in the dedicated layers.\n\nUpdate Vuetify configuration to enable `@layers` for themes - CSS that is generated at runtime and injected into document ``.\n\n```ts { resourcce=\"vuetify.config.ts\" }\nexport default defineVuetifyConfiguration({\n theme: {\n layers: true, // <- enable layers for theme CSS\n defaultTheme: 'dark',\n themes: { ... },\n // ...\n }\n // ...\n})\n```\n\nFinally we update UnoCSS configuration\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [ ... ],\n layers: {\n 'uno.theme': 0,\n 'uno.shortcuts': 1,\n 'uno.utilities': 2,\n },\n outputToCssLayers: {\n cssLayerName: (layer) => layer === 'properties' ? null : `uno.${layer}`,\n },\n theme: { ... },\n shortcuts: { ... },\n },\n})\n```\n\nYou can now utilize them to manage overrides without fighting specificity.\nFor example:\n\n```scss { resource=\"app/assets/main.scss\" }\n@layer vuetify.base {\n code, pre, .v-code {\n font-family: var(--font-mono);\n }\n}\n```\n\nWhen it comes to regular development, you should define layers you intend make sense for your app size. For medium projects I tend to start with no-brainer split into `base`, `components`, and custom `utilities`.\n\n```scss\n@layer app {\n @layer base, components, utilities;\n}\n```\n\nHere are some examples that help visualize the purpose of each group.\n\n```scss { resource=\"app/assets/main.scss\" }\n@layer app.base {\n .page {\n padding: 0 2rem 4rem;\n\n &__header {\n padding: 2rem 0 1rem;\n }\n }\n\n * {\n scrollbar-width: thin;\n scrollbar-color: #888a #8882;\n }\n}\n\n@layer app.utilities {\n .force-center {\n display: grid;\n place-items: center;\n }\n\n .flex-expand-even {\n display: flex;\n > * {\n flex: 1;\n }\n }\n}\n```\n\n`@layer app.components { ... }` is meant to be used in `\n```\n\n---\n\n## Summary\n\nWhoa! That's a lot. Integrating UnoCSS with a Vuetify + Nuxt project proves to be more than just `$utilities: false` and droping any configuration. Although we could take a shortcut with `important: true` I hope you will take an opportunity to use powerful `@layer` feature and elevate your development experience even more. Regardless, we achieved smaller CSS bundles and on-demand utility generation. Here are the key takeaways:\n\n* `unocss-preset-vuetify` (although experimental) can be a drop-in replacement of Vuetify utilities in projects that prefer to avoid full migration to TailwindCSS and its conventions\n* `@unocss/preset-wind4` is a go-to for developers eager to embrace widely adopted utilities\n* **Dark mode alignment**: Configure UnoCSS to use `.v-theme--dark` and `.v-theme--light` selectors instead of the default `.dark` class\n* **typography** can be fully restored using UnoCSS shortcuts also gaining responsive prefix support\n* **breakpoints** can be aligned across Vuetify's display config, Sass variables, and UnoCSS theme to avoid layout inconsistencies\n* **CSS layers**: enable `$layers: true` in Sass and configure UnoCSS layers to establish a clear cascade order without relying on `!important`\n\nThe result is a leaner, more maintainable styling setup that combines Vuetify's component library with atomic CSS utilities.\n\nIn the future we will explore similar setup based on Vite and pure TailwindCSS v4.\n\nHappy coding!\n","packages/docs/src/pages/en/blog/building-with-vite-and-tailwindcss.md":"---\nlayout: blog\nmeta:\n title: Build with Vite and TailwindCSS v4\n description: Learn how to integrate Vuetify v4 with TailwindCSS v4 in a Vite project, covering theme colors, dark mode, fonts, breakpoints and CSS layers.\n keywords: TailwindCSS v4, Vuetify v4, Vite, Theme, CSS Layers\n---\n\n# Integrating Vuetify v4 with TailwindCSS v4 in a Vite project\n\nIn the previous article we explored integrating UnoCSS with Vuetify v3 and Nuxt. This time we take a more direct route: pairing Vuetify v4 with TailwindCSS v4 on a plain Vite setup with both running as Vite plugins. Vuetify v4 ships with CSS layers enabled by default, which makes integrating TailwindCSS significantly smoother than before.\n\nWe will go through the following steps:\n\n* Scaffold a starter project and wire up TailwindCSS\n* Restore `rounded-*` utilities\n* Customize fonts\n* Discuss strategy for theme colors management\n* Ensure Vuetify's light/dark themes work with TailwindCSS `light:*` and `dark:*` prefixes\n* Align breakpoints configuration\n\n🖊️ Jacek Czarniecki • 📅 February 16th, 2026\n\n\n\n---\n\n## Table of Contents\n\n* [Scaffold and install TailwindCSS](#scaffold-and-install-tailwindcss)\n * [Create the project](#create-the-project)\n * [Add TailwindCSS v4 via the Vite plugin](#add-tailwindcss-v4-via-the-vite-plugin)\n * [Disable Vuetify utilities](#disable-vuetify-utilities)\n * [Migrate HelloWorld.vue and AppFooter.vue](#migrate-helloworldvue-and-appfootervue)\n* [Restore classes for rounded corners](#restore-classes-for-rounded-corners)\n* [Customize fonts](#customize-fonts)\n* [Avoid conflicting color utilities](#avoid-conflicting-color-utilities)\n* [Configure class-based light/dark variants](#configure-class-based-lightdark-variants)\n* [Breakpoints](#breakpoints)\n* [Summary](#summary)\n\n---\n\n## Scaffold and install TailwindCSS\n\n### Create the project\n\n::: tabs\n\n```bash [pnpm]\npnpm create vuetify@latest\n```\n\n```bash [yarn]\nyarn create vuetify\n```\n\n```bash [npm]\nnpm create vuetify\n```\n\n```bash [bun]\nbun create vuetify\n```\n\n:::\n\n...choose the \"Base\" preset and \"None\" when asked for the CSS framework. The point is to learn how the pieces work together by performing code changes manually.\n\nVerify the boilerplate by building it with the standard NPM build script (e.g. `pnpm run build`).\n\nAdd a few generated files to `.gitignore`, so they won't annoy us when inspecting applied changes.\n\n```sh { resource=\".gitignore\" }\n# Generated files\nauto-imports.d.ts\ncomponents.d.ts\ntyped-router.d.ts\n.eslintrc-auto-import.json\n```\n\nCommit all files as a baseline. This way you can always diff against it and keep track of changes we are about to introduce.\n\n### Add TailwindCSS v4 via the Vite plugin\n\n::: tabs\n\n```bash [pnpm]\npnpm add -D tailwindcss @tailwindcss/vite\n```\n\n```bash [yarn]\nyarn add -D tailwindcss @tailwindcss/vite\n```\n\n```bash [npm]\nnpm i -D tailwindcss @tailwindcss/vite\n```\n\n```bash [bun]\nbun add -D tailwindcss @tailwindcss/vite\n```\n\n:::\n\nRegister `tailwindcss()` in the `plugins` array of `vite.config.ts` and create `src/styles/tailwind.css`. Vuetify v4 already provides its own reset, so we skip Tailwind's preflight to avoid two competing resets:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@import \"tailwindcss/theme\" layer(tailwind.theme);\n/* @import \"tailwindcss/preflight.css\" layer(tailwind.reset); <-- skipped intentionally */\n@import \"tailwindcss/utilities\" layer(tailwind.utilities);\n```\n\n```ts { resource=\"src/main.ts\" }\nimport { registerPlugins } from '@/plugins'\nimport App from './App.vue'\nimport { createApp } from 'vue'\n\nimport 'unfonts.css'\nimport './styles/tailwind.css' // <-- include new file\n\nconst app = createApp(App)\nregisterPlugins(app)\napp.mount('#app')\n```\n\n```ts { resource=\"vite.config.mts\" }\nimport tailwindcss from '@tailwindcss/vite'\n// ...\n\nexport default defineConfig({\n plugins: [\n tailwindcss(), // <-- register the plugin\n // ...\n ],\n```\n\nIn order for Vuetify transitions to work properly, we have to ensure `tailwind.*` layers are placed before `vuetify-final`. Go ahead and add a new file called `layers.scss`:\n\n```css { resource=\"src/styles/layers.scss\" }\n@layer vuetify-core;\n@layer vuetify-components;\n@layer vuetify-overrides;\n@layer vuetify-utilities;\n\n@layer tailwind; /* <-- our new utilities */\n\n@layer vuetify-final;\n```\n\nThen reference it from `vuetify.ts` before importing `vuetify/styles`.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\n// Styles\nimport '../styles/layers.css'\nimport '@mdi/font/css/materialdesignicons.css'\nimport 'vuetify/styles'\n\n// followed by createVuetify({ ... })\n```\n\n![CSS Layers preview in browser DevTools](https://cdn.vuetifyjs.com/docs/images/blog/building-with-vite-and-tailwindcss/vuetify-tailwindcss-layers.png)\n\n### Disable Vuetify utilities\n\nLet's adjust `src/styles/settings.scss`:\n\n```scss { resource=\"src/styles/settings.scss\" }\n@use 'vuetify/settings' with (\n $color-pack: false,\n $utilities: false,\n);\n```\n\nIf you run the build again, you should observe that the CSS bundle shrinks noticeably:\n\n```md\nbefore: 658.40 kB │ gzip: 141.74 kB\nafter: 481.24 kB │ gzip: 115.70 kB\n```\n\nThe expected difference is substantial, but we still pay the tax of using the full MDI icon font. Switching to SVG icons (`@mdi/js`) is not a big deal, but we will keep this guide focused on integrating TailwindCSS. If you need to optimize the bundle size further, Vuetify documentation already covers [how to switch to SVG icon set](/features/icon-fonts/#mdi-js-svg).\n\n### Migrate HelloWorld.vue and AppFooter.vue { #migrate-helloworldvue-and-appfootervue }\n\nWith utilities disabled, some classes used in the scaffolded template will stop working. Here are the replacements:\n\n* replace `fill-height` with `h-full`\n* replace `d-flex` with `flex`\n* replace `align-center` with `items-center`\n* replace `font-weight-*` with `font-*`\n* replace `mb-n1` with `-mb-1`\n* replace typography `text-*` classes with native TailwindCSS utilities to achieve similar font size and weight\n * `text-body-2` » `text-sm`\n * `text-h2` » `text-7xl`\n\nVRow/VCol can also be replaced with `grid md:grid-cols-2 gap-3` and `md:col-span-2` for the first VCard. However, you might be surprised to learn that Vuetify's grid engine got a major overhaul in v4.0.0 and is much leaner and more flexible than ever.\n\n## Restore classes for rounded corners\n\nSomething that is not really noticeable at first glance is the card rounding. Vuetify's `rounded` prop values (`rounded=\"lg\"`, etc.) emit classes like `.rounded-lg` that collide with Tailwind's naming but use different values.\n\nTailwindCSS lets us define rounding using CSS variables that are later applied by the specific CSS classes.\n\n```css\n.rounded-lg {\n border-radius: var(--radius-lg);\n}\n```\n\nLooking at the default TailwindCSS configuration side-by-side with the default Vuetify classes generated from Sass, it is clear that those are not compatible and we will need some stitching.\n\n```css\n@theme {\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --radius-4xl: 2rem;\n}\n\n/* default output from Vuetify, we disabled those with $utilities: false */\n.rounded-0 { border-radius: 0 }\n.rounded-sm { border-radius: 2px }\n.rounded { border-radius: 4px }\n.rounded-lg { border-radius: 8px }\n.rounded-xl { border-radius: 24px }\n.rounded-pill { border-radius: 9999px }\n.rounded-circle { border-radius: 50% }\n.rounded-shaped { border-radius: 24px 0 }\n```\n\nIn order to resolve this, we need to use `blocklist` and suppress certain utilities from TailwindCSS. Create a config file `tailwind.config.ts`:\n\n```ts { resource=\"tailwind.config.ts\" }\nimport type { Config } from 'tailwindcss'\n\nmodule.exports = {\n blocklist: [\n 'rounded-xs',\n 'rounded-md',\n 'rounded-2xl',\n 'rounded-3xl',\n 'rounded-4xl',\n 'rounded-full',\n ],\n} satisfies Config\n```\n\nThe new file has to be linked from `tailwind.css`. We also override the radius variables and register custom utilities for the values that don't exist in Tailwind out-of-the-box:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@import \"tailwindcss/theme\" layer(theme);\n/* @import \"tailwindcss/preflight.css\" layer(reset); */\n@import \"tailwindcss/utilities\" layer(utilities);\n\n@config \"../../tailwind.config.ts\";\n\n@theme {\n --radius-sm: 2px;\n --radius-lg: 8px;\n --radius-xl: 24px;\n}\n\n@utility rounded-0 { border-radius: 0 }\n@utility rounded-pill { border-radius: 9999px }\n@utility rounded-shaped { border-radius: 24px 0 }\n\n@source inline('rounded-0');\n@source inline('rounded-sm');\n@source inline('rounded'); /* leaving .25rem */\n@source inline('rounded-lg');\n@source inline('rounded-xl');\n@source inline('rounded-pill');\n@source inline('rounded-circle');\n@source inline('rounded-shaped');\n```\n\nIf you'd rather use the original TailwindCSS `rounded-*` utilities, it is recommended to disallow use of Vuetify's rounded classes, which can be enforced by patching `eslint-plugin-vuetify`. The actual process of patching is specific to the package manager of your choice, so we will skip it for now. If you are stuck, feel free to reach out on [Discord](https://community.vuetifyjs.com).\n\n---\n\n## Customize fonts\n\nThe `create-vuetify` utility we used at the beginning to scaffold the project uses `unplugin-fonts` to load Roboto. Let's update the configuration to make sure the target fonts are available.\n\n```ts { resource=\"vite.config.mts\" }\n Fonts({\n fontsource: {\n families: [\n {\n name: 'Bricolage Grotesque',\n weights: [300, 400, 500, 700],\n },\n {\n name: 'Sen',\n weights: [400, 500, 700],\n },\n {\n name: 'Sometype Mono',\n weights: [400, 700],\n },\n ],\n },\n }),\n```\n\nNext step is to add them as dependencies:\n\n::: tabs\n\n```bash [pnpm]\npnpm i @fontsource/bricolage-grotesque @fontsource/sen @fontsource/sometype-mono\n```\n\n```bash [yarn]\nyarn add @fontsource/bricolage-grotesque @fontsource/sen @fontsource/sometype-mono\n```\n\n```bash [npm]\nnpm i @fontsource/bricolage-grotesque @fontsource/sen @fontsource/sometype-mono\n```\n\n```bash [bun]\nbun add @fontsource/bricolage-grotesque @fontsource/sen @fontsource/sometype-mono\n```\n\n:::\n\nNow we can configure TailwindCSS theme variables. These will generate utility classes like `font-heading`, `font-body` and `font-mono`:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@theme {\n --font-heading: \"Bricolage Grotesque\", sans-serif;\n --font-body: Sen, sans-serif;\n --font-mono: \"Sometype Mono\", monospace;\n\n /* ...breakpoints, radius, colors... */\n}\n\n/* ensure the variables are not skipped */\n@source inline('font-body');\n@source inline('font-heading');\n@source inline('font-mono');\n```\n\nThen we pass them to Vuetify through Sass variables so component typography picks them up too:\n\n```diff { resource=\"src/styles/settings.scss\" }\n@use 'vuetify/settings' with (\n $color-pack: false,\n $utilities: false,\n+ $heading-font-family: var(--font-heading),\n+ $body-font-family: var(--font-body),\n);\n```\n\nAt this point, I usually like to cover components that need a monospace font. We can also create `/styles/main.scss` to set it globally. It is not strictly necessary, but apps usually need some custom global styles anyway.\n\n```scss { resource=\"src/styles/main.scss\" }\n@layer vuetify-overrides {\n code, pre, .v-code {\n font-family: var(--font-mono);\n }\n}\n```\n\nNew file has to be imported in `main.ts` alongside the Tailwind stylesheet.\n\n---\n\n## Avoid conflicting color utilities\n\n`bg-*` classes generated by Vuetify carry over a foreground color that is calculated to ensure text and icons have a sufficient contrast ratio. This makes them superior to regular TailwindCSS utilities, but also incompatible with variants (`hover:`, `sm:*`, `md:*`, etc).\n\n```css\n.bg-primary {\n --v-theme-overlay-multiplier: var(--v-theme-primary-overlay-multiplier);\n background-color: rgb(var(--v-theme-primary));\n color: rgb(var(--v-theme-on-primary));\n}\n```\n\nWhen working with TailwindCSS, it is normal to split background and text colors into separate classes, and the responsibility of ensuring readability is on the developer writing the code.\n\nIn order to avoid the mental overhead of remembering where each `bg-*` is coming from, let's instruct Vuetify theme to generate only CSS variables and skip the classes:\n\n```diff { resource=\"src/plugins/vuetify.ts\" }\nexport default createVuetify({\n theme: {\n defaultTheme: 'system',\n+ utilities: false,\n },\n})\n```\n\nNext, we can pass those theme colors to TailwindCSS. Since the values are raw comma-separated RGB channels (translated from hex on the fly by Vuetify), we need to wrap them in `rgb()` when registering them in Tailwind's `@theme`:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@theme {\n --color-background: rgb(var(--v-theme-background));\n --color-primary: rgb(var(--v-theme-primary));\n --color-surface: rgb(var(--v-theme-surface));\n --color-success: rgb(var(--v-theme-success));\n --color-error: rgb(var(--v-theme-error));\n /* and the rest of colors you intend to use */\n}\n\n/* safelist common colors to be used with color=\"...\" attribute */\n@source inline('bg-primary');\n@source inline('text-primary');\n@source inline('bg-success');\n@source inline('text-success');\n@source inline('bg-error');\n@source inline('text-error');\n```\n\nNow you can use `bg-primary`, `text-success`, `hover:bg-error` and similar classes, all driven by Vuetify's theme definition.\n\n---\n\n## Configure class-based light/dark variants { #configure-class-based-lightdark-variants }\n\nLet's add some color-dependent classes and try using the `dark:*` prefix to see what happens. By default, Tailwind's `dark:` variant targets `@media (prefers-color-scheme: dark)` or a `.dark` class. Vuetify uses `.v-theme--dark` instead, so the generated selectors won't match.\n\nTo align Tailwind with Vuetify, we need to redeclare theming variants:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@custom-variant light (&:where(.v-theme--light, .v-theme--light *));\n@custom-variant dark (&:where(.v-theme--dark, .v-theme--dark *));\n```\n\nYou can verify it by toggling themes. Simply add a quick button somewhere (e.g. in `App.vue`):\n\n```html\n\n```\n\nNow classes like `dark:bg-primary` and `light:text-error` should react correctly to Vuetify's theme toggle.\n\n---\n\n## Breakpoints\n\nDefault breakpoints provided by TailwindCSS are not compatible with Vuetify. This mismatch can lead to unexpected layout issues when `sm:` in Tailwind kicks in at a different width than `sm` in VCol. Let's align them.\n\nUnlike the UnoCSS setup from the previous article, where we could define breakpoints in a shared `.ts` file and feed them into both tools, TailwindCSS v4 expects breakpoints as pure CSS variables under `@theme`. This means we inevitably end up with the same values in three places. It's a minor inconvenience, but easy to manage with a comment pointing to the other two.\n\nFirst, clear out the Tailwind defaults and set our own in `tailwind.css`:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@theme {\n --breakpoint-*: initial;\n /* repeated in vuetify.ts and settings.scss */\n --breakpoint-xs: 0px;\n --breakpoint-sm: 400px;\n --breakpoint-md: 840px;\n --breakpoint-lg: 1145px;\n --breakpoint-xl: 1545px;\n --breakpoint-xxl: 2138px;\n\n /* ... fonts, radius, colors ... */\n}\n```\n\n`--breakpoint-*: initial` resets all built-in Tailwind breakpoints (`2xl`, `3xl`, etc.) so they don't interfere or confuse your teammates.\n\nNext, set Vuetify's `display.thresholds` in the plugin setup. This controls `useDisplay()` and `$vuetify.display.*`.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nexport default createVuetify({\n theme: { ... },\n display: {\n mobileBreakpoint: 'md',\n thresholds: {\n // repeated in tailwind.css and settings.scss\n xs: 0,\n sm: 400,\n md: 840,\n lg: 1145,\n xl: 1545,\n xxl: 2138,\n },\n },\n})\n```\n\nFinally, update the SCSS variables. `$grid-breakpoints` drives VCol's responsive columns, and `$container-max-widths` sets the maximum width of VContainer at each breakpoint.\n\n```scss { resource=\"src/styles/settings.scss\" }\n@use 'vuetify/settings' with (\n $color-pack: false,\n $utilities: false,\n $heading-font-family: var(--font-heading),\n $body-font-family: var(--font-body),\n $grid-breakpoints: (\n // repeated in tailwind.css and vuetify.ts\n 'xs': 0,\n 'sm': 400px,\n 'md': 840px,\n 'lg': 1145px,\n 'xl': 1545px,\n 'xxl': 2138px,\n ),\n $container-max-widths: (\n // optional, computed from breakpoints\n 'md': 700px,\n 'lg': 1000px,\n 'xl': 1400px,\n 'xxl': 2000px,\n ),\n);\n```\n\nThe `$container-max-widths` values are manually rounded to keep VContainer sizing clean and predictable.\n\nAt this point, a class like `sm:text-lg` in Tailwind and `sm=\"6\"` on VCol will both trigger at exactly `400px`.\n\n---\n\n## Summary\n\nCompared to the UnoCSS path, most of the setup lands in `tailwind.css` instead of `nuxt.config.ts`. We used custom directives like `@theme` and `@custom-variant`, but had to drop back to importing JS-based config to blacklist some styles provided by Tailwind. I hope it was an interesting journey and you can feel comfortable building upon this setup. Here are the key takeaways:\n\n* **Utilities**: we disabled Vuetify's built-in utilities to replace them with TailwindCSS utilities while keeping an eye on the correct order of CSS layers\n* **Rounded classes**: Vuetify's `rounded` prop and Tailwind's `rounded-*` utilities use the same class names with different values. It was a challenge, but we were able to bridge the gap\n* **Theme colors**: Vuetify theme can also be configured to skip utility classes and generate only CSS properties. We have passed them inside the `@theme` directive and \"safelisted\" global colors we intend to use with the `color` prop on cards, buttons and icons\n* **Dark mode**: Tailwind is flexible enough to accept Vuetify theme classes\n* **Typography**: `text-*` classes were skipped for simplicity - you can introduce your own classes with the `@utility` directive if needed\n* **Breakpoints**: we aligned configuration across three definitions (SCSS, Vuetify config, Tailwind `@theme`) to prevent layout bugs\n\nReference repository with final state: [J-Sek/vuetify-vite-and-tailwind](https://github.com/J-Sek/vuetify-vite-and-tailwind). If you find it useful, give it a ⭐.\n\nCheers!\n","packages/docs/src/pages/en/blog/december-2025-update.md":"---\nlayout: blog\nmeta:\n title: December 2025 Update\n description: December shipped Vuetify 4.0.0-alpha.0 with CSS layers, five v3.11.x patches, the Vuetify CLI public release, ecosystem-wide PWA rollout, and v0 progress.\n keywords: Vuetify December 2025, v4.0.0-alpha.0, Vuetify CLI, PWA, CSS layers, Vuetify0, MCP\n---\n\n\n\n# December 2025 Update\n\nWelcome to the December 2025 Vuetify update! The year closes with a bang—**v4.0.0-alpha.0** marks the beginning of Vuetify 4's public development, while five v3.11.x patch releases keep the stable branch polished. The **Vuetify CLI** shipped its first public release, PWA support rolled out across all ecosystem products, and Vuetify0 continued its rapid evolution with 6 releases.\n\n![Hero image for December update](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/december-hero.png \"December hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 January 12th, 2026\n\n\n\n---\n\n## Closing the Year Strong\n\nDecember was our most productive month of 2025. With **522 commits** across 16 active repositories and **82 merged PRs**, the team shipped at an incredible pace. The release of v4.0.0-alpha.0 represents months of architectural planning finally landing for public testing—CSS layers, reduced breakpoints, and theme system improvements that set the stage for Vuetify 4.0 stable. Meanwhile, [J-Sek](https://github.com/J-Sek) continued his remarkable contribution streak with 16 PRs to the main framework, and [ikushum](https://github.com/ikushum) delivered 9 PRs across components. The CLI reached public release status just in time for the new year, and every ecosystem product now supports PWA installation.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Vuetify 4 Alpha](#vuetify-4-alpha)\n* [Ecosystem Spotlight: Vuetify CLI](#ecosystem-spotlight-vuetify-cli)\n * [create-vuetify Updates](#create-vuetify-updates)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Accessibility & Compatibility](#accessibility-compatibility)\n* [Product Updates](#product-updates)\n * [Vuetify Bin](#vuetify-bin)\n * [Vuetify Play](#vuetify-play)\n * [Vuetify Issues Reporter](#vuetify-issues)\n * [Other Products](#other-products)\n* [Vuetify MCP: Rate Limiting & CLI Support](#vuetify-mcp-rate-limiting-cli-support)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [December 2025 Changelog](#december-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nDecember delivered six Vuetify releases—five v3.11.x patches maintaining stability and the landmark **v4.0.0-alpha.0** kicking off the next major version. The v3.x branch continues receiving attention with accessibility improvements, bug fixes, and new props across multiple components.\n\n![December Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/releases.png \"December Releases Banner\")\n\n### Key Improvements\n\n* **[VWindow](/components/windows/)** keyboard controls for accessible navigation\n* **[VList](/components/lists/)** `navigation-strategy` prop to control focused item behavior\n* **[VImg](/components/images/)** attribute passthrough to underlying `` element\n* **[VOtpInput](/components/otp-input/)** `density` prop for compact layouts\n* **[VColorInput](/components/color-input/)/[VDateInput](/components/date-input/)** `picker-props` for customizing picker appearance\n* **[VDataIterator](/components/data-iterators/)** `items-length` prop for virtual scrolling support\n* **[VDatePicker](/components/date-pickers/)** custom `control-height` support\n* **[nested](/components/treeview/)** `branch` select strategy for hierarchical selection\n\nView the complete list of changes in the [Full Changelog](#december-2025-changelog)\n\n**Details:**\n\n* [v3.11.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.2)\n* [v3.11.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.3)\n* [v3.11.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.4)\n* [v3.11.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.5)\n* [v3.11.6](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.6)\n* [v4.0.0-alpha.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0-alpha.0)\n\n---\n\n## Vuetify 4 Alpha\n\nThe first alpha of **Vuetify 4.0** landed on December 30th, marking the start of public development for our next major version. This release contains significant architectural changes that improve performance, reduce bundle size, and modernize the CSS architecture.\n\n![Vuetify 4 Alpha](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/v4-alpha.png \"Vuetify 4 Alpha\")\n\n### What's New in v4.0.0-alpha.0\n\n**CSS Layers**: Vuetify 4 uses CSS layers throughout, flattening layer names and replacing `!important` declarations with proper cascade management. This makes customization cleaner and reduces specificity conflicts.\n\n**Theme System**: The default theme changes from `light` to `system`, respecting user preferences. Transparent color support enables more sophisticated design patterns. The `unimportant` option has been removed in favor of layers.\n\n**Reduced Breakpoints**: Default breakpoint sizes have been adjusted for modern viewport distributions.\n\n**Style Architecture**:\n\n* Separate entry points allow opting out of misc styles\n* CSS reset has been streamlined (removed overflow-y)\n* [VRow](/api/v-row/)/[VCol](/api/v-col/) styles can be skipped when only using [VContainer](/api/v-container/) or [VSpacer](/api/v-spacer/)\n\n**Component Updates**:\n\n* **[VBtn](/components/buttons/)**: Default text transform removed, display converted from grid to flex\n* **[VField](/api/v-field/)**: Display converted from grid to flex, append/prepend fills height\n* **[VSnackbar](/components/snackbars/)**: `multi-line` prop removed in favor of CSS\n* **[VSelect](/components/selects/)/[VAutocomplete](/components/autocompletes/)/[VCombobox](/components/combobox/)**: `item` renamed to `internalItem` for clarity\n* **[VNumberInput](/components/number-inputs/)**: No longer clamps value on mount\n* **[VDatePicker](/components/date-pickers/)**: Only emits start and end range values\n* **[VForm](/components/forms/)**: Unref values in slot props\n* **[VInput](/api/v-input/)**: New `indent-details` prop\n* **[VListItem](/api/v-list-item/)**: Exposes `isDisabled` in slot props\n* **[VCounter](/api/v-counter/)**: Inherits color (aligns with [VMessages](/api/v-messages/))\n\n::: info\n\nv4.0.0-alpha.0 is for testing and feedback only. Production applications should continue using v3.11.x until v4 reaches stable release.\n\n:::\n\n**Details:**\n\n* [v4.0.0-alpha.0 Release Notes](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0-alpha.0)\n* [Migration Guide](https://next.vuetifyjs.com/getting-started/upgrade-guide/)\n* [Remaining Issues](https://github.com/vuetifyjs/vuetify/milestone/62)\n\n---\n\n## Ecosystem Spotlight: Vuetify CLI { #ecosystem-spotlight-vuetify-cli }\n\n\n\n
\n\nThe **Vuetify CLI** reached its first public release in December with **25 commits** across versions v0.0.5 through v0.0.7. This new tooling ecosystem streamlines project scaffolding and integrates with the broader Vuetify ecosystem.\n\n![Vuetify CLI](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/cli.png \"Vuetify CLI\")\n\n### CLI Ecosystem Overview\n\nThe Vuetify CLI ecosystem consists of three packages that share logic via `@vuetify/cli-shared`:\n\n**create-vuetify0** (`npm create vuetify0`) — Scaffolds new Vuetify0 projects with support for [Vue](https://vuejs.org/) or [Nuxt](https://nuxt.com/) platforms. Includes feature selection for router, pinia, and eslint. TypeScript by default.\n\n**@vuetify/cli** (`vuetify` command) — The main CLI with multiple commands:\n\n* `vuetify init` — Same as create-vuetify, scaffolds new projects (supports `--type vuetify0`)\n* `vuetify add eslint` — Adds ESLint + [eslint-config-vuetify](https://github.com/vuetifyjs/eslint-config-vuetify) to existing projects\n* `vuetify add mcp` — Adds [Vuetify MCP](https://github.com/vuetifyjs/mcp) server config for [Cursor](https://cursor.sh/)/[VS Code](https://code.visualstudio.com/)\n* `vuetify update` — Smart updates Vuetify + related packages\n* `vuetify docs` — Opens vuetifyjs.com (version-aware)\n* `vuetify upgrade` — Self-upgrades the CLI\n\n::: tabs\n\n```bash [pnpm]\n# Install the CLI globally\npnpm add -g @vuetify/cli\n\n# Initialize a new project\nvuetify init my-app\n\n# Or create a v0 project directly\npnpm create vuetify0@latest\n\n# Add ESLint to an existing project\nvuetify add eslint\n\n# Add MCP server configuration\nvuetify add mcp\n\n# Update Vuetify packages\nvuetify update\n```\n\n```bash [yarn]\n# Install the CLI globally\nyarn global add @vuetify/cli\n\n# Initialize a new project\nvuetify init my-app\n\n# Or create a v0 project directly\nyarn create vuetify0\n\n# Add ESLint to an existing project\nvuetify add eslint\n\n# Add MCP server configuration\nvuetify add mcp\n\n# Update Vuetify packages\nvuetify update\n```\n\n```bash [npm]\n# Install the CLI globally\nnpm install -g @vuetify/cli\n\n# Initialize a new project\nvuetify init my-app\n\n# Or create a v0 project directly\nnpm create vuetify0@latest\n\n# Add ESLint to an existing project\nvuetify add eslint\n\n# Add MCP server configuration\nvuetify add mcp\n\n# Update Vuetify packages\nvuetify update\n```\n\n```bash [bun]\n# Install the CLI globally\nbun add -g @vuetify/cli\n\n# Initialize a new project\nvuetify init my-app\n\n# Or create a v0 project directly\nbun create vuetify0\n\n# Add ESLint to an existing project\nvuetify add eslint\n\n# Add MCP server configuration\nvuetify add mcp\n\n# Update Vuetify packages\nvuetify update\n```\n\n:::\n\n### create-vuetify Updates\n\nThe **create-vuetify** scaffolding tool received **12 commits** and 4 releases in December:\n\n**v2.8.0-beta.1** (December 30th):\n\n* **Vuetify 4 Alpha Support**: Templates now support bootstrapping projects with Vuetify 4.0.0-alpha.0\n* **Dynamic Version Replacement**: Vuetify version is now dynamically replaced in templates, making it easier to stay current\n\n**v2.7.3** (December 20th):\n\n* **[Volar](https://volarjs.dev/) Rich Hover Hints**: Enabled by default for better IDE experience with component prop documentation\n\n**v2.7.1-v2.7.2** (December 16th):\n\n* **Nuxt Styles Fix**: Corrected styles loading when not using the Nuxt module\n* Various maintenance updates\n\n**Details:**\n\n* [Vuetify CLI GitHub Repository](https://github.com/vuetifyjs/cli)\n* [create-vuetify Releases](https://github.com/vuetifyjs/create-vuetify/releases)\n* [v2.8.0-beta.1 Release Notes](https://github.com/vuetifyjs/create-vuetify/releases/tag/v2.8.0-beta.1)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nDecember's framework work balanced new features with stability improvements. The team merged 49 PRs addressing everything from keyboard accessibility to field validation.\n\n### New Features\n\n**[VWindow](/components/windows/) Keyboard Controls**\n\nThe [VWindow](/components/windows/) component now supports keyboard navigation, enabling users to move between slides with arrow keys—essential for accessibility and power users.\n\n**[VList](/components/lists/) Navigation Strategy**\n\nA new `navigation-strategy` prop gives fine-grained control over which items receive focus during keyboard navigation. This is particularly useful for complex lists with nested content.\n\n**[VImg](/components/images/) Attribute Passthrough**\n\nAttributes passed to [VImg](/components/images/) now flow through to the underlying `` element, enabling native image attributes like `loading=\"lazy\"` and custom data attributes.\n\n**[VOtpInput](/components/otp-input/) Density**\n\nThe [OTP input](/components/otp-input/) component now supports the `density` prop for compact layouts, and the `rounded` prop is properly applied to inner fields.\n\n**Details:**\n\n* [VWindow keyboard controls PR#22430](https://github.com/vuetifyjs/vuetify/pull/22430)\n* [VList navigation-strategy PR#22328](https://github.com/vuetifyjs/vuetify/pull/22328)\n* [VImg attribute passthrough PR#22439](https://github.com/vuetifyjs/vuetify/pull/22439)\n* [VOtpInput density PR#22401](https://github.com/vuetifyjs/vuetify/pull/22401)\n\n### Accessibility & Compatibility { #accessibility-compatibility }\n\n**Forced Colors Mode**\n\n[VColorPicker](/components/color-pickers/) now renders inner outlines correctly in Windows High Contrast Mode and other forced-colors environments, ensuring usability for users with visual impairments.\n\n**Screen Reader Improvements**\n\n[VTextArea](/components/textareas/) and [VSelect](/components/selects/) received accessibility improvements for better screen reader announcements, including proper ARIA attributes and field label reading.\n\n**[VSlider](/components/sliders/) ARIA Attributes**\n\nSlider components now correctly pass `aria-` attributes to the thumb element for assistive technology support.\n\n**[VTooltip](/components/tooltips/) Dismissable by Default**\n\nTooltips are now dismissable by default, improving keyboard accessibility and touch device support.\n\n**Fields ARIA Cleanup**\n\nAll field components received ARIA attribute cleanup for better screen reader compatibility.\n\n**Details:**\n\n* [VColorPicker forced-colors PR#22317](https://github.com/vuetifyjs/vuetify/pull/22317)\n* [VTextArea/VSelect screen reader PR#20339](https://github.com/vuetifyjs/vuetify/pull/20339)\n* [VSlider ARIA PR#22444](https://github.com/vuetifyjs/vuetify/pull/22444)\n* [VTooltip dismissable PR#22419](https://github.com/vuetifyjs/vuetify/pull/22419)\n* [Fields ARIA cleanup PR#22418](https://github.com/vuetifyjs/vuetify/pull/22418)\n\n---\n\n## Product Updates\n\nDecember saw significant updates across all Vuetify ecosystem products, with **PWA support** rolling out universally and major feature additions to [Bin](https://bin.vuetifyjs.com/) and [Play](https://play.vuetifyjs.com/).\n\n### Vuetify Bin\n\n\n\n
\n\n**41 commits** made December [Bin](https://bin.vuetifyjs.com/)'s most active month:\n\n* **Embeddable Bins**: New feature in testing for embedding bins in external documentation and blogs using [Shiki](https://shiki.style/) for lighter bundles. Available to Vuetify One subscribers.\n\n![Embeddable Bins](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/embeddable-bins.png \"Bin embedded in documentation\")\n\n* **18 Language Support**: Expanded language support with auto-detection for pasted code\n* **Public/Private Visibility**: Users can now control bin visibility with proper 403 error pages for private bins\n* **Live Share Restrictions**: Limited to public bins with dashboard action\n* **Accessibility Audit**: Comprehensive a11y review completed\n* **PWA Support**: Install Bin as a standalone app\n* **Editor Improvements**: Line wrapping enabled by default, grouped secondary AppBar actions\n\n### Vuetify Play\n\n\n\n
\n\n**23 commits** delivered key improvements to [Play](https://play.vuetifyjs.com/):\n\n* **Multiple Templates**: Switch between project templates without losing work, with proper preservation of changes to system files\n\n![Play Template Switcher](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/play-templates.png \"Template selection in Vuetify Play\")\n\n* **Editor Settings**: Customizable editor preferences\n* **Visibility Toggle**: Public/private playground support\n* **Version Selector**: Now includes prerelease versions for Vue and Vuetify\n* **v0 Template**: Updated to presetWind4\n* **PWA Support**: Install Play as a standalone app\n\n### Vuetify Issues\n\n\n\n
\n\nThe **Vuetify Issues** reporter received **31 commits** with significant improvements to the issue creation workflow:\n\n![Issues Form](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/vissues-form.png \"Improved issue creation form\")\n\n**Ecosystem Projects Support**:\n\n* Now supports non-library repositories (create-vuetify, admin, etc.)\n* Repo and type query parameters for direct linking\n* Project name displayed in title for ecosystem issues\n* Reproduction step hidden for ecosystem projects (not applicable)\n* Shows repo name instead of versions for ecosystem review\n\n**Form Validation Improvements**:\n\n* Required expected/actual behavior fields before save\n* Steps require content before adding new ones\n* New step auto-focus for better UX\n\n**Other Updates**:\n\n* **PWA Support**: Install as standalone app\n* **\"Used to work\" Switch**: Available for all repos, not just Vuetify\n* **New Favicon**: Fresh vissues branding\n* **UI Polish**: Fixed button spacing and v-confirm-edit actions\n\n**Details:**\n\n* [Vuetify Issues](https://issues.vuetifyjs.com/)\n\n### Other Products\n\n* **[Vuetify Snips](https://snips.vuetifyjs.com/)**: New button and pagination snippets in review, improved a11y for radio groups, PWA support added\n* **[Vuetify Studio](https://studio.vuetifyjs.com/)**: PWA support added, playground link generation updated\n* **[Vuetify Link](https://link.vuetifyjs.com/)**: Route handling refactored to use definePage, PWA support added\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n* [Vuetify Play](https://play.vuetifyjs.com/)\n* [Vuetify Snips](https://snips.vuetifyjs.com/)\n* [Vuetify Issues](https://issues.vuetifyjs.com/)\n\n---\n\n## Vuetify MCP: Rate Limiting & CLI Support { #vuetify-mcp-rate-limiting-cli-support }\n\n\n\n
\n\nDecember brought four releases to the Vuetify MCP server (v0.2.4 through v0.4.1), adding important infrastructure improvements and new capabilities.\n\n### What's New\n\n**Rate Limiter**: The MCP server now includes rate limiting to ensure fair usage and stability across all consumers.\n\n**[Claude Code](https://docs.anthropic.com/en/docs/claude-code) CLI Support**: Native integration with Claude Code for seamless AI-assisted development workflows.\n\n**update_vuetify_bin Tool**: A new tool for updating existing Vuetify bins programmatically.\n\n**HTTP Transport Improvements**: Stateless mode improvements and auth propagation fixes.\n\n### Getting Started\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\nOr run locally:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@vuetify/mcp\"]\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [Model Context Protocol Documentation](https://modelcontextprotocol.io/)\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\n
\n\nDecember was another strong month for Vuetify0, with **322 commits** and 6 releases (v0.0.15–v0.0.18, v0.0.20–v0.0.21). The headless meta-framework gained five new composables—including virtual scrolling and pagination primitives—along with accessibility improvements, observer enhancements, and significant documentation updates.\n\n![Vuetify0 Progress](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/v0.png \"Vuetify0 Progress\")\n\nWith these additions, v0 now provides production-ready primitives for building accessible, high-performance UI components without the styling opinions of a traditional component library.\n\n### New Composables\n\nDecember added five composables covering pagination, virtualization, and UI utilities:\n\n**[usePagination](https://0.vuetifyjs.com/composables/utilities/use-pagination/)** — Full-featured pagination logic with first/prev/next/last navigation, ellipsis support for large page ranges, and computed `pageStart`/`pageStop` for efficient data slicing. Supports locale-aware formatting and customizable page sizes.\n\n**[useVirtual](https://0.vuetifyjs.com/composables/utilities/use-virtual/)** — High-performance virtual scrolling that renders only visible items plus an overscan buffer. Supports dynamic or fixed item heights, bidirectional scrolling (useful for chat interfaces), scroll anchoring to maintain position across data changes, and iOS momentum scrolling. Handles 100k+ items efficiently.\n\n**[useOverflow](https://0.vuetifyjs.com/composables/utilities/use-overflow/)** — Computes how many items fit in a container based on available width. Two modes: variable-width (measures each item individually, ideal for breadcrumbs) and uniform-width (samples one item, ideal for pagination buttons). Tracks container width via ResizeObserver and supports reserved space for navigation controls.\n\n**[useClickOutside](https://0.vuetifyjs.com/composables/system/use-click-outside/)** — Click outside detection for closing menus, dialogs, and popovers. Handles edge cases like portaled content and nested overlays.\n\n**[useToggleScope](https://0.vuetifyjs.com/composables/system/use-toggle-scope/)** — Manages Vue effect scopes based on a reactive boolean. Automatically cleans up effects when the condition becomes false—useful for conditional side effects and feature flags.\n\n### New Components\n\n**[PaginationStatus](https://0.vuetifyjs.com/components/semantic/pagination/)** — An accessibility-focused component that provides `aria-live` announcements when pagination state changes. Screen readers automatically announce the current page, helping users who rely on assistive technology stay oriented. Style it with `sr-only` CSS to keep it visually hidden while remaining accessible.\n\n### Observer Improvements\n\nAll three observer composables—[useResizeObserver](https://0.vuetifyjs.com/composables/system/use-resize-observer/), [useMutationObserver](https://0.vuetifyjs.com/composables/system/use-mutation-observer/), and [useIntersectionObserver](https://0.vuetifyjs.com/composables/system/use-intersection-observer/)—received enhancements:\n\n| Feature | Description |\n|---------|-------------|\n| `once` option | Automatically stops observing after first callback execution |\n| `isActive` return | Exposes whether the observer is currently monitoring |\n| Broader targets | [useIntersectionObserver](https://0.vuetifyjs.com/composables/system/use-intersection-observer/) accepts additional target types |\n\nThe `once` option is particularly useful for lazy-loading images or triggering one-time animations when elements enter the viewport.\n\n### Registry Enhancements\n\n[createRegistry](https://0.vuetifyjs.com/composables/registration/create-registry/) powers component coordination patterns like tabs, accordions, and steppers. December brought performance improvements for complex component trees:\n\n| Feature | Description |\n|---------|-------------|\n| `batch()` method | Bulk register/unregister operations in a single call, reducing reindexing overhead |\n| `ReadonlyMap` collection | Type changed from `Map` to `ReadonlyMap` to prevent accidental mutations |\n| Deferred reindexing | Unregister operations now batch index recalculations for better performance |\n\nThese changes particularly benefit applications with deeply nested or dynamically generated component hierarchies.\n\n### Documentation Updates\n\nThe [0.vuetifyjs.com](https://0.vuetifyjs.com/) documentation site received substantial improvements:\n\n**AI Q&A** — An intelligent search feature that answers questions about v0 composables, patterns, and usage. Ask natural language questions like \"How do I implement infinite scroll?\" and get contextual answers with code examples.\n\n![v0 AI Q&A](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/v0-ai-qa.png \"AI-powered Q&A in Vuetify0 docs\")\n\n* **PWA support** — Install the documentation as a standalone app for offline access. Useful when working in environments with limited connectivity.\n* **Mobile improvements** — Redesigned navigation for smaller screens with proper iOS safe area support, making it easier to browse documentation on mobile devices.\n* **Code blocks** — Fence titles now display file paths above code examples, and syntax highlighting was improved across all supported languages.\n\n::: info\n\nThe v0 documentation at [0.vuetifyjs.com](https://0.vuetifyjs.com/) now includes AI-powered Q&A for finding information quickly.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [useVirtual](https://0.vuetifyjs.com/composables/use-virtual/)\n* [usePagination](https://0.vuetifyjs.com/composables/use-pagination/)\n* [useOverflow](https://0.vuetifyjs.com/composables/use-overflow/)\n* [useClickOutside](https://0.vuetifyjs.com/composables/use-click-outside/)\n* [v0.0.15](https://github.com/vuetifyjs/0/releases/tag/v0.0.15)–[v0.0.18](https://github.com/vuetifyjs/0/releases/tag/v0.0.18), [v0.0.20](https://github.com/vuetifyjs/0/releases/tag/v0.0.20)–[v0.0.21](https://github.com/vuetifyjs/0/releases/tag/v0.0.21)\n\n---\n\n## December 2025 Changelog\n\nThe following section provides an overview of the changes made in December 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* CSS layers architecture in v4 for cleaner customization\n* [VWindow](/components/windows/) keyboard controls for accessible slide navigation\n* [VList](/components/lists/) navigation-strategy prop for focus management\n* [VColorPicker](/components/color-pickers/) forced-colors mode compatibility\n* [VTreeview](/components/treeview/) selection state fixes with disabled items\n* [VSlider](/components/sliders/) ARIA attribute corrections\n* Strict TypeScript template support\n\n**Expand** this section to see the detailed changelog for December 2025:\n\n
\n\n### v3.11.2\n\n**:wrench: Bug Fixes**\n\n* **VDataTable:** hide checkbox for `mobile` without `show-select` ([d297f3f](https://github.com/vuetifyjs/vuetify/commit/d297f3f)), closes [#22375](https://github.com/vuetifyjs/vuetify/issues/22375)\n* **VDataTable:** hover icon should match `initial-sort-order` ([7a1ae83](https://github.com/vuetifyjs/vuetify/commit/7a1ae83))\n* **VDatePicker:** correctly render month when using Luxon adapter ([f98d9db](https://github.com/vuetifyjs/vuetify/commit/f98d9db)), closes [#22388](https://github.com/vuetifyjs/vuetify/issues/22388)\n* **VHotkey:** correct sass variables import order ([216b872](https://github.com/vuetifyjs/vuetify/commit/216b872)), closes [#22372](https://github.com/vuetifyjs/vuetify/issues/22372)\n* **VNumberInput:** avoid error state when using comma separator ([513e153](https://github.com/vuetifyjs/vuetify/commit/513e153)), closes [#22371](https://github.com/vuetifyjs/vuetify/issues/22371)\n* **VSlideGroup:** provide a way to never show arrows ([b76ffd5](https://github.com/vuetifyjs/vuetify/commit/b76ffd5))\n* **VTabs:** consistent padding for `inset` ([893eb71](https://github.com/vuetifyjs/vuetify/commit/893eb71))\n* **VTabs:** keep slider narrow when used without inset ([eb9477c](https://github.com/vuetifyjs/vuetify/commit/eb9477c)), closes [#22363](https://github.com/vuetifyjs/vuetify/issues/22363)\n* **VTextField:** check autofocus intersection on input wrapper element ([0409cde](https://github.com/vuetifyjs/vuetify/commit/0409cde)), closes [#22373](https://github.com/vuetifyjs/vuetify/issues/22373)\n\n**:test_tube: Labs**\n\n* **VStepperVertical:** avoid semi-transparent items with `non-linear` ([99a68e5](https://github.com/vuetifyjs/vuetify/commit/99a68e5)), closes [#22369](https://github.com/vuetifyjs/vuetify/issues/22369)\n\n---\n\n### v3.11.3\n\n**:wrench: Bug Fixes**\n\n* **fields:** clean up aria attributes ([#22418](https://github.com/vuetifyjs/vuetify/issues/22418)) ([054dbf4](https://github.com/vuetifyjs/vuetify/commit/054dbf4))\n* **types:** support strict TS checks in templates ([#22395](https://github.com/vuetifyjs/vuetify/issues/22395)) ([02710a6](https://github.com/vuetifyjs/vuetify/commit/02710a6))\n* **v-ripple:** remove mousedown and keydown listeners on unmount ([278a7e9](https://github.com/vuetifyjs/vuetify/commit/278a7e9))\n* **VAppBar:** prevent navbar pop-up when reaching page bottom ([#22224](https://github.com/vuetifyjs/vuetify/issues/22224)) ([8da1495](https://github.com/vuetifyjs/vuetify/commit/8da1495)), closes [#20352](https://github.com/vuetifyjs/vuetify/issues/20352)\n* **VAutocomplete, VCombobox:** skip subheader for `auto-select-first` ([#22402](https://github.com/vuetifyjs/vuetify/issues/22402)) ([9edd98c](https://github.com/vuetifyjs/vuetify/commit/9edd98c)), closes [#22398](https://github.com/vuetifyjs/vuetify/issues/22398)\n* **VBtn:** keep all styles within CSS layer ([c794da1](https://github.com/vuetifyjs/vuetify/commit/c794da1))\n* **VColorPicker:** render inner outlines in forced-colors mode ([#22317](https://github.com/vuetifyjs/vuetify/issues/22317)) ([c61c0d3](https://github.com/vuetifyjs/vuetify/commit/c61c0d3))\n* **VDataTable:** selecting group should respect selectable prop ([#22410](https://github.com/vuetifyjs/vuetify/issues/22410)) ([e295fa6](https://github.com/vuetifyjs/vuetify/commit/e295fa6)), closes [#22409](https://github.com/vuetifyjs/vuetify/issues/22409)\n* **VDataTable:** typo in header field `intent` » `indent` ([f44b2fd](https://github.com/vuetifyjs/vuetify/commit/f44b2fd))\n* **VDataTableFooter:** correct placement of aria label ([#22359](https://github.com/vuetifyjs/vuetify/issues/22359)) ([137cb95](https://github.com/vuetifyjs/vuetify/commit/137cb95)), closes [#20896](https://github.com/vuetifyjs/vuetify/issues/20896)\n* **VDatePicker:** correct year and month for jalali ([41067af](https://github.com/vuetifyjs/vuetify/commit/41067af)), closes [#22417](https://github.com/vuetifyjs/vuetify/issues/22417)\n* **VDatePicker:** correct next year button disabled condition ([04a4608](https://github.com/vuetifyjs/vuetify/commit/04a4608)), closes [#22408](https://github.com/vuetifyjs/vuetify/issues/22408)\n* **VHotkey:** avoid build errors when customizing VKbd sass variables ([fa1fb4f](https://github.com/vuetifyjs/vuetify/commit/fa1fb4f)), closes [#22372](https://github.com/vuetifyjs/vuetify/issues/22372)\n* **VInput:** prioritize slots over prepend/append icons ([#22406](https://github.com/vuetifyjs/vuetify/issues/22406)) ([2a998ee](https://github.com/vuetifyjs/vuetify/commit/2a998ee)), closes [#22332](https://github.com/vuetifyjs/vuetify/issues/22332)\n* **VNumberInput:** clean up listeners on unmount ([045bbaf](https://github.com/vuetifyjs/vuetify/commit/045bbaf))\n* **VOtpInput:** apply rounded prop to inner fields ([#21499](https://github.com/vuetifyjs/vuetify/issues/21499)) ([f49803a](https://github.com/vuetifyjs/vuetify/commit/f49803a)), closes [#20286](https://github.com/vuetifyjs/vuetify/issues/20286)\n* **VOverlay:** clean up focus trap listeners and data on unmount ([497ae4b](https://github.com/vuetifyjs/vuetify/commit/497ae4b)), closes [#22397](https://github.com/vuetifyjs/vuetify/issues/22397)\n* **VSelect:** don't skip continuing keyboard lookup match ([f1f3c45](https://github.com/vuetifyjs/vuetify/commit/f1f3c45)), closes [#22423](https://github.com/vuetifyjs/vuetify/issues/22423)\n* **VSelects:** no closable chips when `readonly` or `disabled` ([#22368](https://github.com/vuetifyjs/vuetify/issues/22368)) ([21c85eb](https://github.com/vuetifyjs/vuetify/commit/21c85eb)), closes [#22349](https://github.com/vuetifyjs/vuetify/issues/22349)\n* **VSlider:** clean up listeners on unmount ([f2621a3](https://github.com/vuetifyjs/vuetify/commit/f2621a3))\n* **VTextarea:** avoid placeholder obstructing the label ([27e854f](https://github.com/vuetifyjs/vuetify/commit/27e854f)), closes [#22416](https://github.com/vuetifyjs/vuetify/issues/22416)\n* **VTextArea/VSelects:** help screen readers read field labels ([#20339](https://github.com/vuetifyjs/vuetify/issues/20339)) ([04b6725](https://github.com/vuetifyjs/vuetify/commit/04b6725)), closes [#19155](https://github.com/vuetifyjs/vuetify/issues/19155) [#19156](https://github.com/vuetifyjs/vuetify/issues/19156)\n* **VTimePicker:** don't inherit defaults from VTextField ([3ffa749](https://github.com/vuetifyjs/vuetify/commit/3ffa749)), closes [#22407](https://github.com/vuetifyjs/vuetify/issues/22407)\n* **VTimePicker:** clean up listeners on unmount ([60183d7](https://github.com/vuetifyjs/vuetify/commit/60183d7))\n* **VTooltip:** should be dismissable by default ([#22419](https://github.com/vuetifyjs/vuetify/issues/22419)) ([c5ae129](https://github.com/vuetifyjs/vuetify/commit/c5ae129)), closes [#21501](https://github.com/vuetifyjs/vuetify/issues/21501)\n* **VVirtualScroll:** show more than 1 element when min height is 0 ([#22420](https://github.com/vuetifyjs/vuetify/issues/22420)) ([08550fd](https://github.com/vuetifyjs/vuetify/commit/08550fd))\n* **VWindow:** set transition-duration css variable ([4676b6d](https://github.com/vuetifyjs/vuetify/commit/4676b6d))\n\n**:test_tube: Labs**\n\n* **VVideo:** clean up listeners on unmount ([0d37af0](https://github.com/vuetifyjs/vuetify/commit/0d37af0))\n\n---\n\n### v3.11.4\n\n**:wrench: Bug Fixes**\n\n* **fields:** keep `inert` on root element ([8dea3bc](https://github.com/vuetifyjs/vuetify/commit/8dea3bc))\n* **VSelect:** clear on backspace ([#22435](https://github.com/vuetifyjs/vuetify/issues/22435)) ([f90f8ab](https://github.com/vuetifyjs/vuetify/commit/f90f8ab)), closes [#22422](https://github.com/vuetifyjs/vuetify/issues/22422)\n* **VSelects:** restore `appendInnerIcon` rendering ([#22431](https://github.com/vuetifyjs/vuetify/issues/22431)) ([5e9fa29](https://github.com/vuetifyjs/vuetify/commit/5e9fa29)), closes [#22429](https://github.com/vuetifyjs/vuetify/issues/22429)\n* **VSlider:** pass `aria-` attributes to thumb element ([#22444](https://github.com/vuetifyjs/vuetify/issues/22444)) ([83b55f5](https://github.com/vuetifyjs/vuetify/commit/83b55f5)), closes [#22432](https://github.com/vuetifyjs/vuetify/issues/22432)\n\n**:microscope: Code Refactoring**\n\n* **styles:** replace `if()` with `@if` ([5391930](https://github.com/vuetifyjs/vuetify/commit/5391930)), closes [#22421](https://github.com/vuetifyjs/vuetify/issues/22421)\n\n**:test_tube: Labs**\n\n* **VColorInput, VDateInput:** add `picker-props` ([#22437](https://github.com/vuetifyjs/vuetify/issues/22437)) ([ea6d861](https://github.com/vuetifyjs/vuetify/commit/ea6d861)), closes [#22436](https://github.com/vuetifyjs/vuetify/issues/22436)\n* **VDateInput,VMaskInput:** add specific classes ([#22447](https://github.com/vuetifyjs/vuetify/issues/22447)) ([f539630](https://github.com/vuetifyjs/vuetify/commit/f539630)), closes [#22334](https://github.com/vuetifyjs/vuetify/issues/22334)\n* **VDateInput:** make `prepend-icon` unfocusable ([#22445](https://github.com/vuetifyjs/vuetify/issues/22445)) ([c917533](https://github.com/vuetifyjs/vuetify/commit/c917533)), closes [#22333](https://github.com/vuetifyjs/vuetify/issues/22333)\n\n---\n\n### v3.11.5\n\n**:wrench: Bug Fixes**\n\n* **VDataTableVirtual:** show index from virtualized items ([#22324](https://github.com/vuetifyjs/vuetify/issues/22324)) ([29e3f09](https://github.com/vuetifyjs/vuetify/commit/29e3f09)), closes [#19108](https://github.com/vuetifyjs/vuetify/issues/19108)\n* **VList, VTreeview:** item should be selectable when `disabled` changes ([#22464](https://github.com/vuetifyjs/vuetify/issues/22464)) ([d6ca166](https://github.com/vuetifyjs/vuetify/commit/d6ca166)), closes [#22366](https://github.com/vuetifyjs/vuetify/issues/22366)\n* **VNumberInput:** respect `error` prop ([69862ea](https://github.com/vuetifyjs/vuetify/commit/69862ea)), closes [#22451](https://github.com/vuetifyjs/vuetify/issues/22451)\n* **VOtpInput:** hide placeholder on focus ([0852c8c](https://github.com/vuetifyjs/vuetify/commit/0852c8c))\n* **VTreeview:** bypass disabled when loading selection state ([#22465](https://github.com/vuetifyjs/vuetify/issues/22465)) ([70dd313](https://github.com/vuetifyjs/vuetify/commit/70dd313)), closes [#22353](https://github.com/vuetifyjs/vuetify/issues/22353)\n* **VTreeview:** prevent selection of disabled nodes ([0de4599](https://github.com/vuetifyjs/vuetify/commit/0de4599)), closes [#22352](https://github.com/vuetifyjs/vuetify/issues/22352)\n\n**:test_tube: Labs**\n\n* **VDateInput:** keep focus on input when opened with year view ([b58e361](https://github.com/vuetifyjs/vuetify/commit/b58e361)), closes [#22323](https://github.com/vuetifyjs/vuetify/issues/22323)\n* **VDateInput:** hide empty prepend slot ([28fe71e](https://github.com/vuetifyjs/vuetify/commit/28fe71e)), closes [#22456](https://github.com/vuetifyjs/vuetify/issues/22456)\n* **VDateInput:** clickable prepend icon when handler exists ([776a462](https://github.com/vuetifyjs/vuetify/commit/776a462))\n* **VStepperVertical:** restore default opacity of item title ([f30a081](https://github.com/vuetifyjs/vuetify/commit/f30a081)), closes [#22467](https://github.com/vuetifyjs/vuetify/issues/22467)\n\n---\n\n### v3.11.6\n\n**:wrench: Bug Fixes**\n\n* **VCalendar:** wrap unclamped timeToY ([3b4b5e6](https://github.com/vuetifyjs/vuetify/commit/3b4b5e6)), closes [#22413](https://github.com/vuetifyjs/vuetify/issues/22413)\n* **VCalendar:** extend start of event on following day ([4f7cc6a](https://github.com/vuetifyjs/vuetify/commit/4f7cc6a)), closes [#22480](https://github.com/vuetifyjs/vuetify/issues/22480)\n* **VColorPicker:** disable swatches ([#22472](https://github.com/vuetifyjs/vuetify/issues/22472)) ([8dbacad](https://github.com/vuetifyjs/vuetify/commit/8dbacad)), closes [#22471](https://github.com/vuetifyjs/vuetify/issues/22471)\n* **VDatePicker:** accept custom `control-height` ([#22479](https://github.com/vuetifyjs/vuetify/issues/22479)) ([b47a4ce](https://github.com/vuetifyjs/vuetify/commit/b47a4ce)), closes [#22478](https://github.com/vuetifyjs/vuetify/issues/22478)\n\n---\n\n### v4.0.0-alpha.0\n\n**:rocket: Features**\n\n* **display:** reduce default breakpoint sizes ([#19759](https://github.com/vuetifyjs/vuetify/issues/19759)) ([853ce33](https://github.com/vuetifyjs/vuetify/commit/853ce33))\n* **nested:** add branch select strategy ([4fcb72c](https://github.com/vuetifyjs/vuetify/commit/4fcb72c)), closes [#22404](https://github.com/vuetifyjs/vuetify/issues/22404)\n* **styles:** always use css layers ([f7123c6](https://github.com/vuetifyjs/vuetify/commit/f7123c6)), closes [#3400](https://github.com/vuetifyjs/vuetify/issues/3400) [#20232](https://github.com/vuetifyjs/vuetify/issues/20232)\n* **styles:** flatten layer names ([#22460](https://github.com/vuetifyjs/vuetify/issues/22460)) ([47bc400](https://github.com/vuetifyjs/vuetify/commit/47bc400)), closes [#22443](https://github.com/vuetifyjs/vuetify/issues/22443)\n* **styles:** possibility to opt-out from misc styles ([#22405](https://github.com/vuetifyjs/vuetify/issues/22405)) ([77d02f3](https://github.com/vuetifyjs/vuetify/commit/77d02f3))\n* **styles:** add separate entry points ([#22396](https://github.com/vuetifyjs/vuetify/issues/22396)) ([f00902c](https://github.com/vuetifyjs/vuetify/commit/f00902c)), closes [#20100](https://github.com/vuetifyjs/vuetify/issues/20100)\n* **styles:** cut down CSS reset ([#20960](https://github.com/vuetifyjs/vuetify/issues/20960)) ([ae3e8c9](https://github.com/vuetifyjs/vuetify/commit/ae3e8c9)), closes [#17633](https://github.com/vuetifyjs/vuetify/issues/17633)\n* **styles:** remove overflow-y from reset ([27868d5](https://github.com/vuetifyjs/vuetify/commit/27868d5)), closes [#1197](https://github.com/vuetifyjs/vuetify/issues/1197)\n* **theme:** change default theme to 'system' ([9c8506c](https://github.com/vuetifyjs/vuetify/commit/9c8506c))\n* **theme:** support transparent colors ([bb49662](https://github.com/vuetifyjs/vuetify/commit/bb49662)), closes [#10299](https://github.com/vuetifyjs/vuetify/issues/10299)\n* **theme:** remove unimportant option ([e8845ff](https://github.com/vuetifyjs/vuetify/commit/e8845ff))\n* **VDataIterator:** add `items-length` prop ([#22360](https://github.com/vuetifyjs/vuetify/issues/22360)) ([290836c](https://github.com/vuetifyjs/vuetify/commit/290836c)), closes [#19486](https://github.com/vuetifyjs/vuetify/issues/19486)\n* **VDatePicker:** only emit start and end range values ([#20621](https://github.com/vuetifyjs/vuetify/issues/20621)) ([eef80ad](https://github.com/vuetifyjs/vuetify/commit/eef80ad)), closes [#9098](https://github.com/vuetifyjs/vuetify/issues/9098) [#18701](https://github.com/vuetifyjs/vuetify/issues/18701) [#20599](https://github.com/vuetifyjs/vuetify/issues/20599)\n* **VForm:** unref values in slot props ([f92ae7a](https://github.com/vuetifyjs/vuetify/commit/f92ae7a)), closes [#18355](https://github.com/vuetifyjs/vuetify/issues/18355)\n* **VImg:** pass attributes to the underlying `` ([#22439](https://github.com/vuetifyjs/vuetify/issues/22439)) ([71e01aa](https://github.com/vuetifyjs/vuetify/commit/71e01aa)), closes [#18860](https://github.com/vuetifyjs/vuetify/issues/18860) [#18907](https://github.com/vuetifyjs/vuetify/issues/18907)\n* **VInput:** add `indent-details` prop ([#21265](https://github.com/vuetifyjs/vuetify/issues/21265)) ([f483092](https://github.com/vuetifyjs/vuetify/commit/f483092)), closes [#16679](https://github.com/vuetifyjs/vuetify/issues/16679)\n* **VList:** add `navigation-strategy` to control focused item ([#22328](https://github.com/vuetifyjs/vuetify/issues/22328)) ([3815eee](https://github.com/vuetifyjs/vuetify/commit/3815eee))\n* **VListItem:** expose `isDisabled` in slot props ([9d92638](https://github.com/vuetifyjs/vuetify/commit/9d92638))\n* **VNumberInput:** do not clamp value on mounted ([#21826](https://github.com/vuetifyjs/vuetify/issues/21826)) ([4b4bfa5](https://github.com/vuetifyjs/vuetify/commit/4b4bfa5))\n* **VOtpInput:** add `density` prop ([#22401](https://github.com/vuetifyjs/vuetify/issues/22401)) ([aca7d30](https://github.com/vuetifyjs/vuetify/commit/aca7d30))\n* **VSelect/Autocomplete/Combobox:** rename item to internalItem ([2c1ac25](https://github.com/vuetifyjs/vuetify/commit/2c1ac25)), closes [#18354](https://github.com/vuetifyjs/vuetify/issues/18354)\n* **VSnackbar:** remove `multi-line` prop ([#22212](https://github.com/vuetifyjs/vuetify/issues/22212)) ([1371aba](https://github.com/vuetifyjs/vuetify/commit/1371aba)), closes [#15996](https://github.com/vuetifyjs/vuetify/issues/15996)\n* **VWindow:** add support for keyboard controls ([#22430](https://github.com/vuetifyjs/vuetify/issues/22430)) ([ab5b671](https://github.com/vuetifyjs/vuetify/commit/ab5b671)), closes [#11544](https://github.com/vuetifyjs/vuetify/issues/11544)\n\n**:wrench: Bug Fixes**\n\n* **styles:** skip VRow/VCol styles when using only VContainer or VSpacer ([f899803](https://github.com/vuetifyjs/vuetify/commit/f899803))\n* **theme:** re-merge default variables when themes is set ([a14c763](https://github.com/vuetifyjs/vuetify/commit/a14c763))\n* **theme:** helpers should override theme base ([2690877](https://github.com/vuetifyjs/vuetify/commit/2690877))\n* **theme:** override automatic text color with classes ([#22475](https://github.com/vuetifyjs/vuetify/issues/22475)) ([59b11d5](https://github.com/vuetifyjs/vuetify/commit/59b11d5))\n* **theme:** .text- classes always override color from .bg- ([7edf33a](https://github.com/vuetifyjs/vuetify/commit/7edf33a)), closes [#21787](https://github.com/vuetifyjs/vuetify/issues/21787)\n* **VContainer:** drop dependency on utility class ([47ca5c8](https://github.com/vuetifyjs/vuetify/commit/47ca5c8))\n* **VCounter:** inherit color (aligns with VMessages) ([#22424](https://github.com/vuetifyjs/vuetify/issues/22424)) ([ecd07b9](https://github.com/vuetifyjs/vuetify/commit/ecd07b9))\n* **VField:** append/prepend should fill height ([add5d2d](https://github.com/vuetifyjs/vuetify/commit/add5d2d))\n* **VOverlay:** apply scrollbar offset to body and VNavigationDrawer ([ec926d7](https://github.com/vuetifyjs/vuetify/commit/ec926d7))\n\n**:microscope: Code Refactoring**\n\n* **styles:** replace !important with layers ([7484c81](https://github.com/vuetifyjs/vuetify/commit/7484c81))\n* **VBtn:** remove default text transform ([#21079](https://github.com/vuetifyjs/vuetify/issues/21079)) ([712bdd6](https://github.com/vuetifyjs/vuetify/commit/712bdd6))\n* **VBtn:** convert display from grid to flex ([41b7768](https://github.com/vuetifyjs/vuetify/commit/41b7768))\n* **VField:** convert display from grid to flex ([#21035](https://github.com/vuetifyjs/vuetify/issues/21035)) ([b213e3b](https://github.com/vuetifyjs/vuetify/commit/b213e3b))\n\n
\n\n## What's Next{ #whats-next .mt-4 }\n\nJanuary kicks off with continued development on Vuetify 4, incorporating feedback from the alpha release. We're targeting additional alpha releases throughout Q1 2026 as we refine the CSS layers architecture and modernize remaining components.\n\nThe v3.11.x branch will continue receiving maintenance releases with bug fixes and minor improvements. VCommandPalette is nearing [labs](/labs/introduction/) release, and we're expanding [v0](https://0.vuetifyjs.com/) with additional headless primitives for forms and data display.\n\nThe [CLI](https://github.com/vuetifyjs/cli) will gain additional commands for component generation and project management, while the [MCP server](https://github.com/vuetifyjs/mcp) continues to evolve with new tools for AI-assisted development.\n\nThank you for being part of the Vuetify community. Here's to an incredible 2026!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/february-2026-update.md":"---\nlayout: blog\nmeta:\n title: February 2026 Update\n description: February ships stable Vuetify 4.0.0 — CSS layers, MD3, and unstyled foundations — plus CLI v1.0.0, VAvatarGroup, and new Vuetify0 composables.\n keywords: Vuetify February 2026, Vuetify 4.0.0 Revisionist, v4 stable, VAvatarGroup, CLI v1.0.0, Vuetify0, createDataTable\n---\n\n\n\n# February 2026 Update\n\n**Vuetify 4 is here.** After four beta releases and months of community testing, **v4.0.0 (Revisionist)** shipped on February 23rd—bringing CSS layers, MD3 typography and elevation, and the architectural foundation for unstyled components. The **Vuetify CLI** also reached its **v1.0.0** milestone, and Vuetify0 continues building its headless composable layer with createDataTable, createNested, and Breadcrumbs.\n\n![Hero image for February update](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/february-hero.png \"February hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 March 9th, 2026\n\n\n\n---\n\n## The big one\n\nThis is the release we've been building toward since the [2024 State of the Union](https://vuetifyjs.com/blog/state-of-the-union-2024/). **390 commits** across 15 active repositories, **68 merged PRs**, and 21 releases across the ecosystem—all driven by a month laser-focused on getting v4 stable. [J-Sek](https://github.com/J-Sek) delivered another prolific month with 20+ merged framework PRs including VAvatarGroup and new transitions, while [Andrei Elkin](https://github.com/AndreyYolkin) drove the [CLI](https://github.com/vuetifyjs/cli) to its first stable release with the Tailwind preset and project scaffolding presets.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Vuetify 4.0.0 Stable](#vuetify-400-stable)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Ecosystem Spotlight: Vuetify CLI v1.0.0](#ecosystem-spotlight-vuetify-cli-v100)\n* [Vuetify MCP: V4 Migration & Developer Tools](#vuetify-mcp-v4-migration-developer-tools)\n* [Product Updates](#product-updates)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [February 2026 Changelog](#february-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nFebruary was Vuetify's biggest release month ever. Four v4 betas culminated in the **stable v4.0.0 (Revisionist) release**, while v3.11.9, v3.12.0, and v3.12.1 maintained the v3 line. The CLI shipped nine releases reaching v1.0.0, Vuetify0 released v0.1.3, and the UnoCSS preset hit v0.2.0.\n\n![February Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/releases.png \"February Releases Banner\")\n\n### Key Improvements\n\n* **[Vuetify 4.0.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0)** stable release with CSS layers, MD3 design system, and unstyled foundations\n* **[VAvatarGroup](https://vuetifyjs.com/components/avatar-groups/)** new component for stacked avatar displays\n* **[VSelect/VAutocomplete/VCombobox](https://vuetifyjs.com/components/selects/)** `menu-header` and `menu-footer` slots\n* **[VSnackbarQueue](https://vuetifyjs.com/components/snackbar-queue/)** show multiple snackbars simultaneously\n* **[v-expand-both-transition](https://vuetifyjs.com/styles/transitions/)** new bidirectional expand transition\n* **[mdi-unocss](https://vuetifyjs.com/features/icon-fonts/)** icon set for UnoCSS integration\n\nView the complete list of changes in the [Full Changelog](#february-2026-changelog).\n\n**Details:**\n\n* [v4.0.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0)\n* [v3.12.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.0)\n* [v3.12.1](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.1)\n* [v3.11.9](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.9)\n\n---\n\n## Vuetify 4.0.0 Stable { #vuetify-400-stable }\n\nThe stable release of **Vuetify 4.0.0 (Revisionist)** landed on February 23rd after four beta releases (beta.0 through beta.3). This is a pivotal release for the Vuetify ecosystem—not just for the features it ships, but for the architecture it establishes.\n\n\n![Vuetify 4 Launch](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/v4-launch.png \"Vuetify 4.0.0 Stable Release\")\n\n### What's in v4\n\n* **CSS Layers** — Vuetify's styles are now organized in CSS `@layer` blocks, making it trivial to override styles and coexist with utility frameworks like TailwindCSS and UnoCSS\n* **MD3 Typography & Elevation** — Full Material Design 3 type scale and shadow system\n* **Grid System Overhaul** — Modernized responsive grid with improved flexbox, RTL support, and cleaner CSS output\n* **Unstyled Foundations** — The internal architecture that makes true unstyled components possible in future releases\n\n### Migration\n\nThe upgrade path from v3 to v4 is intentionally minimal. The [upgrade guide](https://vuetifyjs.com/getting-started/upgrade-guide/) covers the handful of breaking changes, and the [Vuetify MCP server](#vuetify-mcp-v4-migration-developer-tools) provides AI-assisted migration tooling.\n\nEvery breaking change in v4 can be reverted with a drop-in snippet — upgrade now, migrate visuals at your own pace:\n\n* **[Grid System](https://vuetifyjs.com/getting-started/grid-legacy-mode/)** — CSS snippet restores v3 negative-margin grid behavior using `@layer vuetify-overrides`\n* **[Typography](https://vuetifyjs.com/getting-started/typography-migration/)** — Sass config restores full MD2 type scale with component-specific variable mappings\n* **[Elevation](https://vuetifyjs.com/getting-started/elevation-migration/)** — CSS file restores all 25 MD2 elevation levels (v4 ships MD3's 6-level system)\n* **[CSS Reset](https://vuetifyjs.com/getting-started/upgrade-guide/)** — Minimal or full reset snippets using `@layer vuetify-core.reset`\n* **[Breakpoints](https://vuetifyjs.com/getting-started/upgrade-guide/)** — JS or Sass config to restore v3 thresholds (960/1280/1920/2560)\n* **[Button text-transform](https://vuetifyjs.com/getting-started/upgrade-guide/)** — Sass variable, global default, or utility class to restore uppercase\n\nThe [vuetify-codemods](https://www.npmjs.com/package/vuetify-codemods) package automates class and attribute renames.\n\n::: tip\n\nUse the Vuetify MCP server to analyze your project: *\"Scan my project for Vuetify 3 patterns that need updating for v4.\"*\n\n:::\n\nAcross the ecosystem, v4 adoption started immediately—[Vuetify One](https://one.vuetifyjs.com/) upgraded to v4 the same week, and the CLI updated all project templates.\n\n**Details:**\n\n* [v4.0.0 Release Notes](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0)\n* [Upgrade Guide](https://vuetifyjs.com/getting-started/upgrade-guide/)\n* [Vuetify 3 Documentation](https://v3.vuetifyjs.com/)\n* [Building with Vite and TailwindCSS](https://vuetifyjs.com/blog/building-with-vite-and-tailwindcss/)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nFebruary's 39 merged PRs delivered new components, significant feature additions, and targeted bug fixes across both the v3 and v4 branches.\n\n### New Features\n\n**[VAvatarGroup](https://vuetifyjs.com/components/avatar-groups/)**\n\nA new component for displaying stacked avatar collections with overlap, max count, and a \"+N\" indicator for overflow. Pairs with the new `badge` prop on VAvatar for status indicators.\n\n\n![VAvatarGroup](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/avatar-group.png \"VAvatarGroup Component\")\n\n**[VSnackbarQueue](https://vuetifyjs.com/components/snackbar-queue/)** — Show multiple snackbars simultaneously instead of replacing one at a time ([#22605](https://github.com/vuetifyjs/vuetify/pull/22605))\n\n**[VToolbar](https://vuetifyjs.com/components/toolbars/)** — New `location` prop for bottom-positioned toolbars ([#22608](https://github.com/vuetifyjs/vuetify/pull/22608))\n\n**[VImg](https://vuetifyjs.com/components/images/)** — `image-class` prop for styling the inner `` element, plus `width=\"fit-content\"` support ([#22622](https://github.com/vuetifyjs/vuetify/pull/22622), [#21414](https://github.com/vuetifyjs/vuetify/pull/21414))\n\n**[VDataTable](https://vuetifyjs.com/components/data-tables/)** — `page-by` prop for page size control ([#22580](https://github.com/vuetifyjs/vuetify/pull/22580))\n\n**[VSelect/VAutocomplete/VCombobox](https://vuetifyjs.com/components/selects/)** — `menu-header` and `menu-footer` slots for custom dropdown content ([#22414](https://github.com/vuetifyjs/vuetify/pull/22414))\n\n**[VSlider](https://vuetifyjs.com/components/sliders/)** — Show thumb value on hover ([#22412](https://github.com/vuetifyjs/vuetify/pull/22412))\n\n**[VOtpInput](https://vuetifyjs.com/components/otp-input/)** — `masked` prop to hide or show entered text ([#20950](https://github.com/vuetifyjs/vuetify/pull/20950))\n\n**[VProgressCircular](https://vuetifyjs.com/components/progress-circular/)** — `reveal` prop for animated entry ([#22502](https://github.com/vuetifyjs/vuetify/pull/22502))\n\n**[VRow](https://vuetifyjs.com/api/v-row/)** — Smaller density steps for finer layout control ([#22574](https://github.com/vuetifyjs/vuetify/pull/22574))\n\n**v-expand-both-transition** — New transition that expands in both width and height ([#22570](https://github.com/vuetifyjs/vuetify/pull/22570))\n\n**color utilities** — Strip `text-*` and `bg-*` prefixes for dynamic utility class support ([#17569](https://github.com/vuetifyjs/vuetify/pull/17569))\n\n**mdi-unocss icon set** — Native UnoCSS icon support ([#22117](https://github.com/vuetifyjs/vuetify/pull/22117))\n\n**Details:**\n\n* [VAvatarGroup PR#22495](https://github.com/vuetifyjs/vuetify/pull/22495)\n* [VAvatar badge PR#22496](https://github.com/vuetifyjs/vuetify/pull/22496)\n* [VSnackbarQueue PR#22605](https://github.com/vuetifyjs/vuetify/pull/22605)\n* [VToolbar location PR#22608](https://github.com/vuetifyjs/vuetify/pull/22608)\n* [VImg image-class PR#22622](https://github.com/vuetifyjs/vuetify/pull/22622)\n\n### Bug Fixes\n\n**VSnackbar** — Opaque background for transparent variants ([#22646](https://github.com/vuetifyjs/vuetify/pull/22646))\n\n**VTab** — Correct text colors with `inset` without `slider-color` ([#22614](https://github.com/vuetifyjs/vuetify/pull/22614))\n\n**VDateInput** — Prevent page scroll when opening years view ([#22613](https://github.com/vuetifyjs/vuetify/pull/22613))\n\n**VTimePicker** — Enforce allowed values and range in inputs ([#22578](https://github.com/vuetifyjs/vuetify/pull/22578))\n\n**VColorPicker** — Avoid undefined alpha in RGB/HSL output ([#22582](https://github.com/vuetifyjs/vuetify/pull/22582))\n\n**VSelect** — Fix screenreader navigation to select options ([#22602](https://github.com/vuetifyjs/vuetify/pull/22602))\n\n**VTreeview** — Indent lines with `prepend-gap`, correct ARIA roles and attributes ([#22589](https://github.com/vuetifyjs/vuetify/pull/22589), [#22577](https://github.com/vuetifyjs/vuetify/pull/22577))\n\n**VCard** — Accept height when used within a dialog ([#22594](https://github.com/vuetifyjs/vuetify/pull/22594))\n\n**VDataTable** — Sort icon persists after removing sort ([#22595](https://github.com/vuetifyjs/vuetify/pull/22595))\n\n**router** — Ensure reactivity for `to` attribute in useLink ([#20994](https://github.com/vuetifyjs/vuetify/pull/20994))\n\n**styles** — Utilities override responsive typography correctly ([#22573](https://github.com/vuetifyjs/vuetify/pull/22573))\n\n**Details:**\n\n* [VSelect a11y PR#22602](https://github.com/vuetifyjs/vuetify/pull/22602)\n* [VTreeview ARIA PR#22577](https://github.com/vuetifyjs/vuetify/pull/22577)\n* [VTreeview indent PR#22589](https://github.com/vuetifyjs/vuetify/pull/22589)\n\n### In Development\n\nSeveral features opened in February are expected in upcoming releases:\n\n#### VMorphingIcon\n\nA new component for animated icon transitions—morphing between two icons using SVG path animation for polished state changes.\n\n#### Theme Page Transitions\n\nOptional built-in page transitions that leverage the View Transitions API, bringing smooth animated route changes without custom code.\n\n#### Hover Elevation\n\nA new `hover-elevation` prop and CSS utilities for elevation changes on hover—a common Material Design pattern now built in.\n\n**Details:**\n\n* [VMorphingIcon PR#22639](https://github.com/vuetifyjs/vuetify/pull/22639)\n* [Theme transitions PR#22623](https://github.com/vuetifyjs/vuetify/pull/22623)\n* [Hover elevation PR#22621](https://github.com/vuetifyjs/vuetify/pull/22621)\n\n---\n\n## Ecosystem Spotlight: Vuetify CLI v1.0.0 { #ecosystem-spotlight-vuetify-cli-v100 }\n\n\n\n
\n\nThe Vuetify CLI reached its **first stable release** on February 23rd—shipping alongside Vuetify 4. With **42 commits** and 9 releases (v0.0.14 through v1.0.3), [Andrei Elkin](https://github.com/AndreyYolkin) transformed the CLI from an early beta into a production-ready tool.\n\n### What's New in v1.0.0\n\n**Project Presets** — Create projects with predefined configurations. The first preset is **TailwindCSS**—scaffolding a complete Vuetify 4 + Tailwind project with CSS layers configured correctly out of the box.\n\n**Vuetify 4 Templates** — All project templates updated for v4, with version selection removed now that v4 is stable.\n\n**i18n Support** — CLI prompts now support fallback locales for internationalized project scaffolding.\n\n### Getting Started\n\n::: tabs\n\n```bash [pnpm]\npnpm add -g @vuetify/cli\n```\n\n```bash [npm]\nnpm install -g @vuetify/cli\n```\n\n```bash [yarn]\nyarn global add @vuetify/cli\n```\n\n```bash [bun]\nbun add -g @vuetify/cli\n```\n\n:::\n\n**Details:**\n\n* [Vuetify CLI GitHub Repository](https://github.com/vuetifyjs/cli)\n* [v1.0.0 Release](https://github.com/vuetifyjs/cli/releases/tag/v1.0.0)\n\n---\n\n## Vuetify MCP: V4 Migration & Developer Tools { #vuetify-mcp-v4-migration-developer-tools }\n\n\n\n
\n\nThe MCP server received 9 commits in February, adding new developer tooling and improving v0 integration.\n\n### What's New\n\n**V4 Migration Tools** — Two tools launched alongside the v4 beta cycle provide AI-assisted upgrade guidance:\n\n* **`get_upgrade_guide`** — Fetches the full v3 → v4 upgrade guide with step-by-step migration instructions and revert snippets\n* **`get_v4_breaking_changes`** — Returns detailed migration guidance for all 13 categories of breaking changes (styles, grid, typography, elevation, theme, display, v-btn, v-snackbar, v-select, v-date-picker, v-form, v-img, nested), with optional category filtering\n\n**`create_bug_report` Tool** — Generate a pre-filled link to the Vuetify issue tracker with the correct repository and label pre-selected.\n\n**`get_vuetify0_skill` Tool** — Provides AI assistants with v0 composable documentation and usage patterns, enabling better code generation for headless components.\n\n**v0 Fixes** — Corrected composable names and missing exports in the v0 documentation, and fixed GitHub URL branch references.\n\n**CLI Integration** — [Andrei Elkin](https://github.com/AndreyYolkin) opened a PR for detecting running IDE instances and supporting multi-selection during MCP setup.\n\n### Setup\n\nInstall with the Vuetify CLI:\n\n::: tabs\n\n```bash [pnpm]\npnpm dlx @vuetify/cli add mcp\n```\n\n```bash [npm]\nnpx @vuetify/cli add mcp\n```\n\n```bash [yarn]\nyarn dlx @vuetify/cli add mcp\n```\n\n```bash [bun]\nbunx @vuetify/cli add mcp\n```\n\n:::\n\nOr configure manually:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [create_bug_report commit](https://github.com/vuetifyjs/mcp/commit/47d4dafc4fc6fb13dad705d32f802beec92ffefd)\n* [get_vuetify0_skill commit](https://github.com/vuetifyjs/mcp/commit/d58a7abbcdb73a087e982ce8a8d3d27331064e52)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\nVuetify One completed a **monorepo conversion**, extracting `@vuetify/auth` as a standalone package with 7 iterative releases (v0.1.1 through v0.1.8). The app upgraded to **Vuetify 4** on release day, and a new [v3.vuetifyjs.com](https://v3.vuetifyjs.com/) site identifier was added for versioned documentation hosting.\n\n**Details:**\n\n* [Vuetify One](https://one.vuetifyjs.com/)\n* [v3.0.2 Release](https://github.com/vuetifyjs/one/releases/tag/v3.0.2)\n* [@vuetify/auth@0.1.8](https://github.com/vuetifyjs/one/releases/tag/%40vuetify/auth%400.1.8)\n\n### Vuetify Bin\n\n[Henry Aviles](https://github.com/Haviles04) shipped the **team dashboard** feature across 5 merged PRs—enabling team bin management, role-based permissions, and team switching.\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n\n### Vuetify Snips\n\n[Kael](https://github.com/KaelWD) set up **visual regression testing** for Snips, and [J-Sek](https://github.com/J-Sek) fixed import and TypeScript issues for Vuetify Play compatibility.\n\n### UnoCSS Preset\n\nThe [unocss-preset-vuetify](https://github.com/vuetifyjs/unocss-preset-vuetify) reached **v0.2.0** with theme variants, built-in MD2/MD3 elevation presets, and separated base typography layers.\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\n
\n\nFebruary was Vuetify0's highest-commit month with **152 commits** and **10 merged PRs**, releasing **v0.1.3**. The focus shifted toward data-heavy composables and overlay management, building the foundation for reconstructing Vuetify's internals on v0's headless layer.\n\n\n![Vuetify0 Progress](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/v0.png \"Vuetify0 February Progress\")\n\n### New Composables & Components\n\n* **[createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table/)** — Headless data table composable with sorting, filtering, pagination, and selection built in. The foundation for Vuetify's VDataTable refactor.\n\n* **[createNested](https://0.vuetifyjs.com/composables/selection/create-nested/)** — Gained active state management for hierarchical tree structures, enabling treeview, file browser, and nested navigation patterns with `activate()`, `deactivate()`, and `activeIds` tracking.\n\n* **[useStack](https://0.vuetifyjs.com/composables/plugins/use-stack/)** — Overlay z-index management plugin for coordinating dialogs, menus, and drawers. Ensures correct stacking order without manual z-index management.\n\n* **[Breadcrumbs](https://0.vuetifyjs.com/components/navigation/breadcrumbs/)** — Composable and component for accessible breadcrumb navigation with automatic ARIA attributes.\n\n### useDate Fixes\n\n[J-Sek](https://github.com/J-Sek) landed two important fixes—symmetrical date diffs and a corrected `getWeek` implementation ported from Vuetify core.\n\n### Coming Next\n\nDevelopment is accelerating with several new components and composables in active PRs:\n\n* **[Treeview](https://github.com/vuetifyjs/0/pull/144)** — Full tree component built on createNested\n* **[Slider](https://github.com/vuetifyjs/0/pull/143)** — New component and composable\n* **[Splitter](https://github.com/vuetifyjs/0/pull/145)** — Root, Panel, and Handle components for resizable pane layouts\n* **[useNotifications](https://github.com/vuetifyjs/0/pull/146)** — Notification lifecycle management with adapters\n* **[createModel](https://github.com/vuetifyjs/0/pull/148)** — Selection state layer between registry and selection\n* **[createRegistry](https://github.com/vuetifyjs/0/pull/149)** — `move()` method for reordering registered items\n* **[useRules](https://github.com/vuetifyjs/0/pull/140)** — Validation composable with Zod and Yup adapters\n\nThe [interactive playground](https://0.vuetifyjs.com/playground) is now live for experimenting with v0 composables.\n\n::: info\n\nWith v4 stable, the Vuetify → Vuetify0 refactor has begun. Core Vuetify components are being rebuilt on top of v0's headless composable layer—the path to Vuetify 5.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [createDataTable PR#138](https://github.com/vuetifyjs/0/pull/138)\n* [createNested PR#137](https://github.com/vuetifyjs/0/pull/137)\n* [Breadcrumbs PR#136](https://github.com/vuetifyjs/0/pull/136)\n* [createStack PR#129](https://github.com/vuetifyjs/0/pull/129)\n* [v0.1.3 Release Notes](https://github.com/vuetifyjs/0/releases/tag/v0.1.3)\n\n---\n\n## February 2026 Changelog\n\nThe following section provides an overview of the changes made in February 2026, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* New components: VAvatarGroup, v-expand-both-transition\n* Select components: menu-header/footer slots, screenreader fixes\n* VDataTable: page-by prop, sort icon persistence fix\n* VTreeview: ARIA roles, indent line improvements\n* Multiple VTimePicker, VDateInput, and VColorPicker fixes\n* Dynamic color utility class support\n\n**Expand** this section to see the detailed changelog for February 2026:\n\n
\nFebruary 2026 Full Changelog\n\n### v3.11.9\n\n**:wrench: Bug Fixes**\n\n* **VSnackbar:** opaque background for transparent variants ([#22646](https://github.com/vuetifyjs/vuetify/issues/22646)) ([Timur000101](https://github.com/Timur000101))\n* **VTab:** correct text colors when using inset without slider-color ([#22614](https://github.com/vuetifyjs/vuetify/issues/22614)) ([J-Sek](https://github.com/J-Sek))\n* **VDateInput:** don't scroll the page when opening years view ([#22613](https://github.com/vuetifyjs/vuetify/issues/22613)) ([Tzahile](https://github.com/Tzahile))\n* **VTimePicker:** enforce allowed values and range in inputs ([#22578](https://github.com/vuetifyjs/vuetify/issues/22578)) ([J-Sek](https://github.com/J-Sek))\n* **VColorPicker:** avoid undefined alpha in rgb/hsl output ([#22582](https://github.com/vuetifyjs/vuetify/issues/22582)) ([TheSanjBot](https://github.com/TheSanjBot))\n* **VTable:** apply $table-header-font-size to th elements ([#22598](https://github.com/vuetifyjs/vuetify/issues/22598)) ([nemanjamalesija](https://github.com/nemanjamalesija))\n* **VDataTable:** sort icon persists after removing sort via click ([#22595](https://github.com/vuetifyjs/vuetify/issues/22595)) ([nemanjamalesija](https://github.com/nemanjamalesija))\n* **VCard:** accept height when used within a dialog ([#22594](https://github.com/vuetifyjs/vuetify/issues/22594)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect:** pass listProps density to VCheckboxBtn in multiple ([#22512](https://github.com/vuetifyjs/vuetify/issues/22512)) ([johnleider](https://github.com/johnleider))\n* **VField:** fixed incorrect type define ([#22618](https://github.com/vuetifyjs/vuetify/issues/22618)) ([ZacharyBear](https://github.com/ZacharyBear))\n* **styles:** utilities should override responsive typography ([#22573](https://github.com/vuetifyjs/vuetify/issues/22573)) ([J-Sek](https://github.com/J-Sek))\n* **router:** ensure reactivity for 'to' attribute in useLink ([#20994](https://github.com/vuetifyjs/vuetify/issues/20994)) ([rbgmulmb](https://github.com/rbgmulmb))\n\n---\n\n### v3.12.0\n\n**:rocket: Features**\n\n* **VAvatarGroup:** add new component ([#22495](https://github.com/vuetifyjs/vuetify/issues/22495)) ([J-Sek](https://github.com/J-Sek))\n* **VAvatar:** add badge prop + dot-size for VBadge ([#22496](https://github.com/vuetifyjs/vuetify/issues/22496)) ([J-Sek](https://github.com/J-Sek))\n* **VSnackbarQueue:** show multiple snackbars ([#22605](https://github.com/vuetifyjs/vuetify/issues/22605)) ([J-Sek](https://github.com/J-Sek))\n* **VToolbar:** add location prop ([#22608](https://github.com/vuetifyjs/vuetify/issues/22608)) ([J-Sek](https://github.com/J-Sek))\n* **VImg:** add image-class prop ([#22622](https://github.com/vuetifyjs/vuetify/issues/22622)) ([J-Sek](https://github.com/J-Sek))\n* **VImg:** support width=\"fit-content\" ([#21414](https://github.com/vuetifyjs/vuetify/issues/21414)) ([eesayas](https://github.com/eesayas))\n* **VDataTable:** add page-by prop ([#22580](https://github.com/vuetifyjs/vuetify/issues/22580)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect/VAutocomplete/VCombobox:** add menu-header and menu-footer slots ([#22414](https://github.com/vuetifyjs/vuetify/issues/22414)) ([Haviles04](https://github.com/Haviles04))\n* **VSlider:** show thumb slider value on hover ([#22412](https://github.com/vuetifyjs/vuetify/issues/22412)) ([brandonpham13](https://github.com/brandonpham13))\n* **VOtpInput:** add masked prop ([#20950](https://github.com/vuetifyjs/vuetify/issues/20950)) ([ankusharoraa](https://github.com/ankusharoraa))\n* **VProgressCircular:** add reveal prop ([#22502](https://github.com/vuetifyjs/vuetify/issues/22502)) ([J-Sek](https://github.com/J-Sek))\n* **VRow:** smaller density steps ([#22574](https://github.com/vuetifyjs/vuetify/issues/22574)) ([J-Sek](https://github.com/J-Sek))\n* **VCol:** syntax for overriding row size ([#22572](https://github.com/vuetifyjs/vuetify/issues/22572)) ([J-Sek](https://github.com/J-Sek))\n* **transitions:** add v-expand-both-transition ([#22570](https://github.com/vuetifyjs/vuetify/issues/22570)) ([J-Sek](https://github.com/J-Sek))\n* **color:** strip text-*/bg-* for dynamic utility classes ([#17569](https://github.com/vuetifyjs/vuetify/issues/17569)) ([cgodo](https://github.com/cgodo))\n* **icon-set:** add mdi-unocss icon set ([#22117](https://github.com/vuetifyjs/vuetify/issues/22117)) ([userquin](https://github.com/userquin))\n* **VProgressLinear:** split buffer and indeterminate ([#22663](https://github.com/vuetifyjs/vuetify/issues/22663)) ([J-Sek](https://github.com/J-Sek))\n\n**:wrench: Bug Fixes**\n\n* **VSelect:** fix screenreader navigation to select options ([#22602](https://github.com/vuetifyjs/vuetify/issues/22602)) ([ikushum](https://github.com/ikushum))\n* **VTreeview:** indent lines with prepend-gap ([#22589](https://github.com/vuetifyjs/vuetify/issues/22589)) ([J-Sek](https://github.com/J-Sek))\n* **VTreeview:** add correct roles and aria attributes ([#22577](https://github.com/vuetifyjs/vuetify/issues/22577)) ([mjung2605](https://github.com/mjung2605))\n\n---\n\n### v3.12.1\n\n**:wrench: Bug Fixes**\n\n* **docs:** add overflow-hidden to FAQ expansion panels ([#22660](https://github.com/vuetifyjs/vuetify/issues/22660)) ([Haviles04](https://github.com/Haviles04))\n\n---\n\n### v4.0.0\n\n**:rocket: Features**\n\n* All features from v3.12.0 included in the v4 stable release\n* **CSS Layers:** styles organized in `@layer` blocks for clean utility framework coexistence\n* **MD3 Typography:** Material Design 3 type scale from v4.0.0-beta.0\n* **MD3 Elevation:** updated elevation levels matching MD3 specifications from v4.0.0-beta.0\n* **Grid System Overhaul:** modernized responsive grid from v4.0.0-beta.0\n\n
\n\n---\n\n## What's Next{ #whats-next .mt-4 }\n\nWith v4 stable, the focus shifts to two fronts. First, **v4.1** will land the features currently in development—VMorphingIcon, theme page transitions, and hover elevation. VFileUpload's VInput integration and VCommandPalette's `closeOnSelect` and `before-select` events have already landed, along with Nuxt and UnoCSS presets for the CLI.\n\nSecond, the **Vuetify → Vuetify0 refactor** is now [underway](https://github.com/vuetifyjs/vuetify/pull/22672). Core Vuetify components are being rebuilt on v0's headless composable layer—starting with data table, tree, and form primitives. This is the path to **Vuetify 5**, where the full component library and the headless meta-framework share one unified architecture.\n\nVuetify is and always will be free and open source. If your team relies on the framework, consider supporting continued development through [Vuetify One](https://one.vuetifyjs.com/) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution helps us ship features like v4, the CLI, and Vuetify0 faster.\n\nThank you for being part of the Vuetify community. See you in March!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/index.md":"---\nlayout: blog\nmeta:\n title: Blog\n description: The Vuetify blog shares the latest news, updates, and stories — stay up to date with developments across the Vuetify ecosystem.\n keywords: vuetify, blog, news, updates, stories, ecosystem\n---\n\n
\n\n# From the blog\n\nLatest news, updates, and stories about Vuetify.\n\n\n\n---\n\n
\n\n## Announcing Vuetify v4.3\n\n🖊️ John Leider • 📅 October 20th, 2026\n\nVuetify v4.3 \"Paladin\" adds more control over filtering and selection in data tables and forms, a batch of new labs components, right-click menus for VMenu, and opt-in Material Design Expressive styles for 7 components. It also includes new options for carousels and slide groups, and a more stable layout for SSR apps. { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify-4.3/) { .text-end }\n\n## September 2026 Update\n\n🖊️ Jacek Czarniecki • 📅 October 7th, 2026\n\nVuetify 4.2 got three patches while dev branch marches up for 4.3: VInfiniteCarousel, MD3 tabs alignment, modal rail drawers and localized VDateInput hints for typing. Vuetify's RTL, locale and observer composables now run on @vuetify/v0, and moving display onto it surfaced two fixes in Vuetify0 1.2.3. { .text-medium-emphasis }\n\n[Read More](/blog/september-2026-update/) { .text-end }\n\n## August 2026 Update\n\n🖊️ Jacek Czarniecki • 📅 September 14th, 2026\n\nVuetify 4.2 went into beta on August 27 and stable on September 2. It makes @vuetify/v0 the framework's first (and only) runtime dependency. Release included some cleanup and fixes that were too risky for patch releases so you might want to read this post closely. The team improved VDateInput, selection dropdowns, and many improvements landed in v0 for headless DataTable, DataGrid and Alert... { .text-medium-emphasis }\n\n[Read More](/blog/august-2026-update/) { .text-end }\n\n## July 2026 Update\n\n🖊️ John Leider • 📅 August 11th, 2026\n\nVuetify0 reached 1.0 on July 22, shipping stable as @vuetify/v0 after 214 merged PRs and a thirteen-component stable spine. Five days later v3.13.0 shipped as the final Vuetify 3 minor and moved the line into long-term support through July 2027, on a window now shortened from eighteen months to twelve. The v4.1 patch line shipped five releases underneath both, fixing focus resolution in Shadow DOM, two defaults-inheritance leaks, and a run of select-family reports... { .text-medium-emphasis }\n\n[Read More](/blog/july-2026-update/) { .text-end }\n\n## Announcing Vuetify0 1.0\n\n🖊️ John Leider • 📅 July 22nd, 2026\n\nVuetify0 is 1.0. The release candidate held — the frozen surface shipped through the validation window without a breaking change — and the package is now `@vuetify/v0`, no tag required. For a headless meta-framework, 1.0 is a promise about the foundation: nineteen composables, seventeen utilities, and a thirteen-component spine locked under semver for the whole 1.x line, enforced by CI, with the rest of the components promoting onto it individually. It ships 40 components, 71 composables, and 24 utilities — the logic layer a decade of Vuetify was built on, extracted, hardened, and frozen so you can build on it directly... { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify0-v1/) { .text-end }\n\n## June 2026 Update\n\n🖊️ Jacek Czarniecki • 📅 July 8th, 2026\n\nThis was a stabilization month. v4.1.0 shipped on June 2, followed by two patch releases. Most of that work went into the updated VOverlay, fixing placement and sizing bugs. Lot's of great new features were released to the users. Meanwhile Vuetify0 spent its first month in beta with the public API frozen, refining what shipped on the road to v1.0 in July... { .text-medium-emphasis }\n\n[Read More](/blog/june-2026-update/) { .text-end }\n\n## Announcing the Vuetify0 Release Candidate\n\n🖊️ John Leider • 📅 July 2nd, 2026\n\nVuetify0 has reached release candidate. The API freeze held through six beta releases — nothing renamed, nothing removed — across 184 commits with 60 fixes and 5 performance rewrites. The RC promotes the v1 stable set — the selection family, createRegistry, and the core plugins — and the surface stands at 50 components, 71 composables, and 24 utilities, every component shipping a built-in English aria label (WCAG 4.1.2). From here to v1.0 the work is final testing and documentation — no new features... { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify0-rc/) { .text-end }\n\n## May 2026 Update\n\n🖊️ Jacek Czarniecki • 📅 June 16th, 2026\n\nMay was a full-throttle feature sprint for Vuetify 4.1, the first minor since 4.0.0. The core team pushed hard to clear the backlog and land everything queued for the release: seven components promoted out of labs (VFileUpload, VDateInput, VColorInput, VIconBtn, VPicker, VStepperVertical, VPullToRefresh), four new ones (VHeatmap, VHighlight, VMonthPicker, VDateRangePicker), a full data-table accessibility pass, and a wave of fixes across 89 commits and 4 releases. Vuetify0 ran in parallel, landing its headless drag-and-drop family (useDragDrop, createSortable, createKanban) on the road to its June beta... { .text-medium-emphasis }\n\n[Read More](/blog/may-2026-update/) { .text-end }\n\n## Announcing the Vuetify0 Beta\n\n🖊️ John Leider • 📅 June 2nd, 2026\n\nVuetify0 has reached beta, freezing the public API: the existing composables and components keep their names and signatures through v1. Since the alpha, the totals went to 49 components and 68 composables, no composables remain in draft, and a headless drag-and-drop family (useDragDrop, createSortable, createKanban) was added along with createOtp, useDelay, and the Overflow component. The release also covers the testing and stability work — 5,700+ unit tests, 98.7% coverage — ahead of v1... { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify0-beta/) { .text-end }\n\n## April 2026 Update\n\n🖊️ John Leider • 📅 May 4th, 2026\n\nApril delivered the Vuetify0 v1.0.0 public alpha — 46 components and 63 composables of headless Vue primitives — alongside three Vuetify framework patch releases, MCP v0.7.0 with playground and link CRUD tools, and four ESLint Config releases including ESLint 10 support. Six new v0 components (Carousel, Image, NumberField, Progress, Toggle, Overflow) merged in April, the display composable became the first Vuetify internal to migrate to v0, and useTheme/useLocale/useFeatures became reactive-by-default across 847 total commits... { .text-medium-emphasis }\n\n[Read More](/blog/april-2026-update/) { .text-end }\n\n## March 2026 Update\n\n🖊️ John Leider • 📅 April 16th, 2026\n\nMarch delivered 7 Vuetify patch releases stabilizing v4, while Vuetify0 exploded with 427 commits reaching v0.2.0 with 7 new headless components including Switch, Slider, Treeview, and Combobox. The Nuxt Module hit v1.0.0-beta, the CLI shipped 10 releases with Vite 8 and Vue Router 5 support, and the ESLint plugin gained automated v4 migration rules across 720 total commits... { .text-medium-emphasis }\n\n[Read More](/blog/march-2026-update/) { .text-end }\n\n## Announcing the Vuetify0 Alpha\n\n🖊️ John Leider • 📅 April 7th, 2026\n\nThe Vuetify0 alpha is here — a headless meta-framework for Vue 3 with 46 components, 63 composables, first-class AI integration, and an adapter-based plugin system. 100% TypeScript, zero styles. Includes a full tutorial building DevKey, a developer API dashboard, from scratch. { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify0-alpha/) { .text-end }\n\n## February 2026 Update\n\n🖊️ John Leider • 📅 March 9th, 2026\n\nFebruary marks Vuetify's most significant milestone—the stable release of **Vuetify 4.0.0** with CSS layers, MD3 design system, and unstyled component foundations. The Vuetify CLI hit v1.0.0, VAvatarGroup shipped as a new component, and Vuetify0 gained createDataTable and Breadcrumbs composables across 390 commits and 68 merged PRs... { .text-medium-emphasis }\n\n[Read More](/blog/february-2026-update/) { .text-end }\n\n## Vuetify Project baseline with Vite and TailwindCSS\n\n🖊️ Jacek Czarniecki • 📅 February 16th, 2026\n\nEver wondered what does it really take to make Vuetify project play in harmony with TailwindCSS? This article is about to lay it out in a consise step-by-step guide. With CSS layers enabled by default in Vuetify v4, the two frameworks coexist smoothly while sharing aligned breakpoints, theme colors, and custom fonts. We cover disabling Vuetify's built-in utilities in favor of Tailwind's, resolving conflicting classes and more. { .text-medium-emphasis }\n\n[Read More](/blog/building-with-vite-and-tailwindcss/) { .text-end }\n\n## January 2026 Update\n\n🖊️ John Leider • 📅 February 11th, 2026\n\nJanuary delivered Vuetify 4.0.0-beta.0 with MD3 typography and elevation systems, VCommandPalette in labs, grid system overhaul, and the Vuetify CLI reaching 100 commits with analyze command and tab completion. Vuetify0 hit v0.1.0 with Tabs, Radio, and Checkbox components, while Snips gained 11 new snippets from J-Sek... { .text-medium-emphasis }\n\n[Read More](/blog/january-2026-update/) { .text-end }\n\n## December 2025 Update\n\n🖊️ John Leider • 📅 January 12th, 2026\n\nDecember was our most productive month of 2025 with 522 commits across 16 repositories. The month delivered Vuetify 4.0.0-alpha.0 with CSS layers, six v3.11.x patches, the Vuetify CLI public release, Google OAuth for Vuetify One, PWA support across all ecosystem products, and 6 Vuetify0 releases with new composables including usePagination, useClickOutside, and useVirtual... { .text-medium-emphasis }\n\n[Read More](/blog/december-2025-update/) { .text-end }\n\n## Vuetify Project baseline with Nuxt and UnoCSS\n\n🖊️ Jacek Czarniecki • 📅 December 22th, 2025\n\nLet's explore a lean, production‑ready setup for Nuxt application that combines Vuetify 3 with UnoCSS. By disabling Vuetify’s default CSS bundles (basic colors and utility classes) and generating only the styles actually used, the resulting CSS footprint shrinks dramatically. We will ensure the project foundation works with themes, typography, and breakpoints without compromises. { .text-medium-emphasis }\n\n[Read More](/blog/building-with-nuxt-and-unocss/) { .text-end }\n\n## November 2025 Update\n\n🖊️ John Leider • 📅 December 10th, 2025\n\nNovember delivered Vuetify v3.11.0 (Harbinger) with VCalendar and VHotkey promoted from labs, new VTimePicker input variant, VDatePicker MD3 improvements, and significant CLI progress. J-Sek contributed an impressive 14 PRs while the v0 project hit 109 commits across 5 releases... { .text-medium-emphasis }\n\n[Read More](/blog/november-2025-update/) { .text-end }\n\n## October 2025 Update\n\n🖊️ John Leider • 📅 November 11th, 2025\n\nOctober focused on refinement and reliability, delivering critical accessibility improvements with enhanced focus trap functionality, optimized VDataTable performance for large datasets, and refined components across the board. The month also saw the launch of Vuetify Link, our new URL shortening service, and significant updates to the Vuetify MCP server with HTTP transport support. We made substantial progress on v0 composables, laying the groundwork for Vuetify 4.0... { .text-medium-emphasis }\n\n[Read More](/blog/october-2025-update/) { .text-end }\n\n## September 2025 Update\n\n🖊️ John Leider • 📅 October 12th, 2025\n\nSeptember 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. This update includes the release of v3.10.0 (Argo), updated Figma UI Kit, new Vuetify0 composables, and over 60 bug fixes and features... { .text-medium-emphasis }\n\n[Read More](/blog/september-2025-update/) { .text-end }\n\n## August 2025 Update\n\n🖊️ John Leider • 📅 September 9th, 2025\n\nAugust marks a pivotal moment in Vuetify's evolution as we prepare to release the pre-alpha of Vuetify0 (v0), launch our redesigned issues page, and continue delivering powerful components and improvements. This month brings exciting developments including the \"Mastering Vuetify Theming\" webinar recap, VEditor final testing phase, free premium themes for personal use, and significant framework updates with 87 merged pull requests... { .text-medium-emphasis }\n\n[Read More](/blog/august-2025-update/) { .text-end }\n\n## July 2025 Update\n\n🖊️ John Leider • 📅 August 6th, 2025\n\nJuly was a month of significant advancements in the Vuetify ecosystem, highlighted by the release of v3.9.0 (Zealot) and the promotion of VTreeview and VTimePicker from labs to core components. This update also includes a focus on component stability, bug fixes, and developer experience improvements, with subsequent patches up to v3.9.3... { .text-medium-emphasis }\n\n[Read More](/blog/july-2025-update/) { .text-end }\n\n## June 2025 Update\n\n🖊️ John Leider • 📅 July 7th, 2025\n\nJune delivered substantial progress on VHotkey component, VCommandPalette development, component stability improvements, and developer experience enhancements across the Vuetify ecosystem. Discover the completion of VHotkey and useHotkey composable, new components in development like VMaskInput and VEditor, and exciting ecosystem updates including documentation improvements and Vuetify Studio enhancements... { .text-medium-emphasis }\n\n[Read More](/blog/june-2025-update/) { .text-end }\n\n---\n\n## May 2025 Update\n\n🖊️ John Leider • 📅 June 6th, 2025\n\nThis month brings exciting advancements across the Vuetify ecosystem, with major strides in AI integration, component refinements, and developer experience. Discover the official release of @vuetify/mcp (Model Context Protocol), substantial improvements to VDateInput and VNumberInput components, and the introduction of the new VColorInput Labs component... { .text-medium-emphasis }\n\n[Read More](/blog/may-2025-update/) { .text-end }\n\n---\n\n## April 2025 Update\n\n🖊️ John Leider • 📅 May 1st, 2025\n\nApril delivered tangible progress on MCP, the new theming engine, component refinements, docs, ESLint v4, and tooling across the Vuetify ecosystem. Discover how these updates enhance your development experience and prepare Vuetify for the future... { .text-medium-emphasis }\n\n[Read More](/blog/april-2025-update/) { .text-end }\n\n---\n\n## Announcing Vuetify v3.8\n\n🖊️ John Leider • 📅 April 8th, 2025\n\nVuetify v3.8 is here! Discover the latest features, improvements, and bug fixes in this minor release, including new components and form input enhancements. This release is packed with new features, improvements, and bug fixes, and contains no breaking changes... { .text-medium-emphasis }\n\n---\n\n[Read More](/blog/announcing-vuetify-3.8/) { .text-end }\n\n## Vuetify HeroDevs Partnership\n\n🖊️ Taylor Corbett • 📅 March 28th, 2025\n\nVuetify is excited to announce a partnership with HeroDevs to provide extended long-term support for Vuetify 2 users through Vue 2 NES + Essentials. For teams that haven't yet migrated to Vuetify 3, this solution is designed to keep applications secure and up to date without requiring an immediate migration, addressing security vulnerabilities, compliance issues, and compatibility challenges... { .text-medium-emphasis }\n\n[Read More](/blog/vuetify-herodevs-partnership/) { .text-end }\n\n---\n\n## State of the Union 2024 - Post Mortem\n\n🖊️ John Leider • 📅 March 19th, 2025\n\nA lot has changed since the 2024 State of the Union. In this post, I want to share the journey we've been on, the challenges we've faced, and the incredible team that's come together to shape Vuetify's future. From nearly losing it all to finding renewed purpose and energy, this is a story of resilience, community, and a shared vision for what Vuetify can become... { .text-medium-emphasis }\n\n[Read More](/blog/state-of-the-union-2024-post-mortem/) { .text-end }\n\n---\n\n## Building a Basic Nuxt Application with Vuetify\n\n🖊️ Eric Sarrion • 📅 February 21st, 2025\n\nDiscover how to craft a polished Nuxt application with Vuetify in this detailed guide. Leverage Vue.js and Nuxt’s streamlined framework to build a basic app featuring a toolbar, navigation menu, and multiple pages. Ideal for developers of all levels looking to simplify their workflow with automatic imports and reusable components... { .text-medium-emphasis }\n\n[Read More](/blog/building-a-basic-nuxt-application-with-vuetify/) { .text-end }\n\n---\n\n## State of the Union 2024\n\n🖊️ John Leider • 📅 September 8th, 2024\n\nIt's been a long road to get where we are today, and looking back, I can’t help but feel proud of how far Vuetify has come. From humble beginnings to now surpassing Vuetify 2’s usage, the journey has been anything but easy, but we’ve always had our community to lean on. Today, I want to take some time to reflect on our past, acknowledge our wins and challenges, and share where we're headed... { .text-medium-emphasis }\n\n[Read More](/blog/state-of-the-union-2024/) { .text-end }\n\n---\n","packages/docs/src/pages/en/blog/january-2026-update.md":"---\nlayout: blog\nmeta:\n title: January 2026 Update\n description: January shipped Vuetify 4.0.0-beta.0, MD3 typography and elevation, the VCommandPalette labs release, a grid overhaul, and Vuetify0 v0.1.0.\n keywords: Vuetify January 2026, v4.0.0-beta.0, VCommandPalette, MD3 typography, grid system, Vuetify0, CLI\n---\n\n\n\n# January 2026 Update\n\nWelcome to the January 2026 Vuetify update! The new year kicks off with **Vuetify 4.0.0-beta.0**—the first beta of our next major version featuring MD3 typography, elevation levels, and a complete grid system overhaul. **VCommandPalette** lands in labs, and **Vuetify0** hits the v0.1.0 milestone with new Tabs, Radio, and Checkbox components.\n\n![Hero image for January update](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/january-hero.png \"January hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 February 11th, 2026\n\n\n\n---\n\n## A Strong Start to 2026\n\nJanuary delivered steady progress across all Vuetify projects. With **661 commits** across 12 active repositories and **49 merged PRs**, the team maintained momentum from December's productive close. The release of v4.0.0-beta.0 brings MD3 typography and elevation system migrations, preparing Vuetify 4 for stable release. [J-Sek](https://github.com/J-Sek) continued his exceptional contribution streak with 5 merged PRs to the main framework plus 11 to Snips, while [Andrei Elkin](https://github.com/AndreyYolkin) drove the grid system overhaul and led CLI development with 75 commits.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Vuetify 4 Beta](#vuetify-4-beta)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Ecosystem Spotlight: Vuetify Snips](#ecosystem-spotlight-vuetify-snips)\n* [Vuetify CLI: Rapid Development](#vuetify-cli-rapid-development)\n* [Vuetify MCP: V4 Migration Tools](#vuetify-mcp-v4-migration-tools)\n* [Product Updates](#product-updates)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [January 2026 Changelog](#january-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nJanuary delivered three Vuetify releases—two v3.11.x patches maintaining stability and the landmark **v4.0.0-beta.0** advancing the next major version. The MCP server shipped five releases (v0.4.4 through v0.5.0) with v4 migration tooling, and Vuetify One saw eight releases with Open Collective integration.\n\n![January Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/releases.png \"January Releases Banner\")\n\n### Key Improvements\n\n* **[VCommandPalette](https://next.vuetifyjs.com/components/command-palettes/)** new labs component for command-driven navigation\n* **[VDataTable](/components/data-tables/)** `sort-icon` prop for custom sort indicators\n* **MD3 Typography** migration to Material Design 3 type system\n* **MD3 Elevation** updated elevation levels matching MD3 specifications\n* **Grid System Overhaul** modernized responsive grid implementation\n* **[v-intersect](/directives/intersect/)** re-mount on prop updates for dynamic behavior\n\nView the complete list of changes in the [Full Changelog](#january-2026-changelog)\n\n**Details:**\n\n* [v3.11.7](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.7)\n* [v3.11.8](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.8)\n* [v4.0.0-beta.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0-beta.0)\n\n---\n\n## Vuetify 4 Beta\n\nThe first beta of **Vuetify 4.0** landed on January 30th, building on December's alpha with significant style system migrations. This release brings Material Design 3 alignment for typography and elevation, plus a modernized grid system.\n\n![Vuetify 4 Beta](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/releases-beta.png \"Vuetify 4 Beta\")\n\n### What's New in v4.0.0-beta.0\n\n* **MD3 Typography** — Migrates to Material Design 3's type scale while preserving Sass customization. Updated font sizes and line heights for better hierarchy and readability.\n* **MD3 Elevation** — Elevation levels now match MD3 specifications with smoother shadow progressions and better depth perception across light and dark themes.\n* **Grid System Overhaul** — The responsive grid has been completely modernized with improved flexbox implementation, better RTL support, and cleaner CSS output. [VCol](/api/v-col/) gains syntax for overriding row size.\n\n**Component Updates**:\n\n* **[VDataTable](/components/data-tables/)**: New `sort-icon` prop allows custom sort indicators\n* **[v-intersect](/directives/intersect/)**: Now re-mounts when props update for dynamic threshold changes\n* **nested**: Mark individual nodes as detached for independent selection behavior\n\n::: info\n\nv4.0.0-beta.0 is for testing and feedback only. Production applications should continue using v3.11.x until v4 reaches stable release.\n\n:::\n\n**Details:**\n\n* [v4.0.0-beta.0 Release Notes](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0-beta.0)\n* [Migration Guide](https://next.vuetifyjs.com/getting-started/upgrade-guide/)\n* [Remaining Issues](https://github.com/vuetifyjs/vuetify/milestone/62)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nJanuary's framework work balanced v4 development with v3 maintenance. The team merged 14 PRs addressing new features, accessibility, and bug fixes.\n\n### New Features\n\n**[VCommandPalette](/labs/command-palette/)**\n\nThe highly anticipated command palette component lands in labs! VCommandPalette provides a keyboard-driven interface for searching commands, navigation, and actions. It's built on the same patterns used by VS Code, Figma, and other modern applications.\n\n\n\n**[VDataTable](/components/data-tables/) Sort Icon**\n\nA new `sort-icon` prop allows customizing the sort indicator in table headers, enabling consistent iconography with your design system.\n\n**[VField](/api/v-field/) Label Improvements**\n\nVField now ensures only one label element renders at a time, fixing edge cases with floating labels and improving screen reader compatibility.\n\n**Details:**\n\n* [VCommandPalette PR#22403](https://github.com/vuetifyjs/vuetify/pull/22403)\n* [VDataTable sort-icon PR#22521](https://github.com/vuetifyjs/vuetify/pull/22521)\n* [VField label PR#22542](https://github.com/vuetifyjs/vuetify/pull/22542)\n\n### Bug Fixes\n\n**[VAutocomplete](/components/autocompletes/)** Avoid no-items being selectable\n\n**[VInput](/api/v-input/)** Use direction prop only where needed\n\n**[VNumberInput](/components/number-inputs/)** Prevent stepper hover overflow when rounded\n\n**Details:**\n\n* [VAutocomplete PR#22509](https://github.com/vuetifyjs/vuetify/pull/22509)\n* [VInput direction PR#22519](https://github.com/vuetifyjs/vuetify/pull/22519)\n* [VNumberInput PR#22492](https://github.com/vuetifyjs/vuetify/pull/22492)\n\n### In Development\n\nSeveral exciting features are in active development and expected in upcoming releases:\n\n#### VHeatmap\n\nA new visualization component for displaying data density and patterns. Ideal for activity calendars, contribution graphs, and heat distribution displays.\n\n![VHeatmap Preview](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/heatmap-preview.png \"VHeatmap Preview\")\n\n#### VMonthPicker\n\nA dedicated month selection component complementing VDatePicker for use cases requiring only month/year selection.\n\n#### VMaskInput Multiple Masks\n\nEnhanced mask input supporting multiple and dynamic mask resolution for complex input patterns like phone numbers with variable country codes.\n\n**Details:**\n\n* [VHeatmap PR#22535](https://github.com/vuetifyjs/vuetify/pull/22535)\n* [VMonthPicker PR#22534](https://github.com/vuetifyjs/vuetify/pull/22534)\n* [VMaskInput PR#22501](https://github.com/vuetifyjs/vuetify/pull/22501)\n\n---\n\n## Ecosystem Spotlight: Vuetify Snips { #ecosystem-spotlight-vuetify-snips }\n\n\n\n
\n\n[Vuetify Snips](https://snips.vuetifyjs.com/) had an exceptional January with **11 merged PRs**—all from [J-Sek](https://github.com/J-Sek)—adding new snippet categories and improving existing templates.\n\n### New Snippets\n\n![Vuetify Snips Pickers](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/snips-pickers.png \"Vuetify Snips Pickers\")\n\n**Pickers**: 6 new picker snippets covering date ranges, time selection, and combined datetime patterns\n\n**Pagination**: New pagination templates demonstrating various layouts and styles\n\n**Buttons**: Additional button variations and loading state patterns\n\n**Charts**: New visualization snippets using Vuetify's chart components\n\n### Improvements\n\n* Improved accessibility for radio group snippets\n* Fixed TypeScript compatibility for Chat snippets in Vuetify Play\n* Updated Vuetify version across all snippets\n\n**Details:**\n\n* [Vuetify Snips](https://snips.vuetifyjs.com/)\n* [Pickers PR#70](https://github.com/vuetifyjs/snips/pull/70)\n* [Pagination PR#83](https://github.com/vuetifyjs/snips/pull/83)\n* [Charts PR#63](https://github.com/vuetifyjs/snips/pull/63)\n\n---\n\n## Vuetify CLI: Rapid Development { #vuetify-cli-rapid-development }\n\n\n\n
\n\nThe Vuetify CLI saw intensive development in January with **97 commits** and 31 releases (v0.0.8 through v0.0.13-beta.9), bringing major new capabilities for project management and development workflows. [Andrei Elkin](https://github.com/AndreyYolkin) drove the majority of CLI development with 75 commits.\n\n### New Features{ #new-cli-features }\n\n**Analyze Command**: `vuetify analyze` detects Vuetify usage patterns in your project, helping identify optimization opportunities and migration paths.\n\n\n\n**MCP Integration**: Built-in MCP server configuration with `vuetify add mcp` now supports ruler configuration for AI-assisted development.\n\n**Tab Completion**: Shell tab completion for commands and project arguments, powered by @bomb.sh/tab.\n\n**Localization**: Internationalized prompts for version selection during project scaffolding.\n\n### Getting Started\n\n::: tabs\n\n```bash [pnpm]\npnpm add -g @vuetify/cli\n```\n\n```bash [npm]\nnpm install -g @vuetify/cli\n```\n\n```bash [yarn]\nyarn global add @vuetify/cli\n```\n\n```bash [bun]\nbun add -g @vuetify/cli\n```\n\n:::\n\n**Details:**\n\n* [Vuetify CLI GitHub Repository](https://github.com/vuetifyjs/cli)\n* [v0.0.13 Release](https://github.com/vuetifyjs/cli/releases/tag/v0.0.13)\n\n---\n\n## Vuetify MCP: V4 Migration Tools { #vuetify-mcp-v4-migration-tools }\n\n\n\n
\n\nThe Vuetify MCP server shipped four releases in January (v0.4.4 through v0.5.0), with the headline feature being **V4 migration tooling**.\n\n### What's New\n\n![Vuetify MCP Migration](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/mcp-migration.png \"Vuetify MCP Migration Workflow\")\n\n**V3 to V4 Upgrade Guide**: New tool providing comprehensive migration guidance for upgrading from Vuetify 3 to Vuetify 4.\n\n**Breaking Changes Reference**: Detailed documentation of all v4 breaking changes with migration examples.\n\n**Vuetify0 Sync**: Updated composable and component documentation synchronized with the v0 repository.\n\n::: tip AI Migration Prompt\n\nTry asking your AI assistant: *\"Use the Vuetify MCP server to analyze my project and generate a migration plan from Vuetify 3 to Vuetify 4.\"*\n\n:::\n\n### Getting Started{ #getting-started-cli }\n\nInstall with the Vuetify CLI:\n\n::: tabs\n\n```bash [pnpm]\npnpm dlx @vuetify/cli add mcp\n```\n\n```bash [npm]\nnpx @vuetify/cli add mcp\n```\n\n```bash [yarn]\nyarn dlx @vuetify/cli add mcp\n```\n\n```bash [bun]\nbunx @vuetify/cli add mcp\n```\n\n:::\n\nOr configure manually:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [v0.5.0 Release Notes](https://github.com/vuetifyjs/mcp/releases/tag/v0.5.0)\n* [Model Context Protocol Documentation](https://modelcontextprotocol.io/)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\nVuetify One shipped **8 releases** in January (v2.11.0 through v2.13.2), with the highlight being **Open Collective integration**—backers on OpenCollective now receive Vuetify One benefits automatically. Other improvements include banner priority sorting, store function additions, and ecosystem link fixes.\n\n**Details:**\n\n* [Vuetify One](https://one.vuetifyjs.com/)\n\n### Other Products\n\n**Vuetify Play** received 6 commits with quality-of-life improvements. **Vuetify Bin** and **Vuetify Link** each saw minor updates, and **Vuetify Issues Reporter** gained 5 commits improving triage workflows.\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\n
\n\nJanuary marked a significant milestone for Vuetify0 with the **v0.1.0 release**—the first minor version signaling API stability. With **464 commits**, **21 merged PRs**, and 7 releases (v0.0.22 through v0.1.2), the headless meta-framework gained three new components and substantial internal improvements.\n\n![Vuetify0 Progress](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/v0.png \"Vuetify0 Progress\")\n\n### New Components\n\n**[Tabs](https://0.vuetifyjs.com/components/disclosure/tabs/)** — A fully accessible tab interface with keyboard navigation, ARIA attributes, and flexible styling. Supports both horizontal and vertical orientations with lazy rendering options.\n\n```html\n\n\n\n```\n\n**[Radio](https://0.vuetifyjs.com/components/forms/radio/)** — Accessible radio button groups with proper fieldset/legend semantics, keyboard navigation, and focus management.\n\n```html\n\n\n\n```\n\n**[Checkbox](https://0.vuetifyjs.com/components/forms/checkbox/)** — Standalone checkbox with indeterminate state support, proper labeling, and native form integration.\n\n```html\n\n\n\n```\n\n### New Composables\n\n**[useLazy](https://0.vuetifyjs.com/composables/system/use-lazy/)** — Deferred rendering based on visibility. Content renders only when its container enters the viewport, ideal for performance optimization in long pages.\n\n**[useDate](https://0.vuetifyjs.com/composables/plugins/use-date/)** — Date manipulation utilities with locale support, formatting, and comparison functions.\n\n**[useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey/)** — Keyboard shortcut management ported from Vuetify 3, enabling consistent hotkey handling across applications.\n\n**[createNested](https://0.vuetifyjs.com/composables/selection/create-nested/)** — Hierarchical tree management for building treeview, file browser, and nested list components.\n\n### Internal Improvements\n\n**useFeatures Adapters**: New adapter system allows customizing feature behavior without modifying core composables.\n\n**Theme Style Injection**: Migrated to adoptedStyleSheets for better performance and Shadow DOM support.\n\n**Web Types Generation**: Automatic generation of web-types for IDE support with prop documentation and type hints.\n\n::: info\n\nVuetify0 v0.1.x signals API stability for existing composables. Breaking changes will follow semver conventions going forward.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [Vuetify0 Roadmap](https://0.vuetifyjs.com/roadmap)\n* [Tabs Component](https://0.vuetifyjs.com/components/disclosure/tabs/)\n* [Radio Component](https://0.vuetifyjs.com/components/forms/radio/)\n* [Checkbox Component](https://0.vuetifyjs.com/components/forms/checkbox/)\n* [v0.1.0 Release Notes](https://0.vuetifyjs.com/releases/?version=v0.1.0)\n\n---\n\n## January 2026 Changelog\n\nThe following section provides an overview of the changes made in January 2026, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* MD3 typography and elevation system migrations\n* VCommandPalette labs component\n* Grid system modernization\n* VDataTable sort-icon customization\n* v-intersect dynamic prop updates\n* Numerous accessibility and form fixes\n\n**Expand** this section to see the detailed changelog for January 2026:\n\n
\n\n### v3.11.7\n\n**:wrench: Bug Fixes**\n\n* **VAutocomplete:** avoid no-items being selectable ([#22509](https://github.com/vuetifyjs/vuetify/issues/22509)) ([36f679c](https://github.com/vuetifyjs/vuetify/commit/36f679ccef))\n* **VInput:** Use direction prop only where needed ([#22519](https://github.com/vuetifyjs/vuetify/issues/22519)) ([1eca6f8](https://github.com/vuetifyjs/vuetify/commit/1eca6f8fad))\n* **VNumberInput:** prevent inner button overflow when rounded ([#22492](https://github.com/vuetifyjs/vuetify/issues/22492)) ([942ddcc](https://github.com/vuetifyjs/vuetify/commit/942ddcccc8))\n* **VBreadcrumbs:** drop redundant `item-props` prop ([901061b](https://github.com/vuetifyjs/vuetify/commit/901061b7fb))\n* **VTabs:** correct slider width with inset and vertical ([0201b64](https://github.com/vuetifyjs/vuetify/commit/0201b641c4))\n\n---\n\n### v3.11.8\n\n**:wrench: Bug Fixes**\n\n* **VColorPicker:** prevent glitch hiding canvas on resize ([f4e3172](https://github.com/vuetifyjs/vuetify/commit/f4e31724e3))\n* **VListItem:** avoid overlay blinking when deactivating ([d11c6a6](https://github.com/vuetifyjs/vuetify/commit/d11c6a69ec))\n* **VField:** Use only one for label at a time ([#22542](https://github.com/vuetifyjs/vuetify/issues/22542)) ([4c0c9fc](https://github.com/vuetifyjs/vuetify/commit/4c0c9fc08a))\n\n---\n\n### v4.0.0-beta.0\n\n**:rocket: Features**\n\n* **typography:** migrate to MD3 typography ([#22557](https://github.com/vuetifyjs/vuetify/issues/22557)) ([311daf4](https://github.com/vuetifyjs/vuetify/commit/311daf433a))\n* **elevation:** MD3 elevation levels ([#22461](https://github.com/vuetifyjs/vuetify/issues/22461)) ([dfce695](https://github.com/vuetifyjs/vuetify/commit/dfce695f8e))\n* **VCol/VRow:** grid system overhaul ([#21500](https://github.com/vuetifyjs/vuetify/issues/21500)) ([f6d24a9](https://github.com/vuetifyjs/vuetify/commit/f6d24a9234))\n* **VDataTable:** add `sort-icon` prop ([#22521](https://github.com/vuetifyjs/vuetify/issues/22521)) ([3bdf0ea](https://github.com/vuetifyjs/vuetify/commit/3bdf0ead33))\n* **v-intersect:** re-mount on prop updates ([#22556](https://github.com/vuetifyjs/vuetify/issues/22556)) ([6262290](https://github.com/vuetifyjs/vuetify/commit/6262290d24))\n\n**:test_tube: Labs**\n\n* **VCommandPalette:** add new command palette component ([#22403](https://github.com/vuetifyjs/vuetify/issues/22403)) ([2d4d0df](https://github.com/vuetifyjs/vuetify/commit/2d4d0df64f))\n\n
\n\n---\n\n## What's Next{ #whats-next .mt-4 }\n\n**Vuetify 4.0 launches February 23rd.** The final beta releases are landing now, incorporating community feedback on the new typography, elevation, and grid systems. This is a pivotal Vuetify release—bringing CSS layers, a DX overhaul, and minimal migration effort. The [v3 → v4 MCP migration tools](#vuetify-mcp-v4-migration-tools) make an already straightforward upgrade even easier. Importantly, v4 includes the infrastructure changes that make **unstyled components possible**—the foundation for true styling freedom in future releases.\n\nThe tailwind/unocss support landing in v4 is exciting, but it's a stepping stone. The real transformation comes next: **full unstyled capability** where you control every aspect of styling while keeping Vuetify's component logic and accessibility. V4's architecture—combined with the work happening in [Vuetify0](https://0.vuetifyjs.com/roadmap)—sets the stage for this future.\n\nVCommandPalette will receive refinements based on labs feedback, and we're expanding the component's integration patterns for common use cases. VHeatmap and VMonthPicker are on track for labs release.\n\nStarting February 24th, we begin the **Vuetify → Vuetify0 refactor**—rebuilding Vuetify's internals on top of v0's headless composable layer. This is the path to **Vuetify 5**, where the full component library and the headless meta-framework become one unified architecture, unlocking complete styling control without sacrificing the features you rely on.\n\nThank you for being part of the Vuetify community. See you in February!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/july-2025-update.md":"---\nlayout: blog\nmeta:\n title: July 2025 Update\n description: July delivered progress on collaborative development, component enhancements, developer-experience improvements, and ecosystem tools across Vuetify.\n keywords: Vuetify July 2025, Vuetify Migrations Webinar, Vuetify0, VCommandPalette, VEditor, Framework Czar, Vuetify Bin\n---\n\n\n\n# July 2025 Update\n\nThis month showcases the power of collaborative development as our team and community work together to enhance Vuetify's ecosystem.\n\n![Hero image for July release notes](https://cdn.vuetifyjs.com/docs/images/blog/july-2025-update/july-hero.png \"July release notes hero image\"){ height=112 }\n\n---\n\n🖊️ John Leider • 📅 August 6th, 2025\n\n\n\n---\n\n## New Beginnings\n\nJuly 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.\n\n::: success\n\nCool example of the month: [VChatList](https://play.vuetifyjs.com/playgrounds/spDtrg) by [Ishan](https://github.com/ikushum)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n* [The future of Vuetify](#the-future-of-vuetify)\n* [\"Decoding Vuetify Migrations\" Webinar Recap](#webinar-recap)\n* [Ecosystem Spotlight: Vuetify Bin](#ecosystem-spotlight-vuetify-bin)\n* [Framework Updates](#framework-updates)\n* [July 2025 Changelog](#july-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nJuly featured the release of [v3.9.0 (Zealot)](/getting-started/release-notes/?version=v3.9.0) on July 8th, promoting [VTreeview](/components/treeview/) and [VTimePicker](/components/time-pickers/) 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](#july-2025-changelog).\n\n**Details:**\n\n* [v3.9.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.0)\n* [v3.9.1](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.1)\n* [v3.9.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.2)\n* [v3.9.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.3)\n\n## The future of Vuetify\n\nOver 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](https://github.com/vuetifyjs/vuetify/issues/2240), 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!\n\nWe went through some [organizational](https://vuetifyjs.com/blog/state-of-the-union-2024-post-mortem/) changes earlier this year after facing funding [challenges](https://vuetifyjs.com/blog/state-of-the-union-2024/) 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.\n\nLast [month](https://vuetifyjs.com/blog/june-2025-update/), I revealed some information regarding a new project I've been working on called [Vuetify0](https://github.com/vuetifyjs/0). 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.\n\n![Image of Vuetify composition progress](https://cdn.vuetifyjs.com/docs/images/blog/july-2025-update/evolution.png \"Vuetify composition progress\"){ height=588 }\n\n* **Vuetify0**: Meta framework for building framework agnostic UI libraries\n* **Vuetify Paper**: Styleless components that are prop configured—no CSS required\n* **Vuetify**: Marries Vuetify0, Vuetify Paper, and Vuetify's defaults system\n\nI plan to give my first public talk about it at **VueConf Toronto** later this year, and I'm excited to see what everyone thinks.\n\nIn 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](https://github.com/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.\n\nToday 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.\n\n
\n\n\n\n
\n\nJacek 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.\n\nThank 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](https://community.vuetifyjs.com/).\n\n---\n\n## \"Decoding Vuetify Migrations\" Webinar Recap{ #webinar-recap}\n\nLast 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.\n\nBelow are a few key points we noticed most users struggled with during the migration process:\n\n### ESLint Plugin\n\nThe [Vuetify ESLint plugin](https://github.com/vuetifyjs/eslint-plugin-vuetify) 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.\n\n```bash\npnpm install eslint-plugin-vuetify --save-dev\n```\n\n```js\n// eslint.config.js\nimport vue from 'eslint-plugin-vue'\nimport vuetify from 'eslint-plugin-vuetify'\n\nexport default [\n ...vue.configs['flat/base'],\n ...vuetify.configs['flat/base'],\n]\n```\n\nFor more information on how to set up and use this plugin, check out the [vuetifyjs/eslint-plugin-vuetify](https://github.com/vuetifyjs/eslint-plugin-vuetify) repository.\n\n### Theme Changes\n\nThe most common migration issue we see? **Theme configuration**. V3's theme system is more powerful but requires a different approach:\n\n```js\n// V2 Approach (Won't work in V3)\ntheme: {\n themes: {\n light: {\n primary: '#1976D2',\n },\n },\n}\n\n// V3 Approach (Correct)\ntheme: {\n themes: {\n light: {\n colors: { // Note the 'colors' wrapper!\n primary: '#1976D2',\n },\n },\n },\n}\n```\n\n---\n\nWe 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](https://community.vuetifyjs.com).\n\n## Ecosystem Spotlight: Vuetify Bin { #ecosystem-spotlight-vuetify-bin }\n\nEvery 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.\n\n### What is Vuetify Bin?\n\n[Vuetify Bin](https://bin.vuetifyjs.com/) 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*.\n\n![Image of Vuetify Bin](https://cdn.vuetifyjs.com/docs/images/blog/july-2025-update/vbin1234.png \"Vuetify Bin interface\"){ height=300 }\n\n::: info\nIf you're part of the **Vuetify One** subscription, you can save your snippets with a unique URL. [More Info](https://vuetifyjs.com/?one=subscribe)\n:::\n\n## Framework Updates\n\nWe'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:\n\n**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.\n\n\n\n**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.\n\n\n\n**VVideo** officially entered Labs with the release of [v3.9.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.3). This component provides a flexible and powerful way to embed videos in Vuetify applications, supporting various formats and configurations.\n\n\n\n**Details:**\n\n* [VCommandPalette PR#21534](https://github.com/vuetifyjs/vuetify/pull/21534)\n* [VEditor PR#21653](https://github.com/vuetifyjs/vuetify/pull/21653)\n* [VVideo PR#21460](https://github.com/vuetifyjs/vuetify/pull/21460)\n\n## July 2025 Changelog\n\nThe following section provides an overview of the changes made in July 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* **VProgressLinear** [#21744](https://github.com/vuetifyjs/vuetify/pull/21744): Added chunk separation capability for creating segmented progress indicators—perfect for multi-step forms and wizards *(Merged July 15)*\n* **VDatePicker** [#21760](https://github.com/vuetifyjs/vuetify/pull/21760): Restored the accidentally removed `first-day-of-year` prop after community feedback *(Draft as of July 24)*\n* **VMaskInput** [#21719](https://github.com/vuetifyjs/vuetify/pull/21719): Fixed validation value handling, ensuring masks work correctly with form validation\n* **VField** [#21706](https://github.com/vuetifyjs/vuetify/pull/21706): Enhanced label accessibility for improved screen reader support\n* **VDateInput** [#21684](https://github.com/vuetifyjs/vuetify/pull/21684): Added proper TypeScript definitions to the `displayFormat` function\n* **Input components** [#21703](https://github.com/vuetifyjs/vuetify/pull/21703): Fixed `aria-describedby` attributes when using `hide-details`\n\nExpand this section to see the detailed changelog for July 2025.\n\n
\n\n### 🏅 Component promotions\n\nThe following components have been promoted to the core framework from labs:\n\n* [VTreeview](https://vuetifyjs.com/components/treeview/)\n* [VTimePicker](https://vuetifyjs.com/components/time-pickers/)\n\n### :rocket: Features\n\n* **date:** add StringDateAdapter ([#21174](https://github.com/vuetifyjs/vuetify/issues/21174)) ([7fe9152](https://github.com/vuetifyjs/vuetify/commit/7fe91520fb9ab3ae58d4f7eeba6c0a7b431e6198)), closes [#20967](https://github.com/vuetifyjs/vuetify/issues/20967)\n* **date:** export VuetifyDateAdapter ([#21252](https://github.com/vuetifyjs/vuetify/issues/21252)) ([1a98d03](https://github.com/vuetifyjs/vuetify/commit/1a98d030a7b9547d519b1491e14e97f3e554ee6e)), closes [#19904](https://github.com/vuetifyjs/vuetify/issues/19904)\n* **ripple:** use key names instead of codes ([7ecec03](https://github.com/vuetifyjs/vuetify/commit/7ecec03fb50267507928c6de6751dee16540ea7f))\n* **theme:** add change, toggle, and cycle functions ([#21224](https://github.com/vuetifyjs/vuetify/issues/21224)) ([3570254](https://github.com/vuetifyjs/vuetify/commit/357025485c7e8ac8dbc254a9fb37a3360e8c8d79))\n* **theme:** add new option 'unimportant' to generate classes without `!important` ([3190331](https://github.com/vuetifyjs/vuetify/commit/3190331e70f42b7fdf4d7ee04f662b15eefde026))\n* **theme:** add new theme 'system' ([#21244](https://github.com/vuetifyjs/vuetify/issues/21244)) ([8393a41](https://github.com/vuetifyjs/vuetify/commit/8393a41287d34dba56cb2140bcc1aa44de62ffcb))\n* **transition:** expose create transition functions ([#21352](https://github.com/vuetifyjs/vuetify/issues/21352)) ([79f36aa](https://github.com/vuetifyjs/vuetify/commit/79f36aa042284471c7a7cb248721de884e4ef329)), closes [#16050](https://github.com/vuetifyjs/vuetify/issues/16050)\n* **types:** emit GlobalDirectives ([136dfdf](https://github.com/vuetifyjs/vuetify/commit/136dfdf99380063ed20ca8d0672e1e450faf5431)), closes [#21475](https://github.com/vuetifyjs/vuetify/issues/21475)\n* **useHotkey:** add new composable for making hotkey bindings ([#21598](https://github.com/vuetifyjs/vuetify/issues/21598)) ([99c721c](https://github.com/vuetifyjs/vuetify/commit/99c721c381e47b403429c7de194306013c0ec679))\n* **VAlert:** better aligment with prepend icon ([#20700](https://github.com/vuetifyjs/vuetify/issues/20700)) ([5231b95](https://github.com/vuetifyjs/vuetify/commit/5231b956c39477e913648dcbaef4030c284b1ece)), closes [#20636](https://github.com/vuetifyjs/vuetify/issues/20636)\n* **VBadge:** add width and height props ([#21509](https://github.com/vuetifyjs/vuetify/issues/21509)) ([b87f179](https://github.com/vuetifyjs/vuetify/commit/b87f17933b31cf63289ffccdd78eda3682decc07)), closes [#20837](https://github.com/vuetifyjs/vuetify/issues/20837)\n* **VBtnGroup:** add `direction=\"vertical\"` ([#17878](https://github.com/vuetifyjs/vuetify/issues/17878)) ([5f39b85](https://github.com/vuetifyjs/vuetify/commit/5f39b8586e99c4529da9ef71576c048e711757e8)), closes [#17492](https://github.com/vuetifyjs/vuetify/issues/17492)\n* **VCombobox:** scroll to first item on search result ([#21255](https://github.com/vuetifyjs/vuetify/issues/21255)) ([57bb5ad](https://github.com/vuetifyjs/vuetify/commit/57bb5adb426372ca6af48b961a5b3533efa7d703)), closes [#20572](https://github.com/vuetifyjs/vuetify/issues/#20572)\n* **VDataTable:** support `fixed: 'end'` in headers ([#21665](https://github.com/vuetifyjs/vuetify/issues/21665)) ([415c267](https://github.com/vuetifyjs/vuetify/commit/415c267d057ad49334d9801c4fdb0c6aa9dcdcd1)), closes [#20020](https://github.com/vuetifyjs/vuetify/issues/20020) [#21153](https://github.com/vuetifyjs/vuetify/issues/21153)\n* **VDatePicker:** add `weekday-format` prop ([#21290](https://github.com/vuetifyjs/vuetify/issues/21290)) ([b13b15c](https://github.com/vuetifyjs/vuetify/commit/b13b15c865252f43f09ef590feeaeaac6a49bc1b))\n* **VDatePicker:** expose slots from underlying components ([#21532](https://github.com/vuetifyjs/vuetify/issues/21532)) ([1e351a2](https://github.com/vuetifyjs/vuetify/commit/1e351a2015db61564c3432662e4fc7700dff3a84)), closes [#20236](https://github.com/vuetifyjs/vuetify/issues/20236)\n* **VInfiniteScroll:** add reset method ([#20637](https://github.com/vuetifyjs/vuetify/issues/20637)) ([2e5bc43](https://github.com/vuetifyjs/vuetify/commit/2e5bc4330bf7409870516b818dcdd8bb0f36d0d5)), closes [#20308](https://github.com/vuetifyjs/vuetify/issues/20308) [#19935](https://github.com/vuetifyjs/vuetify/issues/19935)\n* **VKbd:** update default styling, add configurable options ([8ea20d9](https://github.com/vuetifyjs/vuetify/commit/8ea20d9fccaca572465d31af780f460d03f489db))\n* **VNumberInput:** custom decimal separator ([#21489](https://github.com/vuetifyjs/vuetify/issues/21489)) ([534c1e7](https://github.com/vuetifyjs/vuetify/commit/534c1e72363dadfee213f0360272c29d308b28af)), closes [#20254](https://github.com/vuetifyjs/vuetify/issues/20254)\n* **VNumberInput:** more flexible precision display ([#21315](https://github.com/vuetifyjs/vuetify/issues/21315)) ([d5779cd](https://github.com/vuetifyjs/vuetify/commit/d5779cd8529c6589d215569453733700b095ffe9)), closes [#21306](https://github.com/vuetifyjs/vuetify/issues/21306)\n* **VOtpInput:** allow to keep focus on paste ([#21356](https://github.com/vuetifyjs/vuetify/issues/21356)) ([cb8015d](https://github.com/vuetifyjs/vuetify/commit/cb8015daad38b7d9c6853e1053d78ab148574804)), closes [#21275](https://github.com/vuetifyjs/vuetify/issues/21275)\n* **VOverlay:** align scrim color with MD3 ([#21219](https://github.com/vuetifyjs/vuetify/issues/21219)) ([29d22a6](https://github.com/vuetifyjs/vuetify/commit/29d22a6737fa7e68bdd49c522a5b36dca3cabe11)), closes [#20244](https://github.com/vuetifyjs/vuetify/issues/20244)\n* **VSelect/VAutoComplete/VCombobox:** add `item-type` prop ([eaa4d15](https://github.com/vuetifyjs/vuetify/commit/eaa4d15caac1b66868a6af42e52b22cf2279821b)), closes [#21666](https://github.com/vuetifyjs/vuetify/issues/21666)\n* **VSelect:** add `no-auto-scroll` prop ([#21254](https://github.com/vuetifyjs/vuetify/issues/21254)) ([1e0f1c1](https://github.com/vuetifyjs/vuetify/commit/1e0f1c1a527deb5256844e4663d6931840736968)), closes [#20237](https://github.com/vuetifyjs/vuetify/issues/20237)\n* **VSelect:** support divider and subheader in items ([#21348](https://github.com/vuetifyjs/vuetify/issues/21348)) ([0953ed2](https://github.com/vuetifyjs/vuetify/commit/0953ed22c81c1c8d51505a2e35e222af1880698a)), closes [#5014](https://github.com/vuetifyjs/vuetify/issues/5014) [#15721](https://github.com/vuetifyjs/vuetify/issues/15721)\n* **VSlideGroup:** add content class to VSlideGroup props ([#21431](https://github.com/vuetifyjs/vuetify/issues/21431)) ([935351c](https://github.com/vuetifyjs/vuetify/commit/935351cc0e80c2327701a071eeeff15f1a128310)), , closes [#20853](https://github.com/vuetifyjs/vuetify/issues/20853)\n* **VSlider:** expose focus method ([#21575](https://github.com/vuetifyjs/vuetify/issues/21575)) ([6790e1e](https://github.com/vuetifyjs/vuetify/commit/6790e1ebfa820506f92a68f4c9055a2a36413b4b)), closes [#17602](https://github.com/vuetifyjs/vuetify/issues/17602)\n* **VTable:** add striped prop ([#19735](https://github.com/vuetifyjs/vuetify/issues/19735)) ([35b3304](https://github.com/vuetifyjs/vuetify/commit/35b3304a18bdb39df3431b71eef52cdef11130c9)), closes [#17505](https://github.com/vuetifyjs/vuetify/issues/17505)\n* **VTextarea:** add update:rows event ([#21226](https://github.com/vuetifyjs/vuetify/issues/21226)) ([e72d4d3](https://github.com/vuetifyjs/vuetify/commit/e72d4d30088ef47d5abf2e4533cc62c8ee91f823)), closes [#21133](https://github.com/vuetifyjs/vuetify/issues/21133)\n* **VTimePicker:** promote from labs ([7ce2cd6](https://github.com/vuetifyjs/vuetify/commit/7ce2cd68cb40d8de9c2135bdf33c9be9140d22c3))\n* **VTimePicker:** remove ampmInTitle prop ([#21595](https://github.com/vuetifyjs/vuetify/issues/21595)) ([e32796a](https://github.com/vuetifyjs/vuetify/commit/e32796a114711f2b30d3401abea11bfd8b8c2460)), closes [#19637](https://github.com/vuetifyjs/vuetify/issues/19637) [#19957](https://github.com/vuetifyjs/vuetify/issues/19957)\n* **VToolbar:** allow for explicit `:extension=\"false\"` ([#21264](https://github.com/vuetifyjs/vuetify/issues/21264)) ([092e64a](https://github.com/vuetifyjs/vuetify/commit/092e64a10aa6e1b476e0e7fddaf01d1bb1df3793)), closes [#7317](https://github.com/vuetifyjs/vuetify/issues/7317)\n* **VTreeview:** add `indent-lines` prop ([#21675](https://github.com/vuetifyjs/vuetify/issues/21675)) ([501e016](https://github.com/vuetifyjs/vuetify/commit/501e01641f226b54d80176c9e5a20baa4dd7df43)), closes [#11506](https://github.com/vuetifyjs/vuetify/issues/11506)\n* **VTreeview:** expose depth, path, index in slots ([#19833](https://github.com/vuetifyjs/vuetify/issues/19833)) ([bd908af](https://github.com/vuetifyjs/vuetify/commit/bd908afc7e335904c2fb35aa73541d8c04a9fcfb)), closes [#13863](https://github.com/vuetifyjs/vuetify/issues/13863)\n* **VTreeview:** promote from labs ([b610813](https://github.com/vuetifyjs/vuetify/commit/b6108138fdbfb2cc157a29602817708676a23491))\n* **VTreeview:** support `item-type` ([#21709](https://github.com/vuetifyjs/vuetify/issues/21709)) ([877f323](https://github.com/vuetifyjs/vuetify/commit/877f3232698147dee01effc57b2a9770d2ed0e39))\n* **VVirtualScroll:** support fractional scroll index ([#20407](https://github.com/vuetifyjs/vuetify/issues/20407)) ([adad9e2](https://github.com/vuetifyjs/vuetify/commit/adad9e2629fffa52b0abbb7d18297a5c0078074f))\n* **VWindow:** add `vertical-arrows` prop ([#21587](https://github.com/vuetifyjs/vuetify/issues/21587)) ([663b9a8](https://github.com/vuetifyjs/vuetify/commit/663b9a83ee602200adae115500594d462ddfff16))\n\n### :wrench: Bug Fixes\n\n* **date:** align `fullDate` format with documentation and other adapters ([#21668](https://github.com/vuetifyjs/vuetify/issues/21668)) ([c856da3](https://github.com/vuetifyjs/vuetify/commit/c856da3c4d5b0ac6a8c2ac5f8312debc3009fae4)), closes [#21667](https://github.com/vuetifyjs/vuetify/issues/21667)\n* **input:** handle aria-describedby with hide-details ([#21703](https://github.com/vuetifyjs/vuetify/issues/21703)) ([543f932](https://github.com/vuetifyjs/vuetify/commit/543f932622f1de44a215c71fbe8d52af3edea1bd)), closes [#17012](https://github.com/vuetifyjs/vuetify/issues/17012) [#19794](https://github.com/vuetifyjs/vuetify/issues/19794)\n* **inputs:** expose missing validation methods ([be64296](https://github.com/vuetifyjs/vuetify/commit/be6429615af6e0e9e0aad7ef21bfe7a1403229ec)), closes [#19934](https://github.com/vuetifyjs/vuetify/issues/19934)\n* **theme:** ability to restore \"system\" ([#21821](https://github.com/vuetifyjs/vuetify/issues/21821)) ([45077be](https://github.com/vuetifyjs/vuetify/commit/45077be13c220a4abeac161d16f5f406d7e1fb2e)), closes [#21819](https://github.com/vuetifyjs/vuetify/issues/21819)\n* **types:** don't use primitive object wrappers ([32007ed](https://github.com/vuetifyjs/vuetify/commit/32007ed2d34f9a131eb73faeb7629c0ff515f7b2))\n* **virtual:** skip items update if height has not been checked ([#21442](https://github.com/vuetifyjs/vuetify/issues/21442)) ([2e55ed3](https://github.com/vuetifyjs/vuetify/commit/2e55ed3d30daf6ea19660fb8168ea45fca0e9b1d)), closes [#18806](https://github.com/vuetifyjs/vuetify/issues/18806)\n* **VAutocomplete, VCombobox:** space key should not select ([#21311](https://github.com/vuetifyjs/vuetify/issues/21311)) ([f9288ad](https://github.com/vuetifyjs/vuetify/commit/f9288ad7dbfb3547d36e036932e653270eb9ff08)), closes [#20728](https://github.com/vuetifyjs/vuetify/issues/20728)\n* **VChipGroup:** don't select items with a value by index ([#21742](https://github.com/vuetifyjs/vuetify/issues/21742)) ([72cd412](https://github.com/vuetifyjs/vuetify/commit/72cd412ac7a794cc7fbb18918928c4e819827449)), closes [#20129](https://github.com/vuetifyjs/vuetify/issues/20129)\n* **VColorPicker:** keep sliders visible when inputs are hidden ([#21803](https://github.com/vuetifyjs/vuetify/issues/21803)) ([215bfd8](https://github.com/vuetifyjs/vuetify/commit/215bfd866e8c6f606620d8f88c8b1fd4dfe7ab15)), closes [#21801](https://github.com/vuetifyjs/vuetify/issues/21801)\n* **VCombobox:** select all values from pasted text ([#21840](https://github.com/vuetifyjs/vuetify/issues/21840)) ([408a95d](https://github.com/vuetifyjs/vuetify/commit/408a95d7b4c39649546f8098af7a6afd663f777c)), closes [#21838](https://github.com/vuetifyjs/vuetify/issues/21838)\n* **VDataTable:** continue sorting if dates are identical ([a9d0c56](https://github.com/vuetifyjs/vuetify/commit/a9d0c560d77392c803fd0c27b4748b82591dd0e0)), closes [#21650](https://github.com/vuetifyjs/vuetify/issues/21650)\n* **VDataTable:** don't pass slots to VSelect in mobile view ([#21572](https://github.com/vuetifyjs/vuetify/issues/21572)) ([6e61468](https://github.com/vuetifyjs/vuetify/commit/6e6146814462ec56a40bd439b6641630f6e057a3)), closes [#19873](https://github.com/vuetifyjs/vuetify/issues/19873)\n* **VDataTable:** only tab focus sortable columns ([27aaaf4](https://github.com/vuetifyjs/vuetify/commit/27aaaf41246aaaf3bed977c74d0b962daf0a5662)), closes [#20899](https://github.com/vuetifyjs/vuetify/issues/20899)\n* **VDatePicker:** add aria-labels for improved accessibility ([#21635](https://github.com/vuetifyjs/vuetify/issues/21635)) ([5e3fc2b](https://github.com/vuetifyjs/vuetify/commit/5e3fc2b4baf9df2939bdaca84cec28f3bf41633b)), closes [#20696](https://github.com/vuetifyjs/vuetify/issues/20696)\n* **VDatePicker:** avoid infinite loop when first day is out of range ([#21649](https://github.com/vuetifyjs/vuetify/issues/21649)) ([a330d75](https://github.com/vuetifyjs/vuetify/commit/a330d75ef091046c96aae3451bed5f29a66b5d3b))\n* **VDatePicker:** correct week labels ([#21648](https://github.com/vuetifyjs/vuetify/issues/21648)) ([b46e60c](https://github.com/vuetifyjs/vuetify/commit/b46e60c5eba21438c4ecd412ec99f67ebbb24dac)), closes [#21645](https://github.com/vuetifyjs/vuetify/issues/21645) [#21332](https://github.com/vuetifyjs/vuetify/issues/21332)\n* **VDatePicker:** format month to always have 2 digits ([#21686](https://github.com/vuetifyjs/vuetify/issues/21686)) ([f529212](https://github.com/vuetifyjs/vuetify/commit/f529212faffbde85299023b1eb0f4fa344e87df7)), closes [#21681](https://github.com/vuetifyjs/vuetify/issues/21681)\n* **VDatePicker:** improved date comparison with `min` constraint ([#21398](https://github.com/vuetifyjs/vuetify/issues/21398)) ([421a6f6](https://github.com/vuetifyjs/vuetify/commit/421a6f68557e617e0e24b9e525a4cebd841c4f2c)), closes [#21380](https://github.com/vuetifyjs/vuetify/issues/21380)\n* **VDatePicker:** round font-size from 13.6 to 14px ([#21590](https://github.com/vuetifyjs/vuetify/issues/21590)) ([d81a4a0](https://github.com/vuetifyjs/vuetify/commit/d81a4a0cf81353c96f6c5557d8c9be77df7a5836))\n* **VField:** fix label accessibility ([#21706](https://github.com/vuetifyjs/vuetify/issues/21706)) ([85abd80](https://github.com/vuetifyjs/vuetify/commit/85abd8078a2cba159b1cc3caa323519b3b29dec6))\n* **VFileInput:** avoid text overflow with long file names ([#21748](https://github.com/vuetifyjs/vuetify/issues/21748)) ([389a260](https://github.com/vuetifyjs/vuetify/commit/389a260a334d2b9fa1cd717d04904c0b60abe755)), closes [#21707](https://github.com/vuetifyjs/vuetify/issues/21707)\n* **VFileUploadItem:** accept `title` slot ([#21769](https://github.com/vuetifyjs/vuetify/issues/21769)) ([fe85aa0](https://github.com/vuetifyjs/vuetify/commit/fe85aa0ecb4efa17f499beccea27710ad3bea164))\n* **VFileUploadItem:** apply classes, styles as props ([#21752](https://github.com/vuetifyjs/vuetify/issues/21752)) ([d6050f0](https://github.com/vuetifyjs/vuetify/commit/d6050f051ac36cadef5cb6ae1e8995875d2b4bfe)), closes [#21740](https://github.com/vuetifyjs/vuetify/issues/21740)\n* **VList:** ignore invalid itemType values ([4bae0bc](https://github.com/vuetifyjs/vuetify/commit/4bae0bcfba724d90eafda96801ed597558e30885)), closes [#21728](https://github.com/vuetifyjs/vuetify/issues/21728)\n* **VList:** merge classes from itemProps ([5423fbf](https://github.com/vuetifyjs/vuetify/commit/5423fbf18ca6d27ac560529cdd20310aee6d2d32))\n* **VListItem:** keyboard navigation when list contains checkboxes ([#21701](https://github.com/vuetifyjs/vuetify/issues/21701)) ([f500c5b](https://github.com/vuetifyjs/vuetify/commit/f500c5bad5d0da31d8ebec0447cd4b68f91bcbbd)), closes [#21516](https://github.com/vuetifyjs/vuetify/issues/21516)\n* **VMenu:** let persistent menus coexist with regular ones ([#21449](https://github.com/vuetifyjs/vuetify/issues/21449)) ([30ac0fc](https://github.com/vuetifyjs/vuetify/commit/30ac0fcdd491d0eba970d383023d183aafcef491)), closes [#20976](https://github.com/vuetifyjs/vuetify/issues/20976)\n* **VNumberInput:** keep cursor position when typing decimal values ([acc30fb](https://github.com/vuetifyjs/vuetify/commit/acc30fbfa5cd8295f341c545bd4adc5629b14bd6))\n* **VNumberInput:** only trim zeros from the end ([ab2d941](https://github.com/vuetifyjs/vuetify/commit/ab2d941c02a2b5f0c976269c277471a808f251ca)), closes [#21828](https://github.com/vuetifyjs/vuetify/issues/21828)\n* **VOtpInput:** only autofocus if autofocus prop is set ([79bcb27](https://github.com/vuetifyjs/vuetify/commit/79bcb27d8b6006ac9e50787b8e771f46b402e315))\n* **VOverlay:** properly detect location flipping loop ([07db6b2](https://github.com/vuetifyjs/vuetify/commit/07db6b2fdda106325fff514f603b861ae788fee4)), closes [#21564](https://github.com/vuetifyjs/vuetify/issues/21564) [#21551](https://github.com/vuetifyjs/vuetify/issues/21551)\n* **VOverlay:** trigger scrollStrategy when target is a point ([1146171](https://github.com/vuetifyjs/vuetify/commit/114617141a73271f07c108b91829186f3ec36291))\n* **VProgressLinear:** accept pointer events unless `clickable` is used ([#21691](https://github.com/vuetifyjs/vuetify/issues/21691)) ([a6b1136](https://github.com/vuetifyjs/vuetify/commit/a6b1136243f70bf868c438f8d9e6be9b18a492e3)), closes [#21690](https://github.com/vuetifyjs/vuetify/issues/21690)\n* **VRipple:** support touch simulators ([#20776](https://github.com/vuetifyjs/vuetify/issues/20776)) ([9fa2870](https://github.com/vuetifyjs/vuetify/commit/9fa2870eeaf073489f3de790defe3e94a3746788))\n* **VSelect:** don't open menu on its own when items change ([#21247](https://github.com/vuetifyjs/vuetify/issues/21247)) ([339bd45](https://github.com/vuetifyjs/vuetify/commit/339bd45a1fd75b8d51dafcc1d0b270f07c985ee0)), closes [#21205](https://github.com/vuetifyjs/vuetify/issues/21205)\n* **VSelectionControl:** correctly pass ripple options to directive ([#21713](https://github.com/vuetifyjs/vuetify/issues/21713)) ([87a8a3e](https://github.com/vuetifyjs/vuetify/commit/87a8a3ef0edb14d43179442c1727cf5b3d86edab)), closes [#21208](https://github.com/vuetifyjs/vuetify/issues/21208)\n* **VSelects:** avoid error with `null` items ([#21660](https://github.com/vuetifyjs/vuetify/issues/21660)) ([dd98067](https://github.com/vuetifyjs/vuetify/commit/dd98067d8fb2ac46c5cd7f23d630777b61129797))\n* **VSlider:** correctly apply `thumb-color` ([#21833](https://github.com/vuetifyjs/vuetify/issues/21833)) ([b207522](https://github.com/vuetifyjs/vuetify/commit/b207522f5767f11edf56d4c4f0fad0b8dd8fcbb7)), closes [#21832](https://github.com/vuetifyjs/vuetify/issues/21832)\n* **VTextField:** avoid infinite focus loop ([#21628](https://github.com/vuetifyjs/vuetify/issues/21628)) ([efaaa5d](https://github.com/vuetifyjs/vuetify/commit/efaaa5d4f02e886b3e0c46e1f9dd9eed1cdf2e88)), closes [#21626](https://github.com/vuetifyjs/vuetify/issues/21626)\n* **VTextField:** don't try to re-focus input on focus ([#21722](https://github.com/vuetifyjs/vuetify/issues/21722)) ([14c88df](https://github.com/vuetifyjs/vuetify/commit/14c88df44eff939e176f8c01cc4350d2be0d81c5)), closes [#21716](https://github.com/vuetifyjs/vuetify/issues/21716) [#21626](https://github.com/vuetifyjs/vuetify/issues/21626) [#21717](https://github.com/vuetifyjs/vuetify/issues/21717)\n* **VTimePicker:** auto width ([#21613](https://github.com/vuetifyjs/vuetify/issues/21613)) ([5d1ceab](https://github.com/vuetifyjs/vuetify/commit/5d1ceab3e519974cdde29f7e7610ffb5972ac6a7))\n* **VTreeview:** activatable implies openOnClick=false ([c0b7d7b](https://github.com/vuetifyjs/vuetify/commit/c0b7d7b518727f8d43e4463dd3e69edfa4c43d73))\n* **VTreeview:** don't display expanded items as activated ([683dc86](https://github.com/vuetifyjs/vuetify/commit/683dc863d1e8736ac8bda93f58f2b8cc8fa819b4)), closes [#21721](https://github.com/vuetifyjs/vuetify/issues/21721) [#21724](https://github.com/vuetifyjs/vuetify/issues/21724)\n* **VTreeview:** don't select disabled children with parent ([#20962](https://github.com/vuetifyjs/vuetify/issues/20962)) ([0772bc1](https://github.com/vuetifyjs/vuetify/commit/0772bc11c10cd55ca1dd186a64819337b38bc3fd)), closes [#20386](https://github.com/vuetifyjs/vuetify/issues/20386)\n* **VTreeview:** hide extended lines when fluid ([#21798](https://github.com/vuetifyjs/vuetify/issues/21798)) ([5728b2b](https://github.com/vuetifyjs/vuetify/commit/5728b2b2fc9a1e608bb395cc077f5640261a57ea)), closes [#21794](https://github.com/vuetifyjs/vuetify/issues/21794)\n* **VTreeview:** modelValue reactivity ([6daf53d](https://github.com/vuetifyjs/vuetify/commit/6daf53ddbd7f66155f1e1cce870968153fc2b1df))\n* **VTreeview:** prevent checkbox deselection when mandatory ([431af5f](https://github.com/vuetifyjs/vuetify/commit/431af5fa7df28d98d7bb76f88a1803ec98a62719)), closes [#21614](https://github.com/vuetifyjs/vuetify/issues/21614)\n* **VTreeview:** restore reactivity with computed items ([107dd0c](https://github.com/vuetifyjs/vuetify/commit/107dd0c6822a5f029e302627f040a43a82bebb58)), closes [#20900](https://github.com/vuetifyjs/vuetify/issues/20900)\n* **VTreeview:** select trunk nodes on click when openOnClick=false ([e6a1710](https://github.com/vuetifyjs/vuetify/commit/e6a1710296ea0cb67d6877a9c587766b5565f90d)), closes [#21599](https://github.com/vuetifyjs/vuetify/issues/21599)\n* **VTreeview:** set active state from router ([#21644](https://github.com/vuetifyjs/vuetify/issues/21644)) ([01c7a4f](https://github.com/vuetifyjs/vuetify/commit/01c7a4f8a0af4b62eda99bcd7eac56ef452e22d8))\n\n### :microscope: Code Refactoring\n\n* **layout:** consoleWarn instead of error for missing layout items ([34b53f1](https://github.com/vuetifyjs/vuetify/commit/34b53f10b5ae1b218721b32d51c757adecf343f7))\n* **theme:** add internal methods for testing tailwind integration ([abfdb77](https://github.com/vuetifyjs/vuetify/commit/abfdb777e0e00d4a1798f52d7e4c118e7409fcb9))\n\n### :test_tube: Labs\n\n* **VCalendar:** slot day-event not available ([#21558](https://github.com/vuetifyjs/vuetify/issues/21558)) ([d743051](https://github.com/vuetifyjs/vuetify/commit/d743051c3fc2ba99c77b49e2fa99f9925af50eb6)), closes [#21341](https://github.com/vuetifyjs/vuetify/issues/21341)\n* **VCalendar:** use adapter for day element key ([#21689](https://github.com/vuetifyjs/vuetify/issues/21689)) ([428f460](https://github.com/vuetifyjs/vuetify/commit/428f4602b54b6ecbfcc37cd2edf61703ae49712e)), closes [#21688](https://github.com/vuetifyjs/vuetify/issues/21688)\n* **VColorInput:** ensure cancel action closes menu ([#21664](https://github.com/vuetifyjs/vuetify/issues/21664)) ([7822179](https://github.com/vuetifyjs/vuetify/commit/7822179df9d61dec98179ddcb70346d949305412)), closes [#21655](https://github.com/vuetifyjs/vuetify/issues/21655)\n* **VDateInput:** align generic model type with VDatePicker ([#21764](https://github.com/vuetifyjs/vuetify/issues/21764)) ([0cfca46](https://github.com/vuetifyjs/vuetify/commit/0cfca46b2da04c9b98e7a56788f9e648f31b6c3e)), closes [#21751](https://github.com/vuetifyjs/vuetify/issues/21751) [#21753](https://github.com/vuetifyjs/vuetify/issues/21753)\n* **VDateInput:** assign type to displayFormat function ([#21684](https://github.com/vuetifyjs/vuetify/issues/21684)) ([4446ebf](https://github.com/vuetifyjs/vuetify/commit/4446ebff30e96f1d7629bafa0c8b8bad8f473307)), closes [#21683](https://github.com/vuetifyjs/vuetify/issues/21683)\n* **VDateInput:** avoid time values in the field ([#21694](https://github.com/vuetifyjs/vuetify/issues/21694)) ([d4efd48](https://github.com/vuetifyjs/vuetify/commit/d4efd487d384f94a263d2af9b8abc5dbb8381134))\n* **VHotkey:** add new component ([#21598](https://github.com/vuetifyjs/vuetify/issues/21598)) ([99c721c](https://github.com/vuetifyjs/vuetify/commit/99c721c381e47b403429c7de194306013c0ec679))\n* **VIconBtn:** add button type ([#21638](https://github.com/vuetifyjs/vuetify/issues/21638)) ([dd1db74](https://github.com/vuetifyjs/vuetify/commit/dd1db749edd8df351727c01eeca67a1bb7fb8fb6)), closes [#21634](https://github.com/vuetifyjs/vuetify/issues/21634)\n* **VMaskInput:** create new component ([#21519](https://github.com/vuetifyjs/vuetify/issues/21519)) ([117443a](https://github.com/vuetifyjs/vuetify/commit/117443afbe676d5d31ab20b4a549cb7405994493))\n* **VMaskInput:** send unmasked value to rules ([#21719](https://github.com/vuetifyjs/vuetify/issues/21719)) ([64943b3](https://github.com/vuetifyjs/vuetify/commit/64943b30c4a84ddfaa565f9b2d62285450aa128b))\n* **VPie:** create new component ([#21176](https://github.com/vuetifyjs/vuetify/issues/21176)) ([5f0ebca](https://github.com/vuetifyjs/vuetify/commit/5f0ebca99b830f2cdce234b5f45529a1553c66ef))\n* **VStepperVertical:** correct avatar alignment ([#21797](https://github.com/vuetifyjs/vuetify/issues/21797)) ([6292149](https://github.com/vuetifyjs/vuetify/commit/6292149811091210af7005bbaf7de37aea66b69a)), closes [#21792](https://github.com/vuetifyjs/vuetify/issues/21792)\n* **VStepperVertical:** fix next/prev-text props ([#21360](https://github.com/vuetifyjs/vuetify/issues/21360)) ([11986c6](https://github.com/vuetifyjs/vuetify/commit/11986c6e2ac351c38194cd3a8c74f6e03f58e3cf)), closes [#21358](https://github.com/vuetifyjs/vuetify/issues/21358)\n* **VVideo:** create new component ([#21460](https://github.com/vuetifyjs/vuetify/issues/21460)) ([936eba2](https://github.com/vuetifyjs/vuetify/commit/936eba2ef278137d650b00acf0425116ec8237eb)), closes [#5592](https://github.com/vuetifyjs/vuetify/issues/5592)\n\n
\n\n---\n\n## What's Next { #whats-next }\n\nNext month promises to be an exciting one as we continue building momentum from July's achievements. Here's what's on the horizon:\n\n### Community Roadmap Voting\n\nOver 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.\n\n### Vuetify0 Alpha Release\n\nWe're targeting **late August** for the first alpha release of Vuetify0. This milestone will include:\n\n* Core composable abstractions\n* Initial documentation and examples\n\n### Labs Component Stabilization\n\nAugust is dedicated to refining our Labs components based on community feedback:\n\n* **VCommandPalette**: Finalizing keyboard navigation patterns\n* **VEditor**: Completing table and list formatting features\n* **VCalendar**: Addressing performance optimizations and accessibility improvements\n* **VMaskInput**: Expanding validation integration\n\nThank you for your continued support, feedback, and contributions that make all of this possible! See you next month.\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/eXubxyJ), and upcoming webinar series announcements.*\n","packages/docs/src/pages/en/blog/july-2026-update.md":"---\nlayout: blog\nmeta:\n title: July 2026 Update\n description: July closed the Vuetify 3 line with v3.13.0 entering long-term support, shipped Vuetify0 1.0, and kept the v4.1 patch cadence running with five releases\n keywords: Vuetify July 2026, Vuetify 3.13 LTS, Vuetify0 1.0, Vuetify 4.1, Vuetify CLI, pkg-diff\n---\n\n\n\n# July 2026 Update\n\nWelcome to the July 2026 Vuetify update! This month closes out two long-running efforts at once — **Vuetify0 1.0** shipped stable on July 22 after 214 merged pull requests, and **v3.13.0** landed five days later as the final Vuetify 3 minor, moving the v3 line into [long-term support](/introduction/long-term-support/) through July 27th, 2027. Underneath both, the v4.1 patch line kept its weekly cadence with five releases.\n\n![Hero image for July update](https://cdn.vuetifyjs.com/docs/images/blog/july-2026-update/july-hero.png \"July hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 August 11th, 2026\n\n\n\n---\n\n## Stable ground\n\n**386 commits** across 11 active repositories and **264 merged PRs**, with two releases doing most of the work. v3.13.0 is the last minor Vuetify 3 will get — from here the line takes critical bug fixes and security patches only, for twelve months. Vuetify0 1.0 gives the framework's logic layer a semver-locked surface for the first time, which is what the theme, locale, and date migrations have been waiting on.\n\nThe numbers lean hard toward v0: 214 of the month's merged PRs landed in [vuetifyjs/0](https://github.com/vuetifyjs/0), where our team spent the month hardening the surface ahead of the release rather than adding to it. The framework side was quieter — 34 merged PRs, no labs promotions, no new components — but shipped nine releases across the v4 and v3 lines, and the accessibility pass across v0 accounted for a large share of the rest. We're grateful to everyone in the community who filed a fix this month.\n\n| Metric | Count |\n|-------------------------|---------------------------------------------------|\n| Total Commits | 386 |\n| Total PRs Merged | 264 |\n| Active Repositories | 11 |\n| Vuetify Releases | 9 (v4.1.3 → v4.1.7, v3.12.9 → v3.13.0) |\n| Components Promoted | 0 (framework) · 13 (Vuetify0 stable spine) |\n| Vuetify0 Releases | 11 tags, including **v1.0.0** |\n\nCounts cover July 1–31, 2026 (America/Chicago), by commit date and merge date. Cherry-picks and back-ports between the `master`, `dev`, and `v3-stable` branches are counted once, not once per branch.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Vuetify 3 Enters LTS](#vuetify-3-lts)\n* [Vuetify0 1.0](#vuetify0-1-0)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Tooling Updates](#ecosystem-tooling)\n* [July 2026 Changelog](#july-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\n**Nine framework releases** shipped in July across two lines. The v4 line ran weekly patches — [v4.1.3](/getting-started/release-notes/?version=v4.1.3) (July 2), [v4.1.4](/getting-started/release-notes/?version=v4.1.4) (July 7), [v4.1.5](/getting-started/release-notes/?version=v4.1.5) (July 13), [v4.1.6](/getting-started/release-notes/?version=v4.1.6) (July 23), and [v4.1.7](/getting-started/release-notes/?version=v4.1.7) (July 30), The v3 line took three patches and then [v3.13.0](/getting-started/release-notes/?version=v3.13.0) on July 27.\n\n\n\n### Key Improvements\n\n* **[Vuetify 3.13](/getting-started/release-notes/?version=v3.13.0)** — the final v3 minor; the line now sits in [LTS](/introduction/long-term-support/) until July 27th, 2027\n* **[VSelect / VAutocomplete / VCombobox](/components/selects/)** — new events for multi-selection in v3.13.0, plus a run of focus and native-form-submission fixes ([#23038](https://github.com/vuetifyjs/vuetify/pull/23038), [#23022](https://github.com/vuetifyjs/vuetify/pull/23022), [#23029](https://github.com/vuetifyjs/vuetify/pull/23029))\n* **[VSkeletonLoader](/components/skeleton-loaders/)** — a new `types` prop, a `chip-group` type, and `table-cell` reintroduced ([#23037](https://github.com/vuetifyjs/vuetify/pull/23037))\n* **[VBtnGroup](/components/button-groups/)** — a `size` prop matching standalone buttons ([`eada595`](https://github.com/vuetifyjs/vuetify/commit/eada595))\n* **Shadow DOM** — keyboard navigation and focus resolution work inside an open shadow root ([#23024](https://github.com/vuetifyjs/vuetify/pull/23024), [#23027](https://github.com/vuetifyjs/vuetify/pull/23027))\n* **Defaults** — nested root defaults survive a teleport reset, and parent config no longer leaks into menu and dialog content ([#23015](https://github.com/vuetifyjs/vuetify/pull/23015), [#23016](https://github.com/vuetifyjs/vuetify/pull/23016))\n\nView the complete list of changes in the [Full Changelog](#july-2026-changelog).\n\n**Details:**\n\n* [v4.1.7](/getting-started/release-notes/?version=v4.1.7) · [v4.1.6](/getting-started/release-notes/?version=v4.1.6) · [v4.1.5](/getting-started/release-notes/?version=v4.1.5) · [v4.1.4](/getting-started/release-notes/?version=v4.1.4) · [v4.1.3](/getting-started/release-notes/?version=v4.1.3)\n* [v3.13.0](/getting-started/release-notes/?version=v3.13.0) · [v3.12.11](/getting-started/release-notes/?version=v3.12.11) · [v3.12.10](/getting-started/release-notes/?version=v3.12.10) · [v3.12.9](/getting-started/release-notes/?version=v3.12.9)\n\n---\n\n## Vuetify 3 Enters LTS { #vuetify-3-lts }\n\n\n\n
\n\nVuetify 3 shipped on November 1st, 2022. Nearly four years and thirteen minors later, **[v3.13.0](/getting-started/release-notes/?version=v3.13.0) is the last one**. As of July 27th, 2026 the v3 line is in [long-term support](/introduction/long-term-support/) and will receive critical bug fixes and security patches — and nothing else — until **July 27th, 2027**.\n\n**The LTS window is twelve months, not eighteen.** The previous policy gave the outgoing major 18 months. That is now 12, and the [long-term support page](/introduction/long-term-support/) and [release cycle](/introduction/why-vuetify/) docs have been updated to match. Check your migration plan against the new number.\n\n**v3.13.0 also carries features.** It is the only place July's four new ones shipped — on the v4 line the same commits sit on `dev`, queued for [v4.2.0](https://github.com/vuetifyjs/vuetify/milestone/90) in September. They arrive alongside accessibility work back-ported from May:\n\n* **[VSelect / VAutocomplete / VCombobox](/components/selects/)** — new events for multi-selection ([#23038](https://github.com/vuetifyjs/vuetify/pull/23038))\n* **[VDataTable](/components/data-tables/basics/)** — a community-contributed `mobile.header` slot ([#21429](https://github.com/vuetifyjs/vuetify/pull/21429)), plus `aria-sort` on sortable headers and `aria-label`s on selection controls\n* **[VSkeletonLoader](/components/skeleton-loaders/)** — the `types` prop, `chip-group`, and `table-cell`\n* **[VBtnGroup](/components/button-groups/)** — the `size` prop\n\nThe v3 documentation stays at [v3.vuetifyjs.com](https://v3.vuetifyjs.com/), and the docs site trimmed its outdated cross-version content in the process ([`e3fb29d`](https://github.com/vuetifyjs/vuetify/commit/e3fb29d)). If you are still on v3, start with the [upgrade guide](/getting-started/upgrade-guide/). You have a year.\n\n**Details:**\n\n* [Long-term support](/introduction/long-term-support/)\n* [Roadmap](/introduction/roadmap/)\n* [v3.13.0 Release Notes](/getting-started/release-notes/?version=v3.13.0)\n\n---\n\n## Vuetify0 1.0 { #vuetify0-1-0 }\n\n\n\n
\n\n[Vuetify0 shipped 1.0](/blog/announcing-vuetify0-v1/) on **July 22nd**. The package is now plain `@vuetify/v0` — no `beta`, no `rc`, no tag required. The announcement post has the full surface; this is how July got there.\n\n\n\nThe month opened with the release candidate. [v1.0.0-rc.6](https://github.com/vuetifyjs/0/releases) landed July 2 alongside the promotion of **ten composables from preview to stable** — `createModel`, `createSelection`, `createSingle`, `createStep`, `createGroup`, `createNested`, `createRegistry`, `useTheme`, `useStorage`, and `useBreakpoints` ([#470](https://github.com/vuetifyjs/0/pull/470)). Three more RCs followed, and on July 20 the **1.0 component spine** — thirteen components: `Atom`, `AspectRatio`, `Theme`, `Group`, `Selection`, `Single`, `Step`, `Tabs`, `Toggle`, `Collapsible`, `Checkbox`, `Radio`, and `Switch` — was promoted to stable in one pass ([#655](https://github.com/vuetifyjs/0/pull/655)), taking the stable component count from zero to thirteen. Two days later, 1.0.0.\n\n**No new composables or components shipped in July.** The API had been frozen since the June beta, so the month went into hardening what already existed — accessibility, performance, and correctness.\n\n### Accessibility\n\nWe've added an [axe-core](https://github.com/dequelabs/axe-core) sweep that now runs against every component ([#736](https://github.com/vuetifyjs/0/pull/736)). The fixes that preceded it:\n\n* **Avatar, Scrim, Popover, Tooltip, Select, Toggle** — restored dropped alt text and completed missing ARIA wiring ([#618](https://github.com/vuetifyjs/0/pull/618))\n* **Switch, Form, Slider** — correct ARIA states for mixed, native-validation, and grouped controls ([#619](https://github.com/vuetifyjs/0/pull/619))\n* **Carousel** — autoplay pauses on keyboard focus, satisfying WCAG 2.2.2 ([#625](https://github.com/vuetifyjs/0/pull/625))\n* **Snackbar** — an `urgent` prop that switches the live region to `role=\"alert\"` ([#624](https://github.com/vuetifyjs/0/pull/624))\n* **Breadcrumbs** — collapsed-item count and `aria-expanded` on the expander ([#634](https://github.com/vuetifyjs/0/pull/634))\n* **Button, Toggle, Pagination** — Enter/Space activation on non-native `as` elements ([#645](https://github.com/vuetifyjs/0/pull/645))\n* **Treeview** — `aria-current` on the active item ([#626](https://github.com/vuetifyjs/0/pull/626)); **Splitter** — a localized handle label ([#627](https://github.com/vuetifyjs/0/pull/627))\n\n### Performance\n\n`createRegistry` sits underneath most of v0, so it got the attention. Reactive `keys`/`values`/`entries` are memoized behind a version signal ([#540](https://github.com/vuetifyjs/0/pull/540)), field-only upserts skip version notification ([#542](https://github.com/vuetifyjs/0/pull/542)), and the hot paths dropped `indexOf` and a `values()` copy ([#531](https://github.com/vuetifyjs/0/pull/531)). `createDataGrid` skips the row reorder on sort when no manual order is in effect ([#555](https://github.com/vuetifyjs/0/pull/555)), and baseline benchmarks landed on `createGroup`, `createSingle`, and `createStep` so future regressions show up ([#604](https://github.com/vuetifyjs/0/pull/604)), alongside a bundle-size gate on the key exports ([#605](https://github.com/vuetifyjs/0/pull/605)) and an SSR hydration smoke-test harness ([#607](https://github.com/vuetifyjs/0/pull/607)).\n\n### Correctness\n\nFour fixes to know about if you were running an RC:\n\n* `useResizeObserver` was silently ignoring border-box measurements ([#725](https://github.com/vuetifyjs/0/pull/725))\n* `isArray` and `isObject` now narrow correctly against element types, tuples, and `readonly` ([#745](https://github.com/vuetifyjs/0/pull/745), [#746](https://github.com/vuetifyjs/0/pull/746))\n* `useStack` leaked its singleton across SSR requests ([#569](https://github.com/vuetifyjs/0/pull/569))\n* A security review produced a guard sweep against prototype pollution and CSS injection ([#489](https://github.com/vuetifyjs/0/pull/489))\n\nTwo structural changes landed alongside. **`@vuetify/paper` came out of the publish path** ([#671](https://github.com/vuetifyjs/0/pull/671)) and out of the consumer-facing docs ([#672](https://github.com/vuetifyjs/0/pull/672)). And the release pipeline now blocks prereleases from claiming the `latest` dist-tag ([#665](https://github.com/vuetifyjs/0/pull/665)) and makes publishes idempotent ([#696](https://github.com/vuetifyjs/0/pull/696)) — both fallout from the tagging problems earlier in the year.\n\nTwo patches followed: **v1.0.1** (July 24) and **v1.0.2** (July 29).\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n**Details:**\n\n* [Announcing Vuetify0 1.0](/blog/announcing-vuetify0-v1/)\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v0play](https://v0play.vuetifyjs.com)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nNothing was promoted out of labs in July and no new components were added — the last promotions were the seven that landed in May. Our team spent the month on correctness instead, concentrated in three areas: **Shadow DOM**, **defaults inheritance**, and the **select family**.\n\n### New Features\n\nFour features landed on July 27, and all of them **shipped in v3.13.0, not on the v4 line**. On v4 the same commits are merged to `dev` and arrive with [v4.2.0](https://github.com/vuetifyjs/vuetify/milestone/90):\n\n* **[VSelect / VAutocomplete / VCombobox](/components/selects/)** — new events for multi-selection ([#23038](https://github.com/vuetifyjs/vuetify/pull/23038))\n* **[VSkeletonLoader](/components/skeleton-loaders/)** — a `types` prop, and `table-cell` reintroduced ([#23037](https://github.com/vuetifyjs/vuetify/pull/23037)); separately, a `chip-group` type ([`06cbc10`](https://github.com/vuetifyjs/vuetify/commit/06cbc10))\n* **[VBtnGroup](/components/button-groups/)** — a `size` prop aligned with standalone buttons ([`9b46baa`](https://github.com/vuetifyjs/vuetify/commit/9b46baa))\n\n### Bug Fixes\n\n**Shadow DOM.** Components mounted inside an open shadow root resolved focus against the wrong root, breaking keyboard navigation in lists and stealing focus in dialogs. Three fixes closed it ([#23024](https://github.com/vuetifyjs/vuetify/pull/23024), [#23027](https://github.com/vuetifyjs/vuetify/pull/23027), [`8908e7e`](https://github.com/vuetifyjs/vuetify/commit/8908e7e)).\n\n**Defaults.** Two leaks. Parent component config bled into teleported menu and dialog content ([#23016](https://github.com/vuetifyjs/vuetify/pull/23016)), and nested root defaults were dropped by the teleport reset ([#23015](https://github.com/vuetifyjs/vuetify/pull/23015)). Either one gives you a component that styles correctly in isolation and wrongly in place.\n\n**The select family.** Focus behavior, native form submission, and list reliability all got passes. Most of these were long-standing reports rather than v4.1 regressions.\n\n| Component | Fix | Version | PR / commit |\n|------------------------------------|-----------------------------------------------------------|---------|---------------------------------------------------------------------|\n| **locale** | Correctly resolve Kurdish locale to RTL | v4.1.3 | [`4782312`](https://github.com/vuetifyjs/vuetify/commit/4782312) |\n| **VBtn** | No letter-spacing for RTL locales | v4.2.0 | [`3956c08`](https://github.com/vuetifyjs/vuetify/commit/3956c08) |\n| **VOtpInput** | Move focus correctly in RTL mode | v4.1.3 | [`f0145aa`](https://github.com/vuetifyjs/vuetify/commit/f0145aa) |\n| **VSelect/VAutocomplete/VCombobox**| Respect `no-auto-scroll` | v4.1.3 | [`adb2597`](https://github.com/vuetifyjs/vuetify/commit/adb2597) |\n| **VDataTable** | Apply `text-align` to columns with align `start` | v4.1.3 | [`02f5f81`](https://github.com/vuetifyjs/vuetify/commit/02f5f81) |\n| **VDateInput** | Do not fill range on blur | v4.1.4 | [`b7569fe`](https://github.com/vuetifyjs/vuetify/commit/b7569fe) |\n| **rounded** | Translate `2xl`, `3xl`, etc. to classes | v4.1.3 | [`0ea03f4`](https://github.com/vuetifyjs/vuetify/commit/0ea03f4) |\n| **VDateInput** | Derive display format from the date adapter locale | v4.1.3 | [#22976](https://github.com/vuetifyjs/vuetify/pull/22976) |\n| **theme** | `provideTheme` current should use `computedThemes` | v4.1.4 | [#22987](https://github.com/vuetifyjs/vuetify/pull/22987) |\n| **VMenu** | Correct close cascade for nested menus | v4.1.4 | [`5902e09`](https://github.com/vuetifyjs/vuetify/commit/5902e09) |\n| **VMenu** | Correct click-outside detection when content resizes | v4.1.4 | [`007f546`](https://github.com/vuetifyjs/vuetify/commit/007f546) |\n| **VNumberInput** | Accept a non-ASCII minus sign | v4.1.4 | [`6063d7a`](https://github.com/vuetifyjs/vuetify/commit/6063d7a) |\n| **VNumberInput** | Keep all decimals when `precision` is null | v4.1.4 | [`87b0e57`](https://github.com/vuetifyjs/vuetify/commit/87b0e57) |\n| **date** | Correct locale on `StringDateAdapter` | v4.1.4 | [`83ed8d4`](https://github.com/vuetifyjs/vuetify/commit/83ed8d4) |\n| **VOverlay** | Skip click-outside DOM scan for inactive overlays | v4.1.5 | [`74e297f`](https://github.com/vuetifyjs/vuetify/commit/74e297f) |\n| **VTreeview** | More aria attributes and correct keyboard navigation | v4.2.0 | [#22903](https://github.com/vuetifyjs/vuetify/pull/22903) |\n| **VDataTable** | Hide empty header cell in mobile view | v4.1.5 | [`a759055`](https://github.com/vuetifyjs/vuetify/commit/a759055) |\n| **VCalendar** | Prevent next-day hours when customizing intervals | v4.1.5 | [`4e36892`](https://github.com/vuetifyjs/vuetify/commit/4e36892) |\n| **VSwitch** | Resolve inset thumb scale ratios in Sass | v4.1.5 | [`86fcfaa`](https://github.com/vuetifyjs/vuetify/commit/86fcfaa) |\n| **types** | Preserve `RouteLocationRaw` in emitted declarations | v4.1.5 | [`d4d7b4b`](https://github.com/vuetifyjs/vuetify/commit/d4d7b4b) |\n| **VMaskInput** | Preserve value when pasting over a selection | v4.1.5 | [#23003](https://github.com/vuetifyjs/vuetify/pull/23003) |\n| **VImg** | Handle image ref deferred by a Nuxt page transition | v4.1.6 | [`0f72baf`](https://github.com/vuetifyjs/vuetify/commit/0f72baf) |\n| **VList** | Keyboard navigation inside an open Shadow DOM | v4.1.6 | [#23024](https://github.com/vuetifyjs/vuetify/pull/23024) |\n| **VDialog/VField** | Correct focus resolution in Shadow DOM | v4.1.6 | [#23027](https://github.com/vuetifyjs/vuetify/pull/23027) |\n| **VDialog** | Defer auto-focus until the inner field is focusable | v4.1.6 | [`8908e7e`](https://github.com/vuetifyjs/vuetify/commit/8908e7e) |\n| **VSelect** | Only focus the first item when opened with the keyboard | v4.1.6 | [`4bb9151`](https://github.com/vuetifyjs/vuetify/commit/4bb9151) |\n| **VSelect** | Release focus on the first click outside | v4.1.6 | [`ff966d2`](https://github.com/vuetifyjs/vuetify/commit/ff966d2) |\n| **defaults** | Keep nested root defaults through teleport reset | v4.1.6 | [#23015](https://github.com/vuetifyjs/vuetify/pull/23015) |\n| **VDataTableVirtual** | Avoid scroll glitches with expanded rows | v4.1.6 | [#23014](https://github.com/vuetifyjs/vuetify/pull/23014) |\n| **VVirtualScroll** | Trim leading items when appending to the bottom | v4.1.6 | [`1ac7cb7`](https://github.com/vuetifyjs/vuetify/commit/1ac7cb7) |\n| **VVirtualScroll** | Call `calculateVisibleItems` after `updateOffsets` | v4.1.6 | [#22938](https://github.com/vuetifyjs/vuetify/pull/22938) |\n| **VOverlay** | Handle `transition` prop correctly for target assignment | v4.1.6 | [#22190](https://github.com/vuetifyjs/vuetify/pull/22190) |\n| **defaults** | Avoid parent config leaking into menu and dialog content | v4.2.0 | [#23016](https://github.com/vuetifyjs/vuetify/pull/23016) |\n| **VStepperWindow/VTouch** | Only remove touch handlers when not null | v4.1.7 | [#23030](https://github.com/vuetifyjs/vuetify/pull/23030) |\n| **VStepperVerticalItem** | Unnecessary error color on step content | v4.1.7 | [`fce4eaa`](https://github.com/vuetifyjs/vuetify/commit/fce4eaa) |\n| **v-touch** | React to binding value changes | v4.2.0 | [`937a471`](https://github.com/vuetifyjs/vuetify/commit/937a471) |\n| **v-tooltip** | Correctly handle `true` and `undefined` | v4.2.0 | [`cef88bf`](https://github.com/vuetifyjs/vuetify/commit/cef88bf) |\n| **VAutocomplete/VCombobox** | Camelize item props for prepend icon and avatar | v4.1.7 | [`8a20623`](https://github.com/vuetifyjs/vuetify/commit/8a20623) |\n| **elevation** | `hover-elevation` should not require `elevation` | v4.1.7 | [`378f593`](https://github.com/vuetifyjs/vuetify/commit/378f593) |\n| **VProgressLinear/VIconBtn** | Avoid Vite v8 dropping transition timing | v4.1.7 | [`f23af8a`](https://github.com/vuetifyjs/vuetify/commit/f23af8a) |\n| **VTextField** | Respect `hide-details=\"auto\"` with a counter | v4.1.7 | [#22620](https://github.com/vuetifyjs/vuetify/pull/22620) |\n\nRows marked **v4.2.0** are merged to `dev` and had not shipped on the v4 line by the end of July. One further fix — `VNumberInput` stripping the grouping separator before parsing ([`94e94a9`](https://github.com/vuetifyjs/vuetify/commit/94e94a9)) — landed on July 31 but had not been released when the month closed.\n\n### In Development\n\nThe [v4.2.0 milestone](https://github.com/vuetifyjs/vuetify/milestone/90) is targeting **September 1st** and carries the feature work that slipped past v4.1. The queue is largely unchanged since June, now with a date attached:\n\n* **[VSlider](/components/sliders/)** — a `pill` variant to match MD3 ([#22699](https://github.com/vuetifyjs/vuetify/pull/22699))\n* **[VMaskInput](/components/mask-inputs/)** — multiple and dynamic mask resolution ([#22501](https://github.com/vuetifyjs/vuetify/pull/22501))\n* **[VTimePicker](/components/time-pickers/)** — keyboard controls ([#22604](https://github.com/vuetifyjs/vuetify/pull/22604))\n* **[VBtn / VIconBtn](/components/buttons/)** — sizes, spacing, and focus aligned with MD3 ([#21831](https://github.com/vuetifyjs/vuetify/pull/21831))\n* **[VDatePicker](/components/date-pickers/)** — week selection ([#20867](https://github.com/vuetifyjs/vuetify/pull/20867))\n* **[VField](/components/text-fields/)** — a `border` prop ([#19819](https://github.com/vuetifyjs/vuetify/pull/19819))\n\nOpened in July and still open at the end of it: persistent menus for the select family ([#23008](https://github.com/vuetifyjs/vuetify/pull/23008)) and a `close-on-input-click` prop for VAutocomplete and VCombobox ([#23023](https://github.com/vuetifyjs/vuetify/pull/23023)).\n\n---\n\n## Tooling Updates { #ecosystem-tooling }\n\n### Vuetify CLI\n\n\n\n
\n\nThe [CLI](https://github.com/vuetifyjs/cli) shipped four releases in July and gained a command. **`vuetify release-notes`** ([#23](https://github.com/vuetifyjs/cli/pull/23)) prints release notes for Vuetify or Vuetify0 from the terminal:\n\n```bash\nnpx vuetify release-notes # latest Vuetify release\nnpx vuetify release-notes v0 # latest Vuetify0 release\nnpx vuetify release-notes --version v4.1.7\n```\n\nIt reads the GitHub Releases API directly — no new dependencies — and links to both the docs release-notes page and the GitHub release. It shipped in **v1.2.0-beta.3** and went stable in **v1.2.0** on July 15.\n\n`vuetify analyze` got a correctness fix ([#26](https://github.com/vuetifyjs/cli/pull/26)). Lowercase `create*` factories such as `createSelection` and `createRegistry` were classified as utilities rather than composables, because the shipped import map has no `composables` key — roughly thirty core v0 composables were mislabeled. The Nuxt templates now set `prefixComposables` to avoid a naming collision introduced upstream ([#25](https://github.com/vuetifyjs/cli/issues/25)), and feature application was fixed when converting a project to JavaScript ([#19](https://github.com/vuetifyjs/cli/pull/19)).\n\n**Releases:** v1.2.0-beta.2 (July 1) · v1.2.0-beta.3 (July 15) · **v1.2.0** (July 15) · v1.2.1 (July 22)\n\n### pkg-diff\n\n[pkg-diff](https://github.com/vuetifyjs/pkg-diff), the in-browser NPM package diffing tool that came out of June's security work, **went live** in July at [pkg-diff.vuetifyjs.com](https://pkg-diff.vuetifyjs.com/). All fifteen of the month's commits went into it: the Coolify deploy, accessible themes, a version dropdown grouped by dist-tag, an `av=prev` URL parameter, and **a CLI**, so an agent can diff two package versions without a browser. A matching link from the Vuetify CLI's `release-notes` output was merged on July 25, after v1.2.1, so it was still unreleased when the month closed.\n\n### Vuetify MCP\n\nThe [MCP server](https://github.com/vuetifyjs/mcp) shipped **v0.8.0** on July 22, resyncing its published composable and component inventory against v0 1.0 ([#26](https://github.com/vuetifyjs/mcp/pull/26), [#27](https://github.com/vuetifyjs/mcp/pull/27)). Upgrade if you use it for v0 lookups — anything before 0.8.0 predates the 1.0 surface.\n\n### Nuxt Module\n\nThe [Nuxt module](https://github.com/vuetifyjs/nuxt-module) reached **v1.0.0-rc.3** on July 20, adding **selective imports and prefixing for composables** — which you want when Vuetify's composable names collide with your own auto-imports. rc.2 shipped earlier in the month.\n\n### Backend Fixes\n\nNot user-facing, but worth recording. **Every non-happy-path OAuth callback was returning a 500.** The first fix swapped a throwing `schema.parse()` for `safeParse` ([#103](https://github.com/vuetifyjs/api/pull/103)), which was not the cause. The cause was a custom Hono `compose()` that never assigned a handler's returned `Response` to the context, so every early return was discarded ([#104](https://github.com/vuetifyjs/api/pull/104)). The docs AI assistant now escalates to the full documentation index instead of refusing off an index-only view ([#105](https://github.com/vuetifyjs/api/pull/105)). And the [issues app](https://issues.vuetifyjs.com/) verifies your Vuetify One session on boot, so a valid login stops showing as logged-out ([#79](https://github.com/vuetifyjs/issues/pull/79)).\n\n---\n\n## July 2026 Changelog\n\nThe following section provides an overview of the changes made in July 2026 across the Vuetify framework.\n\n**Key Improvements:**\n\n* **Shadow DOM**: keyboard navigation and focus resolution corrected for lists, dialogs, and fields\n* **Defaults**: two inheritance leaks closed around teleported menu and dialog content\n* **Select family**: multi-selection events, focus behavior, and native form submission\n* **Virtual scrolling**: item trimming, visible-item recalculation, and expanded-row scroll glitches\n* **RTL and locale**: Kurdish RTL resolution, VBtn letter-spacing, VOtpInput focus direction\n* **Accessibility**: VTreeview aria attributes and keyboard navigation; VDataTable `aria-sort` and selection labels on v3\n\n**Expand** this section to see the detailed changelog for July 2026:\n\n
\n\n### :rocket: Features\n\nAll four component features below shipped in **v3.13.0**; the v4 equivalents are merged to `dev` for v4.2.0.\n\n* **VSelect/VAutocomplete/VCombobox:** new events for multi-selection ([#23038](https://github.com/vuetifyjs/vuetify/pull/23038)) ([45079af](https://github.com/vuetifyjs/vuetify/commit/45079af))\n* **VSkeletonLoader:** add `types` prop & reintroduce `table-cell` ([#23037](https://github.com/vuetifyjs/vuetify/pull/23037)) ([b5d380b](https://github.com/vuetifyjs/vuetify/commit/b5d380b))\n* **VSkeletonLoader:** add `chip-group` type ([06cbc10](https://github.com/vuetifyjs/vuetify/commit/06cbc10))\n* **VBtnGroup:** add `size` prop to align with standalone buttons ([9b46baa](https://github.com/vuetifyjs/vuetify/commit/9b46baa))\n* **VDataTable:** add mobile header slot — v3.13.0 ([#21429](https://github.com/vuetifyjs/vuetify/pull/21429))\n* **VDataTable:** add `aria-sort` to sortable headers — v3.13.0 ([25c0f0f](https://github.com/vuetifyjs/vuetify/commit/25c0f0f))\n* **VDataTable:** add aria-labels for selection controls — v3.13.0 ([db186fc](https://github.com/vuetifyjs/vuetify/commit/db186fc))\n\n### :wrench: Bug Fixes\n\n* **VNumberInput:** strip grouping separator before parsing number ([94e94a9](https://github.com/vuetifyjs/vuetify/commit/94e94a9))\n* **VProgressLinear,VIconBtn:** avoid Vite v8 dropping transition timing ([f23af8a](https://github.com/vuetifyjs/vuetify/commit/f23af8a))\n* **VTextField:** respect `hide-details=\"auto\"` with counter ([#22620](https://github.com/vuetifyjs/vuetify/pull/22620))\n* **elevation:** `hover-elevation` prop should not require `elevation` ([378f593](https://github.com/vuetifyjs/vuetify/commit/378f593))\n* **VAutocomplete,VCombobox:** camelize item props for prepend icon and avatar ([8a20623](https://github.com/vuetifyjs/vuetify/commit/8a20623))\n* **v-tooltip:** correctly handle `true` and `undefined` ([cef88bf](https://github.com/vuetifyjs/vuetify/commit/cef88bf))\n* **defaults:** avoid parent config leaking into menu and dialog content ([#23016](https://github.com/vuetifyjs/vuetify/pull/23016))\n* **VStepperWindow/VTouch:** only remove touchHandlers when not null ([#23030](https://github.com/vuetifyjs/vuetify/pull/23030))\n* **VStepperVerticalItem:** unnecessary error color to step content ([fce4eaa](https://github.com/vuetifyjs/vuetify/commit/fce4eaa))\n* **v-touch:** react to binding value changes ([937a471](https://github.com/vuetifyjs/vuetify/commit/937a471))\n* **VSelect/VAutocomplete/VCombobox:** reliable list with selection ([#23029](https://github.com/vuetifyjs/vuetify/pull/23029))\n* **VListItem/VChip/VDatePickerHeader:** only attach click when interactive ([#23028](https://github.com/vuetifyjs/vuetify/pull/23028))\n* **VDialog/VField:** correct focus resolution in Shadow DOM ([#23027](https://github.com/vuetifyjs/vuetify/pull/23027))\n* **VDialog:** defer auto-focus until the inner field is focusable ([8908e7e](https://github.com/vuetifyjs/vuetify/commit/8908e7e))\n* **VList:** resolve keyboard navigation inside an open Shadow DOM ([#23024](https://github.com/vuetifyjs/vuetify/pull/23024))\n* **VAutocomplete,VCombobox,VSelect:** improvements for native form submissions ([#23022](https://github.com/vuetifyjs/vuetify/pull/23022))\n* **VSelect:** release focus on first click outside ([ff966d2](https://github.com/vuetifyjs/vuetify/commit/ff966d2))\n* **VSelect:** only focus first item when menu is opened with keyboard ([4bb9151](https://github.com/vuetifyjs/vuetify/commit/4bb9151))\n* **defaults:** keep nested root defaults through teleport reset ([#23015](https://github.com/vuetifyjs/vuetify/pull/23015))\n* **VDataTableVirtual:** avoid scroll glitches with expanded rows ([#23014](https://github.com/vuetifyjs/vuetify/pull/23014))\n* **VVirtualScroll:** trim leading items when appending to bottom ([1ac7cb7](https://github.com/vuetifyjs/vuetify/commit/1ac7cb7))\n* **VVirtualScroll:** call calculateVisibleItems after updateOffsets ([#22938](https://github.com/vuetifyjs/vuetify/pull/22938))\n* **VOverlay:** handle transition prop correctly for target assignment ([#22190](https://github.com/vuetifyjs/vuetify/pull/22190))\n* **VImg:** handle image ref deferred by Nuxt page transition ([0f72baf](https://github.com/vuetifyjs/vuetify/commit/0f72baf))\n* **VMaskInput:** preserve value when pasting over a selection ([#23003](https://github.com/vuetifyjs/vuetify/pull/23003))\n* **VCalendar:** add missing interval props ([#23000](https://github.com/vuetifyjs/vuetify/pull/23000))\n* **VCalendar:** prevent next day hours when customizing intervals ([4e36892](https://github.com/vuetifyjs/vuetify/commit/4e36892))\n* **VTreeview:** make sure toRaw is used on children ([#22640](https://github.com/vuetifyjs/vuetify/pull/22640))\n* **VTreeview:** more aria attributes and correct keyboard navigation ([#22903](https://github.com/vuetifyjs/vuetify/pull/22903))\n* **types:** preserve RouteLocationRaw in emitted declarations ([d4d7b4b](https://github.com/vuetifyjs/vuetify/commit/d4d7b4b))\n* **VSwitch:** resolve inset thumb scale ratios in Sass ([86fcfaa](https://github.com/vuetifyjs/vuetify/commit/86fcfaa))\n* **VDataTable:** hide empty header cell in mobile view ([a759055](https://github.com/vuetifyjs/vuetify/commit/a759055))\n* **VOverlay:** skip click-outside DOM scan for inactive overlays ([74e297f](https://github.com/vuetifyjs/vuetify/commit/74e297f))\n* **VMenu:** correct close cascade for nested menus ([5902e09](https://github.com/vuetifyjs/vuetify/commit/5902e09))\n* **VMenu:** correct click-outside detection when content resizes ([007f546](https://github.com/vuetifyjs/vuetify/commit/007f546))\n* **VNumberInput:** accept non-ASCII minus sign ([6063d7a](https://github.com/vuetifyjs/vuetify/commit/6063d7a))\n* **VNumberInput:** keep all decimals when precision is null ([87b0e57](https://github.com/vuetifyjs/vuetify/commit/87b0e57))\n* **date:** correct locale on StringDateAdapter ([83ed8d4](https://github.com/vuetifyjs/vuetify/commit/83ed8d4))\n* **theme:** provideTheme current should use computedThemes ([#22987](https://github.com/vuetifyjs/vuetify/pull/22987))\n* **VDateInput:** derive display format from date adapter locale ([#22976](https://github.com/vuetifyjs/vuetify/pull/22976))\n* **VDateInput:** do not fill range on blur ([b7569fe](https://github.com/vuetifyjs/vuetify/commit/b7569fe))\n* **VAutocomplete:** don't trigger keydown listener during IME composition ([#22974](https://github.com/vuetifyjs/vuetify/pull/22974))\n* **VDataTable:** keep rows visible after hiding a column with a custom filter ([#22971](https://github.com/vuetifyjs/vuetify/pull/22971))\n* **VSelect/VAutocomplete/VCombobox:** respect `no-auto-scroll` ([adb2597](https://github.com/vuetifyjs/vuetify/commit/adb2597))\n* **rounded:** translate `2xl`, `3xl`, etc. to classes ([0ea03f4](https://github.com/vuetifyjs/vuetify/commit/0ea03f4))\n* **VOtpInput:** move focus correctly in RTL mode ([f0145aa](https://github.com/vuetifyjs/vuetify/commit/f0145aa))\n* **VDataTable:** apply text-align to columns with align 'start' ([02f5f81](https://github.com/vuetifyjs/vuetify/commit/02f5f81))\n* **locale:** correctly resolve Kurdish locale to RTL ([4782312](https://github.com/vuetifyjs/vuetify/commit/4782312))\n* **VBtn:** no letter-spacing for RTL locales ([3956c08](https://github.com/vuetifyjs/vuetify/commit/3956c08))\n\n### :books: Documentation\n\n* Add the [Vuetify0 1.0 announcement](/blog/announcing-vuetify0-v1/) ([#23025](https://github.com/vuetifyjs/vuetify/pull/23025)) and the [RC announcement](/blog/announcing-vuetify0-rc/) ([#22981](https://github.com/vuetifyjs/vuetify/pull/22981))\n* Update the roadmap and announce v3.13.0 as LTS ([8306637](https://github.com/vuetifyjs/vuetify/commit/8306637))\n* Trim outdated content and redirect LTS to the root domain ([e3fb29d](https://github.com/vuetifyjs/vuetify/commit/e3fb29d))\n* Add `/.well-known/security.txt` ([#23010](https://github.com/vuetifyjs/vuetify/pull/23010))\n* New VMenu examples ([#19710](https://github.com/vuetifyjs/vuetify/pull/19710)), VTreeview footer slot example, VDataTable fixed-footer example\n* Add a new 'silver' sponsor tier\n\n
\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nAugust turns back to features. The [v4.2.0 milestone](https://github.com/vuetifyjs/vuetify/milestone/90) is dated **September 1st** — the MD3 button alignment, VSlider's `pill` variant, VTimePicker keyboard controls, and VMaskInput's dynamic masks are all queued against it. Expect the v4.1 patch line to keep running underneath it.\n\nWith Vuetify0 1.0 out and its API locked under semver for the whole 1.x line, the framework's **theme**, **locale**, and **date** migrations onto v0 have a target that will not move. Those branches have been waiting since spring. They now have something stable to land against.\n\n* [Vuetify 3.13](/getting-started/release-notes/?version=v3.13.0) is the last v3 minor — if you are still on v3, the [LTS clock](/introduction/long-term-support/) runs to July 27th, 2027\n* [Vuetify0 1.0](/blog/announcing-vuetify0-v1/) is stable and untagged — `pnpm add @vuetify/v0`\n* [pkg-diff](https://pkg-diff.vuetifyjs.com/) is live, with a CLI if you drive it from an agent\n\n::: warning\n\n**Vuetify needs your support.** Every contribution funds ongoing work on the framework and the ecosystem tools around it. If your team relies on Vuetify, point your organization at [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider).\n\n:::\n\nVuetify is and always will be free and open source. If your team builds on the framework, Vuetify0, the MCP server, the CLI, the Nuxt module, or the design systems coming behind them, [Vuetify One](https://one.vuetifyjs.com/) and [GitHub Sponsors](https://github.com/sponsors/johnleider) are the most direct ways to help.\n\nNearly four years of Vuetify 3 ended this month, and a lot of you have been here for all of it. Thank you to everyone who filed an issue, opened a PR, or tested a release candidate in July.\n\nSee you in August!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://community.vuetifyjs.com), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/june-2025-update.md":"---\nlayout: blog\nmeta:\n title: June 2025 Update\n description: June delivered progress on the VHotkey component, VCommandPalette development, component stability, and developer-experience improvements across Vuetify.\n keywords: Vuetify June 2025, VHotkey, VCommandPalette, Vuetify 0, component stability, developer experience\n---\n\n\n\n# June 2025 Update\n\nThis month is packed full of exciting updates and progress across the Vuetify ecosystem.\n\n---\n\n🖊️ John Leider • 📅 July 7th, 2025\n\n\n\n---\n\n## Powering Forward\n\nJune delivered substantial progress on developer experience enhancements, component stability improvements, and platform ecosystem expansion. Our team focused on shipping major new composables, refining core components, and strengthening the development workflow with significant updates to hotkey management, command palette functionality, and comprehensive bug fixes across the framework.\n\nWe also hosted an engaging Q&A session with [me](https://github.com/johnleider/), where our community shared their questions and valuable insights. We were thrilled to connect directly with our users and gather feedback that will help shape the future direction of the framework. Don't worry if you missed this session, we have exciting webinars planned for the coming months as well!\n\n::: success\n\nCool example of the month: [VBites](https://play.vuetifyjs.com/playgrounds/7Ksitg) by [Jacek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n* [Spotlight: Vuetify Studio](#spotlight-vuetify-studio)\n* [Framework](#framework)\n * [VHotkey Component and useHotkey Composable](#vhotkey-component-and-usehotkey-composable)\n * [New Component Development](#new-component-development)\n* [Ecosystem Updates](#ecosystem-updates)\n * [Vuetify Documentation](#vuetify-documentation)\n * [Vuetify One](#vuetify-one)\n * [Vuetify Bin](#vuetify-bin)\n* [Q&A and Upcoming Webinars](#qa-and-upcoming-webinars)\n* [Sneak Peek: Vuetify 0](#sneak-peek-vuetify-0)\n* [June 2025 Changelog](#june-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nJune continued our steady release cadence with several updates addressing bugs and introducing enhancements. These releases focused on component stability and developer experience improvements. View the complete list of changes in the [Full Changelog](#june-2025-changelog).\n\n![Hero image for June release notes](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/june-2025-hero-asdfasdf.png \"June release notes hero image\"){ height=200 }\n\n**Details:**\n\n* [v3.8.8](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.8.8)\n* [v3.8.9](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.8.9)\n* [v3.8.10](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.8.10)\n* [v3.8.11](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.8.11)\n* [v3.9.0-beta.0](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.9.0-beta.0)\n* [v3.9.0-beta.1](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.9.0-beta.1)\n\n---\n\n## Spotlight: Vuetify Studio { #spotlight-vuetify-studio }\n\n**Did you know?** [Vuetify Studio](https://studio.vuetifyjs.com/) is our comprehensive development platform that often goes unnoticed by the broader community. Studio provides a complete ecosystem for Vuetify development, including:\n\n* **Interactive Component Playground**: Test and experiment with components in real-time\n* **Code Generation Tools**: Quickly prototype layouts and component configurations\n* **Collaborative Development**: Share and iterate on designs with team members\n* **Integration Testing**: Validate component behavior across different scenarios\n\n\n\nWe're continuously expanding Studio's capabilities to support modern development workflows, and we encourage the community to explore how Studio can accelerate your Vuetify development process.\n\n**Details:**\n\n* [Vuetify Studio](https://studio.vuetifyjs.com/)\n\n## Framework\n\nThere are multiple new components in development with some of that functionality reaching Labs this month. Below are some of the highlights.\n\n### VHotkey Component and useHotkey Composable\n\nThis month marked a significant milestone with the completion and pre-release of our [VHotkey component](https://vuetifyjs.com/en/components/hotkeys/) and `useHotkey` composable system. After extensive development and iteration, these tools are now available in Labs for testing and feedback as we work toward their stable release.\n\n**VHotkey Component Features:**\n\n* **Inline Mode**: Use the component inline with text and it automatically inherits font size and baseline styling\n* **New Variants**: Introduction of the Combined Variant that displays hotkeys in a Chip with Label format\n* **Consolidated Parser**: VHotkey and useHotkey now share the same parsing logic and key alias mapping for consistent behavior\n* **Platform Awareness**: New `platform` prop allows forcing the component to display Mac vs PC hotkey conventions\n* **Enhanced Customization**: Added `prefix` and `postfix` props for better integration flexibility\n\n![Hero image for VHotkey component](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/hotkeys.png \"VHotkey component hero image\"){ height=220 }\n\n**useHotkey Composable Features:**\n\n* **Dynamic Options**: Options accept `maybeRefs`, enabling dynamic hotkey configuration changes\n* **Shared Logic**: Unified codebase with VHotkey component ensures consistency\n* **Comprehensive Documentation**: Detailed examples and usage patterns available\n\nThis functionality serves as a critical building block for the upcoming VCommandPalette component, providing developers with robust keyboard shortcut management that works seamlessly across different platforms and use cases. While currently in Labs, we encourage the community to test these components and provide feedback as we work toward their stable release.\n\n**Details:**\n\n* [VHotkey Component Documentation](https://vuetifyjs.com/en/components/hotkeys/)\n* [useHotkey Composable Documentation](https://vuetifyjs.com/en/features/hotkey/)\n\n### New Component Development\n\nWe have several new components in development that we are confident will enhance the Vuetify ecosystem and provide additional functionality for developers.\n\n**VMaskInput**: After vanishing in v2, masking is back in the library with enhanced input capabilities and new features.\n\n![Hero gif for VMaskInput component](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/vmaskinput.gif \"VMaskInput component hero gif\"){ height=280 }\n\n**VEditor**: Early development phase for a new editor component, expanding Vuetify's content creation capabilities.\n\n![Hero image for VEditor component](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/veditor.png \"VEditor component hero image\"){ height=220 }\n\n**VVideo**: Documentation improvements, Sass variable extraction, and volume component refinement.\n\n\n\n**VCommandPalette**: Ongoing development for a powerful command palette component, designed to enhance user interaction and streamline application workflows.{ height=150 }\n\n![Hero image for VCommandPalette component](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/vcommandpalette.png \"VCommandPalette component hero image\"){ height=370 }\n\n**Details:**\n\n* [VMaskInput P.R.](https://github.com/vuetifyjs/vuetify/pull/21519)\n* [VEditor P.R.](https://vuetifyjs.com/en/components/editor/)\n* [VVideo P.R.](https://github.com/vuetifyjs/vuetify/pull/21460)\n\n## Ecosystem Updates\n\nMultiple advancements were made across the Vuetify ecosystem to improve developer experience and platform capabilities.\n\n### Vuetify Documentation\n\n[Vuetify One subscribers](https://vuetifyjs.com/en/?one=subscribe) can now copy documentation pages as Markdown. This feature allows you to easily extract and reuse documentation content in your projects, enhancing collaboration and knowledge sharing within teams.\n\n![Vuetify documentation copy page as markdown](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/copy-page-as-markdown.png \"Vuetify documentation copy page as markdown\"){ height=220 }\n\nAll users can now save favorite search results in the Vuetify documentation. Just press `ctrl+k` or `cmd+k` to open the search bar, type your query, and click the star icon next to the search result you want to save. This feature allows you to quickly access frequently used documentation pages, improving your workflow and efficiency.\n\n![Vuetify documentation search favorites](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/docs-favorites.png \"Vuetify documentation search favorites\"){ height=300 }\n\n**Details:**\n\n* [Copy as Markdown Commit](https://github.com/vuetifyjs/vuetify/commit/dfd8eea1ebd28e6fde702c19b15a33af3620daa4)\n* [Save Search Favorites Commit](https://github.com/vuetifyjs/vuetify/commit/14d5e63f2760db84257f324cfa298a8ce9905903)\n\n### Vuetify One\n\nUpdated default interface to include links to various Vuetify ecosystem sites, making it easier for users to navigate and access resources.\n\n![Vuetify One Platform interface](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/one-quicklinks.png \"Vuetify One Platform interface\"){ height=300 }\n\n### Vuetify Bin\n\nBins now support **locking**. This new functionality prevents unwanted changes to shared code examples, ensuring that your collaborative work remains intact and consistent.\n\n![Vuetify Bin locking functionality](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/lock-bin.png \"Vuetify Bin locking functionality\"){ height=250 }\n\nThis feature will soon propagate to the [Vuetify Playground](https://play.vuetifyjs.com/) as well as [Vuetify Studio](https://studio.vuetifyjs.com/).\n\nIt's also now possible to access Bins saved while having an active Vuetify One subscription.\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n\n## Q&A and Upcoming Webinars { #qa-and-upcoming-webinars }\n\nJune featured successful community Q&A sessions that provided direct interaction between our core team and the developer community. The feedback and engagement we received were invaluable in shaping our development priorities and understanding real-world usage patterns.\n\n**Missed the Q&A Sessions?** Don't worry! We're planning a comprehensive webinar series launching in July. If you have valuable feedback, suggestions, or questions you'd like to see addressed, keep an eye out for our upcoming webinar announcements. These sessions will provide deep dives into Vuetify best practices, new feature demonstrations, and direct access to core team expertise.\n\nWe encourage community members to [share their input](https://community.vuetifyjs.com/) and help us make these educational sessions as valuable as possible for everyone.\n\n## Sneak Peek: Vuetify 0 { #sneak-peek-vuetify-0 }\n\n\n\nWe're excited to share an early glimpse into **Vuetify 0** (internally known as v0), our upcoming entry into the unstyled component and composable ecosystem. Building on our experience with Vuetify's component library, we're developing a new approach that delivers the same functionality and developer experience without built-in styling.\n\n**What This Means**: While unstyled components are certainly part of this initiative, Vuetify 0 represents something much more significant - we're publicly releasing our internal composables and framework building tooling. This includes the foundational utilities, patterns, and architectural components that power Vuetify itself, giving developers access to the same building blocks we use internally to create robust UI frameworks:\n\n```ts\nimport { useGroup } from '@vuetify/0'\nimport type { GroupItem, GroupTicket, GroupContext, GroupOptions } from '@vuetify/0'\n\ninterface StepItem extends GroupItem {\n title: string\n description?: string\n}\n\ninterface StepTicket extends GroupTicket {\n step: number\n}\n\ninterface StepOptions extends Omit {}\n\ninterface StepContext extends GroupContext {\n first: () => void\n last: () => void\n next: () => void\n prev: () => void\n step: (count: number) => void\n}\n\nconst options: StepOptions = {\n itemKey: 'step',\n itemValue: 'value',\n}\n\nexport function useStep (\n namespace: string,\n options?: StepOptions,\n) {\n const [\n useGroupContext,\n provideGroupContext,\n group,\n ] = useGroup(namespace, options)\n\n function first () { ... }\n function last () { ... }\n function next () { ... }\n function prev () { ... }\n function step (count: number) { ... }\n\n const context = {\n ...group,\n first,\n last,\n next\n prev,\n step,\n } as T\n\n return [\n useGroupContext,\n provideGroupContext,\n context,\n ]\n}\n```\n\nThis project is in early development as we explore the best path forward for providing developers with powerful, accessible, and feature-complete building blocks for custom implementations. We're taking time to ensure we deliver genuine value while maintaining the quality standards you expect from Vuetify.\n\nWe'll share more details as development progresses and look forward to community feedback on this new direction.\n\n## June 2025 Changelog\n\nExpand this section to see the detailed changelog for June 2025, including bug fixes and enhancements.\n\n
\n\n### :rocket: Features\n\n* **VDatePicker:** Disable months and years if not allowed ([#21466](https://github.com/vuetifyjs/vuetify/issues/21466))\n\n### :wrench: Bug Fixes\n\n* **date:** Keep `createDateRange` internal ([#21531](https://github.com/vuetifyjs/vuetify/issues/21531))\n* **date:** Week number for DST ([#21378](https://github.com/vuetifyjs/vuetify/issues/21378))\n* **icons:** Add missing aliases in presets ([#21521](https://github.com/vuetifyjs/vuetify/issues/21521))\n* **VBtn:** Allow text values for letter-spacing Sass variable ([#21602](https://github.com/vuetifyjs/vuetify/issues/21602))\n* **VBtn:** Correct letter-spacing compensation for RTL ([#21574](https://github.com/vuetifyjs/vuetify/issues/21574))\n* **VBtnToggle:** Buttons should be accessible despite overflow ([#21577](https://github.com/vuetifyjs/vuetify/issues/21577))\n* **VCarousel:** Avoid missing progress bar ([#21586](https://github.com/vuetifyjs/vuetify/issues/21586))\n* **VChip:** Disable close button of disabled chip ([#21512](https://github.com/vuetifyjs/vuetify/issues/21512))\n* **VDataTable:** Add missing ARIA label on footer text ([#21508](https://github.com/vuetifyjs/vuetify/issues/21508))\n* **VDataTable:** Columns are not keyboard-accessible ([#20939](https://github.com/vuetifyjs/vuetify/issues/20939))\n* **VDataTableColumn:** On tab focus also show sortable icon ([#21540](https://github.com/vuetifyjs/vuetify/issues/21540))\n* **VDatePicker:** Completely hide days not in weekdays array ([#21624](https://github.com/vuetifyjs/vuetify/issues/21624))\n* **VDatePicker:** Fix autoscroll ([#21556](https://github.com/vuetifyjs/vuetify/issues/21556))\n* **VDatePicker:** Reactive month and year ([#21563](https://github.com/vuetifyjs/vuetify/issues/21563))\n* **VFileInput, VFileUpload:** Handle folders drop ([#21495](https://github.com/vuetifyjs/vuetify/issues/21495))\n* **VList:** Set item value to item if primitive ([#21596](https://github.com/vuetifyjs/vuetify/issues/21596))\n* **VListGroup:** Use item value in ID with return-object ([#20595](https://github.com/vuetifyjs/vuetify/issues/20595))\n* **VNumberInput:** Fix endless increment ([#21610](https://github.com/vuetifyjs/vuetify/issues/21610))\n* **VNumberInput:** Focus after click handler executed ([#21217](https://github.com/vuetifyjs/vuetify/issues/21217))\n* **VOtpInput:** Autofocus on intersect ([#21582](https://github.com/vuetifyjs/vuetify/issues/21582))\n* **VOtpInput:** Trim clipboard text and update focus on finish ([#21342](https://github.com/vuetifyjs/vuetify/issues/21342))\n* **VSelect, VAutocomplete, VCombobox:** Open menu on icon click ([#21617](https://github.com/vuetifyjs/vuetify/issues/21617))\n* **VSelect:** Camelize props only for custom use ([#21544](https://github.com/vuetifyjs/vuetify/issues/21544))\n* **VSelect:** Convert all `itemProps` keys to camelCase ([#21518](https://github.com/vuetifyjs/vuetify/issues/21518))\n* **VSelect:** Reuse compact chip label style ([#21517](https://github.com/vuetifyjs/vuetify/issues/21517))\n* **VSlider:** Apply color to slider label ([#21538](https://github.com/vuetifyjs/vuetify/issues/21538))\n* **VSlider:** Correct step rounding for max value ([#21434](https://github.com/vuetifyjs/vuetify/issues/21434))\n* **VSpeedDial:** Avoid position glitch when reopening menu ([#21451](https://github.com/vuetifyjs/vuetify/issues/21451))\n* **VTabs:** Deselect tab when route is no longer active ([#21569](https://github.com/vuetifyjs/vuetify/issues/21569))\n* **VTextField:** Change order of events for checking input focus state ([#21136](https://github.com/vuetifyjs/vuetify/issues/21136))\n* **VWindow, VTabs:** Don't override cursor in VWindowItem ([#21138](https://github.com/vuetifyjs/vuetify/issues/21138))\n\n### :microscope: Code Refactoring\n\n* **VNumberInput:** Replace touch-action with pointercancel ([#21436](https://github.com/vuetifyjs/vuetify/issues/21436))\n\n### :test_tube: Labs\n\n* **VDateInput:** Use common date range parser ([#21450](https://github.com/vuetifyjs/vuetify/issues/21450))\n* **VFileUpload:** File name not passed correctly ([#21541](https://github.com/vuetifyjs/vuetify/issues/21541))\n* **VTimePicker:** Value not changing on wheel ([#21549](https://github.com/vuetifyjs/vuetify/issues/21549))\n* **VTreeview:** Avoid inaccessible items when overflow ([#21443](https://github.com/vuetifyjs/vuetify/issues/21443))\n* **VTreeview:** Stop click bubbling up on expand icon ([#21083](https://github.com/vuetifyjs/vuetify/issues/21083))\n\n
\n\n---\n\n## What's Next { #whats-next }\n\nJuly will focus on finalizing the `VCommandPalette` Labs release, expanding `VMaskInput` and `VEditor` component development, and continuing our documentation excellence initiative. We're also actively working on enhanced MCP integration features that allow you to create and access existing Vuetify Bin, Playground, Studio files; in addition to new Studio platform capabilities.\n\nThe team remains committed to delivering stable, performant components while expanding Vuetify's ecosystem to support modern development patterns. Our focus on developer experience, community feedback integration, and systematic improvement processes continues to drive meaningful progress each month.\n\nWe appreciate the community's continued engagement, feedback, and contributions that make these improvements possible. Keep building amazing applications with Vuetify, and don't forget to explore [Vuetify Studio](https://studio.vuetifyjs.com/) for an enhanced development experience.\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/eXubxyJ), and upcoming webinar series announcements.*\n","packages/docs/src/pages/en/blog/june-2026-update.md":"---\nlayout: blog\nmeta:\n title: June 2026 Update\n description: June started with Vuetify 4.1 stable release, followed by a bunch of regression fixes across two patch releases\n keywords: Vuetify June 2026, Vuetify 4.1 stable, VOverlay, Vuetify0 beta\n---\n\n\n\n# June 2026 Update\n\n**June was a stabilization month.** [v4.1.0](/getting-started/release-notes/?version=v4.1.0) shipped on June 2, with two patch releases after that. Most of the work went into the new overlay location strategy, fixing the placement bugs that only turned up once people were using VDialog in fullscreen mode. June was also when a security incident cost us our Discord server. No package, release, or user data was touched, but the community lost its home for a couple of weeks, and getting it back was a big part of the month. One small thing did come out of the drama — [pkg-diff](https://github.com/vuetifyjs/pkg-diff), a fast in-browser tool for diffing NPM packages (more on that [below](#security-focus)).\n\n![Hero image for June update](https://cdn.vuetifyjs.com/docs/images/blog/june-2026-update/june-hero.png \"June hero image\"){ height=112 }\n\n🖊️ Jacek Czarniecki • 📅 July 8th, 2026\n\n\n\n---\n\n## A month of settling in\n\nWhere May was a feature sprint, June was about making that work solid. **52 commits**, **two dozen fixes**, and **four releases**, with the stable [v4.1.0](/getting-started/release-notes/?version=v4.1.0) at the center. The new viewport/static location strategy that shipped with the minor turned out to be the month's main character — real-world usage surfaced a string of placement edge cases (iOS keyboards, `calc()` sizes, percentage boundaries, closing animations), and the two follow-up patches worked through them one by one. Meanwhile [Vuetify0](https://0.vuetifyjs.com/) settled into the [beta announced June 2](/blog/announcing-vuetify0-beta/), with its public API frozen and the road to v1 opening up.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Spotlight: Vuetify 4.1 Goes Stable](#vuetify-4-1)\n* [Framework Updates](#framework-updates)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [A side-effect of security focus](#security-focus)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [Product Updates](#product-updates)\n* [What's Next](#whats-next)\n * [Looking Further Ahead](#looking-ahead)\n\n---\n\n## Releases\n\nWe shipped **four framework releases**. [v4.0.9](/getting-started/release-notes/?version=v4.0.9) (June 2) was a small patch on the stable v4.0 line — an SSR fix for `VProgressLinear`, a `VNumberInput` control-state fix, and a focus-trap scroll fix. The same day, [v4.1.0](/getting-started/release-notes/?version=v4.1.0) went stable, finalizing the VSwitch MD3 work and folding in the late-May fixes. From there the month was patches: [v4.1.1](/getting-started/release-notes/?version=v4.1.1) (June 8) and [v4.1.2](/getting-started/release-notes/?version=v4.1.2) (June 16), each a round of fixes led by the overlay location strategy.\n\n\n\n### Key Improvements\n\n* **[Vuetify 4.1](/getting-started/release-notes/?version=v4.1.0)** — the first minor of the v4 line went stable on June 2\n* **[VSwitch](/components/switches/)** — MD3 alignment, a long awaited `size` prop, and a `square` nobody asked for, 😂 LOL, quite a mix\n* **[VCalendar](/components/calendars/)** — new `interval-highlight` for subtle row tint on mouse hover ([#22885](https://github.com/vuetifyjs/vuetify/pull/22885))\n* **[VExpansionPanels](/components/expansion-panels/)** — improved focus styles and a `hover` prop to opt-out of the hover effect ([#22827](https://github.com/vuetifyjs/vuetify/pull/22827))\n* **[VOverlay](/components/overlays/)** — a handful of location fixes after introducing edge snapping ([#22921](https://github.com/vuetifyjs/vuetify/pull/22921)), iOS keyboard attachment ([#22923](https://github.com/vuetifyjs/vuetify/pull/22923)), finished by restoring `calc()`/`min()`/`vw` support for sizing\n* **Forced-colors mode** — `VHeatmap` and `VHighlight` now render correctly for people relying on forced high-contrast override\n\nView the complete list of changes in the [Full Changelog](/getting-started/release-notes/).\n\n**Details:**\n\n* [v4.1.2](https://vuetifyjs.com/getting-started/release-notes/?version=v4.1.2)\n* [v4.1.1](https://vuetifyjs.com/getting-started/release-notes/?version=v4.1.1)\n* [v4.1.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.1.0)\n* [v4.0.9](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.9)\n\n---\n\n## Spotlight: Vuetify 4.1.0 release { #vuetify-4-1 }\n\n\n\n
\n\nMay opened [v4.1.0](/getting-started/release-notes/?version=v4.1.0) in beta; **on June 2 it went stable**. The release brought us four new components (`VHeatmap`, `VHighlight`, `VMonthPicker`, `VDateRangePicker`), already covered in [the previous blog post](/blog/may-2026-update/) and a broad wave of feature props across data tables, pickers, and overlays.\n\n**Details:**\n\n* [v4.1 Release Notes](/getting-started/release-notes/?version=v4.1.0)\n* [Roadmap](/introduction/roadmap/)\n\n---\n\n## Framework Updates\n\nThis month was deliberately feature-light — the team waited for feedback from users adopting latest version for new features and improvements.\n\n### Bug Fixes\n\nThe overlay location strategy introduced in v4.1 was the month's dominant fix theme. It's a powerful feature, and putting it in front of real layouts surfaced the placement edge cases you'd expect — most of them now closed.\n\n| Component | Fix | Version | PR / commit |\n|---------------------|-------------------------------------------------|---------|-----------------------------------------------------------|\n| **VProgressLinear** | Avoid `opacity:NaN` when rendering with SSR | v4.0.9 | [#22880](https://github.com/vuetifyjs/vuetify/pull/22880) |\n| **VNumberInput** | Keep both controls enabled when empty | v4.0.9 | [e0133c2](https://github.com/vuetifyjs/vuetify/commit/e0133c2) |\n| **focusTrap** | Prevent page scroll when capturing focus | v4.0.9 | [451e7c3](https://github.com/vuetifyjs/vuetify/commit/451e7c3) |\n| **VSelect** | Close menu when click lands inside host overlay | v4.1.1 | [7ed9a54](https://github.com/vuetifyjs/vuetify/commit/7ed9a54) |\n| **VSnackbar** | More reliable progress bar | v4.1.1 | [5e6fe60](https://github.com/vuetifyjs/vuetify/commit/5e6fe60) |\n| **VNumberInput** | Emit `change` when using controls and arrows | v4.1.1 | [2ab2509](https://github.com/vuetifyjs/vuetify/commit/2ab2509) |\n| **VTooltip** | Avoid stealing focus | v4.1.1 | [77d1a8a](https://github.com/vuetifyjs/vuetify/commit/77d1a8a) |\n| **VTable** | Apply background and border for `fixed-footer` | v4.1.1 | [ecabcc5](https://github.com/vuetifyjs/vuetify/commit/ecabcc5) |\n| **VMenu** | Prevent focus change during IME input | v4.1.1 | [#21008](https://github.com/vuetifyjs/vuetify/pull/21008) |\n| **VHeatmap** | Keep legend bar visible in forced-colors mode | v4.1.1 | [58e3e7d](https://github.com/vuetifyjs/vuetify/commit/58e3e7d) |\n| **VHighlight** | Support forced-colors mode | v4.1.1 | [067228c](https://github.com/vuetifyjs/vuetify/commit/067228c) |\n| **VOverlay** | Static location should snap to edges using CSS | v4.1.2 | [#22921](https://github.com/vuetifyjs/vuetify/pull/22921) |\n| **VOverlay** | Keep overlay attached with iOS keyboard open | v4.1.2 | [#22923](https://github.com/vuetifyjs/vuetify/pull/22923) |\n| **VOverlay** | Resolve `calc`/`min`/`vw` sizes to pixels | v4.1.2 | [bf105bf](https://github.com/vuetifyjs/vuetify/commit/bf105bf) |\n| **VDialog** | Clear inline styles when enabling fullscreen | v4.1.2 | [ea29378](https://github.com/vuetifyjs/vuetify/commit/ea29378) |\n| **VTreeview** | Apply `hide-actions` to group nodes | v4.1.2 | [e5555ae](https://github.com/vuetifyjs/vuetify/commit/e5555ae) |\n| **VPagination** | Predictable length behavior in flex container | v4.1.2 | [#22912](https://github.com/vuetifyjs/vuetify/pull/22912) |\n| **theme** | Async transition should return a Promise | v4.1.2 | [904f949](https://github.com/vuetifyjs/vuetify/commit/904f949) |\n\n### In Development\n\n**Deferred to v4.2** — keeping v4.1 tight meant several in-flight initiatives slipped past the minor and now sit against the [v4.2.0 milestone](https://github.com/vuetifyjs/vuetify/milestone/90). Most are feature PRs that were already open before v4.1 went stable:\n\n* **[VTreeview](/components/treeview/)** — a set of accessibility improvements: more aria attributes and correct keyboard navigation\n* **[VSlider](/components/sliders/)** — a `pill` variant to match MD3 ([#22699](https://github.com/vuetifyjs/vuetify/pull/22699))\n* **[VBreadcrumbs](/components/breadcrumbs/)** — improved accessibility and a collapse menu ([#22358](https://github.com/vuetifyjs/vuetify/pull/22358))\n* **[VMaskInput](/components/mask-inputs/)** — multiple and dynamic mask resolution ([#22501](https://github.com/vuetifyjs/vuetify/pull/22501))\n\n---\n\n## A side-effect of security focus { #security-focus }\n\nIf you somehow missed the [deep dive into the incident](/about/incidents/2026-06-nyven-infostealer/), a long story short is that Discord failed us by shipping insecure client (2FA is a joke) and having no backup, no \"security cooldown\" nor tools to recover the server after the takeover. After a shaky two weeks, we had set up a new one and get things back on track. All community members are welcome to re-join.\n\n**No Vuetify package, source, release, CI pipeline, or user data was affected.** But the team still took the opportunity to rotate the security tokens and strenghten the internal policies. One interesting side-effect of \"what if\" planning was a new project [pkg-diff](https://github.com/vuetifyjs/pkg-diff). It appears despite constant problems around NPM packages security, we had not found even one decent tool to diff packages - some were slow, other limited, so we created our own and since it is computing everything in-browser - arguably better than what NPMX shipped lately, everyone is free to use it :)\n\n![pkg-diff screenshot](https://cdn.vuetifyjs.com/docs/images/blog/june-2026-update/pkg-diff-screenshot.png)\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\nJune was Vuetify0's first month in beta. The [beta was announced on June 2](/blog/announcing-vuetify0-beta/) with the public API frozen, so the work shifted from adding primitives to refining the ones that shipped — edge cases, documentation, and the road to **v1.0 in July**. With a frozen target now in place, the **theme**, **locale**, and **date** v0 migrations inside the framework have something stable to build against.\n\n\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n**Details:**\n\n* [Announcing the Vuetify0 Beta](/blog/announcing-vuetify0-beta/)\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v0play](https://v0play.vuetifyjs.com)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\n\n\n
\n\nThe docs picked up a round of housekeeping in June — SEO length limits enforced on page meta titles and descriptions, unified CDN links, and a corrected MD2 typography snippet in the upgrade guide. The Discord invite link across the docs was updated to point at the new community server.\n\n### Nuxt Module\n\nThe [Nuxt Module](https://github.com/vuetifyjs/nuxt-module) continued its march toward a stable v1, with [Andrei Elkin](https://github.com/AndreyYolkin) keeping up the package-resolution and reliability work carried over from May.\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nJuly finishes the year's first arc. **Vuetify0** reaches **v1.0**, ending the beta and giving the framework a stable foundation to migrate onto. **Vuetify 4.1** continues its patch cadence, with the `rules` promotion and more overlay and treeview polish already queued. And with a v0 v1 in hand, the **theme**, **locale**, and **date** migrations move from planning to real work.\n\n* [Vuetify 4.1](/getting-started/release-notes/?version=v4.1.0) is stable — try the new components and labs promotions in your project today\n* The [Vuetify0 beta](/blog/announcing-vuetify0-beta/) has frozen its public API ahead of v1 — try it via [v0play](https://v0play.vuetifyjs.com)\n* Join the rebuilt community server at [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n### Looking Further Ahead { #looking-ahead }\n\nThe theme for the rest of the year hasn't changed: **finishing what we started**.\n\n**A clean finish for labs**: our roadmap commitments for the remainder of 2026 stay narrowed to one outcome — **by November 1st, 2026, labs will be drained**. Every component still incubating will either graduate into core or be retired; nothing will be left in an \"unfinished\" state. June's `rules` promotion is one more step down that list.\n\n**A community-driven issue board**: we're building a curated view into the issue board where the community can surface and vote on what matters most, opening a direct line into what we tackle next. More as it takes shape.\n\n**A modernized docs experience (later this year)**: we're planning a significant UX upgrade to the Vuetify docs, porting over features introduced first to the [Vuetify0 documentation](https://0.vuetifyjs.com/). For a preview of where we're headed, spend some time in the [v0 docs](https://0.vuetifyjs.com/) — the navigation, search, and interactive code samples are an early taste of what's coming.\n\n::: warning\n\n**Vuetify needs your support.** OpenCollective trend slowly picks up and we appreciate every contribution and support for ongoing work on the framework and ecosystem tools. If your team relies on Vuetify, please educate your boss about importance of sponsoring OSS projects like Vuetify. You can point them to [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution keeps Vuetify afloat.\n\n:::\n\nVuetify is and always will be free and open source. If your team builds on the framework, the v0 beta, the MCP, the CLI, the Nuxt module, the ESLint plugin, or any of the design systems coming behind them, your support directly funds continued development. [Vuetify One](https://one.vuetifyjs.com/) and [GitHub Sponsors](https://github.com/sponsors/johnleider) are the most direct ways to help.\n\nTo everyone who checked in, shared the verified invite, and helped us rebuild the community server after this month's incident — thank you. It meant a lot.\n\nThank you for being part of the Vuetify community. See you in July!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://community.vuetifyjs.com), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/march-2026-update.md":"---\nlayout: blog\nmeta:\n title: March 2026 Update\n description: March shipped 7 Vuetify patches while Vuetify0 reached v0.2.0 with 7 new headless components, the Nuxt Module beta, 10 CLI releases, and ESLint v4 rules.\n keywords: Vuetify March 2026, Vuetify0 v0.2.0, VCommandPalette, VProgress, Nuxt Module beta, Vuetify CLI, ESLint v4 migration\n---\n\n\n\n# March 2026 Update\n\n**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.\n\n![Hero image for March update](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/march-hero.png \"March hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 April 16th, 2026\n\n\n\n---\n\n## Acceleration\n\n**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](https://github.com/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](https://github.com/AndreyYolkin) completely overhauled the Nuxt module and pushed the CLI through 10 releases. And the Vuetify → Vuetify0 refactor that [began last month](https://vuetifyjs.com/blog/february-2026-update/) is now actively migrating core composables—observer, display, theme, and locale.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Ecosystem Spotlight: Nuxt Module v1.0.0 Beta](#nuxt-module-beta)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Tooling and Migration](#tooling-migration)\n* [Vuetify MCP v0.6.0 and Playground Tools](#vuetify-mcp)\n* [Product Updates](#product-updates)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [March 2026 Changelog](#march-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nMarch 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.\n\n![March Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/releases.png \"March Releases Banner\")\n\n### Key Improvements\n\n* **[CSS font variables](/styles/text-and-typography/)** — CSS custom properties for font customization (v4.0.1)\n* **[Icon sets](/features/icon-fonts/)** — More UnoCSS-based iconsets + Material Symbols iconset (v4.0.1, v4.0.2)\n* **[VDataTable](/components/data-tables/)** — Expose `prevPage`, `nextPage`, `setPage` in bottom slot (v4.0.2)\n* **[VCommandPalette](/components/command-palettes/)** — `closeOnSelect` prop and `before-select` event (v4.0.2 Labs)\n* **[VProgress](/components/progress/)** — New progress component (v4.0.3 Labs)\n* **[VVideo](/components/videos/)** — `src-object` prop for WebRTC and `hide-progress-bar` prop (v4.0.3 Labs)\n* **[VFileUpload](/components/file-uploads/)** — Integrated with VInput and split internal logic (v3.12.2/v4.0.1 Labs)\n* **[VMaskInput](/components/masked-inputs/)** — Accept escaped characters in mask patterns (v4.0.3 Labs)\n\nView the complete list of changes in the [Full Changelog](#march-2026-changelog).\n\n**Details:**\n\n* [v4.0.4](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.4)\n* [v4.0.3](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.3)\n* [v4.0.2](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.2)\n* [v4.0.1](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.1)\n* [v3.12.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.4)\n* [v3.12.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.3)\n* [v3.12.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.2)\n\n---\n\n## Ecosystem Spotlight: Nuxt Module v1.0.0 Beta { #nuxt-module-beta }\n\nThe 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](https://github.com/AndreyYolkin). This is the module's biggest change since its initial release.\n\n### What's New { #nuxt-whats-new }\n\n**Monorepo Conversion** — The module was restructured as a monorepo, with cleaner package boundaries and improved maintainability.\n\n**Vuetify 4 Support** — Full compatibility with v4's CSS layers and SASS integration. The `disableVuetifyStyles` option was removed in favor of `styles: 'none'`.\n\n**Experimental SASS Caching** — In-memory caching for SASS compilation reduces cold-start times in development.\n\n**Revamped Documentation** — Documentation was completely overhauled alongside the structural changes.\n\n**Beta Stability** — With alpha.2 through beta.2 all landing in March, the module is on track for a stable v1.0.0 release.\n\n[userquin](https://github.com/userquin) contributed configuration and documentation improvements.\n\n**Details:**\n\n* [Nuxt Module GitHub Repository](https://github.com/vuetifyjs/nuxt-module)\n* [Major overhaul PR#353](https://github.com/vuetifyjs/nuxt-module/pull/353)\n* [v1.0.0-beta.2](https://github.com/vuetifyjs/nuxt-module/releases/tag/v1.0.0-beta.2)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nMarch's 31 merged PRs focused on new features for the v4 branch, targeted bug fixes, and the beginning of the Vuetify → v0 migration.\n\n### New Features\n\n**[CSS font variables](/styles/text-and-typography/)** — CSS custom properties for font-family, font-size, and font-weight, enabling runtime font customization without SASS (v4.0.1, [#22666](https://github.com/vuetifyjs/vuetify/pull/22666))\n\n![CSS font variables](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/css-font-variables.png \"CSS custom properties for runtime font customization\")\n\n**[Icon sets](/features/icon-fonts/)** — Additional UnoCSS-based iconsets shipped in v4.0.1 ([#22668](https://github.com/vuetifyjs/vuetify/pull/22668)), followed by Material Symbols via UnoCSS in v4.0.2 ([#22680](https://github.com/vuetifyjs/vuetify/pull/22680))\n\n**[VDataTable](/components/data-tables/)** — `prevPage`, `nextPage`, and `setPage` exposed in the bottom slot for custom pagination controls (v4.0.2, [#22681](https://github.com/vuetifyjs/vuetify/pull/22681))\n\n**[VCommandPalette](/components/command-palettes/)** — `closeOnSelect` prop and `before-select` event for fine-grained selection control, plus a name fix for the inner component (v4.0.2 Labs, [#22634](https://github.com/vuetifyjs/vuetify/pull/22634))\n\n![VCommandPalette](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/command-palette.png \"VCommandPalette with search and command list\")\n\n**[VFileUpload](/components/file-uploads/)** — Integrated with VInput and split internal logic for better composability and form integration (v3.12.2/v4.0.1 Labs, [#22637](https://github.com/vuetifyjs/vuetify/pull/22637))\n\n**[VProgress](/components/progress/)** — New progress component added to Labs (v4.0.3, [#22682](https://github.com/vuetifyjs/vuetify/pull/22682))\n\n**[VVideo](/components/videos/)** — `src-object` prop for MediaStream/WebRTC playback and `hide-progress-bar` prop for cleaner embeds (v4.0.3 Labs, [#22670](https://github.com/vuetifyjs/vuetify/pull/22670), [#22636](https://github.com/vuetifyjs/vuetify/pull/22636))\n\n**Details:**\n\n* [CSS font variables PR#22666](https://github.com/vuetifyjs/vuetify/pull/22666)\n* [VCommandPalette closeOnSelect PR#22634](https://github.com/vuetifyjs/vuetify/pull/22634)\n* [VDataTable pagination slot PR#22681](https://github.com/vuetifyjs/vuetify/pull/22681)\n* [VProgress PR#22682](https://github.com/vuetifyjs/vuetify/pull/22682)\n* [VVideo src-object PR#22670](https://github.com/vuetifyjs/vuetify/pull/22670)\n\n### Bug Fixes\n\n| Component | Fix | Version | PR |\n|-----------|-----|---------|----|\n| **VSelect** | Fix screenreader navigation to select options | v3.12.2 / v4.0.1 | [#22602](https://github.com/vuetifyjs/vuetify/pull/22602) |\n| **VOtpInput** | Handle deletion via `onBeforeinput` for mobile compatibility | v4.0.1 | [#22657](https://github.com/vuetifyjs/vuetify/pull/22657) |\n| **VSnackbar** | Opaque background for transparent variants | v4.0.1 | [#22646](https://github.com/vuetifyjs/vuetify/pull/22646) |\n| **hotkey** | Delimiter alias fixes without ambiguity | v3.12.3 / v4.0.2 | [#22635](https://github.com/vuetifyjs/vuetify/pull/22635) |\n| **VNumberInput** | Prevent input changes when readonly | v3.12.3 / v4.0.2 | [#22692](https://github.com/vuetifyjs/vuetify/pull/22692) |\n| **VDataTable** | Respect `disableSort` prop for sortable headers | v4.0.2 | [#22684](https://github.com/vuetifyjs/vuetify/pull/22684) |\n| **rounded** | Add missing `md` size | v4.0.2 | [#22679](https://github.com/vuetifyjs/vuetify/pull/22679) |\n| **router** | Replace deprecated `next()` for Vue Router v5 compatibility | v3.12.3 / v4.0.2 | [#22643](https://github.com/vuetifyjs/vuetify/pull/22643) |\n| **VTimePicker** | Keep hour value when changing AM/PM | v3.12.3 / v4.0.2 | — |\n| **hotkey** | Resilient sequence parsing | v4.0.3 | [#22704](https://github.com/vuetifyjs/vuetify/pull/22704) |\n| **VExpansionPanels** | Apply `rounded` only to first and last panel when closed | v4.0.3 | — |\n| **VTooltip** | Correct selector for non-interactive tooltips | v4.0.3 | — |\n| **VMaskInput** | Accept escaped characters in mask patterns | v4.0.3 Labs | [#22727](https://github.com/vuetifyjs/vuetify/pull/22727) |\n| **VFileUpload** | Fix adding/replacing files with dropzone click | v3.12.4 / v4.0.4 Labs | [#22741](https://github.com/vuetifyjs/vuetify/pull/22741) |\n| **rules** | Fix type resolution for custom validation rules | v4.0.4 Labs | [#22701](https://github.com/vuetifyjs/vuetify/pull/22701) |\n| **VSelect** | Prevent brief error state when clicking a menu item | v4.0.4 | — |\n| **VField** | Label transition on pages with CSS zoom | v3.12.4 / v4.0.4 | — |\n\n**Details:**\n\n* [VSelect a11y PR#22602](https://github.com/vuetifyjs/vuetify/pull/22602)\n* [hotkey aliases PR#22635](https://github.com/vuetifyjs/vuetify/pull/22635)\n* [hotkey resilient PR#22704](https://github.com/vuetifyjs/vuetify/pull/22704)\n* [VMaskInput PR#22727](https://github.com/vuetifyjs/vuetify/pull/22727)\n\n### In Development\n\nSeveral PRs merged in March are pending their first release, alongside features still in active development:\n\n#### Merged, Pending Release { #merged-pending-release }\n\n* **rounded: arbitrary values** — Accept any valid CSS border-radius value beyond predefined presets ([#22721](https://github.com/vuetifyjs/vuetify/pull/22721))\n* **VProgressLinear split variant** — MD3-aligned split variant for buffer/indeterminate states ([#22662](https://github.com/vuetifyjs/vuetify/pull/22662))\n* **VOverlay** — `location` and `origin` props reworked to be actually useful ([#22720](https://github.com/vuetifyjs/vuetify/pull/22720))\n* **VCommandPalette viewport strategy** — Full-viewport location strategy for command palettes ([#22698](https://github.com/vuetifyjs/vuetify/pull/22698))\n* **SSR** — Avoid errors when rendering with latest Vue ([#22764](https://github.com/vuetifyjs/vuetify/pull/22764))\n* **CSS zoom** — Coordinate mismatch fix for VColorPicker, ripple, and VCalendar ([#22774](https://github.com/vuetifyjs/vuetify/pull/22774))\n\n#### VSparkline Markers and Tooltips\n\nInteractive markers and hover tooltips for data visualization.\n\n#### VSlider Pill Variant\n\nA new `pill` variant for VSlider aligned with Material Design 3's rounded slider track design.\n\n#### VMorphingIcon\n\nAnimated icon transitions using SVG path morphing—carrying over from February, now nearing completion.\n\n#### V0 Migration Core Composables\n\nThe Vuetify → Vuetify0 refactor is now migrating core systems. Open PRs cover:\n\n* **Theme** — Migrate the entire theme system to v0 ([#22765](https://github.com/vuetifyjs/vuetify/pull/22765))\n* **Locale/RTL** — Delegate locale and RTL management to v0 ([#22753](https://github.com/vuetifyjs/vuetify/pull/22753))\n* **Display** — Migrate breakpoints to v0's `createBreakpoints` ([#22710](https://github.com/vuetifyjs/vuetify/pull/22710))\n* **Date** — Delegate to v0's `createDate` runtime ([#22768](https://github.com/vuetifyjs/vuetify/pull/22768))\n\nObserver composables were already [migrated in March](https://github.com/vuetifyjs/vuetify/pull/22672).\n\n**Details:**\n\n* [rounded arbitrary PR#22721](https://github.com/vuetifyjs/vuetify/pull/22721)\n* [VProgressLinear split PR#22662](https://github.com/vuetifyjs/vuetify/pull/22662)\n* [VSparkline PR#22748](https://github.com/vuetifyjs/vuetify/pull/22748)\n* [VSlider pill PR#22699](https://github.com/vuetifyjs/vuetify/pull/22699)\n* [VMorphingIcon PR#22639](https://github.com/vuetifyjs/vuetify/pull/22639)\n* [Theme migration PR#22765](https://github.com/vuetifyjs/vuetify/pull/22765)\n* [Locale/RTL migration PR#22753](https://github.com/vuetifyjs/vuetify/pull/22753)\n\n---\n\n## Tooling and Migration { #tooling-migration }\n\n### Vuetify CLI\n\n\n\n
\n\nThe 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](https://github.com/AndreyYolkin) with template contributions from [J-Sek](https://github.com/J-Sek).\n\n**Vite 8 Support** — Templates updated for Vite 8 compatibility.\n\n**Vue Router 5 Migration** — Templates migrated from unplugin-vue-router to Vue Router 5.\n\n**MCP CLI Integration** — A standalone MCP CLI command for setting up the Vuetify MCP server directly from the CLI.\n\n**Preset System** — Enhanced user presets with improved UX, plus new Nuxt and UnoCSS presets alongside the existing TailwindCSS preset.\n\n**TypeScript 6.0** — Template fixes to avoid typechecking errors with TS 6.0.\n\n**Dynamic Project Docs** — `create` now generates project-specific documentation.\n\n**Details:**\n\n* [Vuetify CLI GitHub Repository](https://github.com/vuetifyjs/cli)\n* [v1.2.0-beta.1](https://github.com/vuetifyjs/cli/releases/tag/v1.2.0-beta.1)\n* [TS 6.0 fix PR#11](https://github.com/vuetifyjs/cli/pull/11)\n* [Nuxt/UnoCSS presets PR#7](https://github.com/vuetifyjs/cli/pull/7)\n\n### ESLint Plugin for Vuetify\n\n\n\n
\n\n[J-Sek](https://github.com/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.\n\n**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](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/125)).\n\n**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](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/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.\n\n**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 `` to `
`), replacement props, or custom messages ([#127](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/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.\n\n**ESLint 10 Support** — Compatibility with the latest ESLint major version, contributed by [jssuttles](https://github.com/jssuttles) ([#124](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/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](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/119)).\n\n**Details:**\n\n* [ESLint Plugin GitHub Repository](https://github.com/vuetifyjs/eslint-plugin-vuetify)\n* [v2.7.2](https://github.com/vuetifyjs/eslint-plugin-vuetify/releases/tag/v2.7.2)\n* [v2.7.0](https://github.com/vuetifyjs/eslint-plugin-vuetify/releases/tag/v2.7.0)\n* [v2.6.0](https://github.com/vuetifyjs/eslint-plugin-vuetify/releases/tag/v2.6.0)\n\n### ESLint Config\n\n\n\n
\n\nThe 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.\n\n**`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](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.3.5)).\n\n**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.\n\n**Details:**\n\n* [ESLint Config GitHub Repository](https://github.com/vuetifyjs/eslint-config-vuetify)\n* [v4.4.0](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.4.0)\n* [v4.3.5](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.3.5)\n\n---\n\n## Vuetify MCP v0.6.0 and Playground Tools { #vuetify-mcp }\n\n\n\n
\n\nThe 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.\n\n### v0.6.0 { #mcp-v060 }\n\n**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.)\n\n**Bug Fixes** — Corrected composable names and missing exports in v0 documentation; fixed GitHub URL branch references from `main` to `master`.\n\n### Playground CRUD (Pending Release) { #mcp-playground-crud }\n\n[PR#19](https://github.com/vuetifyjs/mcp/pull/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.\n\n### Setup\n\nInstall with the Vuetify CLI:\n\n::: tabs\n\n```bash [pnpm]\npnpm dlx @vuetify/cli add mcp\n```\n\n```bash [npm]\nnpx @vuetify/cli add mcp\n```\n\n```bash [yarn]\nyarn dlx @vuetify/cli add mcp\n```\n\n```bash [bun]\nbunx @vuetify/cli add mcp\n```\n\n:::\n\nOr configure manually:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [v0.6.0 Release](https://github.com/vuetifyjs/mcp/releases/tag/v0.6.0)\n* [Playground CRUD PR#19](https://github.com/vuetifyjs/mcp/pull/19)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\n\n\n
\n\n[Henry Aviles](https://github.com/Haviles04) shipped a **new dashboard** for Vuetify One, releasing v0.1.0, v3.1.0, and v3.1.1 in March.\n\n![Vuetify One](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/vuetify-one.png \"Vuetify One — Power the Future of Vuetify\")\n\n**Details:**\n\n* [Vuetify One](/one/)\n* [Vuetify One Dashboard](https://one.vuetifyjs.com/)\n* [New dashboard PR#49](https://github.com/vuetifyjs/one/pull/49)\n\n### Vuetify Bin\n\n\n\n
\n\n[Henry Aviles](https://github.com/Haviles04) added **markdown preview** support—bins can now render markdown content alongside code. The update also includes cursor tracking.\n\n![Vuetify Bin Markdown Preview](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/bin-markdown-preview.png \"Vuetify Bin rendering markdown content\")\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n* [Markdown preview PR#142](https://github.com/vuetifyjs/bin/pull/142)\n* [Cursor tracking PR#140](https://github.com/vuetifyjs/bin/pull/140)\n\n### Vuetify Play\n\n\n\n
\n\n[J-Sek](https://github.com/J-Sek) fixed a cursor positioning bug that caused edits to jump while typing ([#51](https://github.com/vuetifyjs/play/pull/51)), and [Henry Aviles](https://github.com/Haviles04) updated the default visibility behavior.\n\n![Vuetify Play](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/vuetify-play.png \"Vuetify Play — online playground with live preview\")\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\nMarch 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.\n\n![Vuetify0 Progress](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/v0.png \"Vuetify0 March Progress\")\n\n### New Components\n\nSeven headless components shipped in March, each with a composable layer and compound component pattern:\n\n* **[Switch](https://0.vuetifyjs.com/components/forms/switch/)** — Toggle switch with Root, Track, and Thumb compound components ([#142](https://github.com/vuetifyjs/0/pull/142))\n* **[Slider](https://0.vuetifyjs.com/components/forms/slider/)** — Range slider with Track, Range, and Thumb parts, backed by a dedicated composable ([#143](https://github.com/vuetifyjs/0/pull/143))\n* **[Treeview](https://0.vuetifyjs.com/components/disclosure/treeview/)** — Hierarchical tree built on createNested with expand, select, and activate ([#144](https://github.com/vuetifyjs/0/pull/144))\n* **[Splitter](https://0.vuetifyjs.com/components/semantic/splitter/)** — Resizable pane layouts with Root, Panel, and Handle components ([#145](https://github.com/vuetifyjs/0/pull/145))\n* **[Input](https://0.vuetifyjs.com/components/forms/input/)** — Headless form input with validation integration ([#162](https://github.com/vuetifyjs/0/pull/162))\n* **[Button](https://0.vuetifyjs.com/components/actions/button/)** — Headless button with disabled, loading, readonly, and passive states, plus Button.Group for toggle selection ([#166](https://github.com/vuetifyjs/0/pull/166))\n* **[Combobox](https://0.vuetifyjs.com/components/forms/combobox/)** — Autocomplete-style input with createCombobox composable for filtering and selection ([#172](https://github.com/vuetifyjs/0/pull/172))\n\n### New Composables\n\n* **[useNotifications](https://0.vuetifyjs.com/composables/plugins/use-notifications/)** — Full notification lifecycle management with registry/queue architecture, read/archive/snooze states, and Novu/Knock adapters ([#146](https://github.com/vuetifyjs/0/pull/146))\n* **[useRules](https://0.vuetifyjs.com/composables/plugins/use-rules/)** — Validation composable with alias-based rules and adapters for Zod and Yup ([#140](https://github.com/vuetifyjs/0/pull/140))\n* **[useRaf](https://0.vuetifyjs.com/composables/system/use-raf/)** — Scope-safe `requestAnimationFrame` composable with automatic cleanup ([#165](https://github.com/vuetifyjs/0/pull/165))\n* **[createModel](https://0.vuetifyjs.com/composables/selection/create-model/)** — Shared selection state foundation bridging createRegistry, createSelection, and createSlider ([#148](https://github.com/vuetifyjs/0/pull/148))\n\n### Other Improvements\n\n* **createRegistry** — `move()` method for reordering registered items ([#149](https://github.com/vuetifyjs/0/pull/149))\n* **useHotkey** — Symbol aliases and AST-based hotkey string parser for more reliable parsing ([#150](https://github.com/vuetifyjs/0/pull/150), [#155](https://github.com/vuetifyjs/0/pull/155))\n* **MaybeRef** — Accept getters alongside refs for more flexible API signatures ([#141](https://github.com/vuetifyjs/0/pull/141))\n* **toReactive** — Performance refactor for proxy creation ([#170](https://github.com/vuetifyjs/0/pull/170))\n* **Playground** — Version selector and settings modal for easier experimentation ([#163](https://github.com/vuetifyjs/0/pull/163))\n\n### Coming Next\n\n* **[createDataGrid](https://github.com/vuetifyjs/0/pull/174)** — Data grid composable for advanced table layouts\n* **[Paper Design System](https://github.com/vuetifyjs/0/pull/167)** — The Emerald design system foundation for v0's visual layer\n* **[v0play](https://v0play.vuetifyjs.com)** — Expanding the editor and tutorial system with more examples and guided lessons\n\n::: info\n\nThe 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.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v0.2.0 Release Notes](https://github.com/vuetifyjs/0/releases/tag/v0.2.0)\n* [Combobox PR#172](https://github.com/vuetifyjs/0/pull/172)\n* [Button PR#166](https://github.com/vuetifyjs/0/pull/166)\n* [Input PR#162](https://github.com/vuetifyjs/0/pull/162)\n\n---\n\n## March 2026 Changelog\n\nThe following section provides an overview of the changes made in March 2026, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* v4.0.1: CSS font variables, additional UnoCSS iconsets, VSnackbar and VSelect a11y fixes\n* v4.0.2: Material Symbols iconset, VDataTable pagination slot, VCommandPalette Labs improvements\n* v4.0.3: VProgress and VVideo Labs components, VMaskInput escaped characters, hotkey and VExpansionPanels fixes\n* v4.0.4: VFileUpload dropzone fix, rules type resolution, VSelect brief error state fix\n* v3.x: bugfix-only releases mirroring the v4 fixes above\n\n**Expand** this section to see the detailed changelog for March 2026:\n\n
\nMarch 2026 Full Changelog\n\n### v3.12.2 (2026-03-04)\n\n**:wrench: Bug Fixes**\n\n* **VDataTable:** improvements for sorting in mobile mode ([c3b3278](https://github.com/vuetifyjs/vuetify/commit/c3b3278))\n* **VDataTable:** keep fixed cells opaque when loading ([35e1e2c](https://github.com/vuetifyjs/vuetify/commit/35e1e2c))\n* **VSelect:** fix screenreader navigation to select options ([#22602](https://github.com/vuetifyjs/vuetify/issues/22602)) ([f906336](https://github.com/vuetifyjs/vuetify/commit/f906336))\n* **VTimeline:** keep dot border when using numeric dot size ([9511bc3](https://github.com/vuetifyjs/vuetify/commit/9511bc3))\n\n**:test_tube: Labs**\n\n* **VFileUpload:** `hide-browse` should hide divider as well\n* **VFileUpload:** expose `controlRef` for internal ``\n* **VFileUpload:** append instead of replacing files when `multiple`\n* **VFileUpload:** integrate VInput & split internal logic ([#22637](https://github.com/vuetifyjs/vuetify/issues/22637)) ([251adb0](https://github.com/vuetifyjs/vuetify/commit/251adb0))\n\n---\n\n### v4.0.1 (2026-03-04)\n\n**:rocket: Features**\n\n* **icons:** add more iconsets based on UnoCSS ([#22668](https://github.com/vuetifyjs/vuetify/issues/22668)) ([6c8bea5](https://github.com/vuetifyjs/vuetify/commit/6c8bea5))\n* **styles:** CSS variables for fonts ([#22666](https://github.com/vuetifyjs/vuetify/issues/22666)) ([84495a3](https://github.com/vuetifyjs/vuetify/commit/84495a3))\n\n**:wrench: Bug Fixes**\n\n* **theme:** put theme stylesheet in body when loaded with unhead ([2475a28](https://github.com/vuetifyjs/vuetify/commit/2475a28))\n* **VBadge:** correct props.dotSize fallback ([a71f396](https://github.com/vuetifyjs/vuetify/commit/a71f396))\n* **VColorPicker:** align sliders with controls ([0d1ce90](https://github.com/vuetifyjs/vuetify/commit/0d1ce90))\n* **VDataTable:** improvements for sorting in mobile mode ([54affe1](https://github.com/vuetifyjs/vuetify/commit/54affe1))\n* **VDataTable:** keep fixed cells opaque when loading ([ddca6ca](https://github.com/vuetifyjs/vuetify/commit/ddca6ca))\n* **VGrid:** correct mapping for grid gap x/y ([65b4278](https://github.com/vuetifyjs/vuetify/commit/65b4278))\n* **VOtpInput:** handle deletion via onBeforeinput for mobile compatibility ([#22657](https://github.com/vuetifyjs/vuetify/issues/22657)) ([2f8a4f9](https://github.com/vuetifyjs/vuetify/commit/2f8a4f9))\n* **VPagination:** suppress browser spacing ([a6b7b93](https://github.com/vuetifyjs/vuetify/commit/a6b7b93))\n* **VSelect:** fix screenreader navigation to select options ([#22602](https://github.com/vuetifyjs/vuetify/issues/22602)) ([6c962b7](https://github.com/vuetifyjs/vuetify/commit/6c962b7))\n* **VSlideGroup:** don't read dom attributes in computed() ([a51b313](https://github.com/vuetifyjs/vuetify/commit/a51b313))\n* **VSlider:** reduce affix margins ([18af2d2](https://github.com/vuetifyjs/vuetify/commit/18af2d2))\n* **VSnackbar:** opaque background for transparent variants ([#22646](https://github.com/vuetifyjs/vuetify/issues/22646)) ([e83fa88](https://github.com/vuetifyjs/vuetify/commit/e83fa88))\n* **VTimeline:** keep dot border when using numeric dot size ([6764c95](https://github.com/vuetifyjs/vuetify/commit/6764c95))\n\n**:test_tube: Labs**\n\n* **VFileUpload:** `hide-browse` should hide divider as well\n* **VFileUpload:** expose `controlRef` for internal ``\n* **VFileUpload:** append instead of replacing files when `multiple`\n* **VFileUpload:** integrate VInput & split internal logic ([#22637](https://github.com/vuetifyjs/vuetify/issues/22637)) ([027ab86](https://github.com/vuetifyjs/vuetify/commit/027ab86))\n\n---\n\n### v3.12.3 (2026-03-12)\n\n**:wrench: Bug Fixes**\n\n* **hotkey:** add delimiter aliases without delimiter ambiguity ([#22635](https://github.com/vuetifyjs/vuetify/issues/22635)) ([0e6a9c6](https://github.com/vuetifyjs/vuetify/commit/0e6a9c6))\n* **router:** replace `next()` deprecated in Vue Router v5 ([#22643](https://github.com/vuetifyjs/vuetify/issues/22643)) ([4e93846](https://github.com/vuetifyjs/vuetify/commit/4e93846))\n* **VNavigationDrawer:** fully clip list item text in rail mode ([ab42b13](https://github.com/vuetifyjs/vuetify/commit/ab42b13))\n* **VNumberInput:** prevent input changes when readonly ([#22692](https://github.com/vuetifyjs/vuetify/issues/22692)) ([995989c](https://github.com/vuetifyjs/vuetify/commit/995989c))\n* **VSelect/VAutocomplete/VCombobox:** let focus leave to other fields ([3d33e2f](https://github.com/vuetifyjs/vuetify/commit/3d33e2f))\n* **VTimePicker:** keep hour value when changing AM/PM ([2c9cb0a](https://github.com/vuetifyjs/vuetify/commit/2c9cb0a))\n\n**:test_tube: Labs**\n\n* **VAvatarGroup:** ❗ change the `limit` behavior to cover overflow item ([5aefdac](https://github.com/vuetifyjs/vuetify/commit/5aefdac))\n\n---\n\n### v4.0.2 (2026-03-12)\n\n**:rocket: Features**\n\n* **icons:** add Material Symbols iconset via UnoCSS ([#22680](https://github.com/vuetifyjs/vuetify/issues/22680)) ([6c463c1](https://github.com/vuetifyjs/vuetify/commit/6c463c1))\n* **VDataTable:** expose prevPage, nextPage, setPage in bottom slot ([#22681](https://github.com/vuetifyjs/vuetify/issues/22681)) ([4d1aa79](https://github.com/vuetifyjs/vuetify/commit/4d1aa79))\n\n**:wrench: Bug Fixes**\n\n* **hotkey:** add delimiter aliases without delimiter ambiguity ([#22635](https://github.com/vuetifyjs/vuetify/issues/22635)) ([a639698](https://github.com/vuetifyjs/vuetify/commit/a639698))\n* **rounded:** add missing \"md\" size ([#22679](https://github.com/vuetifyjs/vuetify/issues/22679)) ([47cffdd](https://github.com/vuetifyjs/vuetify/commit/47cffdd))\n* **router:** replace `next()` deprecated in Vue Router v5 ([#22643](https://github.com/vuetifyjs/vuetify/issues/22643)) ([87c4129](https://github.com/vuetifyjs/vuetify/commit/87c4129))\n* **VDataTable:** respect disableSort prop for sortable header ([#22684](https://github.com/vuetifyjs/vuetify/issues/22684)) ([767b0e8](https://github.com/vuetifyjs/vuetify/commit/767b0e8))\n* **VFileInput:** correct VField ref type ([41a6063](https://github.com/vuetifyjs/vuetify/commit/41a6063))\n* **VGrid:** avoid warning about no-gutters being deprecated ([5d8ec63](https://github.com/vuetifyjs/vuetify/commit/5d8ec63))\n* **VNavigationDrawer:** fully clip list item text in rail mode ([6b448cd](https://github.com/vuetifyjs/vuetify/commit/6b448cd))\n* **VNumberInput:** prevent input changes when readonly ([#22692](https://github.com/vuetifyjs/vuetify/issues/22692)) ([2b1ed0d](https://github.com/vuetifyjs/vuetify/commit/2b1ed0d))\n* **VSelect/VAutocomplete/VCombobox:** let focus leave to other fields ([51196cf](https://github.com/vuetifyjs/vuetify/commit/51196cf))\n* **VTextarea:** correct VField ref type ([0d689aa](https://github.com/vuetifyjs/vuetify/commit/0d689aa))\n* **VTimePicker:** keep hour value when changing AM/PM ([b030df8](https://github.com/vuetifyjs/vuetify/commit/b030df8))\n\n**:test_tube: Labs**\n\n* **VAvatarGroup:** change the `limit` behavior to cover overflow item ([e580ebc](https://github.com/vuetifyjs/vuetify/commit/e580ebc))\n* **VCommandPalette:** add closeOnSelect prop and before-select event ([#22634](https://github.com/vuetifyjs/vuetify/issues/22634)) ([d534f79](https://github.com/vuetifyjs/vuetify/commit/d534f79))\n* **VCommandPalette:** correct name of the inner component ([bfed30c](https://github.com/vuetifyjs/vuetify/commit/bfed30c))\n\n---\n\n### v4.0.3 (2026-03-19)\n\n**:wrench: Bug Fixes**\n\n* **hotkey:** resilient sequence parsing ([#22704](https://github.com/vuetifyjs/vuetify/issues/22704)) ([cae1cea](https://github.com/vuetifyjs/vuetify/commit/cae1cea))\n* **md2:** restore correct global rounding ([6d1ef04](https://github.com/vuetifyjs/vuetify/commit/6d1ef04))\n* **VDataTable:** reactive items from `expanded` with `return-object` ([5d7af2c](https://github.com/vuetifyjs/vuetify/commit/5d7af2c))\n* **VExpansionPanels:** apply `rounded` only to the first and last panel when closed ([dbc7421](https://github.com/vuetifyjs/vuetify/commit/dbc7421))\n* **VGrid:** restore `no-gutters` instead of mapping to \"compact\" ([947d7d5](https://github.com/vuetifyjs/vuetify/commit/947d7d5))\n* **VSkeletonLoader:** less jitter when scrolling on slow device ([468ba314](https://github.com/vuetifyjs/vuetify/commit/468ba314))\n* **VTooltip:** correct selector for non-interactive tooltips ([15b3cbd](https://github.com/vuetifyjs/vuetify/commit/15b3cbd))\n\n**:test_tube: Labs**\n\n* **VMaskInput:** accept escaped characters in mask ([#22727](https://github.com/vuetifyjs/vuetify/issues/22727)) ([a5d1116](https://github.com/vuetifyjs/vuetify/commit/a5d1116))\n* **VProgress:** create new component ([#22682](https://github.com/vuetifyjs/vuetify/issues/22682)) ([122cdeb](https://github.com/vuetifyjs/vuetify/commit/122cdeb))\n* **VVideo:** add `hide-progress-bar` prop ([#22636](https://github.com/vuetifyjs/vuetify/issues/22636)) ([0e5a2cb](https://github.com/vuetifyjs/vuetify/commit/0e5a2cb))\n* **VVideo:** add `src-object` prop for MediaStream/WebRTC ([#22670](https://github.com/vuetifyjs/vuetify/issues/22670)) ([575e7c5](https://github.com/vuetifyjs/vuetify/commit/575e7c5))\n\n---\n\n### v3.12.4 (2026-03-25)\n\n**:wrench: Bug Fixes**\n\n* **VField:** label transition on page with zoom ([6246a96](https://github.com/vuetifyjs/vuetify/commit/6246a96))\n* **VTimePicker:** avoid loading all CSS utilities ([884e5dc](https://github.com/vuetifyjs/vuetify/commit/884e5dc))\n\n**:test_tube: Labs**\n\n* **VFileUpload:** adding/replacing files with dropzone click ([#22741](https://github.com/vuetifyjs/vuetify/issues/22741)) ([86f3568](https://github.com/vuetifyjs/vuetify/commit/86f3568))\n\n---\n\n### v4.0.4 (2026-03-25)\n\n**:wrench: Bug Fixes**\n\n* **VCol:** correct types for `offset-*` props ([1cdd9c4](https://github.com/vuetifyjs/vuetify/commit/1cdd9c4))\n* **VField:** label transition on page with zoom ([1fcad6b](https://github.com/vuetifyjs/vuetify/commit/1fcad6b))\n* **VSelect:** prevent brief error state when clicking a menu item ([7fec2d4](https://github.com/vuetifyjs/vuetify/commit/7fec2d4))\n* **VTimePicker:** avoid loading all CSS utilities ([015da52](https://github.com/vuetifyjs/vuetify/commit/015da52))\n\n**:test_tube: Labs**\n\n* **rules:** type resolution for custom rules ([#22701](https://github.com/vuetifyjs/vuetify/issues/22701)) ([053b605](https://github.com/vuetifyjs/vuetify/commit/053b605))\n* **VFileUpload:** adding/replacing files with dropzone click ([#22741](https://github.com/vuetifyjs/vuetify/issues/22741)) ([eb95c9e](https://github.com/vuetifyjs/vuetify/commit/eb95c9e))\n\n
\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nApril 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.\n\nOn 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.\n\n* The [Vuetify MCP server](https://github.com/vuetifyjs/mcp) now supports playground management—try creating a playground from your editor\n* [J-Sek's TailwindCSS guide](https://vuetifyjs.com/blog/building-with-vite-and-tailwindcss/) covers the recommended v4 + Tailwind setup\n\nVuetify is and always will be free and open source. If your team relies on the framework, consider supporting continued development through [Vuetify One](https://one.vuetifyjs.com/) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution helps us ship features like v0, the Nuxt Module, and migration tooling faster.\n\nThank you for being part of the Vuetify community. See you in April!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/may-2025-update.md":"---\nlayout: blog\nmeta:\n title: May 2025 Update\n description: May delivered significant progress on MCP, VDateInput enhancements, VNumberInput improvements, and ecosystem-wide improvements across Vuetify.\n keywords: Vuetify May 2025, Model Context Protocol, VDateInput, VNumberInput, Vuetify ecosystem\n---\n\n\n\n# May 2025 Update\n\nThis month brings exciting advancements across the Vuetify ecosystem, with major strides in AI integration, component refinements, and developer experience.\n\n---\n\n🖊️ John Leider • 📅 June 6th, 2025\n\n\n\n---\n\n## Expanding Horizons\n\nMay 2025 has been a month of significant progress for Vuetify, with key developments that enhance the framework's capabilities and developer experience. From the official release of [Vuetify MCP](https://github.com/vuetifyjs/mcp) (Model Context Protocol) to substantial improvements in core components like [VDateInput](https://vuetifyjs.com/components/date-inputs/); this month has set the stage for exciting future innovations.\n\n::: success\n\nCool example of the month: [VTreeview File structure](https://play.vuetifyjs.com/playgrounds/AbH9-w) by [Jacek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n- [Releases](#releases)\n- [Official @vuetify/mcp Release](#official-vuetifymcp-release)\n - [MCP Vuetify API Keys](#mcp-vuetify-api-keys)\n- [Framework](#framework)\n - [VDateInput Enhancements](#vdateinput-enhancements)\n - [VNumberInput](#vnumberinput)\n - [New Labs Component: VColorInput](#new-labs-component-vcolorinput)\n- [Ecosystem updates](#ecosystem-updates)\n \n - [Vuetify Bin](#vuetify-bin)\n - [Vuetify Issues Next in Testing](#vuetify-issues-next-in-testing)\n - [Vuetify Play Enhancements](#vuetify-play-enhancements)\n - [Vuetify ESLint Config](#vuetify-eslint-config)\n- [May 2025 Changelog](#may-2025-changelog)\n- [What's Next](#whats-next)\n\n---\n\n## Releases\n\nMay continued our steady release cadence with several patch updates addressing bugs and introducing minor enhancements. These releases focused on stability and performance improvements, ensuring that Vuetify remains a reliable foundation for your applications.\n\n![Hero image for latest release notes](https://cdn.vuetifyjs.com/docs/images/blog/may-2025-update/may-2025-release-note.png \"Latest release notes hero image\")\n\n**Details:**\n\n- [v3.8.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.4)\n- [v3.8.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.5)\n- [v3.8.6](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.6)\n- [v3.8.7](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.7)\n\n## Official @vuetify/mcp Release { #official-vuetifymcp-release }\n\nAfter months of development and anticipation, we're excited to announce that **@vuetify/mcp** is officially publicly available!\n\n\n\nThis implementation of the [Model Context Protocol](https://modelcontextprotocol.io/introduction) represents a fundamental shift in how developers can interact with Vuetify through AI-powered tools. Now you can provide up-to-date context for features, components, and best practices directly to AI applications, enhancing the accuracy and relevance of AI-generated code.\n\nThe Model Context Protocol (MCP) standardizes how applications provide context to LLMs, functioning like a \"USB-C port for AI applications.\"\n\nSetting up MCP is as simple as running the following in your terminal:\n\n```bash\nnpx -y @vuetify/mcp config\n```\n\nThis single command configures MCP for your development environment, giving AI tools instant access to up-to-date Vuetify context.\n\nOur implementation ensures that AI tools have access to the most up-to-date Vuetify documentation, components, and best practices, eliminating the frustration of outdated or incorrect AI-generated code.\n\nRecent additions to @vuetify/mcp include:\n\n- Improved installation process (one command installation) using `npx -y @vuetify/mcp config`\n- New tools for accessing release notes, directives, frequently asked questions, and more\n- Up next: Application upgrade between major versions\n\n\n\nThis release marks just the beginning of our MCP journey. We're actively working on expanding its capabilities and integrations, with a focus on making Vuetify development more intuitive and efficient than ever before.\n\n### MCP Vuetify API Keys\n\nLater in June, we'll be introducing a new API key system for MCP managed through Vuetify One. We will be rolling out special **primer** prompts that super charge how agents interact with Vuetify MCP for our Vuetify One subscribers.\n\n**Details:**\n\n- [@vuetify/mcp GitHub repository](https://github.com/vuetifyjs/mcp)\n- [Model Context Protocol documentation](https://modelcontextprotocol.io/introduction)\n\n## Framework\n\nWe continue to make improvements to the core framework, focusing on resolving bugs, iterating on Labs components, and preparing for the next minor release, v3.9.0, which is scheduled for June 2025. Here are a few highlights:\n\n### VDateInput Enhancements\n\nMay brought substantial improvements to several core components, with VDateInput receiving particular attention. The component now features enhanced parsing capabilities, improved validation, and more flexible configuration options. The spotlight for this month is on the [VDateInput](https://vuetifyjs.com/components/date-inputs/).\n\n\n\nFor details on other changes, please check the [May 2025 Changelog](#may-2025-changelog).\n\n**Details:**\n\n- [VDateInput input-format PR #21221](https://github.com/vuetifyjs/vuetify/pull/21221)\n- [VDateInput menu v-model PR #21298](https://github.com/vuetifyjs/vuetify/pull/21298)\n- [VDateInput validationValue PR #21408](https://github.com/vuetifyjs/vuetify/pull/21408)\n- [VDateInput common parser PR #21450](https://github.com/vuetifyjs/vuetify/pull/21450)\n- [VDateInput disable months/years PR #21466](https://github.com/vuetifyjs/vuetify/pull/21466)\n\n### VNumberInput\n\nThis month also saw multiple updates to the [VNumberInput](https://vuetifyjs.com/components/number-inputs/) component, including:\n\n- Improved append inner icon alignment\n- Enhanced touch pointer capture on controls\n- Better extraction of numbers from pasted text\n\n\n\n**Details:**\n\n- [VNumberInput inner spacing PR #21389](https://github.com/vuetifyjs/vuetify/pull/21389)\n- [VNumberInput touch pointer capture PR #21436](https://github.com/vuetifyjs/vuetify/pull/21436)\n- [VNumberInput paste text extraction PR #21263](https://github.com/vuetifyjs/vuetify/pull/21263)\n\n### New Labs Component: VColorInput { #new-labs-component-vcolorinput }\n\nThis month also saw the introduction of a new [VColorInput](https://vuetifyjs.com/components/color-inputs/) component in the Labs section. This component provides an intuitive interface for color selection and input, featuring integration with color pickers and text-based hex input. As a Labs component, VColorInput is available for testing and feedback as we refine its API and functionality.\n\nBasic usage is simple:\n\n```html\n\n\n\n```\n\n\n\nThe component supports both picker and text input modes, making it flexible for different use cases.\n\n**Details:**\n\n- [VColorInput introduction PR #20623](https://github.com/vuetifyjs/vuetify/pull/20623)\n\n## Ecosystem updates\n\nThe broader Vuetify ecosystem saw significant advancements in May, with improvements in developer tooling and infrastructure. These updates collectively enhance the developer experience and set the stage for future innovations.\n\n\n\n### Vuetify Bin\n\nYou can now choose a language for your code snippets in Vuetify Bin, improving syntax highlighting and code organization. This enhancement makes it easier to share and collaborate on code examples with proper language-specific formatting.\n\n\n\n### Vuetify Play Enhancements\n\nVuetify Play continues to evolve with new features and improvements that make it an even more powerful tool for exploring and experimenting with Vuetify components.\n\n\n\nKey enhancements to Vuetify Play include:\n\n- Added New File Explorer\n- Added Export-to-Vite functionality\n\nThese improvements make Vuetify Play more versatile and user-friendly, enabling developers to more effectively explore, test, and share Vuetify components and configurations.\n\n**Details:** [Vuetify Play](https://play.vuetifyjs.com/)\n\n### Vuetify Issues Next in Testing\n\nWe've published the new issue generator for testing, providing a new interface for creating and managing GitHub issues. Please drop us a line in [Discord](https://community.vuetifyjs.com/) if you have any feedback or suggestions.\n\n**Details:** [Issues-next deployment](https://issues-next.vuetifyjs.com/)\n\n### Vuetify ESLint Config\n\nv4.0.0 of the Vuetify ESLint config is now available, providing updated linting rules and configurations that align with the latest Vuetify standards and best practices. This major version includes improved TypeScript support and enhanced component-specific rules. The config is automatically included when [Creating a new project](https://vuetify.new/) and is recommended for all Vuetify projects.\n\n**Key improvements:**\n\n- Enhanced TypeScript integration\n- Updated component-specific linting rules\n- Better compatibility with modern JavaScript standards\n- Improved accessibility checks\n\n## May 2025 Changelog\n\nExpand this section to see the detailed changelog for May 2025, including bug fixes and enhancements.\n\n
\n\n### 🛠️ Bug Fixes\n\n- **VAutocomplete:** Re-evaluate dirty on external change [#21344](https://github.com/vuetifyjs/vuetify/issues/21344)\n- **VBottomNavigation:** Set inline margin to auto [#21357](https://github.com/vuetifyjs/vuetify/issues/21357)\n- **VDataTable:** Shift-click toggles only selectable rows [#21334](https://github.com/vuetifyjs/vuetify/issues/21334)\n- **VDataTableServer/Virtual:** Add generic headers type [#21327](https://github.com/vuetifyjs/vuetify/issues/21327)\n- **VDialog:** Focus on open only with scrim or retainFocus [#21343](https://github.com/vuetifyjs/vuetify/issues/21343)\n- **VField:** Prevent tab focus on clear icon [#19528](https://github.com/vuetifyjs/vuetify/issues/19528)\n- **VFileInput/VFileUpload:** Fix drop not calling change function [#21182](https://github.com/vuetifyjs/vuetify/issues/21182)\n- **VMenu:** Position relative to `visualViewport` when not zoomed [#21462](https://github.com/vuetifyjs/vuetify/issues/21462)\n- **VNumberInput:** Adjust inner spacing [#21389](https://github.com/vuetifyjs/vuetify/issues/21389)\n- **VNumberInput:** Capture touch pointer on controls [#21436](https://github.com/vuetifyjs/vuetify/issues/21436)\n- **VNumberInput:** Extract number from pasted text [#21263](https://github.com/vuetifyjs/vuetify/issues/21263)\n- **VOverlay:** Validate target positioning [#21350](https://github.com/vuetifyjs/vuetify/issues/21350)\n- **VPagination:** Adapt button width for large values [#21139](https://github.com/vuetifyjs/vuetify/issues/21139)\n- **VSelect:** Keyboard match multiple items with same prefix [#21419](https://github.com/vuetifyjs/vuetify/issues/21419)\n- **VSelect:** Prevent selection on lookup in multiple mode [#21418](https://github.com/vuetifyjs/vuetify/issues/21418)\n- **VSnackbarQueue:** Prevent infinite recursion in message type [#21410](https://github.com/vuetifyjs/vuetify/issues/21410)\n- **VTable:** Remove border radius with top/bottom [#21320](https://github.com/vuetifyjs/vuetify/issues/21320) [#21321](https://github.com/vuetifyjs/vuetify/issues/21321)\n- **VTextField:** Reset field on clear [#21310](https://github.com/vuetifyjs/vuetify/issues/21310)\n- **VTooltip:** Disable transition when set to false [#21268](https://github.com/vuetifyjs/vuetify/issues/21268)\n\n### 🧪 Labs\n\n- **validation:** Resolve global rules [#21267](https://github.com/vuetifyjs/vuetify/issues/21267)\n- **VColorInput:** Introduced new component [#20623](https://github.com/vuetifyjs/vuetify/issues/20623)\n- **VDateInput:** Accept value on hidden picker [#21273](https://github.com/vuetifyjs/vuetify/issues/21273)\n- **VDateInput:** Add `input-format` prop [#21221](https://github.com/vuetifyjs/vuetify/issues/21221)\n- **VDateInput:** Add `update-on` prop [#21249](https://github.com/vuetifyjs/vuetify/issues/21249)\n- **VDateInput:** Expose menu as `v-model` [#21298](https://github.com/vuetifyjs/vuetify/issues/21298)\n- **VDateInput:** Reset model to \\[] when multiple [#21299](https://github.com/vuetifyjs/vuetify/issues/21299)\n- **VDateInput:** Sync placeholder and locale [#21409](https://github.com/vuetifyjs/vuetify/issues/21409)\n- **VDateInput:** Validation sync with `modelValue` [#21408](https://github.com/vuetifyjs/vuetify/issues/21408)\n- **VTimePicker:** Fix SSR hydration mismatch [#21355](https://github.com/vuetifyjs/vuetify/issues/21355)\n\n### 🔄 Reverts\n\n- Revert fix for **VAutocomplete** dirty state change [#21392](https://github.com/vuetifyjs/vuetify/issues/21392)\n\n### 🧩 Code Refactoring\n\n- Resolve directives directly [#21413](https://github.com/vuetifyjs/vuetify/issues/21413)\n- Use `clamp()` utility function [commit](https://github.com/vuetifyjs/vuetify/commit/6784ba7aae029c3e25dd92197c5b5d19feb43430)\n\n
\n\n---\n\n## What's Next { #whats-next }\n\nJune is all about shipping. MCP gets API keys and primer prompts, v3.9.0 lands with the features we've been building, and we'll start showing off more of the new theming work in the release blog post coming next week. VDateInput will likely graduate from Labs soon, and we've got some performance improvements in the pipeline that I'm excited about.\n\nUntil next month!\n","packages/docs/src/pages/en/blog/may-2026-update.md":"---\nlayout: blog\nmeta:\n title: May 2026 Update\n description: May shipped Vuetify 4.1 — seven labs promotions, four new components, and a wave of fixes across four releases, with Vuetify0 racing toward its own beta.\n keywords: Vuetify May 2026, Vuetify 4.1 Ascendant, labs promotion, VHeatmap, VHighlight, VMonthPicker, VDateRangePicker, Vuetify0 drag and drop, createSortable, createKanban\n---\n\n\n\n# May 2026 Update\n\n**May was a feature-focused sprint.** With Vuetify 4 stable since February, we spent the month building out the first minor — and on May 21 that work opened [v4.1.0](/getting-started/release-notes/?version=v4.1.0). The whole month ran at full throttle, working through a long backlog of features and fixes we had lined up for v4.1: **seven components promoted out of labs**, four brand-new ones, and a broad sweep of new props and bug fixes across the framework. Four releases shipped over the month, while Vuetify0 ran in parallel toward its own beta.\n\n![Hero image for May update](https://cdn.vuetifyjs.com/docs/images/blog/may-2026-update/may-hero.png \"May hero image\"){ height=112 }\n\n🖊️ Jacek Czarniecki • 📅 June 5th, 2026\n\n\n\n---\n\n## A release chock-full of goodies\n\nMay was our busiest framework month of the year so far, and nearly all of it pointed at one goal: shipping v4.1. **89 commits**, **34 features**, **19 fixes**, and **4 releases**, with [v4.1.0](/getting-started/release-notes/?version=v4.1.0) at the center. Rather than spreading ourselves across the ecosystem, we put the energy into clearing the framework backlog — graduating labs components that had earned their place, finishing half-built features, and dealing with the fixes that had to land before the minor. The effort shows up in the numbers: open issues dropped from 436 at the start of May to 386 by the 31st — and zooming out, the backlog is down 22% over the last three months. Meanwhile [Vuetify0](https://0.vuetifyjs.com/) wrapped up its alpha work with a headless drag-and-drop family and a testing push that set up the [beta announced June 2](/blog/announcing-vuetify0-beta/).\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Spotlight: Vuetify 4.1](#vuetify-4-1)\n* [Framework Updates](#framework-updates)\n * [New Components](#new-components)\n * [Out of Labs](#out-of-labs)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [Product Updates](#product-updates)\n* [May 2026 Changelog](#may-2026-changelog)\n* [What's Next](#whats-next)\n * [Looking Further Ahead](#looking-ahead)\n\n---\n\n## Releases\n\nMay shipped **four framework releases**. [v4.0.7](/getting-started/release-notes/?version=v4.0.7) (May 8) was a patch with seven bug fixes. The feature work then opened the [v4.1.0](/getting-started/release-notes/?version=v4.1.0) minor — a first drop on May 21 carried the labs promotions and new components, and a May 28 follow-up focused on data table accessibility. A [v4.0.8](/getting-started/release-notes/?version=v4.0.8) patch (May 29) shipped a round of fixes on the stable v4.0 line — the same fixes that merge forward into v4.1.\n\n\n\n### Key Improvements\n\n* **[Vuetify 4.1](/getting-started/release-notes/?version=v4.1.0)** — first minor since 4.0.0, with seven labs promotions and four new components\n* **[VHeatmap](/components/heatmaps/)** — new component for calendar/grid heatmaps (v4.1)\n* **[VHighlight](/components/highlights/)** — new component for highlighting matched text (v4.1)\n* **[VMonthPicker](/components/month-pickers/) / [VDateRangePicker](/components/date-pickers/)** — new date components (v4.1)\n* **[VFileUpload](/components/file-upload/), [VDateInput](/components/date-inputs/), [VColorInput](/components/color-inputs/), [VIconBtn](/components/icon-buttons/), [VPicker](/components/pickers/), [VStepperVertical](/components/vertical-steppers/), [VPullToRefresh](/components/pull-to-refresh/)** — promoted from labs to core\n* **[VSparkline](/components/sparklines/)** — interactive markers, a vertical guideline, and hover tooltips (v4.1)\n* **[VOtpInput](/components/otp-input/)** — field grouping, a11y improvements, and emoji support (v4.1)\n* **[VOverlay](/components/overlays/) / [VCommandPalette](/components/command-palette/)** — viewport location strategy for precise placement (v4.1)\n\nView the complete list of changes in the [Full Changelog](#may-2026-changelog).\n\n**Details:**\n\n* [v4.1.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.1.0)\n* [v4.0.8](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.8)\n* [v4.0.7](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.7)\n\n---\n\n## Spotlight: Vuetify 4.1 (Ascendant) { #vuetify-4-1 }\n\n\n\n
\n\nAfter February's stable [Vuetify 4.0.0](/blog/february-2026-update/) and a string of patches, **May opened the first minor of the v4 line**. [v4.1.0](/getting-started/release-notes/?version=v4.1.0) is a feature release rather than a fix release — its theme is graduating components that proved themselves in labs, adding new ones, and expanding data table and date picker functionality.\n\nThe headline is volume. **Seven components moved out of labs** into core in a single release, and **four entirely new components** joined the framework. Alongside them came a wave of feature props across data tables, pickers, overlays, and the theme system — the breadth you'd expect from a minor, not a patch.\n\nThe work shipped in two drops in May — May 21 and May 28 — with the later one dedicated almost entirely to data table and table accessibility.\n\n**Details:**\n\n* [v4.1 Release Notes](/getting-started/release-notes/?version=v4.1.0)\n* [Roadmap](/introduction/roadmap/)\n\n---\n\n## Framework Updates\n\n### New Components\n\nFour new components landed in v4.1:\n\n**[VHeatmap](/components/heatmaps/)** — A calendar/grid heatmap for visualizing values across a matrix of cells, with a configurable legend, group gaps, and rounded cells ([#22535](https://github.com/vuetifyjs/vuetify/pull/22535)).\n\n**[VHighlight](/components/highlights/)** — Highlights matched substrings within text — useful for search results, filtering, and command palettes. It pairs with the `toHighlight` transformer being added in v0 ([#22817](https://github.com/vuetifyjs/vuetify/pull/22817)).\n\n**[VMonthPicker](/components/month-pickers/)** — A dedicated month-and-year selection component, split out from the date picker family ([#22534](https://github.com/vuetifyjs/vuetify/pull/22534)).\n\n**[VDateRangePicker](/components/date-pickers/)** — Range selection as a first-class component, with MD3-aligned range styling and keyboard grid navigation ([#22860](https://github.com/vuetifyjs/vuetify/pull/22860)).\n\n### Out of Labs\n\nSeven components graduated from labs to core in v4.1. For most of them this is just a formality — they've been stable and largely untouched since 2025, so the promotion simply acknowledges APIs that had already settled. VFileUpload is the exception, picking up real additions on its way out:\n\n* **[VFileUpload](/components/file-upload/)** — also gained a `loading` prop and support for pasting files and folders\n* **[VDateInput](/components/date-inputs/)**\n* **[VColorInput](/components/color-inputs/)**\n* **[VIconBtn](/components/icon-buttons/)**\n* **[VPicker](/components/pickers/)**\n* **[VStepperVertical](/components/vertical-steppers/)**\n* **[VPullToRefresh](/components/pull-to-refresh/)**\n\n### New Features\n\n**[VDataTable](/components/data-tables/basics/)** — The data table received the most attention of any component this month. Some additions are quick to summarize: search-match highlighting ([#22852](https://github.com/vuetifyjs/vuetify/pull/22852)), a mobile header slot ([#21429](https://github.com/vuetifyjs/vuetify/pull/21429)), and full ARIA support — `aria-sort` on sortable headers and labels for selection controls. Others deserve a closer look:\n\n* The new **`expanded`** slot ([#22871](https://github.com/vuetifyjs/vuetify/pull/22871)) renders custom detail content with a built-in transition, and the accompanying **`expand-strategy`** prop makes the table behave like an accordion — set it to `\"single\"` and opening one row collapses the others, no extra state-juggling required (`expand-transition` can swap or disable the animation).\n* **`v-model:opened`** ([#22772](https://github.com/vuetifyjs/vuetify/pull/22772)) two-way binds which groups are open and adds an `open-all` prop and a custom `group-key`, which lets you drive group state from code — expand everything by default, or save and restore a user's open groups across sessions.\n* The **`loading`** prop now accepts a `{ side, color }` object ([#22872](https://github.com/vuetifyjs/vuetify/pull/22872)), which lets you place the progress bar on a chosen edge — for example, at the bottom to signal a load-more-on-scroll footer is fetching the next page.\n* Filtered **`itemsLength`** in slot props ([#22874](https://github.com/vuetifyjs/vuetify/pull/22874)) exposes the post-filter row count, which closes the last gap to fully replacing `VDataTableFooter` with your own — you can now render \"X results\" and wire pagination from the slot without reaching into the table's internals.\n\n**[VOtpInput](/components/otp-input/)** — Fields can now be grouped into segments, with accessibility improvements and emoji support, co-authored by [Yanis-Riani](https://github.com/Yanis-Riani) ([#22803](https://github.com/vuetifyjs/vuetify/pull/22803)).\n\n**[VSparkline](/components/sparklines/)** — gained `interactive` prop to show markers, a vertical guideline, and hover tooltips ([#22748](https://github.com/vuetifyjs/vuetify/pull/22748)).\n\n\n\n**[VOverlay](/components/overlays/) and [VCommandPalette](/components/command-palette/)** — A new viewport location strategy lets overlays enforce a specific on-screen placement ([#22698](https://github.com/vuetifyjs/vuetify/pull/22698)), and `location`/`origin` now behave the way you'd expect ([#22720](https://github.com/vuetifyjs/vuetify/pull/22720)).\n\n**[VTable](/components/tables/)** — Added a `caption` slot with pass-through of `aria-*` attributes and a `gridlines` prop ([#22873](https://github.com/vuetifyjs/vuetify/pull/22873)).\n\n**[VDatePicker](/components/date-pickers/)** — Keyboard-arrow navigation in the selection grid ([#22857](https://github.com/vuetifyjs/vuetify/pull/22857)) plus MD3-aligned range selection ([#22858](https://github.com/vuetifyjs/vuetify/pull/22858)).\n\n![Date Picker - new range selection](https://cdn.vuetifyjs.com/docs/images/blog/may-2026-update/date-picker.png)\n\n**[VNumberInput](/components/number-inputs/)** — The new `grouping` prop is a deep piece of work, not just a thousands-separator toggle ([#22134](https://github.com/vuetifyjs/vuetify/pull/22134)). It applies locale-aware grouping and decimal separators that hold together while you type, paste, cut, and delete — the separators reflow as you edit rather than only on blur — honors custom decimal and group separators.\n\n**[VProgressLinear](/components/progress-linear/)** — A new `split` variant aligns the bar with Material Design 3, drawing a gap between the filled portion and the remaining track instead of one continuous line ([#22662](https://github.com/vuetifyjs/vuetify/pull/22662)). It reworked how the bar's chunks are calculated and rendered to match the MD3 progress indicator.\n\n**Arbitrary `rounded` values** — The list is already long, but this one earns its spot ([#22721](https://github.com/vuetifyjs/vuetify/pull/22721)): `rounded` now accepts any value, finally letting you break out of the strict `sm`/`md`/`lg`/`xl` scale and dial in the exact corner radius your design calls for.\n\n\n\n**[VSwitch](/components/switches/)** — Late in the month, the switch was aligned with the MD3 spec ([#22879](https://github.com/vuetifyjs/vuetify/pull/22879)) and gained a `size` prop ([#22882](https://github.com/vuetifyjs/vuetify/pull/22882)) and a `square` inset variant ([#22881](https://github.com/vuetifyjs/vuetify/pull/22881)).\n\n\n\nRounding out the month, a handful of smaller additions: `VCalendar` gained 24-hour support ([#22853](https://github.com/vuetifyjs/vuetify/pull/22853)), the theme system picked up optional page transitions ([#22623](https://github.com/vuetifyjs/vuetify/pull/22623)), and a `hover-elevation` prop with matching CSS utilities ([#22621](https://github.com/vuetifyjs/vuetify/pull/22621)) and a long awaited `color` prop for `VTooltip` ([#19689](https://github.com/vuetifyjs/vuetify/pull/19689)).\n\n### Bug Fixes\n\n| Component | Fix | Version | PR |\n|-----------------------------------------|--------------------------------------------------|---------|-----------------------------------------------------------|\n| **VAlert** | Border opacity should win over theme variables | v4.0.7 | [#22832](https://github.com/vuetifyjs/vuetify/pull/22832) |\n| **VTreeview / VList** | Wire `value-comparator` into selection logic | v4.0.7 | [#22841](https://github.com/vuetifyjs/vuetify/pull/22841) |\n| **VField** | Correct baseline alignment | v4.0.7 | [#22812](https://github.com/vuetifyjs/vuetify/pull/22812) |\n| **VCheckbox** | Align indeterminate opacity and color with MD3 | v4.1.0 | [#22804](https://github.com/vuetifyjs/vuetify/pull/22804) |\n| **VSnackbarQueue** | Avoid stale z-index | v4.1.0 | [#22796](https://github.com/vuetifyjs/vuetify/pull/22796) |\n| **VProgressLinear** | Correct calculation for filled chunks | v4.0.7 | — |\n| **VBtnToggle** | Correct background when active | v4.0.7 | — |\n| **VHover** | Reconcile actual hover state when re-enabled | v4.1.0 | [#22845](https://github.com/vuetifyjs/vuetify/pull/22845) |\n| **VAutocomplete / VCombobox** | Click in empty space should not close menu | v4.0.8 | [#22754](https://github.com/vuetifyjs/vuetify/pull/22754) |\n| **VSelect / VAutocomplete / VCombobox** | Keep menu open when scrolling | v4.0.8 | [#22877](https://github.com/vuetifyjs/vuetify/pull/22877) |\n| **VOverlay** | Restore focus without preventing Enter keydown | v4.0.8 | [#22276](https://github.com/vuetifyjs/vuetify/pull/22276) |\n| **theme** | Support transparent hex color for CSS variables | v4.0.8 | [#22875](https://github.com/vuetifyjs/vuetify/pull/22875) |\n| **VForm** | Avoid eager `.value` reads in default slot props | v4.0.8 | [#22846](https://github.com/vuetifyjs/vuetify/pull/22846) |\n| **VProgressLinear** | Avoid `opacity:NaN` when rendering with SSR | v4.1.0 | [#22880](https://github.com/vuetifyjs/vuetify/pull/22880) |\n| **focusTrap** | Prevent page scroll when capturing focus | v4.1.0 | — |\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\nMay was Vuetify0's bridge from alpha to beta — **163 commits** across **three releases** ([v1.0.0-alpha.3](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.3) on May 5, [alpha.4](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.4) on May 12, [alpha.5](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.5) on May 19). The headline addition was a **headless drag-and-drop family** — three composables that handle state and behavior only, with no markup or styling — alongside a testing and hardening push that set up the [beta announced on June 2](/blog/announcing-vuetify0-beta/).\n\n\n\n### Drag and Drop\n\n* **[useDragDrop](https://0.vuetifyjs.com/composables/system/use-drag-drop)** ([#225](https://github.com/vuetifyjs/0/pull/225)) — the base primitive: a pointer and keyboard input adapter owning two registries (draggables and drop zones) plus the active-drag state.\n* **[createSortable](https://0.vuetifyjs.com/composables/data/create-sortable)** ([#231](https://github.com/vuetifyjs/0/pull/231)) — ordered-list state with `move`, `swap`, and `reorder` mutations and a typed `move:ticket` event. No DOM or input handling of its own, so it can be driven from buttons, gestures, or server updates.\n* **[createKanban](https://0.vuetifyjs.com/composables/data/create-kanban)** ([#234](https://github.com/vuetifyjs/0/pull/234)) — two levels of `createSortable` (columns and items) plus a `transfer` method for moving items between columns.\n\n### Other Additions\n\n* **[createOtp](https://0.vuetifyjs.com/composables/forms/create-otp)** ([#238](https://github.com/vuetifyjs/0/pull/238)) — state and focus management for one-time-code inputs.\n* **[Overflow](https://0.vuetifyjs.com/components/semantic/overflow)** ([#220](https://github.com/vuetifyjs/0/pull/220)) — a container that detects overflow and exposes scroll state to children.\n* **[toHighlight](https://0.vuetifyjs.com/composables/transformers/to-highlight)** ([#222](https://github.com/vuetifyjs/0/pull/222)) — a transformer that marks matched substrings, the companion to VHighlight.\n* **useDelay** ([#224](https://github.com/vuetifyjs/0/pull/224)) — debounce and delayed-execution timing.\n* **Avatar** ([#245](https://github.com/vuetifyjs/0/pull/245)) — added `Avatar.Group` and `Avatar.Indicator` compound parts.\n\n`createRegistry`, which the stateful composables build on, also gained a bulk `reorder` primitive and an `offboard` that returns removed entries — the latter is what `createKanban` uses to move items between columns.\n\n### Genesis Design System\n\nMay also brought the first design system built on Paper: **[@paper/genesis](https://github.com/vuetifyjs/0/pull/240)** — a minimal set of docs primitives extracted from the v0 documentation site. It's an early, working example of the Paper layer the rest of the ecosystem will build on.\n\n### Testing and Performance\n\nBy the end of the alpha cycle, v0 had **5,700+ unit tests** across 142 spec files, **98.7% average coverage** across 105 primitives, and 12 benchmark suites covering hot paths like `createDataTable`, `createFilter`, and the registry core. `createSortable`'s reorder was rewritten to use the registry's bulk operation instead of a per-item loop.\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n**Details:**\n\n* [Announcing the Vuetify0 Beta](/blog/announcing-vuetify0-beta/)\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v1.0.0-alpha.5 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.5)\n* [v1.0.0-alpha.4 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.4)\n* [v1.0.0-alpha.3 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.3)\n* [useDragDrop PR#225](https://github.com/vuetifyjs/0/pull/225)\n* [createSortable PR#231](https://github.com/vuetifyjs/0/pull/231)\n* [createKanban PR#234](https://github.com/vuetifyjs/0/pull/234)\n* [Genesis Design System PR#240](https://github.com/vuetifyjs/0/pull/240)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\n\n\n
\n\nA new [enterprise sponsorship landing page](https://github.com/vuetifyjs/vuetify/pull/22813) was added for teams that want to support the framework at the organization level. The docs also picked up an upgrade-guide pass — a [CSS reset fallback for non-Sass setups](https://github.com/vuetifyjs/vuetify/pull/22821), a more conservative typography mapping, and codemod annotations — to smooth the v3 → v4 migration.\n\n### Nuxt Module\n\n[Andrei Elkin](https://github.com/AndreyYolkin) kept pushing the [Nuxt Module](https://github.com/vuetifyjs/nuxt-module) toward a stable v1, with `beta.3` (May 3) and `beta.4` (May 7) and a focus on more reliable package resolution. That work carried into June — we'll cover it in the next update, so stay tuned.\n\n---\n\n## May 2026 Changelog\n\nThe following section provides an overview of the changes made in May 2026 across the Vuetify framework.\n\n**Key Improvements:**\n\n* v4.0.7: bug-fix patch — VAlert border opacity, VTreeview/VList value-comparator, VField baseline, VProgressLinear chunks, VBtnToggle, VList focus, VSelects contentClass\n* v4.1.0: seven labs promotions, new VHeatmap/VHighlight/VMonthPicker/VDateRangePicker, VSparkline markers, VOtpInput groups, VOverlay viewport strategy, theme page transitions, VTooltip cursor target, VExpansionPanels customization, VNumberInput grouping, VPagination/VDataTableFooter hide-last-page, plus VDataTable/VTable accessibility (aria-sort, aria-labels, caption slot, gridlines)\n* v4.0.8: stable-line fixes — VSelect/VAutocomplete/VCombobox menu, VOverlay focus, theme transparent hex, VForm slot perf\n\n**Expand** this section to see the detailed changelog for May 2026:\n\n
\nMay 2026 Full Changelog\n\n### v4.0.7 (2026-05-08)\n\n**:wrench: Bug Fixes**\n\n* **VAlert:** border opacity should win over theme variables ([#22832](https://github.com/vuetifyjs/vuetify/issues/22832))\n* **VTreeview, VList:** wire `value-comparator` into selection logic ([#22841](https://github.com/vuetifyjs/vuetify/issues/22841))\n* **VField:** correct baseline alignment ([#22812](https://github.com/vuetifyjs/vuetify/issues/22812))\n* **VProgressLinear:** correct calculation for filled chunks\n* **VBtnToggle:** correct background when active\n* **VList:** invisibly focus first element after open\n* **VSelects:** merge `menuProps.contentClass`\n\n---\n\n### v4.1.0-beta.0 (2026-05-21)\n\n**:rocket: Features**\n\n* **VFileUpload:** promote from labs; add `loading` prop\n* **VFileInput, VFileUpload:** support pasting files and folders\n* **VIconBtn:** promote from labs\n* **VDateInput:** promote from labs\n* **VStepperVertical:** promote from labs\n* **VColorInput:** promote from labs\n* **VPicker:** promote from labs\n* **VPullToRefresh:** promote from labs\n* **VHeatmap:** add new component ([#22535](https://github.com/vuetifyjs/vuetify/issues/22535))\n* **VHighlight:** add new component ([#22817](https://github.com/vuetifyjs/vuetify/issues/22817))\n* **VMonthPicker:** add new component ([#22534](https://github.com/vuetifyjs/vuetify/issues/22534))\n* **VDateRangePicker:** add new component ([#22860](https://github.com/vuetifyjs/vuetify/issues/22860))\n* **VSparkline:** markers & tooltips ([#22748](https://github.com/vuetifyjs/vuetify/issues/22748))\n* **VOtpInput:** groups, a11y improvements, emoji ([#22803](https://github.com/vuetifyjs/vuetify/issues/22803))\n* **VDataTable:** highlight search matches ([#22852](https://github.com/vuetifyjs/vuetify/issues/22852)); add mobile header slot ([#21429](https://github.com/vuetifyjs/vuetify/issues/21429)); add `v-model:opened` for group-by ([#22772](https://github.com/vuetifyjs/vuetify/issues/22772))\n* **vCalendar:** 24hour support ([#22853](https://github.com/vuetifyjs/vuetify/issues/22853))\n* **VDatePicker:** keyboard arrows navigation in selection grid ([#22857](https://github.com/vuetifyjs/vuetify/issues/22857))\n* **theme:** add optional page transitions ([#22623](https://github.com/vuetifyjs/vuetify/issues/22623))\n* **elevation:** add `hover-elevation` prop and CSS utilities ([#22621](https://github.com/vuetifyjs/vuetify/issues/22621))\n* **rounded:** accept arbitrary values ([#22721](https://github.com/vuetifyjs/vuetify/issues/22721))\n* **VCommandPalette, VOverlay:** introduce viewport location strategy ([#22698](https://github.com/vuetifyjs/vuetify/issues/22698))\n* **VProgressLinear:** add `split` variant to align with MD3 ([#22662](https://github.com/vuetifyjs/vuetify/issues/22662))\n* **VTooltip:** add `color` prop ([#19689](https://github.com/vuetifyjs/vuetify/issues/19689)); `target=\"cursor\"` should work for hoverable tooltips ([#22728](https://github.com/vuetifyjs/vuetify/issues/22728))\n* **VExpansionPanels:** add more props for customization ([#22723](https://github.com/vuetifyjs/vuetify/issues/22723))\n* **VNumberInput:** add `grouping` prop ([#22134](https://github.com/vuetifyjs/vuetify/issues/22134))\n* **VPagination, VDataTableFooter:** ability to hide last page ([#22788](https://github.com/vuetifyjs/vuetify/issues/22788))\n* **VTreeview:** bind indentLines to item slot\n* **VColorPicker:** add `hide-input-labels` prop\n\n**:wrench: Bug Fixes**\n\n* **VHover:** reconcile actual hover state when re-enabled ([#22845](https://github.com/vuetifyjs/vuetify/issues/22845))\n* **VCheckbox:** align indeterminate opacity and color with MD3 ([#22804](https://github.com/vuetifyjs/vuetify/issues/22804))\n* **VSnackbarQueue:** avoid stale z-index ([#22796](https://github.com/vuetifyjs/vuetify/issues/22796))\n* **VDatePicker:** align range selection with MD3 ([#22858](https://github.com/vuetifyjs/vuetify/issues/22858))\n* **VOverlay:** make `location` and `origin` actually useful ([#22720](https://github.com/vuetifyjs/vuetify/issues/22720)); `contained` should opt-out from static strategy\n* **Dialog, VSnackbar:** correct position with static location strategy\n\n---\n\n### v4.1.0-beta.1 (2026-05-28)\n\n**:rocket: Features**\n\n* **VTable:** add `caption` slot and pass aria-* to `
`; add `gridlines` prop ([#22873](https://github.com/vuetifyjs/vuetify/issues/22873))\n* **VDataTable:** add aria-sort to sortable headers; add aria-labels for selection controls; `loading` prop to accept object with `side` ([#22872](https://github.com/vuetifyjs/vuetify/issues/22872)); add `expanded` slot with transition support ([#22871](https://github.com/vuetifyjs/vuetify/issues/22871)); add filtered `itemsLength` to slot props ([#22874](https://github.com/vuetifyjs/vuetify/issues/22874))\n* **VRating:** expose activeColor in item slot props ([#22814](https://github.com/vuetifyjs/vuetify/issues/22814))\n\n**:wrench: Bug Fixes**\n\n* **theme:** support transparent hex color for CSS variables ([#22875](https://github.com/vuetifyjs/vuetify/issues/22875))\n* **VForm:** avoid eager `.value` reads in default slot props ([#22846](https://github.com/vuetifyjs/vuetify/issues/22846))\n* **VBtnToggle:** restore active overlay when no color is set\n* **VOverlay:** pull focus to trap when it briefly escapes\n\n---\n\n### v4.0.8 (2026-05-29)\n\n**:wrench: Bug Fixes**\n\n* **VSelect/VAutocomplete/VCombobox:** keep menu open when scrolling ([#22877](https://github.com/vuetifyjs/vuetify/issues/22877))\n* **VAutocomplete/VCombobox:** click in empty space should not close menu ([#22754](https://github.com/vuetifyjs/vuetify/issues/22754))\n* **VOverlay:** restore focus without preventing Enter keydown ([#22276](https://github.com/vuetifyjs/vuetify/issues/22276))\n* **theme:** support transparent hex color for CSS variables ([#22875](https://github.com/vuetifyjs/vuetify/issues/22875))\n* **VForm:** avoid eager `.value` reads in default slot props ([#22846](https://github.com/vuetifyjs/vuetify/issues/22846))\n* **VSwitch:** suppress user-agent styles to avoid click dead-zone\n\n\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nJune stabilizes what May opened. **Vuetify 4.1** moves toward its stable release, with a final round of VSwitch MD3 work, VExpansionPanel focus polish, and the SSR and focus-trap fixes that landed late in the month. **Vuetify0** reached [beta on June 2](/blog/announcing-vuetify0-beta/) with its API frozen — from here the focus is edge cases, documentation, and the road to v1.0 in July. And the **theme**, **locale**, and **date** v0 migrations in the framework now have a frozen target to build against.\n\n* [Vuetify 4.1](/getting-started/release-notes/?version=v4.1.0) is live — try the new components and labs promotions in your project today\n* The [Vuetify0 beta](/blog/announcing-vuetify0-beta/) froze its public API ahead of v1 — try it via [v0play](https://v0play.vuetifyjs.com)\n\n### Looking Further Ahead { #looking-ahead }\n\nLooking past June, the theme for the rest of the year is a simple one: **finishing what we started**.\n\n**A focused roadmap, and a clean finish for labs**: We've deliberately narrowed our roadmap commitments for the remainder of 2026 to concentrate the team on one outcome — **by November 1st, 2026, labs will be drained**. Every component still incubating will either graduate into core or be retired; nothing will be left sitting in an \"unfinished\" state. This isn't just housekeeping — a stable framework API is the foundation for a smooth migration as Vuetify0 moves in underneath.\n\n**A community-driven issue board**: We're building a curated view into the issue board where the community can surface and vote on what matters most. Today, prioritization happens largely behind the scenes — this opens a direct line into what we tackle next, and gives us a far clearer read on where the framework's real pain points and most-wanted features actually are. We'll share more as it takes shape.\n\n**A modernized docs experience (later this year)**: We're planning a significant UX upgrade to Vuetify documentation pages, porting over many of the features introduced first to the [Vuetify0 documentation](https://0.vuetifyjs.com/). For a preview of where we're headed, you are more than welcome to spend some time in the [v0 docs](https://0.vuetifyjs.com/) — the navigation, search, and interactive code samples there are an early taste of what's coming.\n\n**Community snips**: [Vuetify Snips](https://snips.vuetifyjs.com/) has always been a hand-curated collection, but we know plenty of talented community members are sitting on gems worth sharing. Once [Vuetify Play](https://play.vuetifyjs.com) gets the stability overhaul it deserves, we'd like to open the door to community submissions — a curated set of community snips contributed by you. It's early days for this one, but it's something we're excited about.\n\n::: error\n\n**Vuetify needs your support.** OpenCollective funds are exhausted and we're currently unable to compensate contributors for ongoing work on the framework and ecosystem tools. If your team relies on Vuetify, please consider sponsoring us via [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution keeps Vuetify shipping.\n\n:::\n\nVuetify is and always will be free and open source. If your team builds on the framework, the v0 beta, the MCP, the CLI, the Nuxt module, the ESLint plugin, or any of the design systems coming behind them, your support directly funds continued development. [Vuetify One](https://one.vuetifyjs.com/) and [GitHub Sponsors](https://github.com/sponsors/johnleider) are the most direct ways to help.\n\nThanks also to the community members who sent patches this month — [mixelburg](https://github.com/mixelburg), [webdevnerdstuff](https://github.com/webdevnerdstuff), [VaishnaviD5900](https://github.com/VaishnaviD5900), [Spatlani](https://github.com/Spatlani), and [Haviles04](https://github.com/Haviles04) — for the fixes and additions that made it into this release.\n\nThank you for being part of the Vuetify community. See you in June!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/november-2025-update.md":"---\nlayout: blog\nmeta:\n title: November 2025 Update\n description: November shipped Vuetify v3.11.0 with VCalendar and VHotkey promoted from labs, a new VTimePicker input variant, VDatePicker MD3 work, and CLI progress.\n keywords: Vuetify November 2025, v3.11.0 Harbinger, VCalendar, VHotkey, VTimePicker, VDatePicker MD3\n---\n\n\n\n# November 2025 Update\n\nWelcome to the November 2025 Vuetify update! This month marks a major milestone with the release of **v3.11.0 (Harbinger)**, promoting VCalendar and VHotkey from labs to core, introducing the new VTimePicker input variant, and aligning VDatePicker with Material Design 3 specifications.\n\n![Hero image for November update](https://cdn.vuetifyjs.com/docs/images/blog/november-2025-update/november-hero.png \"November hero image\")\n\n🖊️ John Leider • 📅 December 10th, 2025\n\n\n\n---\n\n## The Harbinger Arrives\n\nNovember was a landmark month for the framework. We shipped **v3.11.0 (Harbinger)** with two components graduating from labs—VCalendar and VHotkey—alongside significant enhancements to date and time pickers that bring them in line with Material Design 3. The **VTimePicker input variant** and **VDatePicker control alignment** represent months of refinement work finally landing in a stable release. Beyond the framework, we made substantial progress on the **Vuetify CLI** with 37 commits laying the groundwork for v0 tooling. J-Sek continued his incredible contribution streak, authoring 14 PRs to the main framework and adding 7+ new templates to Snips. The ecosystem is firing on all cylinders.\n\n::: success\n\nCool example of the month: [v0 Expansion Panel in VPlay](https://vtfy.link/i5LxmQ) by [johnleider](https://github.com/johnleider)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Ecosystem Spotlight: Vuetify CLI](#ecosystem-spotlight-vuetify-cli)\n* [Framework Updates](#framework-updates)\n * [Date & Time Picker Enhancements](#date-time-picker-enhancements)\n * [Component Refinements](#component-refinements)\n* [Vuetify MCP: Continued Evolution](#vuetify-mcp-continued-evolution)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [November 2025 Changelog](#november-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nNovember delivered seven releases culminating in **v3.11.0 (Harbinger)**, our most feature-rich release since v3.10. Two components graduated from labs to core, and we shipped significant enhancements across date/time pickers, tabs, and overlay components.\n\n![November Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/november-2025-update/releases.png \"November Releases Banner\")\n\n### Key Improvements\n\n* **VCalendar** and **VHotkey** promoted from labs to core components\n* New **VTimePicker input variant** for inline time entry without the dial interface\n* **VDatePicker MD3 alignment** with updated control variants matching Material Design 3 specifications\n* **VTabs inset prop** for subtle tab designs in dense layouts\n* **VTextarea max-height prop** for controlled textarea growth\n* **VSelect auto-select-first** for automatic first-item highlighting\n* Theme **layers option** for advanced CSS cascade control\n\nView the complete list of changes in the [Full Changelog](#november-2025-changelog)\n\n**Details:**\n\n* [v3.10.9](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.9)\n* [v3.10.10](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.10)\n* [v3.10.11](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.11)\n* [v3.10.12](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.12)\n* [v3.11.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.0)\n\n---\n\n## Ecosystem Spotlight: Vuetify CLI { #ecosystem-spotlight-vuetify-cli }\n\nNovember saw intensive development on the **Vuetify CLI**, with 37 commits laying the foundation for v0 tooling and developer workflows. While not yet released, this work represents a significant investment in the developer experience for Vuetify 4.0 and beyond.\n\nThe CLI will provide streamlined project scaffolding, component generation, and integration with the broader Vuetify ecosystem including v0 composables and the MCP server. More details coming as we approach the initial release.\n\n**Also this month:**\n\n* **Vuetify Bin** received real-time collaboration features\n* **Vuetify Snips** added 7+ new templates across pricing, buttons, feedback cards, and chat components\n* **Vuetify Play** and **Studio** improved user preference persistence\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n* [Vuetify Snips](https://snips.vuetifyjs.com/)\n* [Vuetify Play](https://play.vuetifyjs.com/)\n\n---\n\n## Framework Updates\n\n\n\nNovember's framework work centered on date/time picker improvements and component polish. J-Sek delivered an outstanding 14 PRs, driving many of the enhancements below.\n\n### Date & Time Picker Enhancements { #date-time-picker-enhancements }\n\nThe date and time picker components received significant attention this month, bringing them closer to Material Design 3 specifications and adding long-requested features.\n\n**VTimePicker Input Variant**\n\nA new input variant allows users to type time values directly without using the dial interface—perfect for power users and keyboard-first workflows.\n\n![VTimePicker Input Variant](https://cdn.vuetifyjs.com/docs/images/blog/november-2025-update/vtimepicker-input.png \"VTimePicker Input Variant\")\n\n**VDatePicker MD3 Controls**\n\nControl variants have been aligned with Material Design 3, providing a more polished and consistent appearance.\n\n\n\n\n**Details:**\n\n* [VTimePicker input variant PR#21601](https://github.com/vuetifyjs/vuetify/pull/21601)\n* [VDatePicker MD3 alignment PR#21589](https://github.com/vuetifyjs/vuetify/pull/21589)\n* [VDatePicker landscape mode PR#22305](https://github.com/vuetifyjs/vuetify/pull/22305)\n* [VDateInput min/max fix PR#22295](https://github.com/vuetifyjs/vuetify/pull/22295)\n\n### Component Refinements\n\n**Navigation & Layout**\n\n* **VTabs**: New `inset` prop for subtle tab designs, plus slider transition improvements\n* **VOverlay**: Added `viewport-margin` prop for better positioning control\n* **VNavigationDrawer**: New `retain-focus` prop to control focus behavior\n\n\n\n\n**Form Components**\n\n* **VTextarea**: Added `max-height` prop for controlled growth\n* **VSelect**: New `auto-select-first` prop and improved chip itemProps handling\n* **VCombobox**: Create new items when pasting with line breaks\n\n**Data & Display**\n\n* **VTreeview**: Significant performance improvements for large trees\n* **VList**: New `prepend-gap` and `indent` props for flexible spacing\n* **VBreadcrumbs**: Props and width can now be passed to items\n\n**Theming**\n\n* New `layers` option for advanced CSS cascade control\n\n**Details:**\n\n* [VTabs inset PR#22221](https://github.com/vuetifyjs/vuetify/pull/22221)\n* [VTabs slider transition PR#19556](https://github.com/vuetifyjs/vuetify/pull/19556)\n* [VOverlay viewport-margin PR#22243](https://github.com/vuetifyjs/vuetify/pull/22243)\n* [VNavigationDrawer retain-focus PR#22106](https://github.com/vuetifyjs/vuetify/pull/22106)\n* [VTextarea max-height PR#22286](https://github.com/vuetifyjs/vuetify/pull/22286)\n* [VSelect auto-select-first PR#22312](https://github.com/vuetifyjs/vuetify/pull/22312)\n* [VCombobox line breaks PR#22304](https://github.com/vuetifyjs/vuetify/pull/22304)\n* [VTreeview performance PR#22255](https://github.com/vuetifyjs/vuetify/pull/22255)\n* [VList prepend-gap/indent PR#20616](https://github.com/vuetifyjs/vuetify/pull/20616)\n* [VBreadcrumbs props PR#22213](https://github.com/vuetifyjs/vuetify/pull/22213)\n* [Theme layers PR#22215](https://github.com/vuetifyjs/vuetify/pull/22215)\n\n---\n\n## Vuetify MCP: Continued Evolution { #vuetify-mcp-continued-evolution }\n\n\n\nNovember brought four releases to the Vuetify MCP server (v0.2.0 through v0.2.3), continuing to refine the AI-powered development experience.\n\n### What's New\n\n**Stability Improvements**: Multiple releases focused on reliability and edge case handling for the HTTP transport introduced in October.\n\n**Documentation Enhancements**: Improved tool descriptions and response formatting for better AI assistant integration.\n\n### Getting Started\n\nTo use the hosted MCP server with Claude Desktop or other MCP clients:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [Model Context Protocol Documentation](https://modelcontextprotocol.io/)\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\nNovember was our most active month yet for Vuetify0, with 109 commits and 5 releases (v0.0.10 through v0.0.14). The focus was on performance optimization and type safety improvements.\n\n![Vuetify0 Type Safety](https://cdn.vuetifyjs.com/docs/images/blog/november-2025-update/v0.png \"Vuetify0 Type Safety\")\n\n**Performance Optimizations**\n\nWe implemented deferred reindexing for registry unregister operations, significantly improving performance when components mount and unmount rapidly.\n\n**Type Safety Improvements**\n\nThe `RegistryTicket.value` is now generic, providing better type inference and IntelliSense support when working with registered items.\n\n```ts\nimport { useRegistry } from '@vuetify/v0'\nimport type { RegistryTicket } from '@vuetify/v0'\n\ninterface User {\n name: string\n email: string\n}\n\n// Value type flows through the registry\nconst registry = useRegistry>()\n\nconst ticket = registry.register({\n id: 'user-1',\n value: { name: 'John', email: 'john@vuetifyjs.com' }\n})\n\n// ticket.value is typed as User\nconsole.log(ticket.value.name) // ✓ TypeScript knows this is a string\n```\n\nDecember will focus on expanding the component library and preparing integration paths with the main Vuetify framework.\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [Performance optimization PR#48](https://github.com/vuetifyjs/0/pull/48)\n* [Type safety PR#53](https://github.com/vuetifyjs/0/pull/53)\n\n---\n\n## November 2025 Changelog\n\nThe following section provides an overview of the changes made in November 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* VCalendar and VHotkey promoted from labs to core\n* VTimePicker input variant for direct time entry\n* VDatePicker MD3 control alignment\n* VTabs inset prop and slider transitions\n* VTreeview performance optimizations for large trees\n* Theme layers option for CSS cascade control\n\n**Expand** this section to see the detailed changelog for November 2025:\n\n
\n\n### :rocket: Features\n\n* **flex:** add justify-items utilities ([#22346](https://github.com/vuetifyjs/vuetify/issues/22346)) ([pgalhardo](https://github.com/pgalhardo))\n* **VBreadcrumbs:** pass props and width to items ([#22213](https://github.com/vuetifyjs/vuetify/issues/22213)) ([J-Sek](https://github.com/J-Sek))\n* **VCombobox:** create new items when pasting with line breaks ([#22304](https://github.com/vuetifyjs/vuetify/issues/22304)) ([ikushum](https://github.com/ikushum))\n* **VDatePicker:** align control variants with MD3 ([#21589](https://github.com/vuetifyjs/vuetify/issues/21589)) ([J-Sek](https://github.com/J-Sek))\n* **VList:** add `prepend-gap` and `indent` props ([#20616](https://github.com/vuetifyjs/vuetify/issues/20616)) ([yuwu9145](https://github.com/yuwu9145))\n* **VNavigationDrawer, VOverlay:** add `retain-focus` prop ([#22106](https://github.com/vuetifyjs/vuetify/issues/22106)) ([J-Sek](https://github.com/J-Sek))\n* **VOverlay:** add `viewport-margin` prop ([#22243](https://github.com/vuetifyjs/vuetify/issues/22243)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect:** add `auto-select-first` prop ([#22312](https://github.com/vuetifyjs/vuetify/issues/22312)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect:** apply compatible itemProps to chips ([#22339](https://github.com/vuetifyjs/vuetify/issues/22339)) ([KaelWD](https://github.com/KaelWD))\n* **VStepper:** add new item-props prop ([#20651](https://github.com/vuetifyjs/vuetify/issues/20651)) ([johnleider](https://github.com/johnleider))\n* **VTabs:** add `inset` prop ([#22221](https://github.com/vuetifyjs/vuetify/issues/22221)) ([J-Sek](https://github.com/J-Sek))\n* **VTabs:** add new prop, slider transition ([#19556](https://github.com/vuetifyjs/vuetify/issues/19556)) ([johnleider](https://github.com/johnleider))\n* **VTextarea:** add `max-height` prop ([#22286](https://github.com/vuetifyjs/vuetify/issues/22286)) ([J-Sek](https://github.com/J-Sek))\n* **VTimePicker:** input variant ([#21601](https://github.com/vuetifyjs/vuetify/issues/21601)) ([J-Sek](https://github.com/J-Sek))\n* **theme:** add layers option ([#22215](https://github.com/vuetifyjs/vuetify/issues/22215)) ([Niki2k1](https://github.com/Niki2k1))\n* **typography:** add font-weight semibold helper class ([#20586](https://github.com/vuetifyjs/vuetify/issues/20586)) ([FraCata00](https://github.com/FraCata00))\n\n### :wrench: Bug Fixes\n\n* **v-tooltip:** prevent showing empty tooltip ([#22347](https://github.com/vuetifyjs/vuetify/issues/22347)) ([Haviles04](https://github.com/Haviles04))\n* **VAvatar:** update background variable to use RGB format ([#22310](https://github.com/vuetifyjs/vuetify/issues/22310)) ([juanjcardona13](https://github.com/juanjcardona13))\n* **VBtnToggle:** remove semicolon from Sass ([#22293](https://github.com/vuetifyjs/vuetify/issues/22293)) ([methompson](https://github.com/methompson))\n* **VBtnToggle:** render selected in forced-colors mode ([#22279](https://github.com/vuetifyjs/vuetify/issues/22279)) ([06b](https://github.com/06b))\n* **VCalendar:** calculate week numbers using current locale ([#22341](https://github.com/vuetifyjs/vuetify/issues/22341)) ([J-Sek](https://github.com/J-Sek))\n* **VCalendar:** correct interval and event offset with custom firstTime ([#22343](https://github.com/vuetifyjs/vuetify/issues/22343)) ([KaelWD](https://github.com/KaelWD))\n* **VCalendar:** day button font size and no active state ([#22336](https://github.com/vuetifyjs/vuetify/issues/22336)) ([J-Sek](https://github.com/J-Sek))\n* **VDateInput:** min/max with built-in adapter ([#22295](https://github.com/vuetifyjs/vuetify/issues/22295)) ([J-Sek](https://github.com/J-Sek))\n* **VDatePicker:** support landscape mode ([#22305](https://github.com/vuetifyjs/vuetify/issues/22305)) ([ikushum](https://github.com/ikushum))\n* **VField:** hide progress border in forced-colors mode ([#22316](https://github.com/vuetifyjs/vuetify/issues/22316)) ([06b](https://github.com/06b))\n* **VField:** remove details prop from makeVFieldProps ([#22268](https://github.com/vuetifyjs/vuetify/issues/22268)) ([pgalhardo](https://github.com/pgalhardo))\n* **VHotkey:** inline alignment, sizing consistency, slash separator ([#22321](https://github.com/vuetifyjs/vuetify/issues/22321)) ([J-Sek](https://github.com/J-Sek))\n* **VInfiniteScroll:** hide side element when empty ([#21749](https://github.com/vuetifyjs/vuetify/issues/21749)) ([J-Sek](https://github.com/J-Sek))\n* **VList:** correct styles for spacing with `nav` prop ([#22254](https://github.com/vuetifyjs/vuetify/issues/22254)) ([J-Sek](https://github.com/J-Sek))\n* **VMaskInput:** Fixes error when mask input is cleared ([#22176](https://github.com/vuetifyjs/vuetify/issues/22176)) ([ikushum](https://github.com/ikushum))\n* **VRating:** correct keyboard controls ([#22314](https://github.com/vuetifyjs/vuetify/issues/22314)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect:** Use hidden select for native form submissions ([#22330](https://github.com/vuetifyjs/vuetify/issues/22330)) ([ikushum](https://github.com/ikushum))\n* **VTab:** render selected in forced-colors mode ([#22271](https://github.com/vuetifyjs/vuetify/issues/22271)) ([06b](https://github.com/06b))\n* **VTreeview:** faster interactions with large trees ([#22255](https://github.com/vuetifyjs/vuetify/issues/22255)) ([J-Sek](https://github.com/J-Sek))\n\n### :test_tube: Labs\n\n* **VCalendar:** promoted to core component\n* **VHotkey:** promoted to core component\n\n
\n\n## What's Next{ #whats-next .mt-4 }\n\nDecember will see continued refinement of v3.11.x as we stabilize the new features and address community feedback. Work on VCommandPalette progresses toward an initial labs release, and we're expanding the v0 library with additional headless primitives.\n\nThe Vuetify CLI is approaching its first public release, which will streamline project setup and component generation for both Vuetify 3 and the upcoming v0-based workflows. We're also planning end-of-year webinars covering the v3.11 release highlights and a preview of what's coming in 2026.\n\nThank you for being part of the Vuetify community. See you in December!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/october-2025-update.md":"---\nlayout: blog\nmeta:\n title: October 2025 Update\n description: October focused on refinement, delivering focus trap improvements, component enhancements, and v0 composables progress for v3.11 and v4.0.\n keywords: Vuetify October 2025, v3.11 LTS, Focus trap, Component enhancements, v0 composables, v4.0\n---\n\n\n\n# October 2025 Update\n\nWelcome to the October 2025 Vuetify update! This month, our team focused on refinement and reliability, delivering significant **focus trap improvements** across multiple components and advancing key features in development.\n\n![Hero image for October update](https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/october-hero.png \"October hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 November 11th, 2025\n\n\n\n---\n\n## Moving along\n\nOctober's development cycle focused on polish and developer experience. We delivered critical accessibility improvements with enhanced focus trap functionality, optimized VDataTable performance for large datasets, and refined components across the board. The month also saw the launch of **Vuetify Link**, our new URL shortening service, and significant updates to the **Vuetify MCP server** with HTTP transport support, making it easier than ever to integrate Vuetify's documentation and API intelligence into AI-powered development workflows. We also made substantial progress on our **v0 composables**, laying the groundwork for the upcoming Vuetify 4.0 release.\n\n::: success\n\nCool example of the month: [VTreeview footer](https://play.vuetifyjs.com/playgrounds/foNl1A) by [J-Sek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Ecosystem Spotlight: Vuetify Link](#ecosystem-spotlight-vuetify-link)\n* [Framework Updates](#framework-updates)\n * [Focus Trap Enhancements](#focus-trap-enhancements)\n * [Component Refinements](#component-refinements)\n * [In Development](#in-development)\n* [Vuetify MCP: HTTP Transport Support](#vuetify-mcp-http-transport-support)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [October 2025 Changelog](#october-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nOctober delivered five releases focused on stability, performance, and accessibility. We merged numerous bug fixes across components, improved focus trap behavior, enhanced form field handling, and optimized performance for large data sets.\n\n![October Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/releases.png \"October Releases Banner\")\n\n### Key Improvements\n\n* Enhanced focus trap functionality across VDialog and VMenu with better invisible/inert element handling\n* Performance optimizations for VDataTable with select-all improvements and reduced lag in large datasets\n* Multiple VMenu fixes improving keyboard navigation, scroll behavior, and ARIA attributes\n* VCombobox and VAutocomplete refinements with consistent transitions and better open/close behavior\n* Accessibility improvements with forced-colors mode support for multiple components\n* Labs components updates including VCalendar, VDateInput, and VMaskInput enhancements\n\nView the complete list of changes in the [Full Changelog](#october-2025-changelog)\n\n**Details:**\n\n* [v3.10.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.4)\n* [v3.10.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.5)\n* [v3.10.6](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.6)\n* [v3.10.7](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.7)\n* [v3.10.8](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.8)\n\n---\n\n## Ecosystem Spotlight: Vuetify Link { #ecosystem-spotlight-vuetify-link }\n\n\n\nSharing code examples and playground demos is fundamental to how our community learns and collaborates. **Vuetify Link** is now live—a URL shortening service purpose-built for the Vuetify ecosystem. It makes sharing your playgrounds, reporting issues with reproducible examples, and showcasing your latest components effortless.\n\n\n\nCreating links is free for everyone. Vuetify One users get additional features such as redirect timer, password protection, and custom slug generation.\n\n**Details:**\n\n* [Vuetify Link](https://link.vuetifyjs.com/)\n\n---\n\n## Framework Updates\n\n\n\nOctober was all about refinement and reliability. Our team focused on enhancing existing components with new features and improving the overall developer experience across the framework.\n\n### Focus Trap Enhancements\n\nWe've made significant improvements to focus trap functionality across components, ensuring better keyboard navigation and accessibility compliance. These enhancements improve the experience for users relying on keyboard navigation and assistive technologies.\n\n**Details:**\n\n* [PR#22105](https://github.com/vuetifyjs/vuetify/pull/22105)\n* [PR#22044](https://github.com/vuetifyjs/vuetify/pull/22044)\n\n### Component Refinements\n\nThe team has been working diligently to enhance component reliability and functionality:\n\n**Navigation & Selection**\n\n* **VTreeview & VList**: Improved node selection reliability for more predictable behavior in complex tree structures\n* **VBreadcrumbs**: Added `item-props` support to enable text truncation for long breadcrumb items\n\n**Form Components**\n\n* **VAutocomplete & VCombobox**: Refined menu transitions and resolved edge-case issues\n* **VMenu**: Various fixes improving stability and user experience\n\n**Data & Display**\n\n* **VTreeview**: New footer slot plus minor bug fixes\n* **VDataTable**: Multi-sort enhancements for more powerful data manipulation\n\n**Details:**\n\n* [VTreeview PR#22130](https://github.com/vuetifyjs/vuetify/pull/22130)\n* [VBreadcrumbs PR#22213](https://github.com/vuetifyjs/vuetify/pull/22213)\n* [VAutocomplete/VCombobox PR#22144](https://github.com/vuetifyjs/vuetify/pull/22144)\n* [VMenu PR#22242](https://github.com/vuetifyjs/vuetify/pull/22242)\n* [VMenu PR#22240](https://github.com/vuetifyjs/vuetify/pull/22240)\n* [VDataTable PR#22133](https://github.com/vuetifyjs/vuetify/pull/22133)\n\n### In Development\n\nWe have multiple new features and components in active development that are continuing to make progress:\n\n#### VCommandPalette\n\n**VCommandPalette Development**: Work continues on scoping and developing this highly-requested component. Command-driven interfaces are perfect for power users and keyboard-first workflows, and we're excited to bring this pattern to Vuetify applications.\n\n![VCommandPalette Component](https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/vcommandpalette.png \"VCommandPalette Component\")\n\n#### VTabs Enhancements\n\nWe're working on a new **inset variant** for `VTabs`. This variant provides a more subtle tab design that works beautifully in dense layouts and secondary navigation contexts.\n\n\n\n**Details:**\n\n* [VCommandPalette PR#22217](https://github.com/vuetifyjs/vuetify/pull/22217)\n* [VList a11y PR#21444](https://github.com/vuetifyjs/vuetify/pull/21444)\n* [VTabs inset variant PR#22221](https://github.com/vuetifyjs/vuetify/pull/22221)\n\n---\n\n## Vuetify MCP: HTTP Transport Support { #vuetify-mcp-http-transport-support }\n\n\n\nOctober brought significant updates to the **Vuetify MCP (Model Context Protocol) server**, expanding how developers can integrate Vuetify's comprehensive documentation and API intelligence into AI-powered coding assistants like Claude Code, Cline, and other MCP-compatible tools.\n\n### What's New\n\n**HTTP Transport Support**: The Vuetify MCP server now supports HTTP transport in addition to the standard stdio transport. This makes it easier to deploy and connect to the server across different environments and use cases.\n\n**Official Hosted Server**: We've launched an official hosted MCP server at **[https://mcp.vuetifyjs.com](https://mcp.vuetifyjs.com)**, allowing you to access Vuetify's documentation, component APIs, installation guides, and feature documentation without running a local server.\n\n### Getting Started\n\nTo use the hosted MCP server with Claude Desktop or other MCP clients, add the following to your MCP configuration:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\nThe Vuetify MCP server provides AI assistants with direct access to:\n\n* **Component APIs**: Detailed prop, slot, and event documentation for all Vuetify components\n* **Directive APIs**: Complete directive documentation including v-ripple, v-scroll, and more\n* **Installation Guides**: Platform-specific setup instructions for Vite, Nuxt, Laravel, and others\n* **Feature Guides**: In-depth documentation on theming, internationalization, accessibility, and more\n* **Release Notes**: Version-specific changelogs and migration information\n* **FAQ**: Frequently asked questions and common solutions\n\nThis integration enables your AI coding assistant to provide accurate, up-to-date Vuetify guidance directly within your development workflow.\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [HTTP Transport Commit](https://github.com/vuetifyjs/mcp/commit/66a3802951294f7610562d949dbdd51db879d50a)\n* [Model Context Protocol Documentation](https://modelcontextprotocol.io/)\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\nOctober was all about testing and iteration and we covered a lot of ground. All composables received a tuning pass to improve type safety and Intellisense support:\n\n![TypeScript Intellisense](https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/v0.png \"Vuetify0 TypeScript Intellisense\")\n\nAll composables now follow consistent naming conventions and patterns and we are now beginning to iterate on the component variations of each composable (where applicable). These components will marry various composables together to provide full-featured UI elements built on the v0 foundation.\n\nWe've also started to add interactive examples to the documentation site to showcase usage patterns and best practices. One component that received a lot of work last month was the **ExpansionPanel** which is now available as of the [v0.0.10](https://github.com/vuetifyjs/0/releases/tag/v0.0.10) release.\n\n```html\n\n\n\n```\n\nNovember will focus on continuing to build out components based on the v0 composables, along with additional documentation and examples as we prepare for Vuetify integration.\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [ExpansionPanel](https://0.vuetifyjs.com/components/expansion-panel/)\n\n---\n\n## October 2025 Changelog\n\nThe following section provides an overview of the changes made in October 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* Focus trap enhancements: Better keyboard navigation, invisible/inert element handling, and aria-owns support\n* Performance optimizations: Select-all optimization in VDataTable, reduced lag with large datasets\n* Form field reliability: Fixed duplicated emits, improved validation rules, better field control refs\n* Component polish: VMenu scroll/focus fixes, VCombobox/VAutocomplete transition improvements, VDatePicker range fixes\n* Accessibility: Forced-colors mode support for VBadge, VListItem, VSkeletonLoader, and VIconBtn\n* Labs updates: VCalendar scrolling fixes, VMaskInput inheritance, VDateInput min/max support\n\n**Expand** this section to see the detailed changelog for October 2025:\n\n
\n\n### :rocket: Features\n\n* **locationStrategies:** support CSS zoom ([#21878](https://github.com/vuetifyjs/vuetify/issues/21878)) ([32242a3](https://github.com/vuetifyjs/vuetify/commit/32242a353b1313b35f18bfc7c0ac7a72ed2196bb)), closes [#20719](https://github.com/vuetifyjs/vuetify/issues/20719)\n* **VCombobox:** add `always-filter` prop ([#22093](https://github.com/vuetifyjs/vuetify/issues/22093)) ([8853f4d](https://github.com/vuetifyjs/vuetify/commit/8853f4da7a6600af3587dcc54f18e5b06a2d1ff9)), closes [#22060](https://github.com/vuetifyjs/vuetify/issues/22060)\n\n### :wrench: Bug Fixes\n\n* catch querySelector errors in focusableChildren() ([ae2af38](https://github.com/vuetifyjs/vuetify/commit/ae2af38f982dc83c662bfa84ce7189c4c08ff16b)), closes [#22238](https://github.com/vuetifyjs/vuetify/issues/22238)\n* **group:** avoid errors when comparing recursive items ([#22246](https://github.com/vuetifyjs/vuetify/issues/22246)) ([8ac9c67](https://github.com/vuetifyjs/vuetify/commit/8ac9c67a50653147b9d1003546a45cfea206aab3)), closes [#19322](https://github.com/vuetifyjs/vuetify/issues/19322)\n* **nested:** avoid console warnings when updating items order ([#21987](https://github.com/vuetifyjs/vuetify/issues/21987)) ([1dac082](https://github.com/vuetifyjs/vuetify/commit/1dac0826eea90668bf760ea8c43a01a092c6f28e)), closes [#20934](https://github.com/vuetifyjs/vuetify/issues/20934)\n* **nested:** selection should react to items changes ([#22236](https://github.com/vuetifyjs/vuetify/issues/22236)) ([6bcdbea](https://github.com/vuetifyjs/vuetify/commit/6bcdbea3800c03bdf3ae736969c423bcd7e54672)), closes [#21733](https://github.com/vuetifyjs/vuetify/issues/21733)\n* **validation:** 'number' rule should accept 0 and empty string ([#22204](https://github.com/vuetifyjs/vuetify/issues/22204)) ([1b52724](https://github.com/vuetifyjs/vuetify/commit/1b52724dfeb17c6fb6dd6e50002dec33994ecd51)), closes [#22192](https://github.com/vuetifyjs/vuetify/issues/22192)\n* **validation:** correct translation template arguments ([#22146](https://github.com/vuetifyjs/vuetify/issues/22146)) ([a8e17c9](https://github.com/vuetifyjs/vuetify/commit/a8e17c9966c6333d30c092b3c931ab6afff2b03a))\n* **VBadge:** background highlight in forced-colors mode ([#22148](https://github.com/vuetifyjs/vuetify/issues/22148)) ([65f6bb7](https://github.com/vuetifyjs/vuetify/commit/65f6bb708b6cdc72c4a0e2828ef3d917f2a78559))\n* **VBtn:** set group state for non-router links ([4eeb514](https://github.com/vuetifyjs/vuetify/commit/4eeb514c675b2eeef16f994cac7d37fe1a516b65)), closes [#22085](https://github.com/vuetifyjs/vuetify/issues/22085)\n* **VChipGroup:** disable auto-scroll to the last selected ([360203a](https://github.com/vuetifyjs/vuetify/commit/360203aa3e97d84d2aea76f46a6a2062b7a7b879)), closes [#22223](https://github.com/vuetifyjs/vuetify/issues/22223)\n* **VChipGroup:** support `center-active` ([#22050](https://github.com/vuetifyjs/vuetify/issues/22050)) ([4a95697](https://github.com/vuetifyjs/vuetify/commit/4a95697c58665ed53b7c23ab6864318b59a371e9)), closes [#22046](https://github.com/vuetifyjs/vuetify/issues/22046)\n* **VCombobox:** open menu when `chips` and typing after clear ([d200f22](https://github.com/vuetifyjs/vuetify/commit/d200f227a12ba14aeb5b0a0ce0fd77ce95da52dc))\n* **VCombobox:** show full list on reopen unless `always-filter` is used ([83d0073](https://github.com/vuetifyjs/vuetify/commit/83d00737566fd1df7d043d97d6c93dde5237162e))\n* **VCombobox, VAutocomplete:** avoid glitches when opening with click ([9a1dd83](https://github.com/vuetifyjs/vuetify/commit/9a1dd8363ff59d91257236b126cb5d89c92ebb61)), closes [#22228](https://github.com/vuetifyjs/vuetify/issues/22228)\n* **VAutocomplete/VCombobox:** consistent open/close transition ([#22144](https://github.com/vuetifyjs/vuetify/issues/22144)) ([96f6479](https://github.com/vuetifyjs/vuetify/commit/96f6479d2aa82bcf8f75de51c9dce557fba981bd))\n* **VConfirmEdit:** deeply unwrap refs before cloning values ([a507171](https://github.com/vuetifyjs/vuetify/commit/a507171d25b0d41a4be0d74095ac69afbc413922)), closes [#22232](https://github.com/vuetifyjs/vuetify/issues/22232)\n* **VDataTable:** avoid lag when selecting rows in large tables ([#22163](https://github.com/vuetifyjs/vuetify/issues/22163)) ([92f8a3c](https://github.com/vuetifyjs/vuetify/commit/92f8a3c5c75e84ab79377e9c26a74576f36e6bbc)), closes [#21767](https://github.com/vuetifyjs/vuetify/issues/21767)\n* **VDataTable:** optimize select-all performance ([#22252](https://github.com/vuetifyjs/vuetify/issues/22252)) ([2ad1a38](https://github.com/vuetifyjs/vuetify/commit/2ad1a385a06d94405aa3497b079498f08c870e83)), closes [#19447](https://github.com/vuetifyjs/vuetify/issues/19447)\n* **VDatePicker:** correct range for `allowed-dates` ([#22167](https://github.com/vuetifyjs/vuetify/issues/22167)) ([e678f0e](https://github.com/vuetifyjs/vuetify/commit/e678f0e0d6c45018c611785d932c51db4068a8ef)), closes [#22160](https://github.com/vuetifyjs/vuetify/issues/22160)\n* **VDatePicker:** correct range selection for Luxon adapter ([20b2bf4](https://github.com/vuetifyjs/vuetify/commit/20b2bf425353f6a4d5edf6f1c63d5c35b0ecd165)), closes [#22262](https://github.com/vuetifyjs/vuetify/issues/22262)\n* **VDatePicker:** return correct range for DST ([#22187](https://github.com/vuetifyjs/vuetify/issues/22187)) ([a3ddcf1](https://github.com/vuetifyjs/vuetify/commit/a3ddcf16cca785abcfbc1a922c6e44f6e2acc576)), closes [#22186](https://github.com/vuetifyjs/vuetify/issues/22186)\n* **VDialog:** fix focus trap when tabbing forward ([#22101](https://github.com/vuetifyjs/vuetify/issues/22101)) ([50a150b](https://github.com/vuetifyjs/vuetify/commit/50a150bf0eb8abf6129958e6b11355a1315bfb5b)), closes [#21945](https://github.com/vuetifyjs/vuetify/issues/21945)\n* **VDialog:** focus trap should ignore invisible and inert elements ([#22105](https://github.com/vuetifyjs/vuetify/issues/22105)) ([adf3f91](https://github.com/vuetifyjs/vuetify/commit/adf3f919c6fa1efd6aacde0686a0fb5d5dc0e0bb)), closes [#18400](https://github.com/vuetifyjs/vuetify/issues/18400)\n* **VDivider:** inherit color in colored containers ([bb54a7d](https://github.com/vuetifyjs/vuetify/commit/bb54a7ded40156e24b670c83e826caca1740b74a))\n* **VField:** missing `controlRef` assignment ([#22171](https://github.com/vuetifyjs/vuetify/issues/22171)) ([b89f568](https://github.com/vuetifyjs/vuetify/commit/b89f56819302649463482ce2776557e371b9ec75)), closes [#22034](https://github.com/vuetifyjs/vuetify/issues/22034)\n* **VFileInput, VFileUpload:** avoid invalid `accept` when not defined ([e6c39bc](https://github.com/vuetifyjs/vuetify/commit/e6c39bcbeb750ce4b1a5da91edb4a940dcc4fd38)), closes [#22131](https://github.com/vuetifyjs/vuetify/issues/22131)\n* **VKbd:** use `$body-font-family` as default ([3f61102](https://github.com/vuetifyjs/vuetify/commit/3f6110237d3a0fb5e65dae6358dc4d04d11e7338))\n* **VListItem:** correct role when item is a link ([#22137](https://github.com/vuetifyjs/vuetify/issues/22137)) ([80e154b](https://github.com/vuetifyjs/vuetify/commit/80e154b8c295458b9ced262b3e20403fe07376c3)), closes [#22086](https://github.com/vuetifyjs/vuetify/issues/22086)\n* **VListItem:** respect link & canvas colors in forced-colors mode ([#22032](https://github.com/vuetifyjs/vuetify/issues/22032)) ([84a7bff](https://github.com/vuetifyjs/vuetify/commit/84a7bffc9d721c2bc2deca6b93c6d08e4e77f534))\n* **VMenu:** add aria-owns to activator ([#22240](https://github.com/vuetifyjs/vuetify/issues/22240)) ([975a18c](https://github.com/vuetifyjs/vuetify/commit/975a18cc2dd4ef197a6ab6ca49f81788f9b4f638)), closes [#22226](https://github.com/vuetifyjs/vuetify/issues/22226)\n* **VMenu:** avoid scrolling to the off-screen menu ([#22044](https://github.com/vuetifyjs/vuetify/issues/22044)) ([d1dafff](https://github.com/vuetifyjs/vuetify/commit/d1dafffd729590f1c873da20fb6b09f6d53c38e4)), closes [#21775](https://github.com/vuetifyjs/vuetify/issues/21775) [#20569](https://github.com/vuetifyjs/vuetify/issues/20569) [#21015](https://github.com/vuetifyjs/vuetify/issues/21015) [#16819](https://github.com/vuetifyjs/vuetify/issues/16819)\n* **VMenu:** ignore focus on root element ([fe1214f](https://github.com/vuetifyjs/vuetify/commit/fe1214fb1cbfe021b7db50e88ea091b4ef39e707)), closes [#22263](https://github.com/vuetifyjs/vuetify/issues/22263)\n* **VMenu:** keep open with keyboard and open-delay=\"0\" ([#22242](https://github.com/vuetifyjs/vuetify/issues/22242)) ([8e810e5](https://github.com/vuetifyjs/vuetify/commit/8e810e54b12c58a525bf2efb149f0f03a3769448)), closes [#21591](https://github.com/vuetifyjs/vuetify/issues/21591)\n* **VNumberInput:** align stacked controls in underlined variant ([#22185](https://github.com/vuetifyjs/vuetify/issues/22185)) ([e10ffea](https://github.com/vuetifyjs/vuetify/commit/e10ffea80e6cedbdfbf14912f7587aaabd221779)), closes [#22184](https://github.com/vuetifyjs/vuetify/issues/22184)\n* **VNumberInput:** allow typing negative decimal values with a comma separator ([#22199](https://github.com/vuetifyjs/vuetify/issues/22199)) ([f0fec8f](https://github.com/vuetifyjs/vuetify/commit/f0fec8fb39ec5bbc82bd02c70a17bdc1d1746995)), closes [#22183](https://github.com/vuetifyjs/vuetify/issues/22183)\n* **VNumberInput:** emit pasted value without waiting for blur ([6034a73](https://github.com/vuetifyjs/vuetify/commit/6034a73a09c649140af726dbd7dbc13a7871a245)), closes [#22182](https://github.com/vuetifyjs/vuetify/issues/22182)\n* **VOverlay:** `stick-to-target` content visible until target overflows ([#22233](https://github.com/vuetifyjs/vuetify/issues/22233)) ([0e1dff0](https://github.com/vuetifyjs/vuetify/commit/0e1dff0be1cbcc05985bd6f50c58e70ccc0ceea8)), closes [#22055](https://github.com/vuetifyjs/vuetify/issues/22055)\n* **VProgressCircular:** hide overflow to avoid height changes ([#22245](https://github.com/vuetifyjs/vuetify/issues/22245)) ([d5cfb7b](https://github.com/vuetifyjs/vuetify/commit/d5cfb7bf14cbafe57a4043a6427d21ab21d84a45)), closes [#22244](https://github.com/vuetifyjs/vuetify/issues/22244)\n* **VRangeSlider:** inherit readonly/disabled from form ([d071e24](https://github.com/vuetifyjs/vuetify/commit/d071e241c82fca7c65405174623014989f2d3985)), closes [#22054](https://github.com/vuetifyjs/vuetify/issues/22054)\n* **VSelect:** item checkbox gets out of sync ([#22181](https://github.com/vuetifyjs/vuetify/issues/22181)) ([f257802](https://github.com/vuetifyjs/vuetify/commit/f2578024e948ff24faea7275b3d0d808e0afa02e))\n* **VSkeletonLoader:** accept scoped styles ([#22201](https://github.com/vuetifyjs/vuetify/issues/22201)) ([c20031b](https://github.com/vuetifyjs/vuetify/commit/c20031be5347d17286acadf29d12d5edddc6bcb3)), closes [#22198](https://github.com/vuetifyjs/vuetify/issues/22198)\n* **VSkeletonLoader:** render background in forced-colors mode ([#22216](https://github.com/vuetifyjs/vuetify/issues/22216)) ([26e0b6d](https://github.com/vuetifyjs/vuetify/commit/26e0b6d623bcc154cc14db4958c2c3204c0dff0a))\n* **VSlider:** prevent thumb movement when disabled mid-interaction ([#22257](https://github.com/vuetifyjs/vuetify/issues/22257)) ([4506459](https://github.com/vuetifyjs/vuetify/commit/45064595260f6644e09fdfc9712547fc321e83e6)), closes [#22248](https://github.com/vuetifyjs/vuetify/issues/22248)\n* **VTabs:** correct link state in Nuxt app ([7068ce1](https://github.com/vuetifyjs/vuetify/commit/7068ce141ee11dc70d237960ea78480cf97922c6)), closes [#22188](https://github.com/vuetifyjs/vuetify/issues/22188)\n* **VTextarea:** mask should not clip scrollbar ([#22001](https://github.com/vuetifyjs/vuetify/issues/22001)) ([e8e7234](https://github.com/vuetifyjs/vuetify/commit/e8e72349a985d1ede8a4c8500114e237f1cd742d)), closes [#21283](https://github.com/vuetifyjs/vuetify/issues/21283)\n* **VTextField:** keep counter in one line ([78e053f](https://github.com/vuetifyjs/vuetify/commit/78e053f58375b07c1a636e70fdb733dda447a99e)), closes [#19620](https://github.com/vuetifyjs/vuetify/issues/19620)\n* **VTextField, VCombobox:** avoid duplicated emits on clear ([#22219](https://github.com/vuetifyjs/vuetify/issues/22219)) ([3e92de3](https://github.com/vuetifyjs/vuetify/commit/3e92de31a3d1df808710606c687f114e81df08cc)), closes [#21417](https://github.com/vuetifyjs/vuetify/issues/21417)\n* **VTreeview:** pass `indent-lines` to `header` slot ([8e964c7](https://github.com/vuetifyjs/vuetify/commit/8e964c72d00600f29202bee782eb11bb571627ad))\n* **VVirtualScroll:** scroll to last element ([#22166](https://github.com/vuetifyjs/vuetify/issues/22166)) ([1cc009f](https://github.com/vuetifyjs/vuetify/commit/1cc009f3f1387c2530d044c9bd3b6a12fdc18f1d)), closes [#20931](https://github.com/vuetifyjs/vuetify/issues/20931)\n* **VWindow:** fix exception due to missing scrollable parent in unit test ([7b122b7](https://github.com/vuetifyjs/vuetify/commit/7b122b735428e736808177cb84a39a5bb3f9b7f1))\n* **VWindow:** Maintain scroll position on window change ([#22191](https://github.com/vuetifyjs/vuetify/issues/22191)) ([fb7d36b](https://github.com/vuetifyjs/vuetify/commit/fb7d36bf66bfc67adb607c7ac0f222c9181251b8))\n\n### :arrows_counterclockwise: Reverts\n\n* Revert \"fix(VOverlay): ignore mouseenter events from touch devices\" ([d448e0e](https://github.com/vuetifyjs/vuetify/commit/d448e0eb4f958967cea632e6af2140a8847f860e)), closes [#17640](https://github.com/vuetifyjs/vuetify/issues/17640) [#22237](https://github.com/vuetifyjs/vuetify/issues/22237)\n\n### :test_tube: Labs\n\n* **VCalendar:** avoid selecting day button ([da4f99a](https://github.com/vuetifyjs/vuetify/commit/da4f99a5f35af7e664d7a5e0d100aeb43b07ddac)), closes [#22141](https://github.com/vuetifyjs/vuetify/issues/22141)\n* **VCalendar:** import directives ([1c7896d](https://github.com/vuetifyjs/vuetify/commit/1c7896dc96abbf45f58d819663fa87ec00ae7127)), closes [#22122](https://github.com/vuetifyjs/vuetify/issues/22122)\n* **VCalendar:** use scrollAreaRef from base ([#22253](https://github.com/vuetifyjs/vuetify/issues/22253)) ([16dc1d2](https://github.com/vuetifyjs/vuetify/commit/16dc1d290f5759bb1d5a6f495aae4641fc60d125)), closes [#22251](https://github.com/vuetifyjs/vuetify/issues/22251)\n* **VColorInput:** avoid VField, VInput props leaking to VPicker ([14b74d1](https://github.com/vuetifyjs/vuetify/commit/14b74d15557371baafefa8479a9ad77b00ada6af))\n* **VDateInput:** apply min/max to text input ([#22196](https://github.com/vuetifyjs/vuetify/issues/22196)) ([201e6d2](https://github.com/vuetifyjs/vuetify/commit/201e6d27f884ac6077bc8c2cef14eb12a1a28c45)), closes [#22179](https://github.com/vuetifyjs/vuetify/issues/22179)\n* **VDateInput:** avoid `color` prop leaking to VPicker ([6bddea1](https://github.com/vuetifyjs/vuetify/commit/6bddea14a7e22e6eea804a6cf8f0fb0dd807b793))\n* **VDateInput:** avoid VField, VInput props leaking to VPicker ([253e75e](https://github.com/vuetifyjs/vuetify/commit/253e75e4894fa40e069b4032dfe3bab22aa05d48))\n* **VIconBtn:** render interaction highlights in forced-colors mode ([#22211](https://github.com/vuetifyjs/vuetify/issues/22211)) ([37bd57d](https://github.com/vuetifyjs/vuetify/commit/37bd57d7400d716830ddbe0ced85754e2cd334f5))\n* **VMaskInput:** handle null value when clearing input ([#22175](https://github.com/vuetifyjs/vuetify/issues/22175)) ([46e3a84](https://github.com/vuetifyjs/vuetify/commit/46e3a84b582aa0c8f7e8aba4e00be3b1a6f7bddd)), closes [#22174](https://github.com/vuetifyjs/vuetify/issues/22174)\n* **VMaskInput:** inherit class and style ([#22247](https://github.com/vuetifyjs/vuetify/issues/22247)) ([01f5e6f](https://github.com/vuetifyjs/vuetify/commit/01f5e6f29d83d3e4c477eb1cfe92262b8186150e))\n* **VPie:** consistent avatar size in tooltip ([6cefd46](https://github.com/vuetifyjs/vuetify/commit/6cefd4663ba1c6dfee02eea3a35ae76e0793b44e))\n\n
\n\n## What's Next{ #whats-next .mt-4 }\n\nNovember brings us closer to the Vuetify v3.11 release as we continue stabilizing the framework and polishing components. Work continues on v0 composables with expanded documentation and integration testing, while in-development features like VCommandPalette and the VTabs inset variant move toward completion.\n\nThe Vuetify MCP server will continue evolving based on community feedback, and we're exploring additional AI-powered developer tools to streamline the Vuetify development experience. As always, your bug reports, feature requests, and community contributions drive our roadmap forward.\n\nThank you for being part of the Vuetify community. See you in November!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","packages/docs/src/pages/en/blog/september-2025-update.md":"---\nlayout: blog\nmeta:\n title: September 2025 Update\n description: September assembles the building blocks for Vuetify's next phase — from the new Figma UI Kit and design-to-development workflows to foundational v0 composables.\n keywords: Vuetify September 2025, Figma UI Kit, Vuetify0\n---\n\n\n\n# September 2025 Update\n\nWelcome 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.\n\n![Hero image for September update](https://cdn.vuetifyjs.com/docs/images/blog/september-2025-update/september-hero.png \"September hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 October 12th, 2025\n\n\n\n---\n\n## Assembling the Future\n\nI'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.\n\nHaving 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.\n\n::: success\n\nCool example of the month: [Gradient VProgressLinear](https://play.vuetifyjs.com/playgrounds/AIVKig) by [J-Sek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Updated Official Figma UI Kit](#updated-official-figma-ui-kit)\n * [What's Included](#whats-included)\n * [Why This Matters](#why-this-matters)\n * [Pro Version Available](#pro-version-available)\n* [September Webinar Recap: Performance Crisis](#september-webinar-recap-performance-crisis)\n * [Next Event: v0 Live Coding with John](#next-event-v0-live-coding-with-john)\n* [Vuetify0: Composables Taking Shape](#vuetify0-composables-taking-shape)\n * [New Composables This Month](#new-composables-this-month)\n* [Framework & Security Updates](#framework-security-updates)\n * [Build System Modernization](#build-system-modernization)\n* [Ecosystem Spotlight: Vuetify Link](#ecosystem-spotlight-vuetify-link)\n * [Key Features](#key-features)\n* [September 2025 Changelog](#september-2025-changelog)\n* [The Pieces Come Together](#the-pieces-come-together)\n\n---\n\n## Releases\n\nSeptember focused on stabilization and quality improvements across the Vuetify 3 series, including iterating to the next minor version with [v3.10.0 (Argo)](/getting-started/release-notes/?version=v3.10.0). We've addressed numerous bugs, enhanced accessibility, and refined component behaviors to ensure a robust experience for developers and users alike.\n\n![September Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/september-2025-update/v310_release.png \"September Releases Banner\")\n\n### Key Improvements\n\n* A direct [VCalendar](/components/calendars) port from Vuetify 2, bringing back familiar calendar functionalities with modern enhancements.\n* Added support for `prefers-reduced-motion` to respect user accessibility settings\n* Added multiple new slots for [VTreeview](/components/treeview) and [VDataTable](/components/data-tables/introduction/) for greater customization\n\nView the complete list of changes in the [Full Changelog](#september-2025-changelog)\n\n**Details:**\n\n* [v3.9.7](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.7)\n* [v3.10.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.0)\n* [v3.10.1](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.1)\n* [v3.10.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.2)\n* [v3.10.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.3)\n\n## Updated Official Figma UI Kit\n\nWe're thrilled to announce the release of our **[updated Vuetify 3 UI Kit for Figma](https://store.vuetifyjs.com/products/vuetify-ui-kit-figma)**! This comprehensive design system brings Vuetify's Material Design implementation directly to your design workflow, completely free.\n\n![Vuetify Figma UI Kit Update](https://cdn.vuetifyjs.com/docs/images/blog/september-2025-update/figma.png \"Vuetify Figma UI Kit Update\")\n\n### What's Included { #whats-included }\n\n* **Complete Component Library**: Every Vuetify 3 component meticulously recreated in Figma\n* **Material Design 3 Foundation**: Built on the latest Material Design specifications\n* **Design Tokens**: Consistent spacing, typography, and color systems\n* **Responsive Variants**: Components optimized for all screen sizes\n* **Dark Mode Support**: Full theme switching capabilities\n* **Auto-Layout**: Modern Figma features for flexible, maintainable designs\n\n### Why This Matters\n\nThis 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.\n\n### Pro Version Available\n\nDesign 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.\n\n#### Why PRO\n\n* ✅ 150+ components with 1:1 names and structure with Vuetify\n* ✅ All variants (elevated, flat, tonal, outlined, text, plain…) and complete states\n* ✅ Advanced foundations: 7 color roles, densities, radius, borders (color/width/opacity)\n* ✅ +4 modes by variables to scale brands and themes\n* ✅ Updates synchronized with the library and direct support\n\n**Ideal for:**\n\n* Teams & Startups — Faster delivery, total consistency and less rework\n* Freelancers — Winning proposals and clean handoff with devs\n* Design Systems — Variables, tokens and real theme scalability\n* Dev Teams — 1:1 parity with Vuetify components to implement without friction.\n\n#### Comparison Table\n\n| Feature | PRO | FREE |\n|---------|-----|------|\n| **Foundations** | Includes complete **Material Design Colors** | Does not include MD color palette |\n| **Themes** | Light / Dark (+ extra modes by variables) | Light / Dark |\n| **Color Roles** | Default, Primary, Secondary, Custom, Error, Warning, Info, Success | Default, Primary, Secondary, Custom, Error, Warning, Info, Success |\n| **States** | Enabled, Disabled, Active/Focus, Hover | Enabled, Disabled |\n| **Sizes** | Default, Small, X/Small, Large, X/Large | Default, Small, Large |\n| **Density** | Default, Comfortable, Compact | Only Default |\n| **Border Color** | Current + Primary, Secondary, Error, Warning, Info, Success | Only Current |\n| **Border Width** | default, 0, xs (thin), sm, md, lg, xl | default, 0 |\n| **Border Opacity** | default, 0, 25, 50, 75, 100 | Not available |\n| **Border Radius** | default, square, xs, sm, md, lg, xl, pill, circle | default, square, pill, circle |\n| **Error State** | Full support | Basic inputs |\n| **Others** | Individual color control in `VField` | No individual control |\n| **Components** | All components | Missing components |\n| **Variants** | All variants | Only elevated • flat • outlined |\n| **Variants in Inputs** | All variants | Only filled • outlined |\n| **Updates & Support** | Synchronized with library + support | Not guaranteed • no support |\n| **Modes by variables** | 4+ modes | 4 or less |\n\n**Details:**\n\n* [Free Figma UI Kit](https://store.vuetifyjs.com/products/vuetify-ui-kit-figma)\n* [Go PRO](https://store.vuetifyjs.com/products/official-vuetify-3-ui-kit-for-figma)\n\n## September Webinar Recap: Performance Crisis { #september-webinar-recap-performance-crisis }\n\nThank 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:\n\n* Disable [unused CSS utilities](/features/sass-variables/#disabling-utility-classes) with SASS variables\n* Use [vite-plugin-vuetify](/features/treeshaking/) for automatic treeshaking and code splitting\n* Reduce page load time with [VLazy](/components/lazy/)\n* Use [VVirtualScroll](/components/virtual-scroll/) for expensive lists\n\nNever miss another event by joining our [Discord Community](https://community.vuetifyjs.com/) and following us on [X](https://x.com/vuetifyjs)!.\n\n### Next Event: v0 Live Coding with John { #next-event-v0-live-coding-with-john }\n\n**Wednesday, October 29th**: Join John for an exclusive live coding session where he'll build a complete application using Vuetify0 from scratch!\n\n#### What to Expect\n\n* **Real-time Development**: Watch as John tackles real-world challenges\n* **Composables in Action**: See how usePermissions, useFeatures, and other v0 composables work together\n* **Architecture Decisions**: Learn the reasoning behind v0's design patterns\n* **Live Q&A**: Get your questions answered as we code\n* **Early Access Insights**: First detailed look at v0's developer experience\n\nThis 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.\n\n**Details**:\n\n* Date: Wednesday, October 29th\n* Start Time: 9:00 AM CST\n* [See what Vuetify0 is all about](https://discord.gg/vuetify-340160225338195969?event=1426220686162268311)\n\n## Vuetify0: Composables Taking Shape { #vuetify0-composables-taking-shape }\n\n\n\nSeptember 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.\n\n### New Composables This Month\n\n* **usePermissions**: A composable for managing RBAC permissions:\n\n```ts { resource=\"src/main.ts\" }\nimport { createApp } from 'vue'\nimport { createPermissionsPlugin } from '@vuetify/0'\n\nconst app = createApp()\n\napp.use(\n createPermissionsPlugin({\n permissions: {\n super: [\n ['create', 'Post'],\n ['read', 'Post'],\n ['update', 'Post'],\n ['delete', 'Post'],\n ['use', 'Dev'],\n ],\n editor: [\n ['create', 'Post'],\n ['read', 'Post'],\n ['update', 'Post']\n ],\n },\n })\n)\n\napp.mount('#app')\n```\n\n```html { resource=\"src/components/SomeComponent.vue\" }\n\n\n\n```\n\n* **useFeatures**: A composable for managing available features and feature flags w/ variants support.\n\n```ts { resource=\"src/main.ts\" }\nimport { createApp } from 'vue'\nimport { createFeaturesPlugin } from '@vuetify/0'\n\nconst app = createApp()\n\napp.use(\n createFeaturesPlugin({\n features: {\n comments: true,\n dev: false,\n search: {\n $value: true,\n $variation: 'v2',\n $description: 'The new and improved search experience',\n },\n },\n })\n)\n\napp.mount('#app')\n```\n\n```html { resource=\"src/components/SomeComponent.vue\" }\n\n\n\n```\n\n* **useTimeline**: A composable for sequence management with undo/redo support.\n\n```html { resource=\"src/components/SomeComponent.vue\" }\n\n```\n\n::: info\n\nSee all available composables on the [Vuetify0 documentation site](https://0.vuetifyjs.com/composables/).\n\n:::\n\n**Details:**\n\n* [usePermissions Documentation](https://0.vuetifyjs.com/composables/plugins/use-permissions/)\n* [useFeatures Documentation](https://0.vuetifyjs.com/composables/plugins/use-features/)\n* [useTimeline Documentation](https://0.vuetifyjs.com/composables/registration/use-timeline/)\n\n## Framework & Security Updates { #framework-security-updates }\n\nWith 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.\n\n### Build System Modernization\n\nThis month brought significant improvements to our build infrastructure in Vuetify and across the ecosystem. Key updates include:\n\n* **Vite 7 Support**: Full migration completed with improved build performance\n* **Vue-TSC 3**: Updated TypeScript tooling for better type checking\n* **Trusted Publishing**: Enhanced security for all package releases with the pnpm's **minimumReleaseAge** setting\n* **TSGO:** Replaced our TSC usage with TSGO for faster builds and better DX\n\n**Details:**\n\n* [Commit: af9a9bf](https://github.com/vuetifyjs/vuetify/commit/af9a9bfc63fa44721f89076431fbe004e70d7c1c)\n* [Commit: c78f8aa](https://github.com/vuetifyjs/vuetify/commit/c78f8aa066164f6ee5f2e1f106ed121963faffe5)\n\n## Ecosystem Spotlight: Vuetify Link { #ecosystem-spotlight-vuetify-link }\n\n\n\nVuetify 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.\n\n### Key Features\n\n* **Custom Slugs**: Create memorable and branded short links\n* **Link Management**: Edit, delete, and track your links from a simple dashboard\n* **Analytics**: Monitor link performance with detailed statistics\n* **Free & Pro Plans**: Basic link shortening is free, with advanced features available for Vuetify One subscribers\n\n![Vuetify Link Landing Screenshot](https://cdn.vuetifyjs.com/docs/images/blog/september-2025-update/vlink_banner.png \"Vuetify Link Landing\")\n\nWe anticipate launching this new service **this month!** Stay tuned for the official release announcement with all the details.\n\n## September 2025 Changelog\n\nThe following section provides an overview of the changes made in September 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* Introduced `spaced` prop for VBtn to enhance button spacing options.\n* Added `truncate-length` prop to VFileInput for better filename management.\n* Implemented `stick-to-target` prop in VOverlay for improved overlay positioning.\n* Enhanced accessibility with `aria-controls` and `aria-expanded` in VSelects.\n* Re-converted `VCalendar` based off of Vuetify 2 implementation.\n\n**Expand** this section to see the detailed changelog for September 2025:\n\n
\n\n### :rocket: Features\n\n* **filter:** keep dividers and subheaders ([#21822](https://github.com/vuetifyjs/vuetify/issues/21822)) ([18ac731](https://github.com/vuetifyjs/vuetify/commit/18ac7319a04df9645861977b723173c376655c2f)), closes [#7424](https://github.com/vuetifyjs/vuetify/issues/7424)\n* **framework:** respect prefers-reduced-motion ([#21530](https://github.com/vuetifyjs/vuetify/issues/21530)) ([01c9e91](https://github.com/vuetifyjs/vuetify/commit/01c9e9115898118535865197660dd7399ae1626c)), closes [#19622](https://github.com/vuetifyjs/vuetify/issues/19622)\n* **VBtn:** add `spaced` prop ([#21663](https://github.com/vuetifyjs/vuetify/issues/21663)) ([819605c](https://github.com/vuetifyjs/vuetify/commit/819605c6b4606bf45d33ea9c431c4e97a1bbd3b7)), closes [#21652](https://github.com/vuetifyjs/vuetify/issues/21652)\n* **VCard:** allow semantic HTML tags for content parts ([#21943](https://github.com/vuetifyjs/vuetify/issues/21943)) ([5f8abb6](https://github.com/vuetifyjs/vuetify/commit/5f8abb6c5cece7fea660a7f4811e3c0108a4f402))\n* **VColorPicker:** add `hide-eye-dropper` prop ([be452a5](https://github.com/vuetifyjs/vuetify/commit/be452a547f7efeb773fa8173695c6463137281a0)), closes [#19154](https://github.com/vuetifyjs/vuetify/issues/19154) [#19150](https://github.com/vuetifyjs/vuetify/issues/19150)\n* **VColorPicker:** customizable eyeDropper icon ([#21656](https://github.com/vuetifyjs/vuetify/issues/21656)) ([71377a6](https://github.com/vuetifyjs/vuetify/commit/71377a69079ccdb258ead9dcee2bcd355d6ce6d3)), closes [#21406](https://github.com/vuetifyjs/vuetify/issues/21406)\n* **VDataIterator:** add filtered items count to slot data ([#18641](https://github.com/vuetifyjs/vuetify/issues/18641)) ([7d51302](https://github.com/vuetifyjs/vuetify/commit/7d51302c8e609b78854934586dafef41ba188428))\n* **VDataTable:** customizable expand/collapse icons ([#21698](https://github.com/vuetifyjs/vuetify/issues/21698)) ([1636f63](https://github.com/vuetifyjs/vuetify/commit/1636f632027255bdbc33a989ce667f9c9b352793))\n* **VDataTable:** re-introduce `group-summary` slot ([#21802](https://github.com/vuetifyjs/vuetify/issues/21802)) ([a19cd87](https://github.com/vuetifyjs/vuetify/commit/a19cd8778ac21e9c050649d570e726ac11fa0008)), closes [#21800](https://github.com/vuetifyjs/vuetify/issues/21800)\n* **VDatePicker:** re-introduce `first-day-of-year` prop ([#21760](https://github.com/vuetifyjs/vuetify/issues/21760)) ([af74f62](https://github.com/vuetifyjs/vuetify/commit/af74f62a1d57a63bcad835a4a2aded2ff03b419c)), closes [#20270](https://github.com/vuetifyjs/vuetify/issues/20270)\n* **VFileInput:** add `truncate-length` prop ([#17972](https://github.com/vuetifyjs/vuetify/issues/17972)) ([28ef26c](https://github.com/vuetifyjs/vuetify/commit/28ef26c59b5e1991c469adbd567f305d88bac904)), closes [#17635](https://github.com/vuetifyjs/vuetify/issues/17635)\n* **VFileUpload, VFileInput:** add `filter-by-type` prop ([#21576](https://github.com/vuetifyjs/vuetify/issues/21576)) ([1b78b06](https://github.com/vuetifyjs/vuetify/commit/1b78b06a40470186c83c88f95ec00ba71d36171d)), closes [#21150](https://github.com/vuetifyjs/vuetify/issues/21150)\n* **VOverlay:** add `stick-to-target` prop ([#21704](https://github.com/vuetifyjs/vuetify/issues/21704)) ([8552779](https://github.com/vuetifyjs/vuetify/commit/855277993131333d57359dadbf1511532a98cc68)), closes [#19856](https://github.com/vuetifyjs/vuetify/issues/19856) [#19732](https://github.com/vuetifyjs/vuetify/issues/19732) [#17125](https://github.com/vuetifyjs/vuetify/issues/17125)\n* **VProgressLinear:** ability to separate chunks ([#21744](https://github.com/vuetifyjs/vuetify/issues/21744)) ([4c66aa0](https://github.com/vuetifyjs/vuetify/commit/4c66aa0bda8763d31a5d61a1eff77e873cd4b4c1))\n* **VTextField, VTextarea:** add `autocomplete` prop ([#21359](https://github.com/vuetifyjs/vuetify/issues/21359)) ([d94c003](https://github.com/vuetifyjs/vuetify/commit/d94c00309e6e744e267275cc179bbdfc61fdd848)), closes [#21353](https://github.com/vuetifyjs/vuetify/issues/21353)\n* **VTimePicker:** add `period` prop ([#21823](https://github.com/vuetifyjs/vuetify/issues/21823)) ([8df7685](https://github.com/vuetifyjs/vuetify/commit/8df76851aff28dcfc8b73eee18d5613557aafce8)), closes [#15405](https://github.com/vuetifyjs/vuetify/issues/15405)\n* **VTreeview:** add `header` slot ([fc86d05](https://github.com/vuetifyjs/vuetify/commit/fc86d05d0b72fb27ebc6bd2017d8684a3aa148a9))\n* **VTreeview:** add `toggle` slot ([#21018](https://github.com/vuetifyjs/vuetify/issues/21018)) ([4ec13f2](https://github.com/vuetifyjs/vuetify/commit/4ec13f2841839d482ee38c9e7f0d72dc006d4090)), closes [#20307](https://github.com/vuetifyjs/vuetify/issues/20307)\n* **VWindow, VCarousel:** add `crossfade` and `transition-duration` ([#21850](https://github.com/vuetifyjs/vuetify/issues/21850)) ([15a5c96](https://github.com/vuetifyjs/vuetify/commit/15a5c96933db148d568a88855d6ba3df53815001))\n\n### :wrench: Bug Fixes\n\n* **framework:** don't use multi-line :not() ([a15edec](https://github.com/vuetifyjs/vuetify/commit/a15edecc8313d13158d62776d4532eb9cc2e583a)), closes [#21995](https://github.com/vuetifyjs/vuetify/issues/21995)\n* **goto:** always check for window.matchMedia support ([7d11a39](https://github.com/vuetifyjs/vuetify/commit/7d11a39d16262c867bcd1d760dee05758b95a398)), closes [#22059](https://github.com/vuetifyjs/vuetify/issues/22059)\n* **group:** support `null` values ([#21743](https://github.com/vuetifyjs/vuetify/issues/21743)) ([facd4af](https://github.com/vuetifyjs/vuetify/commit/facd4af2e90a80c80c512b8a2df46cd6d48be5e2)), closes [#20550](https://github.com/vuetifyjs/vuetify/issues/20550)\n* **nested:** detect and warn about multiple `null` values ([#21940](https://github.com/vuetifyjs/vuetify/issues/21940)) ([0960aa6](https://github.com/vuetifyjs/vuetify/commit/0960aa607835c63950976c570b880feb3f3ae358)), closes [#21815](https://github.com/vuetifyjs/vuetify/issues/21815)\n* **rounded:** prioritize `tile` prop (like in v2) ([6b13382](https://github.com/vuetifyjs/vuetify/commit/6b13382f7784dfa47b0def7b7a80d184063bf392)), closes [#21844](https://github.com/vuetifyjs/vuetify/issues/21844)\n* **selects:** open menu when items is mutated not just replaced ([#22067](https://github.com/vuetifyjs/vuetify/issues/22067)) ([a3f8b17](https://github.com/vuetifyjs/vuetify/commit/a3f8b17e66c1e12a14c80376b0ad7ad7c42cd4cd)), closes [#22066](https://github.com/vuetifyjs/vuetify/issues/22066)\n* **v-touch:** set event handlers on root components ([#21997](https://github.com/vuetifyjs/vuetify/issues/21997)) ([1da3451](https://github.com/vuetifyjs/vuetify/commit/1da3451724ca97de6a95082c0a39736ef89a4906)), closes [#21768](https://github.com/vuetifyjs/vuetify/issues/21768)\n* **VAlert:** use outline instead of background in forced-colors mode ([#21946](https://github.com/vuetifyjs/vuetify/issues/21946)) ([7560323](https://github.com/vuetifyjs/vuetify/commit/7560323d9d33a9d71d2975ab25537cc7bfe493ec))\n* **VAutocomplete:** restore placeholder on blur ([#22114](https://github.com/vuetifyjs/vuetify/issues/22114)) ([d0ebeec](https://github.com/vuetifyjs/vuetify/commit/d0ebeec88485e3579967e073b0f17136cfd84eac)), closes [#21762](https://github.com/vuetifyjs/vuetify/issues/21762)\n* **VBtn, VChip:** correct link active state after navigation cancellation ([#21651](https://github.com/vuetifyjs/vuetify/issues/21651)) ([bce7046](https://github.com/vuetifyjs/vuetify/commit/bce70460ea7e7c9243c5bbe7e0c384202a2c402f)), closes [#21594](https://github.com/vuetifyjs/vuetify/issues/21594)\n* **VBtn:** add aria-disabled and tabindex to disabled links ([#22082](https://github.com/vuetifyjs/vuetify/issues/22082)) ([6e92383](https://github.com/vuetifyjs/vuetify/commit/6e92383726ee33cbb20cfa1e8c44e7d6f089a7fa)), closes [#22061](https://github.com/vuetifyjs/vuetify/issues/22061)\n* **VBtn:** don't set group state on link click ([e292171](https://github.com/vuetifyjs/vuetify/commit/e292171a593020b3eeb02cf8fa377cca8f48235a)), closes [#21594](https://github.com/vuetifyjs/vuetify/issues/21594)\n* **VBtn:** set group state for non-router links ([6bb3fce](https://github.com/vuetifyjs/vuetify/commit/6bb3fce6a165da8cd895ceba66690af3ab7422ef)), closes [#22085](https://github.com/vuetifyjs/vuetify/issues/22085)\n* **VCard:** render border in forced-colors mode ([#21968](https://github.com/vuetifyjs/vuetify/issues/21968)) ([b30d5c8](https://github.com/vuetifyjs/vuetify/commit/b30d5c851947cb214927b7e6bd9288de9d4b15fa))\n* **VChip:** correct opacity for plain variant ([#22005](https://github.com/vuetifyjs/vuetify/issues/22005)) ([48d20f3](https://github.com/vuetifyjs/vuetify/commit/48d20f3095b3b103c791b759dbbf28a751b374f5))\n* **VChip:** render border in forced-colors mode ([#21970](https://github.com/vuetifyjs/vuetify/issues/21970)) ([59aeadc](https://github.com/vuetifyjs/vuetify/commit/59aeadc4337bd3273eebb31cb220728cf0aadac3))\n* **VChipGroup:** render selected in forced-colors mode ([#21973](https://github.com/vuetifyjs/vuetify/issues/21973)) ([997dd56](https://github.com/vuetifyjs/vuetify/commit/997dd5668fe71994e11b4a406ea472697591ac6a))\n* **VCombobox:** filter matching items when opening first time ([#21901](https://github.com/vuetifyjs/vuetify/issues/21901)) ([eeb9d14](https://github.com/vuetifyjs/vuetify/commit/eeb9d145be9f8fb0984ab8a82fc0b561c530cb17)), closes [#21900](https://github.com/vuetifyjs/vuetify/issues/21900)\n* **VCombobox:** unstable menu state while typing ([#22045](https://github.com/vuetifyjs/vuetify/issues/22045)) ([3983af9](https://github.com/vuetifyjs/vuetify/commit/3983af946d49e9eab6c523777510871aa0b5d563))\n* **VDataTable:** allow filters on all columns ([#21876](https://github.com/vuetifyjs/vuetify/issues/21876)) ([af20234](https://github.com/vuetifyjs/vuetify/commit/af20234e3642ff0cff82f546390eca7412c594d0))\n* **VDataTable:** correct alignment of checkboxes ([402257d](https://github.com/vuetifyjs/vuetify/commit/402257d8490a43bb888203ddbb57b82773ad3c0b))\n* **VDataTable:** expand rows when items are plain array ([#22109](https://github.com/vuetifyjs/vuetify/issues/22109)) ([d8b5c4a](https://github.com/vuetifyjs/vuetify/commit/d8b5c4ad009cb27a0dcee6a0c0ee8d3a0a3dd939)), closes [#22080](https://github.com/vuetifyjs/vuetify/issues/22080)\n* **VDataTable:** more flexible alignment with grouping ([#21862](https://github.com/vuetifyjs/vuetify/issues/21862)) ([6d802d3](https://github.com/vuetifyjs/vuetify/commit/6d802d3c8e87752f601414141ce0ee843592535f)), closes [#17863](https://github.com/vuetifyjs/vuetify/issues/17863)\n* **VDataTable:** should allow expanding rows when `return-object` is true ([#21128](https://github.com/vuetifyjs/vuetify/issues/21128)) ([a586965](https://github.com/vuetifyjs/vuetify/commit/a586965cf351aa34e632fe753c43ffd6e9304e4d)), closes [#21096](https://github.com/vuetifyjs/vuetify/issues/21096)\n* **VList, VTreeview:** avoid locked active state when navigating ([#21725](https://github.com/vuetifyjs/vuetify/issues/21725)) ([bdbe15a](https://github.com/vuetifyjs/vuetify/commit/bdbe15ae1a6882dbfa48f620752eba9f26578d3b))\n* **VList:** outline and selection in forced-colors mode ([#21958](https://github.com/vuetifyjs/vuetify/issues/21958)) ([a8eac52](https://github.com/vuetifyjs/vuetify/commit/a8eac52195d894b5a6f3f3c1a93de4f59a2dba7a))\n* **VList:** use proper accessibility attributes ([#21444](https://github.com/vuetifyjs/vuetify/issues/21444)) ([9b2541e](https://github.com/vuetifyjs/vuetify/commit/9b2541e1085dd69295a23fd501d44dc51730638e)), closes [#20978](https://github.com/vuetifyjs/vuetify/issues/20978)\n* **VListGroup:** fit the navigation drawer rail ([2ebc7fa](https://github.com/vuetifyjs/vuetify/commit/2ebc7fa5b4b395337faadf4a8dfbf09edac6b247)), closes [#22047](https://github.com/vuetifyjs/vuetify/issues/22047)\n* **VListItem:** fix `rounded` prop ([9ec5a0d](https://github.com/vuetifyjs/vuetify/commit/9ec5a0d624dceb659f746d11263bb53298f2bdc5)), closes [#22015](https://github.com/vuetifyjs/vuetify/issues/22015)\n* **VMenu, VTooltip:** default to `stick-to-target` false ([263ca4b](https://github.com/vuetifyjs/vuetify/commit/263ca4b9eee3b1f4acc201d255a88ea1c2c222d4)), closes [#22055](https://github.com/vuetifyjs/vuetify/issues/22055)\n* **VNumberInput:** accept external changes when focused ([#21827](https://github.com/vuetifyjs/vuetify/issues/21827)) ([d0340e7](https://github.com/vuetifyjs/vuetify/commit/d0340e7ea0925dc9995a299cd61b6b91de30e239)), closes [#21735](https://github.com/vuetifyjs/vuetify/issues/21735) [#21804](https://github.com/vuetifyjs/vuetify/issues/21804)\n* **VNumberInput:** ignore custom `type` ([c535f1a](https://github.com/vuetifyjs/vuetify/commit/c535f1a17ba2fa15ae182dc0aeeef8df985b0d91)), closes [#22110](https://github.com/vuetifyjs/vuetify/issues/22110)\n* **VOtpInput:** focus next field when correcting values ([#21781](https://github.com/vuetifyjs/vuetify/issues/21781)) ([fc91e6d](https://github.com/vuetifyjs/vuetify/commit/fc91e6d7ee632437fb376b8169a88c593e436716)), closes [#21680](https://github.com/vuetifyjs/vuetify/issues/21680)\n* **VProgressLinear:** ensure visibility when using custom colors ([#21949](https://github.com/vuetifyjs/vuetify/issues/21949)) ([e3fdb53](https://github.com/vuetifyjs/vuetify/commit/e3fdb53a1fe5bb332ad981012cfdf8cab79faa1a))\n* **VSelects:** add `aria-controls` and `aria-expanded` ([#22025](https://github.com/vuetifyjs/vuetify/issues/22025)) ([a5abe89](https://github.com/vuetifyjs/vuetify/commit/a5abe893d7d3c9f93d69f60ece5a93185f74bb9a)), closes [#22017](https://github.com/vuetifyjs/vuetify/issues/22017)\n* **VSelects/VCombobox/VAutocomplete:** use rounding from Sass variable ([d3e56de](https://github.com/vuetifyjs/vuetify/commit/d3e56def269205bb84cd26a0c8c24e433045f71a)), closes [#21956](https://github.com/vuetifyjs/vuetify/issues/21956)\n* **VSkeletonLoader:** no wrapper for content ([#21637](https://github.com/vuetifyjs/vuetify/issues/21637)) ([17ae110](https://github.com/vuetifyjs/vuetify/commit/17ae11093e0ff21a0d0d16aa4559bedf86615236)), closes [#21286](https://github.com/vuetifyjs/vuetify/issues/21286)\n* **VSlideGroup:** correct hasNext after resize ([#21124](https://github.com/vuetifyjs/vuetify/issues/21124)) ([0633aef](https://github.com/vuetifyjs/vuetify/commit/0633aef52540f5e9853e25d0ef2ad94e134fe8b2)), closes [#21115](https://github.com/vuetifyjs/vuetify/issues/21115)\n* **VSlider:** respect disabled and readonly from form ([0bbf362](https://github.com/vuetifyjs/vuetify/commit/0bbf3623ae0a66743ead2b23fb7a0dc197a035f2)), closes [#22054](https://github.com/vuetifyjs/vuetify/issues/22054)\n* **VSnackbar:** render border in forced-colors mode ([#21977](https://github.com/vuetifyjs/vuetify/issues/21977)) ([a2249c2](https://github.com/vuetifyjs/vuetify/commit/a2249c24aaed5cce0cc926993829c405b5d11296))\n* **VTimeline:** render lines in forced-colors mode ([#21974](https://github.com/vuetifyjs/vuetify/issues/21974)) ([dc7417c](https://github.com/vuetifyjs/vuetify/commit/dc7417c60c95b34b2f8375eb2269955d846427d9))\n* **VTreeview:** indent lines should support RTL ([1733666](https://github.com/vuetifyjs/vuetify/commit/1733666d5364819b78605185c00deeeef3f2f2a4)), closes [#21952](https://github.com/vuetifyjs/vuetify/issues/21952)\n* **VTreeview:** match type of update:opened with VList ([#22092](https://github.com/vuetifyjs/vuetify/issues/22092)) ([8924b4d](https://github.com/vuetifyjs/vuetify/commit/8924b4d4230cba102f3293fca0fa4c569909eb3c)), closes [#22091](https://github.com/vuetifyjs/vuetify/issues/22091)\n* **VTreeview:** support prepend icon and avatar ([#21813](https://github.com/vuetifyjs/vuetify/issues/21813)) ([478230a](https://github.com/vuetifyjs/vuetify/commit/478230abcdc0fb156523cc9edd4d5f10eea3e069)), closes [#21812](https://github.com/vuetifyjs/vuetify/issues/21812)\n* **VWindow:** override `transition-duration` to respect user preference ([27fe364](https://github.com/vuetifyjs/vuetify/commit/27fe36478ae161b7758a08c8dd4b70e7068a8f06))\n\n### :test_tube: Labs\n\n* **mask:** create useMask composable ([#21736](https://github.com/vuetifyjs/vuetify/issues/21736)) ([a687f7a](https://github.com/vuetifyjs/vuetify/commit/a687f7a38f4377421f47660564fe7f02d6e0231c))\n* **VCalendar:** correct effective weekdays determination ([#22042](https://github.com/vuetifyjs/vuetify/issues/22042)) ([54e6674](https://github.com/vuetifyjs/vuetify/commit/54e667426d5ddefbab951d240511cfc74afa0233))\n* **VCalendar:** directly port from v2 ([#21910](https://github.com/vuetifyjs/vuetify/issues/21910)) ([2e6f72b](https://github.com/vuetifyjs/vuetify/commit/2e6f72baf3a8337dee76e321ed5e18910159c5f6)), closes [#19065](https://github.com/vuetifyjs/vuetify/issues/19065) [#20098](https://github.com/vuetifyjs/vuetify/issues/20098) [#20947](https://github.com/vuetifyjs/vuetify/issues/20947) [#20970](https://github.com/vuetifyjs/vuetify/issues/20970) [#21379](https://github.com/vuetifyjs/vuetify/issues/21379) [#21783](https://github.com/vuetifyjs/vuetify/issues/21783) [#21964](https://github.com/vuetifyjs/vuetify/issues/21964) [#22016](https://github.com/vuetifyjs/vuetify/issues/22016) [#22018](https://github.com/vuetifyjs/vuetify/issues/22018)\n* **VCalendar:** fix click:date event error ([97d3a3e](https://github.com/vuetifyjs/vuetify/commit/97d3a3eed1add2b3957bb65916ebf234e9bf8e67)), closes [#22079](https://github.com/vuetifyjs/vuetify/issues/22079)\n* **VCalendar:** prevent month view event duplication ([977a7e2](https://github.com/vuetifyjs/vuetify/commit/977a7e2a2e400092723e44024c23a2f56947ac77)), closes [#22062](https://github.com/vuetifyjs/vuetify/issues/22062)\n* **VCalendar:** translate eventMoreText ([e41e091](https://github.com/vuetifyjs/vuetify/commit/e41e091f10a13aa55b14b567272412391617ff1a)), closes [#22062](https://github.com/vuetifyjs/vuetify/issues/22062)\n* **VCalendar:** use camelCase event names ([8b2fae3](https://github.com/vuetifyjs/vuetify/commit/8b2fae3428d2228660c8c8d80721da5bb9a9db6d)), closes [#22063](https://github.com/vuetifyjs/vuetify/issues/22063)\n* **VDateInput:** pass-through picker slots ([#21975](https://github.com/vuetifyjs/vuetify/issues/21975)) ([d91dad0](https://github.com/vuetifyjs/vuetify/commit/d91dad08751717ca2097932774485a939e2d9ca7))\n* **VMaskInput:** fix caret position while editing ([#21925](https://github.com/vuetifyjs/vuetify/issues/21925)) ([27dc68c](https://github.com/vuetifyjs/vuetify/commit/27dc68caec935395fdd0d713e106db06f7e00404)), closes [#21776](https://github.com/vuetifyjs/vuetify/issues/21776)\n* **VPicker:** add `hide-title` prop ([#21657](https://github.com/vuetifyjs/vuetify/issues/21657)) ([8d7eac3](https://github.com/vuetifyjs/vuetify/commit/8d7eac3dcd80387e4d3118f1660d7fb25251f66a)), closes [#21545](https://github.com/vuetifyjs/vuetify/issues/21545)\n* **VVideo:** avoid interaction conflicts with VOverlay ([10a1821](https://github.com/vuetifyjs/vuetify/commit/10a18215226793f2832a5b68ebec52241f8db2c7)), closes [#21962](https://github.com/vuetifyjs/vuetify/issues/21962)\n* **VVideo:** background variant should fill the container ([b766424](https://github.com/vuetifyjs/vuetify/commit/b76642493c7144df3573e6bedf4a62c7ea5c94e7))\n\n### :arrows_counterclockwise: Reverts\n\n* Revert \"fix(VSelect): use selected text instead of value (#21902)\" ([95dea2c](https://github.com/vuetifyjs/vuetify/commit/95dea2c3934d58fbebb50cde6314f19e8305cb1d)), closes [#22006](https://github.com/vuetifyjs/vuetify/issues/22006)\n* Revert \"fix(VBtn, VChip): correct link active state after navigation cancellation (#21651)\" ([ab28070](https://github.com/vuetifyjs/vuetify/commit/ab28070a432a15ab8ae0aeba8faa0ab0cb0b4d38)), closes [#22072](https://github.com/vuetifyjs/vuetify/issues/22072) [#22065](https://github.com/vuetifyjs/vuetify/issues/22065)\n* Revert \"fix(VCombobox): filter matching items when opening first time\" ([44002f6](https://github.com/vuetifyjs/vuetify/commit/44002f65364c524953a955479cd5badb3d926cf9)), closes [#22077](https://github.com/vuetifyjs/vuetify/issues/22077)\n\n
\n\n## The Pieces Come Together{ .mt-4 }\n\nThis 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.\n\nOctober 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.\n\n---\n\n*The Vuetify Team*\n","packages/docs/src/pages/en/blog/september-2026-update.md":"","packages/docs/src/pages/en/blog/state-of-the-union-2024-post-mortem.md":"","packages/docs/src/pages/en/blog/state-of-the-union-2024.md":"","packages/docs/src/pages/en/blog/vuetify-herodevs-partnership.md":"","packages/docs/src/pages/en/components/alerts.md":"","packages/docs/src/pages/en/components/all.md":"","packages/docs/src/pages/en/components/app-bars.md":"","packages/docs/src/pages/en/components/application.md":"","packages/docs/src/pages/en/components/aspect-ratios.md":"","packages/docs/src/pages/en/components/audio-players.md":"","packages/docs/src/pages/en/components/autocompletes.md":"","packages/docs/src/pages/en/components/avatar-groups.md":"","packages/docs/src/pages/en/components/avatars.md":"","packages/docs/src/pages/en/components/badges.md":"","packages/docs/src/pages/en/components/banners.md":"","packages/docs/src/pages/en/components/bottom-navigation.md":"","packages/docs/src/pages/en/components/bottom-sheets.md":"","packages/docs/src/pages/en/components/breadcrumbs.md":"","packages/docs/src/pages/en/components/button-groups.md":"","packages/docs/src/pages/en/components/buttons.md":"","packages/docs/src/pages/en/components/calendars.md":"","packages/docs/src/pages/en/components/cards.md":"","packages/docs/src/pages/en/components/carousels.md":"","packages/docs/src/pages/en/components/checkboxes.md":"","packages/docs/src/pages/en/components/chip-groups.md":"","packages/docs/src/pages/en/components/chips.md":"","packages/docs/src/pages/en/components/color-inputs.md":"","packages/docs/src/pages/en/components/color-pickers.md":"","packages/docs/src/pages/en/components/combobox.md":"","packages/docs/src/pages/en/components/command-palettes.md":"","packages/docs/src/pages/en/components/confirm-edit.md":"","packages/docs/src/pages/en/components/data-iterators.md":"","packages/docs/src/pages/en/components/data-tables/basics.md":"","packages/docs/src/pages/en/components/data-tables/data-and-display.md":"","packages/docs/src/pages/en/components/data-tables/introduction.md":"","packages/docs/src/pages/en/components/data-tables/server-side-tables.md":"","packages/docs/src/pages/en/components/data-tables/virtual-tables.md":"","packages/docs/src/pages/en/components/date-inputs.md":"","packages/docs/src/pages/en/components/date-pickers-month.md":"","packages/docs/src/pages/en/components/date-pickers.md":"","packages/docs/src/pages/en/components/date-range-pickers.md":"","packages/docs/src/pages/en/components/defaults-providers.md":"","packages/docs/src/pages/en/components/dialogs.md":"","packages/docs/src/pages/en/components/dividers.md":"","packages/docs/src/pages/en/components/empty-states.md":"","packages/docs/src/pages/en/components/expansion-panels.md":"","packages/docs/src/pages/en/components/explorer/[...name].md":"","packages/docs/src/pages/en/components/file-inputs.md":"","packages/docs/src/pages/en/components/file-upload.md":"","packages/docs/src/pages/en/components/floating-action-buttons.md":"","packages/docs/src/pages/en/components/footers.md":"","packages/docs/src/pages/en/components/forms.md":"","packages/docs/src/pages/en/components/grids.md":"","packages/docs/src/pages/en/components/heatmaps.md":"","packages/docs/src/pages/en/components/highlights.md":"","packages/docs/src/pages/en/components/hotkeys.md":"","packages/docs/src/pages/en/components/hover.md":"","packages/docs/src/pages/en/components/icon-buttons.md":"","packages/docs/src/pages/en/components/icons.md":"","packages/docs/src/pages/en/components/images.md":"","packages/docs/src/pages/en/components/infinite-carousels.md":"","packages/docs/src/pages/en/components/infinite-scroller.md":"","packages/docs/src/pages/en/components/inputs.md":"","packages/docs/src/pages/en/components/item-groups.md":"","packages/docs/src/pages/en/components/lazy.md":"","packages/docs/src/pages/en/components/lists.md":"","packages/docs/src/pages/en/components/loading-indicators.md":"","packages/docs/src/pages/en/components/locale-providers.md":"","packages/docs/src/pages/en/components/mask-inputs.md":"","packages/docs/src/pages/en/components/menus.md":"","packages/docs/src/pages/en/components/month-pickers.md":"","packages/docs/src/pages/en/components/navigation-drawers.md":"","packages/docs/src/pages/en/components/no-ssr.md":"","packages/docs/src/pages/en/components/number-inputs.md":"","packages/docs/src/pages/en/components/otp-input.md":"","packages/docs/src/pages/en/components/overlays.md":"","packages/docs/src/pages/en/components/paginations.md":"","packages/docs/src/pages/en/components/parallax.md":"","packages/docs/src/pages/en/components/pie-charts.md":"","packages/docs/src/pages/en/components/progress-circular.md":"","packages/docs/src/pages/en/components/progress-linear.md":"","packages/docs/src/pages/en/components/progress.md":"","packages/docs/src/pages/en/components/pull-to-refresh.md":"","packages/docs/src/pages/en/components/radio-buttons.md":"","packages/docs/src/pages/en/components/range-sliders.md":"","packages/docs/src/pages/en/components/ratings.md":"","packages/docs/src/pages/en/components/selects.md":"","packages/docs/src/pages/en/components/sheets.md":"","packages/docs/src/pages/en/components/skeleton-loaders.md":"","packages/docs/src/pages/en/components/slide-groups.md":"","packages/docs/src/pages/en/components/sliders.md":"","packages/docs/src/pages/en/components/snackbar-queue.md":"","packages/docs/src/pages/en/components/snackbars.md":"","packages/docs/src/pages/en/components/sparklines.md":"","packages/docs/src/pages/en/components/speed-dials.md":"","packages/docs/src/pages/en/components/split-buttons.md":"","packages/docs/src/pages/en/components/steppers.md":"","packages/docs/src/pages/en/components/switches.md":"","packages/docs/src/pages/en/components/system-bars.md":"","packages/docs/src/pages/en/components/tables.md":"","packages/docs/src/pages/en/components/tabs.md":"","packages/docs/src/pages/en/components/text-fields.md":"","packages/docs/src/pages/en/components/textareas.md":"","packages/docs/src/pages/en/components/theme-providers.md":"","packages/docs/src/pages/en/components/time-inputs.md":"","packages/docs/src/pages/en/components/time-pickers.md":"","packages/docs/src/pages/en/components/timelines.md":"","packages/docs/src/pages/en/components/toolbars.md":"","packages/docs/src/pages/en/components/tooltips.md":"","packages/docs/src/pages/en/components/treeview.md":"","packages/docs/src/pages/en/components/vertical-steppers.md":"","packages/docs/src/pages/en/components/videos.md":"","packages/docs/src/pages/en/components/virtual-scroller.md":"","packages/docs/src/pages/en/components/windows.md":"","packages/docs/src/pages/en/concepts/density-and-sizing.md":"","packages/docs/src/pages/en/concepts/items.md":"","packages/docs/src/pages/en/concepts/routing.md":"","packages/docs/src/pages/en/concepts/v-model.md":"","packages/docs/src/pages/en/concepts/variants.md":"","packages/docs/src/pages/en/directives/click-outside.md":"","packages/docs/src/pages/en/directives/intersect.md":"","packages/docs/src/pages/en/directives/mutate.md":"","packages/docs/src/pages/en/directives/resize.md":"","packages/docs/src/pages/en/directives/ripple.md":"","packages/docs/src/pages/en/directives/scroll.md":"","packages/docs/src/pages/en/directives/tooltip.md":"","packages/docs/src/pages/en/directives/touch-hold.md":"","packages/docs/src/pages/en/directives/touch.md":"","packages/docs/src/pages/en/features/accessibility.md":"","packages/docs/src/pages/en/features/aliasing.md":"","packages/docs/src/pages/en/features/application-layout.md":"","packages/docs/src/pages/en/features/blueprints.md":"","packages/docs/src/pages/en/features/css-utilities/overview.md":"","packages/docs/src/pages/en/features/css-utilities/tailwindcss.md":"","packages/docs/src/pages/en/features/css-utilities/unocss-tailwind-preset.md":"","packages/docs/src/pages/en/features/css-utilities/unocss-vuetify-preset.md":"","packages/docs/src/pages/en/features/dates.md":"","packages/docs/src/pages/en/features/display-and-platform.md":"","packages/docs/src/pages/en/features/global-configuration.md":"","packages/docs/src/pages/en/features/hotkey.md":"","packages/docs/src/pages/en/features/icon-fonts.md":"","packages/docs/src/pages/en/features/internationalization.md":"","packages/docs/src/pages/en/features/md3-button-sizes.md":"","packages/docs/src/pages/en/features/rules.md":"","packages/docs/src/pages/en/features/sass-variables.md":"","packages/docs/src/pages/en/features/scrolling.md":"","packages/docs/src/pages/en/features/theme.md":"","packages/docs/src/pages/en/features/treeshaking.md":"","packages/docs/src/pages/en/getting-started/browser-support.md":"","packages/docs/src/pages/en/getting-started/contributing.md":"","packages/docs/src/pages/en/getting-started/elevation-migration.md":"","packages/docs/src/pages/en/getting-started/frequently-asked-questions.md":"","packages/docs/src/pages/en/getting-started/grid-legacy-mode.md":"","packages/docs/src/pages/en/getting-started/installation.md":"","packages/docs/src/pages/en/getting-started/mcp.md":"","packages/docs/src/pages/en/getting-started/release-notes.md":"","packages/docs/src/pages/en/getting-started/typography-migration.md":"","packages/docs/src/pages/en/getting-started/unit-testing.md":"","packages/docs/src/pages/en/getting-started/unused-sass-variables.md":"","packages/docs/src/pages/en/getting-started/upgrade-guide.md":"","packages/docs/src/pages/en/getting-started/wireframes.md":"","packages/docs/src/pages/en/index.md":"","packages/docs/src/pages/en/introduction/enterprise-support.md":"","packages/docs/src/pages/en/introduction/long-term-support.md":"","packages/docs/src/pages/en/introduction/roadmap.md":"","packages/docs/src/pages/en/introduction/sponsors-and-backers.md":"","packages/docs/src/pages/en/introduction/why-vuetify.md":"","packages/docs/src/pages/en/labs/introduction.md":"","packages/docs/src/pages/en/legal/mcp-privacy.md":"","packages/docs/src/pages/en/one.md":"","packages/docs/src/pages/en/resources/brand-kit.md":"","packages/docs/src/pages/en/resources/jobs-for-vue.md":"","packages/docs/src/pages/en/resources/made-with-vuetify.md":"","packages/docs/src/pages/en/resources/search-engine.md":"","packages/docs/src/pages/en/resources/themes.md":"","packages/docs/src/pages/en/resources/ui-kits.md":"","packages/docs/src/pages/en/sponsor.md":"","packages/docs/src/pages/en/styles/border-radius.md":"","packages/docs/src/pages/en/styles/borders.md":"","packages/docs/src/pages/en/styles/colors.md":"","packages/docs/src/pages/en/styles/content.md":"","packages/docs/src/pages/en/styles/css-reset.md":"","packages/docs/src/pages/en/styles/cursor.md":"","packages/docs/src/pages/en/styles/display.md":"","packages/docs/src/pages/en/styles/elevation.md":"","packages/docs/src/pages/en/styles/entry-points.md":"","packages/docs/src/pages/en/styles/flex.md":"","packages/docs/src/pages/en/styles/float.md":"","packages/docs/src/pages/en/styles/layers.md":"","packages/docs/src/pages/en/styles/opacity.md":"","packages/docs/src/pages/en/styles/overflow.md":"","packages/docs/src/pages/en/styles/position.md":"","packages/docs/src/pages/en/styles/sizing.md":"","packages/docs/src/pages/en/styles/spacing.md":"","packages/docs/src/pages/en/styles/text-and-typography.md":"","packages/docs/src/pages/en/styles/transitions.md":"","packages/docs/src/pages/en/user/dashboard.md":"","packages/docs/src/pages/en/wireframes/baseline.md":"","packages/docs/src/pages/en/wireframes/constrained.md":"","packages/docs/src/pages/en/wireframes/discord.md":"","packages/docs/src/pages/en/wireframes/extended-toolbar.md":"","packages/docs/src/pages/en/wireframes/inbox.md":"","packages/docs/src/pages/en/wireframes/side-navigation.md":"","packages/docs/src/pages/en/wireframes/steam.md":"","packages/docs/src/pages/en/wireframes/system-bar.md":"","packages/docs/src/pages/en/wireframes/three-column.md":"","packages/docs/tsconfig.json":"","packages/vuetify/README.md":""},"items":[{"name":"AGENTS.md","path":"AGENTS.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/AGENTS.md","title":"AI Agent Protocol & Instructions","category":"root-instruction","format":"markdown","content":"# Vuetify\n\nVuetify 4 component framework. Ships Material Design as the default look, but is meant to fit non-material design systems too. `@vuetify/v0` (headless primitives) has been a direct dependency since 4.2.0 and gets adopted gradually. The next major builds fully on it to split design systems out and stop shipping CSS for every visual variant.\n\nThis file and `.claude/` help AI tooling tuned for fast output deliver results closer to what maintainers expect, and lower the barrier for contributions.\n\nMonorepo:\n\n- `packages/vuetify` — the `vuetify` npm package\n- `packages/api-generator` — builds API data (props, events, slots, descriptions) for docs\n- `packages/docs` — documentation site\n\nContributor guide: `packages/docs/src/pages/en/getting-started/contributing.md`\nSupported browsers: `packages/docs/src/pages/en/getting-started/browser-support.md`\n\n## Branches\n\n| Base | For | Docs |\n|----------|-------------------------------------------------------|--------------------|\n| `master` | safe bug fixes, docs | vuetifyjs.com |\n| `dev` | new props/features, fixes that risk visual regression | dev.vuetifyjs.com |\n| `next` | breaking changes | next.vuetifyjs.com |\n\n## Commands\n\n```bash\npnpm dev # root: playground at localhost:8090\npnpm dev docs # root: docs at localhost:8095\n\n# in packages/vuetify\npnpm test # single file or folder\npnpm lint:fix # tsgo typecheck + eslint --fix\n```\n\n## Workflow\n\n1. Reproduce in `packages/vuetify/dev/Playground.vue` — see `.claude/skills/playground/SKILL.md`\n2. Change code, observe the impact in the playground\n3. Write tests unless the change is trivial. The bar for trivial is higher than in most projects — see `.claude/skills/tests/SKILL.md`\n4. Lint, fix, refactor — see `.claude/rules/code-readability.md`\n5. Consider a11y and i18n/RTL. They are usually the implementation's concern; leaving them to framework users is the rare exception\n\n## Principles\n\n- `shallowRef` / `toRef` by default; `ref` / `computed` only when the cost is justified\n- When passing props down to composables or children, usually pass the reactive source (getter or `toRef`), not the unwrapped value — see `.claude/rules/components.md`\n- Less is more, until it isn't. A minimal patch that fixes the reported case often breaks or ignores neighbouring prop combinations. Extend the playground to cover those combinations before calling it done\n\n## Rules\n\nPath-scoped rules in `.claude/rules/`. Claude Code loads them automatically; other tools should read the ones matching the touched paths:\n\n| Rule | Paths |\n|-----------------------|-----------------------------------------------------|\n| `components.md` | `packages/vuetify/src/components/**`, `src/labs/**` |\n| `composables.md` | `packages/vuetify/src/composables/**` |\n| `sass.md` | `packages/vuetify/src/**/*.{sass,scss}` |\n| `utilities.md` | `packages/vuetify/src/util/**` |\n| `code-readability.md` | `packages/vuetify/src/**` |\n\n## Review rubric\n\nEach item is a real finding when a diff violates it. Details in the rule named at the end.\n\n- Comments that narrate code, or reference issues/URLs — `code-readability.md`\n- Abbreviated names outside short lambdas (`idx`, `opts`, `handleX`) — `code-readability.md`\n- Props passed down unwrapped instead of as getter / `toRef` — `components.md`\n- Utility classes in component markup — `components.md`\n- Non-component exports from a component `index.ts` (breaks api-generator) — `components.md`\n- New prop without `new-in.json` entry or api-generator description — `components.md`\n- Changed arguments or return shape of a public composable outside `next` — `composables.md`\n- Raw `typeof` / `== null` checks instead of `@/util` guards — `utilities.md`\n- Hardcoded tunable values instead of `!default` variables, styles outside `tools.layer`, physical `left`/`right` where logical properties work — `sass.md`\n- Surfaces or states invisible in forced-colors mode — `sass.md`\n- `transition` followed by `transition-*` in one rule — `sass.md`\n- Missing tests for a non-trivial change; fixed `wait(ms)` where polling works\n- Base branch not matching the change type (see Branches)\n\nNot findings: legacy patterns in lines the diff doesn't touch, and a11y/RTL gaps the PR explicitly scopes out.\n","isInternal":false,"tokens":1058,"sizeBytes":4626},{"name":"CLAUDE.md","path":"CLAUDE.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/CLAUDE.md","title":"Claude Agent Guidelines & System Prompt","category":"claude-rule","format":"markdown","content":"@AGENTS.md\n","isInternal":false,"tokens":5,"sizeBytes":11},{"name":"code-readability.md","path":".claude/rules/code-readability.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/.claude/rules/code-readability.md","title":"Rules Skill","category":"anthropic-skill","format":"markdown","content":"---\npaths: ['packages/vuetify/src/**']\n---\n\n# Code Readability\n\nRun `pnpm lint:fix` first (in `packages/vuetify`), then review your own diff against this list. Anything ESLint enforces is not repeated here. Only touch lines the change needs — no drive-by renames, reordering or reformatting.\n\n## Comments\n\nDefault to none. Most AI-written comments narrate what the next line does and get deleted in review.\n\nWrite one only when the reason can't be read from the code: a browser quirk, an ordering constraint, a footgun that bites if someone \"simplifies\" it. One line, plain wording.\n\nNever:\n\n- restate the code (`// set open to false`)\n- narrate intent or history (`// fixed the bug where…`, `// new approach`)\n- link or reference issues (`// see #12345`, GitHub URLs) — that belongs in the commit message\n- add JSDoc to internal functions\n\nImport group headers (`// Components`, `// Composables`, `// Utilities`, `// Types`) are the file convention — keep them.\n\n## Naming\n\nNo abbreviations in variables, params or functions:\n\n```ts\n// ❌\nconst idx = items.indexOf(item)\nconst opts = { ...defaults, ...options }\nfunction handleKeydown (e: KeyboardEvent) {}\n\n// ✅\nconst index = items.indexOf(item)\nconst merged = { ...defaults, ...options }\nfunction onKeydown (e: KeyboardEvent) {}\n```\n\nShort lambda params are fine: `items.map(v => v.value)`, `(a, b) => a - b`. Established names stay too: `e` for events, `vm`, the `El` suffix for element refs (`activatorEl`, `contentEl`). Older code in `util` still has `val`/`cb`/`obj` — don't copy it.\n\nPrefer single words when context makes them unambiguous: `open` over `isMenuOpen` inside VMenu. `on` for handlers, never `handle`.\n\n## Functions\n\nFunction declarations over `const` arrows in `setup` and modules:\n\n```ts\n// ❌\nconst toggle = () => { … }\n\n// ✅\nfunction toggle () { … }\n```\n\n## Abstractions\n\n- No helper for a single call site — inline it\n- Grep `src/util` and `src/composables` before writing a new helper\n- No wrapper that only renames or forwards arguments\n- Derive instead of syncing: a `toRef`/`computed` over a `watch` that writes into another ref\n","frontmatter":{"paths":["packages/vuetify/src/**"]},"isInternal":false,"tokens":551,"sizeBytes":2147},{"name":"components.md","path":".claude/rules/components.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/.claude/rules/components.md","title":"Rules Skill","category":"anthropic-skill","format":"markdown","content":"---\npaths: ['packages/vuetify/src/components/**', 'packages/vuetify/src/labs/**']\n---\n\n# Components\n\n## Direction\n\nThe `.tsx` file holds markup, coordination and light logic. Heavy logic (data shaping, selection rules, calculations) goes into local composables next to the component, and later moves to `@vuetify/v0`. Logic in a plain function is testable without mounting. Follow this for new components and when a change grows an existing component's `setup`.\n\n## Anatomy\n\n```\ncomponents/VExample/\n├── VExample.tsx\n├── VExample.sass\n├── _variables.scss\n├── example.ts # local composable: useExample(props)\n├── index.ts\n└── __tests__/\n```\n\nSub-components (`VExampleItem`, `VExampleGroup`) live in the same folder and share its `index.ts`. Local composables are not exported from `index.ts`.\n\n## Skeleton\n\n```tsx\nexport const makeVExampleProps = propsFactory({\n label: String,\n modelValue: Boolean,\n items: {\n type: Array as PropType,\n default: () => ([]),\n },\n\n ...makeComponentProps(),\n ...makeTagProps(),\n ...makeThemeProps(),\n}, 'VExample')\n\nexport const VExample = genericComponent()({\n name: 'VExample',\n\n props: makeVExampleProps(),\n\n emits: {\n 'update:modelValue': (value: boolean) => true,\n },\n\n setup (props, { slots }) {\n const { themeClasses } = provideTheme(props)\n const model = useProxiedModel(props, 'modelValue')\n\n useRender(() => (\n \n { slots.default?.() ?? props.label }\n \n ))\n\n return {}\n },\n})\n```\n\n- `genericComponent` applies global and `VDefaultsProvider` defaults — don't call `useDefaults` in a component\n- `useProxiedModel` for every v-model, controlled or not\n- Prop type assertions go inline: `type: X as PropType<…>`\n- No utility classes (`d-flex`, `ma-2`, `text-center`) in component markup — users can disable or override utilities. Style through the component's own `.sass`\n\n## Passing props down\n\nComposables and children need the reactive source, not a snapshot. An unwrapped value is read once in `setup` and never updates.\n\n```ts\n// ❌ reads once\nuseTextColor(props.color)\nprovideDefaults({ VExampleItem: { color: props.color } })\n\n// ✅\nuseTextColor(() => props.color)\nuseDensity(props)\nprovideDefaults({ VExampleItem: { color: toRef(() => props.color) } })\n```\n\nForward props to a wrapped component with its `filterProps`:\n\n```tsx\nconst fieldProps = VExampleField.filterProps(props)\n// …\n\n```\n\n## Parent ↔ child\n\n- `provide`/`inject` with an exported `Symbol.for('vuetify:v-example-group')` key, never a string\n- Selection between parent and items: `useGroup` / `useGroupItem` before building anything new\n- Pushing props to nested components: `provideDefaults` or ``\n\n## Adding a prop\n\n- `packages/docs/src/data/new-in.json` — add `\"propName\": \"\"` under the component (`props`, `slots`, `events` or `exposed`)\n- `packages/api-generator/src/locale/en/VExample.json` — description. Props from a shared composable go in that composable's file (`border.json`, `elevation.json`). Don't restate the default, the API table already shows it\n- Docs example when the prop needs one: `packages/docs/src/examples/v-example/prop-.vue`, referenced from the page with `\" />`\n\n## Adding a component\n\nNew components start in labs.\n\n- `src/labs/VExample/` with the anatomy above\n- `src/labs/VExample/index.ts` — **components only**. Re-exporting composables, utils or types from a component barrel breaks api-generator\n- `src/labs/components.ts` — `export * from './VExample'`\n- New translation keys in **every** `src/locale/*.ts` — recent commits ship real translations, not English copies\n- `packages/api-generator/src/locale/en/VExample.json`\n- Docs:\n - page in `packages/docs/src/pages/en/components/`\n - examples in `packages/docs/src/examples/v-example/`: `usage.vue`, `prop-*`, `slot-*`, `event-*`, `misc-*`\n - `packages/docs/src/data/nav.json`\n - `packages/docs/src/data/page-to-api.json`\n - list it in `packages/docs/src/pages/en/labs/introduction.md`\n","frontmatter":{"paths":["packages/vuetify/src/components/**","packages/vuetify/src/labs/**"]},"isInternal":false,"tokens":1064,"sizeBytes":4287},{"name":"composables.md","path":".claude/rules/composables.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/.claude/rules/composables.md","title":"Rules Skill","category":"anthropic-skill","format":"markdown","content":"---\npaths: ['packages/vuetify/src/composables/**']\n---\n\n# Shared Composables\n\nShared composables are used by many components — a signature or reactivity slip spreads everywhere. Component-specific logic belongs in a local composable next to the component (see `components.md`).\n\n## Reuse first\n\nGrep `src/composables` and `src/util` before adding one. `@vuetify/v0` enters through `src/util/v0.ts`: import from `@/util`, and add new v0 exports to that file instead of importing `@vuetify/v0` at call sites.\n\n## Prop-driven shape\n\nMost composables. Props factory plus a `use` function taking `props` and the component name:\n\n```ts\n// Utilities\nimport { computed } from 'vue'\nimport { getCurrentInstanceName, propsFactory } from '@/util'\n\n// Types\nexport interface ExampleProps {\n example?: boolean | string\n}\n\n// Composables\nexport const makeExampleProps = propsFactory({\n example: [Boolean, String],\n}, 'example')\n\nexport function useExample (\n props: ExampleProps,\n name = getCurrentInstanceName(),\n) {\n const exampleClasses = computed(() => props.example ? `${name}--example` : [])\n\n return { exampleClasses }\n}\n```\n\n- Take `props` or `MaybeRefOrGetter`, read with `toValue` inside `computed`/`toRef`. Never destructure props in the signature\n- Return a plain object of refs, never `reactive`. Prefix names with the composable (`exampleClasses`, `exampleStyles`) — components destructure several side by side\n- Modifier classes follow `${name}--x`\n\n## Plugin shape\n\nGlobal services (display, theme, locale). `createExample(options)` is called from `framework.ts`, provided under an `InjectionKey`, and `useExample()` injects it:\n\n```ts\nexport const ExampleSymbol: InjectionKey = Symbol.for('vuetify:example')\n\nexport function useExample () {\n const example = inject(ExampleSymbol)\n\n if (!example) throw new Error('[Vuetify] Could not find example injection')\n\n return example\n}\n```\n\n## Instance, scope, SSR\n\n- `getCurrentInstance('useExample')` from `@/util` when the composable needs the vm — the name ends up in the error\n- `useToggleScope(source, fn)` for effects that should only exist while something is active\n- Remove listeners and observers in `onScopeDispose`\n- Guard browser APIs with `IN_BROWSER` / `SUPPORTS_*` from `@/util/globals`\n\n## Public API\n\n- `composables/index.ts` is public — exports there are documented by api-generator\n- Internal code imports `@/composables/example`, never the barrel\n- New exposed members of a public composable go in `packages/docs/src/data/new-in.json`\n- Changing the return shape or arguments of a public composable is breaking — `next` branch\n- Props coming from a shared composable are described once in `packages/api-generator/src/locale/en/example.json`, not in each component's file\n\n## Tests\n\nUnit project: `composables/__tests__/example.spec.ts`. See the `tests` skill.\n","frontmatter":{"paths":["packages/vuetify/src/composables/**"]},"isInternal":false,"tokens":677,"sizeBytes":2861},{"name":"sass.md","path":".claude/rules/sass.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/.claude/rules/sass.md","title":"Rules Skill","category":"anthropic-skill","format":"markdown","content":"---\npaths: ['packages/vuetify/src/**/*.sass', 'packages/vuetify/src/**/*.scss']\n---\n\n# Styles\n\nNo stylelint — nothing below is enforced mechanically.\n\n## Files\n\n- `VExample.sass` — rules, inside `@include tools.layer('components')` so users override without fighting specificity\n- `_variables.scss` — `$example-*: … !default`\n\n## Values\n\n- Anything a user may want to tune gets a `$example-*` variable\n- Values that change at runtime or cascade into children are custom properties (`--v-example-*`)\n- Colors from `rgb(var(--v-theme-*))`, never literals\n- Shared tokens from `settings.$*` (rounded, typography, border, easing)\n\n## Tools before hand-rolling\n\n`tools.states`, `rounded`, `elevation`, `density`, `border`, `variant`, `typography`, `absolute`. Grep an existing component using the mixin before inventing a variant of it.\n\n## RTL\n\nLogical properties first (`margin-inline-start`, `inset-inline-end`, `padding-inline`). `tools.rtl` / `tools.ltr` only for what logical properties can't express — transforms, icon flips, gradients.\n\n## Forced colors\n\nBackgrounds, shadows and overlays disappear in forced-colors mode. Anything relying on them to be visible (surfaces, selected/active states, focus, progress fills, dividers drawn with background) needs a fallback:\n\n```sass\n@media (forced-colors: active)\n .v-example\n &:not(&--variant-text, &--variant-plain)\n border: thin solid\n\n &:focus-visible\n outline: 2px solid\n outline-offset: 2px\n```\n\nPrefer `currentColor` / plain `solid`; system colors (`Highlight`, `Canvas`) only when state must be distinguishable.\n\n## Motion\n\nTransitions and animations that move or resize need `@media (prefers-reduced-motion: reduce)` handling.\n\n`transition` followed by `transition-*` in the same rule is merged into one shorthand by newest Vite. The source looks fine in review while the shipped CSS differs. Use only longhands or only the shorthand:\n\n```sass\n// ❌\ntransition: .2s settings.$standard-easing\ntransition-property: width, height\n\n// ✅ longhands only\ntransition-property: width, height\ntransition-duration: .2s\ntransition-timing-function: settings.$standard-easing\n\n// ✅ full shorthand\ntransition: width .2s settings.$standard-easing, height .2s settings.$standard-easing\n```\n\nExisting files still use the two-line form — don't copy it.\n\n## Direction\n\nKeep CSS per visual variant minimal. Prefer toggling a custom property over another block of generated modifier classes — future design systems drop MD-only CSS.\n\n## Hand-off\n\nYou can't see the result. After a style change, tell the dev what to check in the Playground instead of claiming it looks right:\n\n- affected variants, densities, sizes\n- dark theme and RTL\n- forced colors: DevTools → Rendering → Emulate CSS media feature `forced-colors: active`\n- reduced motion, when transitions changed\n","frontmatter":{"paths":["packages/vuetify/src/**/*.sass","packages/vuetify/src/**/*.scss"]},"isInternal":false,"tokens":659,"sizeBytes":2849},{"name":"utilities.md","path":".claude/rules/utilities.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/.claude/rules/utilities.md","title":"Rules Skill","category":"anthropic-skill","format":"markdown","content":"---\npaths: ['packages/vuetify/src/util/**']\n---\n\n# Utilities\n\n`@/util` is imported by nearly every component — a changed signature or semantics ripples everywhere.\n\n## Before adding\n\nGrep `helpers.ts`, `dom.ts` and `v0.ts` first. Most requests already exist: `wrapInArray`, `pick` / `omit`, `mergeDeep`, `debounce`, `clamp`, `focusableChildren`, `getActiveElement` (Shadow DOM-safe — use it instead of `document.activeElement`).\n\n## Where things go\n\n- Framework plumbing (`propsFactory`, `defineComponent`, `useRender`, `getCurrentInstance`) — its own file\n- Generic helpers — `helpers.ts`\n- DOM helpers — `dom.ts`\n- Environment flags — `globals.ts` (`IN_BROWSER`, `SUPPORTS_*`)\n- A new file needs `export *` in `util/index.ts`\n\n## v0 first\n\n- Type guards (`isString`, `isNullOrUndefined`, …) come from `v0.ts` — no raw `typeof x === 'string'` or `x == null`\n- A new framework-agnostic helper is a v0 candidate — mention it to the dev instead of growing `helpers.ts`\n- When core adopts a v0 helper: add it to `v0.ts`, rename on export if it would shadow common local names (`range as createRange`), delete the core copy\n\n## Changing an existing helper\n\nGrep call sites first. Don't change behavior under an existing name — add a new function or update every caller in the same change.\n\n## Console\n\n- Debugging: raw `console.*` is fine, even preferred — lint flags leftovers before they can merge\n- Messages shipped to app developers: `consoleWarn`, `consoleError`, `deprecate`, `breaking`, `removed`\n\n## Tests\n\n`util/__tests__/`, unit project by default. Browser project only for layout or DOM measurement.\n","frontmatter":{"paths":["packages/vuetify/src/util/**"]},"isInternal":false,"tokens":406,"sizeBytes":1629},{"name":"SKILL.md","path":".claude/skills/playground/SKILL.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/.claude/skills/playground/SKILL.md","title":"playground","category":"anthropic-skill","format":"markdown","content":"---\nname: playground\ndescription: Use when working with packages/vuetify/dev/Playground.vue\n---\n\n# Playground\n\n`packages/vuetify/dev/Playground.vue` (gitignored). `pnpm install` creates it from `Playground.template.vue` when missing; `pnpm dev` from the repo root serves it at localhost:8090.\n\nGoals, in order:\n\n1. Hands-on reproduction for the human authoring the change\n2. A demo the author copy-pastes into the PR description for reviewers — keep it brief, no lengthy descriptions, it usually helps to resemble a realistic use case\n\n## Ownership\n\nDo not overwrite Playground content unless explicitly asked. The human is a co-author and may have pasted an old use case to focus on. When asked to change it, keep what the request doesn't touch.\n\nThese guidelines exist so AI edits look like what a human would write and expect.\n\n## Setup\n\n- No build step — `@/` resolves to `src`, changes to components, composables, sass and utilities hot-reload\n- All components are auto-registered, labs included\n- Other files in `dev/` are tracked but fair game when the reproduction needs them: `dev/vuetify.js` (createVuetify options), `dev/vuetify/{defaults,locale,icons,date}.js`\n\n## Shape\n\n```vue\n\n\n\n```\n\n- Block order: template → script → style\n- Dark theme, `v-container`; `max-width=\"600\"` for smaller components\n- Avoid `v-row` / `v-col` as general layout — devs debug in split screen, so it wraps anyway. Stack with `d-flex flex-column ga-4`\n- Cover neighbouring combinations (variant, density, disabled/readonly, RTL), not just the reported case. Label each case with a short `` line, not prose\n- Deterministic local data, no fetches\n\n## Running\n\nOnly when asked, or when the scope of changes needs a visual check.\n\nThe vite process often gets stuck holding port 8090. Before starting:\n\n```bash\nlsof -ti :8090 | xargs -r kill\npnpm dev\n```\n\nRTL / locale checks — fresh Chrome profile with a forced locale (`ar`, `he`, `fa` are RTL):\n\n```bash\nLANGUAGE=ar-EG google-chrome --lang=ar-EG --user-data-dir=/tmp/chrome-ar-EG \\\n --no-first-run --no-default-browser-check http://localhost:8090/\n```\n\nSame thing as a VS Code task (`.vscode/` is gitignored, add it locally):\n\n```json\n{\n \"type\": \"shell\",\n \"label\": \"Open Playground in Chrome (locale)\",\n \"command\": \"LANGUAGE=${input:locale} google-chrome --lang=${input:locale} --user-data-dir=/tmp/chrome-${input:locale} --no-first-run --no-default-browser-check http://localhost:8090/\",\n \"problemMatcher\": []\n}\n```\n\n```json\n\"inputs\": [{\n \"id\": \"locale\",\n \"type\": \"pickString\",\n \"description\": \"Browser locale (ar/he/fa are RTL)\",\n \"options\": [\"ar-EG\", \"ar\", \"el-GR\", \"he\", \"fa\", \"en-US\", \"de\", \"ja\", \"ko-KR\", \"zh-MO\"],\n \"default\": \"ar-EG\"\n}]\n```\n","frontmatter":{"name":"playground","description":"Use when working with packages/vuetify/dev/Playground.vue"},"isInternal":false,"tokens":778,"sizeBytes":2932},{"name":"SKILL.md","path":".claude/skills/tests/SKILL.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/.claude/skills/tests/SKILL.md","title":"tests","category":"anthropic-skill","format":"markdown","content":"---\nname: tests\ndescription: Use when writing, fixing or debugging tests in packages/vuetify (unit or browser specs, flaky tests, screenshot stories).\n---\n\n# Tests\n\n## When\n\nWrite tests unless the change is trivial — the bar for trivial is higher than in most projects. A bug fix gets a test that fails without the fix: write it first, see it red, then fix.\n\n## Where\n\nColocated in `__tests__/` next to the source.\n\n| File | Project | For |\n| -------------------- | ------------------------------- | ---------------------------------------------------------- |\n| `*.spec.ts(x)` | `unit` (jsdom) | pure logic: composables, util, local composables |\n| `*.spec.browser.tsx` | `browser` (Playwright Chromium) | anything with layout, focus, keyboard, overlays, scrolling |\n\nPrefer extracting logic into a local composable and unit-testing it over mounting a component for a calculation.\n\n## Running\n\nIn `packages/vuetify`:\n\n```bash\npnpm test # both projects\npnpm test --project browser\npnpm test:open # headed browser with devtools, bails on first failure\n```\n\n## Writing\n\n- Vitest globals (`describe`, `it`, `expect`, `vi`) are auto-imported\n- Helpers from `@test`: `render`, `screen`, `userEvent`, `page`, `commands`, `wait*`, `click`, `waitForClickable`, `scroll`\n- Assert what users observe: roles, ARIA attributes, text, emitted events, focus. Classes only when they are public API (`v-btn--active`)\n- Test names describe behavior: `it('should close on Escape')`\n- No comments referencing issues or URLs — older specs have them, don't copy\n\n## Console\n\nAny unexpected `console.warn` / `console.error` fails the test. Assert expected ones:\n\n```ts\nexpect(\"is not a valid value\").toHaveBeenTipped(); // console.warn — consoleWarn/consoleError/deprecate go through Vue's warn\nexpect(\"…\").toHaveBeenWarned(); // console.error\n```\n\n## Stability\n\nFlaky tests get fixed in follow-up commits regularly — avoid the usual causes:\n\n- `expect.poll(() => …)` or `waitForClickable` instead of fixed `await wait(100)`\n- Focus or clipboard work runs parallel with other tests — take the lock before focusing:\n\n ```ts\n const lock = await commands.getLock();\n input.focus();\n await userEvent.paste();\n await commands.releaseLock(lock);\n ```\n\n- Opening submenus with arrow keys is racy — press the key again until focus lands\n- Reduced motion is on by default; `commands.setReduceMotionDisabled()` when a transition matters, re-enable in `afterEach`\n\n## Screenshots\n\nVisual stories use `showcase({ stories, props, component })` with `gridOn(rows, columns, render)`, captured by Vizzly (`pnpm tdd`, then `pnpm test:screen`). Add them only for visual changes; never commit updated baselines unless asked.\n","frontmatter":{"name":"tests","description":"Use when writing, fixing or debugging tests in packages/vuetify (unit or browser specs, flaky tests, screenshot stories)."},"isInternal":false,"tokens":654,"sizeBytes":2889},{"name":"package.json","path":"packages/docs/package.json","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/package.json","title":"vuetifyjs.com","category":"anthropic-skill","format":"json","content":"{\n \"name\": \"vuetifyjs.com\",\n \"type\": \"module\",\n \"description\": \"A Vue.js project\",\n \"private\": true,\n \"author\": \"John Leider \",\n \"version\": \"4.3.0\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/vuetifyjs/vuetify.git\",\n \"directory\": \"packages/docs\"\n },\n \"scripts\": {\n \"dev\": \"vite --force\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\",\n \"preview-https\": \"HTTPS=true vite preview\",\n \"lint\": \"concurrently 'vue-tsc --noEmit --pretty' 'pnpm lint:md' 'node ../../scripts/eslint.js src --concurrency 4' -n 'tsc,md,eslint' --kill-others-on-fail -gr\",\n \"lint:fix\": \"pnpm fix:md && node ../../scripts/eslint.js src --concurrency 4 --fix\",\n \"lint:md\": \"markdownlint --config .markdownlintrc --rules build/markdownlint-rules/meta-length.cjs src/pages/en\",\n \"fix:md\": \"markdownlint --config .markdownlintrc --rules build/markdownlint-rules/meta-length.cjs src/pages/en --fix\"\n },\n \"dependencies\": {\n \"@cosmicjs/sdk\": \"catalog:\",\n \"@sentry/vue\": \"catalog:\",\n \"@vue/compiler-dom\": \"catalog:\",\n \"@vuelidate/core\": \"catalog:\",\n \"@vuelidate/validators\": \"catalog:\",\n \"@vuetify/one\": \"catalog:\",\n \"algoliasearch\": \"catalog:\",\n \"fflate\": \"catalog:\",\n \"isomorphic-fetch\": \"catalog:\",\n \"markdown-it-multimd-table\": \"catalog:\",\n \"pinia\": \"catalog:\",\n \"prism-theme-vars\": \"catalog:\",\n \"prismjs\": \"catalog:\",\n \"roboto-fontface\": \"catalog:\",\n \"swetrix\": \"catalog:\",\n \"vee-validate\": \"catalog:\",\n \"vue\": \"catalog:\",\n \"vue-i18n\": \"catalog:\",\n \"vue-instantsearch\": \"catalog:\",\n \"vue-router\": \"catalog:\",\n \"vuetify\": \"workspace:*\"\n },\n \"devDependencies\": {\n \"@babel/generator\": \"catalog:\",\n \"@babel/types\": \"catalog:\",\n \"@emailjs/browser\": \"catalog:\",\n \"@intlify/unplugin-vue-i18n\": \"catalog:\",\n \"@mdi/js\": \"catalog:\",\n \"@mdi/svg\": \"catalog:\",\n \"@octokit/openapi-types\": \"catalog:\",\n \"@resvg/resvg-js\": \"catalog:\",\n \"@types/babel__generator\": \"catalog:\",\n \"@types/markdown-it\": \"catalog:\",\n \"@types/markdown-it-container\": \"catalog:\",\n \"@types/prismjs\": \"catalog:\",\n \"@vitejs/plugin-basic-ssl\": \"catalog:\",\n \"@vue/compiler-sfc\": \"catalog:\",\n \"@vuetify/api-generator\": \"workspace:*\",\n \"@yankeeinlondon/builder-api\": \"catalog:\",\n \"ajv\": \"catalog:\",\n \"algoliasearch-helper\": \"catalog:\",\n \"async-es\": \"catalog:\",\n \"date-fns\": \"catalog:\",\n \"eslint\": \"catalog:\",\n \"eslint-formatter-codeframe\": \"catalog:\",\n \"front-matter\": \"catalog:\",\n \"markdown-it\": \"catalog:\",\n \"markdown-it-anchor\": \"catalog:\",\n \"markdown-it-attrs\": \"catalog:\",\n \"markdown-it-container\": \"catalog:\",\n \"markdown-it-emoji\": \"catalog:\",\n \"markdown-it-header-sections\": \"catalog:\",\n \"markdown-it-link-attributes\": \"catalog:\",\n \"markdown-it-prism\": \"catalog:\",\n \"markdownlint-cli\": \"catalog:\",\n \"satori\": \"catalog:\",\n \"unplugin-auto-import\": \"catalog:\",\n \"unplugin-fonts\": \"catalog:\",\n \"unplugin-vue-components\": \"catalog:\",\n \"vite-plugin-md\": \"catalog:\",\n \"vite-plugin-pages\": \"catalog:\",\n \"vite-plugin-pwa\": \"catalog:\",\n \"vite-plugin-vue-layouts\": \"catalog:\",\n \"vite-plugin-vuetify\": \"catalog:\",\n \"vue-tsc\": \"catalog:\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n","frontmatter":{"name":"vuetifyjs.com","type":"module","description":"A Vue.js project","private":true,"author":"John Leider ","version":"4.3.0","repository":{"type":"git","url":"git+https://github.com/vuetifyjs/vuetify.git","directory":"packages/docs"},"scripts":{"dev":"vite --force","build":"vite build","preview":"vite preview","preview-https":"HTTPS=true vite preview","lint":"concurrently 'vue-tsc --noEmit --pretty' 'pnpm lint:md' 'node ../../scripts/eslint.js src --concurrency 4' -n 'tsc,md,eslint' --kill-others-on-fail -gr","lint:fix":"pnpm fix:md && node ../../scripts/eslint.js src --concurrency 4 --fix","lint:md":"markdownlint --config .markdownlintrc --rules build/markdownlint-rules/meta-length.cjs src/pages/en","fix:md":"markdownlint --config .markdownlintrc --rules build/markdownlint-rules/meta-length.cjs src/pages/en --fix"},"dependencies":{"@cosmicjs/sdk":"catalog:","@sentry/vue":"catalog:","@vue/compiler-dom":"catalog:","@vuelidate/core":"catalog:","@vuelidate/validators":"catalog:","@vuetify/one":"catalog:","algoliasearch":"catalog:","fflate":"catalog:","isomorphic-fetch":"catalog:","markdown-it-multimd-table":"catalog:","pinia":"catalog:","prism-theme-vars":"catalog:","prismjs":"catalog:","roboto-fontface":"catalog:","swetrix":"catalog:","vee-validate":"catalog:","vue":"catalog:","vue-i18n":"catalog:","vue-instantsearch":"catalog:","vue-router":"catalog:","vuetify":"workspace:*"},"devDependencies":{"@babel/generator":"catalog:","@babel/types":"catalog:","@emailjs/browser":"catalog:","@intlify/unplugin-vue-i18n":"catalog:","@mdi/js":"catalog:","@mdi/svg":"catalog:","@octokit/openapi-types":"catalog:","@resvg/resvg-js":"catalog:","@types/babel__generator":"catalog:","@types/markdown-it":"catalog:","@types/markdown-it-container":"catalog:","@types/prismjs":"catalog:","@vitejs/plugin-basic-ssl":"catalog:","@vue/compiler-sfc":"catalog:","@vuetify/api-generator":"workspace:*","@yankeeinlondon/builder-api":"catalog:","ajv":"catalog:","algoliasearch-helper":"catalog:","async-es":"catalog:","date-fns":"catalog:","eslint":"catalog:","eslint-formatter-codeframe":"catalog:","front-matter":"catalog:","markdown-it":"catalog:","markdown-it-anchor":"catalog:","markdown-it-attrs":"catalog:","markdown-it-container":"catalog:","markdown-it-emoji":"catalog:","markdown-it-header-sections":"catalog:","markdown-it-link-attributes":"catalog:","markdown-it-prism":"catalog:","markdownlint-cli":"catalog:","satori":"catalog:","unplugin-auto-import":"catalog:","unplugin-fonts":"catalog:","unplugin-vue-components":"catalog:","vite-plugin-md":"catalog:","vite-plugin-pages":"catalog:","vite-plugin-pwa":"catalog:","vite-plugin-vue-layouts":"catalog:","vite-plugin-vuetify":"catalog:","vue-tsc":"catalog:"},"publishConfig":{"access":"public"}},"isInternal":false,"tokens":960,"sizeBytes":3288},{"name":"301.json","path":"packages/docs/src/data/301.json","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/data/301.json","title":"Data Skill","category":"anthropic-skill","format":"json","content":"{\n \"components/dropdowns\": \"/components/menus\",\n \"quick-start\": \"/getting-started/installation\",\n \"vuetify/quick-start\": \"/getting-started/installation\",\n \"getting-started/quick-start/\": \"/getting-started/installation\",\n \"motion\": \"/styles/transitions\",\n \"components/sidebars\": \"/components/navigation-drawers\",\n \"components/v-navigation-drawer\": \"/components/navigation-drawers\",\n \"components/collapsible\": \"/components/expansion-panels\",\n \"components/navbars\": \"/components/toolbars\",\n \"components/toasts\": \"/components/snackbars\",\n \"components/carousel\": \"/components/carousels\",\n \"components/datatables\": \"/components/data-tables/basics\",\n \"components/expansion-panel\": \"/components/expansion-panels\",\n \"components/footer\": \"/components/footers\",\n \"directives/badges\": \"/components/badges\",\n \"vuetify/why-vuetify\": \"/getting-started/why-vuetify\",\n \"vuetify/frequently-asked-questions\": \"/getting-started/frequently-asked-questions\",\n \"vuetify/sponsors-and-backers\": \"/introduction/sponsors-and-backers\",\n \"getting-started/releases-and-migrations/\": \"/getting-started/upgrade-guide\",\n \"vuetify/releases-and-migrations\": \"/getting-started/upgrade-guide\",\n \"vuetify/contributing\": \"/getting-started/contributing\",\n \"vuetify/roadmap\": \"/getting-started/roadmap\",\n \"vuetify/a-la-carte\": \"/features/treeshaking\",\n \"getting-started/a-la-carte\": \"/features/treeshaking\",\n \"guides/a-la-carte\": \"/features/treeshaking\",\n \"customization/a-la-carte\": \"/features/treeshaking\",\n \"pre-made-themes\": \"/resources/themes\",\n \"layout/pre-made-themes\": \"/resources/themes\",\n \"themes/premium\": \"/resources/themes\",\n \"layout/grid\": \"/components/grids\",\n \"layout/pre-defined\": \"/getting-started/wireframes\",\n \"getting-started/pre-made-layouts\": \"/getting-started/wireframes\",\n \"layout/breakpoints\": \"/features/display-and-platform\",\n \"layout/aspect-ratios\": \"/components/aspect-ratios\",\n \"layout/spacing\": \"/styles/spacing\",\n \"layout/alignment\": \"/styles/alignment\",\n \"layout/display\": \"/styles/display\",\n \"layout/elevation\": \"/styles/elevation\",\n \"style/colors\": \"/styles/colors\",\n \"style/theme\": \"/customization/theme\",\n \"style/typography\": \"/styles/text-and-typography\",\n \"styles/typography\": \"/styles/text-and-typography\",\n \"styles/text\": \"/styles/text-and-typography\",\n \"style/content\": \"/styles/content\",\n \"motion/scroll\": \"/customization/scrolling\",\n \"styles/scroll\": \"/customization/scrolling\",\n \"motion/transitions\": \"/styles/transitions\",\n \"components/form\": \"/components/forms\",\n \"components/selection-controls\": \"/components/checkboxes\",\n \"components/slide-toggles\": \"/components/switches\",\n \"components/buttons-and-indicators\": \"/components/buttons\",\n \"framework/pre-defined\": \"/getting-started/pre-made-layouts\",\n \"framework/pre-made\": \"/getting-started/pre-made-layouts\",\n \"framework/pre-defined-layouts\": \"/getting-started/pre-made-layouts\",\n \"components/data-iterator\": \"/components/data-iterators\",\n \"framework/a-la-carte\": \"/customization/a-la-carte\",\n \"framework/grid\": \"/components/grids\",\n \"framework/application\": \"/components/application\",\n \"framework/breakpoints\": \"/features/display-and-platform\",\n \"framework/icons\": \"/customization/icons\",\n \"framework/i18n\": \"/customization/internationalization\",\n \"framework/theme\": \"/customization/theme\",\n \"framework/scroll\": \"/customization/scrolling\",\n \"framework/aspect-ratios\": \"/components/aspect-ratios\",\n \"framework/pre-made-layouts\": \"/getting-started/pre-made-layouts\",\n \"framework/colors\": \"/styles/colors\",\n \"framework/content\": \"/styles/content\",\n \"framework/typography\": \"/styles/typography\",\n \"framework/display\": \"/styles/display\",\n \"framework/elevation\": \"/styles/elevation\",\n \"framework/spacing\": \"/styles/spacing\",\n \"styles/alignment\": \"/styles/text\",\n \"framework/text-alignment\": \"/styles/text-and-typography\",\n \"styles/text-alignment\": \"/styles/text-and-typography\",\n \"framework/transitions\": \"/styles/transitions\",\n \"customizing/sandbox\": \"/customization/sandbox\",\n \"customizing/a-la-carte\": \"/customization/a-la-carte\",\n \"customizing/breakpoints\": \"/features/display-and-platform\",\n \"customizing/theme\": \"/customization/theme\",\n \"customizing/icons\": \"/customization/icons\",\n \"customizing/i18n\": \"/customization/internationalization\",\n \"getting-started/why-vuetify\": \"/introduction/why-vuetify\",\n \"getting-started/meet-the-team\": \"/about/meet-the-team\",\n \"getting-started/sponsors-and-backers\": \"/introduction/sponsors-and-backers\",\n \"getting-started/roadmap\": \"/introduction/roadmap\",\n \"getting-started/long-term-support\": \"/introduction/long-term-support\",\n \"getting-started/consulting-and-support\": \"/introduction/enterprise-support\",\n \"getting-started/support/enterprise\": \"/introduction/enterprise-support\",\n \"components/textarea\": \"/components/textareas\",\n \"components/virtual-scrollers\": \"/components/virtual-scroller\",\n \"directives/resizing\": \"/directives/resize\",\n \"directives/ripples\": \"/directives/ripple\",\n \"directives/scrolling\": \"/directives/scroll\",\n \"directives/touch-support\": \"/directives/touch\",\n \"introduction/frequently-asked-questions\": \"/getting-started/frequently-asked-questions\",\n \"professional-support/consulting\": \"/introduction/enterprise-support\",\n \"professional-support/enterprise\": \"/introduction/enterprise-support\",\n \"introduction/support\": \"/introduction/enterprise-support\",\n \"introduction/enterprise\": \"/introduction/enterprise-support\",\n \"introduction/consulting\": \"/introduction/enterprise-support\",\n \"customization/accessibility\": \"/features/accessibility\",\n \"customization/rtl\": \"/features/bidirectionality\",\n \"features/rtl\": \"/features/bidirectionality\",\n \"features/breakpoints\": \"/features/display-and-platform\",\n \"features/bidirectionality\": \"/features/internationalization\",\n \"customization/bidirectionality\": \"/features/bidirectionality\",\n \"customization/breakpoints\": \"/features/display-and-platform\",\n \"customization/global-config\": \"/features/global-config\",\n \"customization/scrolling\": \"/features/scrolling\",\n \"customization/icons\": \"/features/icon-fonts\",\n \"customization/internationalization\": \"/features/internationalization\",\n \"customization/presets\": \"/features/presets\",\n \"customization/sass-variables\": \"/features/sass-variables\",\n \"customization/theme\": \"/features/theme\",\n \"about/sponsors-and-backers\": \"/introduction/sponsors-and-backers\",\n \"components/simple-tables\": \"/components/tables\",\n \"components/data-tables\": \"/components/data-tables/basics\",\n \"components/date-pickers-month\": \"/introduction/roadmap\",\n \"components/server-side-data-tables\": \"/components/data-tables/server-side-tables\",\n \"components/virtual-data-tables\": \"/components/data-tables/virtual-tables\",\n \"api/v-click-outside\": \"/api/v-click-outside-directive\",\n \"api/v-intersect\": \"/api/v-intersect-directive\",\n \"api/v-mutate\": \"/api/v-mutate-directive\",\n \"api/v-resize\": \"/api/v-resize-directive\",\n \"api/v-ripple\": \"/api/v-ripple-directive\",\n \"api/v-scroll\": \"/api/v-scroll-directive\",\n \"api/v-touch\": \"/api/v-touch-directive\"\n}\n","frontmatter":{"components/dropdowns":"/components/menus","quick-start":"/getting-started/installation","vuetify/quick-start":"/getting-started/installation","getting-started/quick-start/":"/getting-started/installation","motion":"/styles/transitions","components/sidebars":"/components/navigation-drawers","components/v-navigation-drawer":"/components/navigation-drawers","components/collapsible":"/components/expansion-panels","components/navbars":"/components/toolbars","components/toasts":"/components/snackbars","components/carousel":"/components/carousels","components/datatables":"/components/data-tables/basics","components/expansion-panel":"/components/expansion-panels","components/footer":"/components/footers","directives/badges":"/components/badges","vuetify/why-vuetify":"/getting-started/why-vuetify","vuetify/frequently-asked-questions":"/getting-started/frequently-asked-questions","vuetify/sponsors-and-backers":"/introduction/sponsors-and-backers","getting-started/releases-and-migrations/":"/getting-started/upgrade-guide","vuetify/releases-and-migrations":"/getting-started/upgrade-guide","vuetify/contributing":"/getting-started/contributing","vuetify/roadmap":"/getting-started/roadmap","vuetify/a-la-carte":"/features/treeshaking","getting-started/a-la-carte":"/features/treeshaking","guides/a-la-carte":"/features/treeshaking","customization/a-la-carte":"/features/treeshaking","pre-made-themes":"/resources/themes","layout/pre-made-themes":"/resources/themes","themes/premium":"/resources/themes","layout/grid":"/components/grids","layout/pre-defined":"/getting-started/wireframes","getting-started/pre-made-layouts":"/getting-started/wireframes","layout/breakpoints":"/features/display-and-platform","layout/aspect-ratios":"/components/aspect-ratios","layout/spacing":"/styles/spacing","layout/alignment":"/styles/alignment","layout/display":"/styles/display","layout/elevation":"/styles/elevation","style/colors":"/styles/colors","style/theme":"/customization/theme","style/typography":"/styles/text-and-typography","styles/typography":"/styles/text-and-typography","styles/text":"/styles/text-and-typography","style/content":"/styles/content","motion/scroll":"/customization/scrolling","styles/scroll":"/customization/scrolling","motion/transitions":"/styles/transitions","components/form":"/components/forms","components/selection-controls":"/components/checkboxes","components/slide-toggles":"/components/switches","components/buttons-and-indicators":"/components/buttons","framework/pre-defined":"/getting-started/pre-made-layouts","framework/pre-made":"/getting-started/pre-made-layouts","framework/pre-defined-layouts":"/getting-started/pre-made-layouts","components/data-iterator":"/components/data-iterators","framework/a-la-carte":"/customization/a-la-carte","framework/grid":"/components/grids","framework/application":"/components/application","framework/breakpoints":"/features/display-and-platform","framework/icons":"/customization/icons","framework/i18n":"/customization/internationalization","framework/theme":"/customization/theme","framework/scroll":"/customization/scrolling","framework/aspect-ratios":"/components/aspect-ratios","framework/pre-made-layouts":"/getting-started/pre-made-layouts","framework/colors":"/styles/colors","framework/content":"/styles/content","framework/typography":"/styles/typography","framework/display":"/styles/display","framework/elevation":"/styles/elevation","framework/spacing":"/styles/spacing","styles/alignment":"/styles/text","framework/text-alignment":"/styles/text-and-typography","styles/text-alignment":"/styles/text-and-typography","framework/transitions":"/styles/transitions","customizing/sandbox":"/customization/sandbox","customizing/a-la-carte":"/customization/a-la-carte","customizing/breakpoints":"/features/display-and-platform","customizing/theme":"/customization/theme","customizing/icons":"/customization/icons","customizing/i18n":"/customization/internationalization","getting-started/why-vuetify":"/introduction/why-vuetify","getting-started/meet-the-team":"/about/meet-the-team","getting-started/sponsors-and-backers":"/introduction/sponsors-and-backers","getting-started/roadmap":"/introduction/roadmap","getting-started/long-term-support":"/introduction/long-term-support","getting-started/consulting-and-support":"/introduction/enterprise-support","getting-started/support/enterprise":"/introduction/enterprise-support","components/textarea":"/components/textareas","components/virtual-scrollers":"/components/virtual-scroller","directives/resizing":"/directives/resize","directives/ripples":"/directives/ripple","directives/scrolling":"/directives/scroll","directives/touch-support":"/directives/touch","introduction/frequently-asked-questions":"/getting-started/frequently-asked-questions","professional-support/consulting":"/introduction/enterprise-support","professional-support/enterprise":"/introduction/enterprise-support","introduction/support":"/introduction/enterprise-support","introduction/enterprise":"/introduction/enterprise-support","introduction/consulting":"/introduction/enterprise-support","customization/accessibility":"/features/accessibility","customization/rtl":"/features/bidirectionality","features/rtl":"/features/bidirectionality","features/breakpoints":"/features/display-and-platform","features/bidirectionality":"/features/internationalization","customization/bidirectionality":"/features/bidirectionality","customization/breakpoints":"/features/display-and-platform","customization/global-config":"/features/global-config","customization/scrolling":"/features/scrolling","customization/icons":"/features/icon-fonts","customization/internationalization":"/features/internationalization","customization/presets":"/features/presets","customization/sass-variables":"/features/sass-variables","customization/theme":"/features/theme","about/sponsors-and-backers":"/introduction/sponsors-and-backers","components/simple-tables":"/components/tables","components/data-tables":"/components/data-tables/basics","components/date-pickers-month":"/introduction/roadmap","components/server-side-data-tables":"/components/data-tables/server-side-tables","components/virtual-data-tables":"/components/data-tables/virtual-tables","api/v-click-outside":"/api/v-click-outside-directive","api/v-intersect":"/api/v-intersect-directive","api/v-mutate":"/api/v-mutate-directive","api/v-resize":"/api/v-resize-directive","api/v-ripple":"/api/v-ripple-directive","api/v-scroll":"/api/v-scroll-directive","api/v-touch":"/api/v-touch-directive"},"isInternal":false,"tokens":1780,"sizeBytes":7053},{"name":"metadata.json","path":"packages/docs/src/data/metadata.json","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/data/metadata.json","title":"Data Skill","category":"anthropic-skill","format":"json","content":"{\n \"title\": \"Vuetify — A Vue Component Framework\",\n \"description\": \"Vuetify is a no design skills required UI Component Framework for Vue. It provides you with all of the tools necessary to create beautiful content rich web applications.\",\n \"keywords\": \"vue, material design components, vue components, material design components, vuetify, vuetify, component framework\"\n}\n","frontmatter":{"title":"Vuetify — A Vue Component Framework","description":"Vuetify is a no design skills required UI Component Framework for Vue. It provides you with all of the tools necessary to create beautiful content rich web applications.","keywords":"vue, material design components, vue components, material design components, vuetify, vuetify, component framework"},"isInternal":false,"tokens":82,"sizeBytes":377},{"name":"nav.json","path":"packages/docs/src/data/nav.json","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/data/nav.json","title":"Data Skill","category":"anthropic-skill","format":"json","content":"[\n {\n \"title\": \"introduction\",\n \"inactiveIcon\": \"mdi-script-text-outline\",\n \"activeIcon\": \"mdi-script-text\",\n \"items\": [\n \"why-vuetify\",\n \"long-term-support\",\n \"roadmap\",\n \"sponsors-and-backers\",\n { \"divider\": true },\n { \"subheader\": \"professional-support\" },\n \"enterprise-support\"\n ]\n },\n {\n \"title\": \"getting-started\",\n \"inactiveIcon\": \"mdi-speedometer-medium\",\n \"activeIcon\": \"mdi-speedometer\",\n \"items\": [\n \"installation\",\n \"mcp\",\n \"frequently-asked-questions\",\n \"wireframes\",\n \"unit-testing\",\n \"browser-support\",\n \"upgrade-guide\",\n \"release-notes\",\n \"contributing\"\n ]\n },\n {\n \"title\": \"features\",\n \"inactiveIcon\": \"mdi-image-edit-outline\",\n \"activeIcon\": \"mdi-image-edit\",\n \"items\": [\n \"accessibility\",\n \"aliasing\",\n \"application-layout\",\n \"blueprints\",\n {\n \"title\": \"css-utilities\",\n \"subfolder\": \"features\",\n \"activeIcon\": \"\",\n \"inactiveIcon\": \"\",\n \"items\": [\n \"overview\",\n \"unocss-vuetify-preset\",\n \"unocss-tailwind-preset\",\n \"tailwindcss\"\n ]\n },\n \"dates\",\n \"display-and-platform\",\n \"global-configuration\",\n \"hotkey\",\n \"icon-fonts\",\n \"internationalization\",\n \"md3-button-sizes\",\n \"rules\",\n \"scrolling\",\n \"sass-variables\",\n \"theme\",\n \"treeshaking\"\n ]\n },\n {\n \"title\": \"styles\",\n \"inactiveIcon\": \"mdi-palette-outline\",\n \"activeIcon\": \"mdi-palette\",\n \"items\": [\n \"entry-points\",\n \"css-reset\",\n \"layers\",\n \"transitions\",\n \"colors\",\n { \"divider\": true },\n {\n \"subheader\": \"utility-classes\"\n },\n \"borders\",\n \"border-radius\",\n \"content\",\n \"cursor\",\n \"display\",\n \"elevation\",\n \"flex\",\n \"float\",\n \"opacity\",\n \"overflow\",\n \"position\",\n \"sizing\",\n \"spacing\",\n \"text-and-typography\"\n ]\n },\n {\n \"title\": \"concepts\",\n \"inactiveIcon\": \"mdi-puzzle-outline\",\n \"activeIcon\": \"mdi-puzzle\",\n \"items\": [\n \"density-and-sizing\",\n \"items\",\n \"routing\",\n \"v-model\",\n \"variants\"\n ]\n },\n {\n \"title\": \"components\",\n \"inactiveIcon\": \"mdi-view-dashboard-outline\",\n \"activeIcon\": \"mdi-view-dashboard\",\n \"items\": [\n \"all\",\n {\n \"title\": \"explorer\",\n \"routeMatch\": \"explorer/:name(.*)\",\n \"routePath\": \"explorer\",\n \"subtitle\": \"browse-components\"\n },\n \"application\",\n { \"divider\": true },\n { \"subheader\": \"containment\" },\n \"bottom-sheets\",\n \"buttons\",\n \"icon-buttons\",\n \"cards\",\n \"chips\",\n \"dialogs\",\n \"dividers\",\n \"expansion-panels\",\n \"lists\",\n \"menus\",\n \"overlays\",\n \"sheets\",\n \"toolbars\",\n \"tooltips\",\n { \"divider\": true },\n { \"subheader\": \"navigation\" },\n \"app-bars\",\n \"bottom-navigation\",\n \"breadcrumbs\",\n \"floating-action-buttons\",\n \"footers\",\n \"navigation-drawers\",\n \"paginations\",\n \"speed-dials\",\n \"system-bars\",\n \"tabs\",\n { \"divider\": true },\n { \"subheader\": \"form-inputs-and-controls\" },\n \"autocompletes\",\n \"checkboxes\",\n \"color-inputs\",\n \"combobox\",\n \"date-inputs\",\n \"file-inputs\",\n \"file-upload\",\n \"forms\",\n \"inputs\",\n \"number-inputs\",\n \"otp-input\",\n \"radio-buttons\",\n \"range-sliders\",\n \"selects\",\n \"sliders\",\n \"switches\",\n \"text-fields\",\n \"textareas\",\n { \"divider\": true },\n { \"subheader\": \"data-and-display\" },\n \"calendars\",\n \"confirm-edit\",\n \"data-iterators\",\n {\n \"title\": \"data-tables\",\n \"subfolder\": \"components\",\n \"activeIcon\": \"\",\n \"inactiveIcon\": \"\",\n \"items\": [\n \"introduction\",\n { \"subheader\": \"guide\" },\n \"basics\",\n \"data-and-display\",\n { \"subheader\": \"types\" },\n \"server-side-tables\",\n \"virtual-tables\"\n ]\n },\n \"highlights\",\n \"hotkeys\",\n \"sparklines\",\n \"infinite-scroller\",\n \"tables\",\n \"treeview\",\n \"virtual-scroller\",\n { \"divider\": true },\n { \"subheader\": \"grids\" },\n \"grids\",\n { \"divider\": true },\n { \"subheader\": \"selection\" },\n \"button-groups\",\n \"carousels\",\n \"chip-groups\",\n \"item-groups\",\n \"slide-groups\",\n \"steppers\",\n \"vertical-steppers\",\n \"windows\",\n { \"divider\": true },\n { \"subheader\": \"feedback\" },\n \"alerts\",\n \"badges\",\n \"banners\",\n \"empty-states\",\n \"hover\",\n \"progress\",\n \"progress-circular\",\n \"progress-linear\",\n \"ratings\",\n \"skeleton-loaders\",\n \"snackbars\",\n \"snackbar-queue\",\n \"timelines\",\n { \"divider\": true },\n { \"subheader\": \"images-and-icons\" },\n \"aspect-ratios\",\n \"avatars\",\n \"avatar-groups\",\n \"icons\",\n \"images\",\n \"parallax\",\n { \"divider\": true },\n { \"subheader\": \"pickers\" },\n \"color-pickers\",\n \"date-pickers\",\n \"time-pickers\",\n { \"divider\": true },\n { \"subheader\": \"providers\" },\n \"defaults-providers\",\n \"locale-providers\",\n \"theme-providers\",\n { \"divider\": true },\n { \"subheader\": \"miscellaneous\" },\n \"lazy\",\n \"no-ssr\",\n \"pull-to-refresh\"\n ]\n },\n {\n \"title\": \"api\",\n \"inactiveIcon\": \"mdi-flask-empty-outline\",\n \"activeIcon\": \"mdi-flask-outline\",\n \"items\": [\n \"hotkey\"\n ]\n },\n {\n \"title\": \"directives\",\n \"inactiveIcon\": \"mdi-function\",\n \"activeIcon\": \"mdi-function\",\n \"items\": [\n \"click-outside\",\n \"intersect\",\n \"mutate\",\n \"resize\",\n \"ripple\",\n \"scroll\",\n \"tooltip\",\n \"touch\",\n \"touch-hold\"\n ]\n },\n {\n \"title\": \"labs\",\n \"inactiveIcon\": \"mdi-beaker-outline\",\n \"activeIcon\": \"mdi-beaker\",\n \"items\": [\n \"introduction\",\n {\n \"title\": \"audio-players\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"command-palettes\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"date-range-pickers\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"heatmaps\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"infinite-carousels\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"loading-indicators\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"mask-inputs\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"month-pickers\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"pie-charts\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"split-buttons\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"time-inputs\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"videos\",\n \"subfolder\": \"components\"\n }\n ]\n },\n {\n \"title\": \"resources\",\n \"inactiveIcon\": \"mdi-human-male-board\",\n \"activeIcon\": \"mdi-human-male-board\",\n \"items\": [\n \"brand-kit\",\n \"jobs-for-vue\",\n \"made-with-vuetify\",\n \"themes\",\n { \"divider\": true },\n { \"subheader\": \"guides\" },\n \"search-engine\",\n \"ui-kits\"\n ]\n },\n {\n \"title\": \"about\",\n \"inactiveIcon\": \"$vuetify-outline\",\n \"activeIcon\": \"$vuetify\",\n \"items\": [\n \"code-of-conduct\",\n \"licensing\",\n \"meet-the-team\",\n \"security-disclosure\"\n ]\n }\n]\n","isInternal":false,"tokens":2005,"sizeBytes":7621},{"name":"new-in.json","path":"packages/docs/src/data/new-in.json","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/data/new-in.json","title":"Data Skill","category":"anthropic-skill","format":"json","content":"{\n \"useTheme\": {\n \"exposed\": {\n \"change\": \"3.9.0\",\n \"toggle\": \"3.9.0\",\n \"cycle\": \"3.9.0\"\n }\n },\n \"VAlert\": {\n \"props\": {\n \"timeout\": \"4.3.0\",\n \"timer\": \"4.3.0\",\n \"transition\": \"4.3.0\"\n }\n },\n \"VAppBar\": {\n \"props\": {\n \"scrollBehavior\": \"3.2.0\"\n }\n },\n \"VAutocomplete\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"autocomplete\": \"3.10.0\",\n \"autoSelectFirst\": \"3.3.0\",\n \"clearOnSelect\": \"3.5.0\",\n \"closeOnInputClick\": \"4.2.0\",\n \"filteredOrder\": \"4.3.0\",\n \"form\": \"4.2.0\",\n \"listProps\": \"3.5.0\",\n \"menuElevation\": \"4.0.0\",\n \"openOnFocus\": \"4.2.0\"\n },\n \"slots\": {\n \"menu-header\": \"3.12.0\",\n \"menu-footer\": \"3.12.0\"\n },\n \"events\": {\n \"item:added\": \"4.2.0\",\n \"item:removed\": \"4.2.0\"\n },\n \"examples\": {\n \"slot-menu-footer\": \"3.12.0\",\n \"misc-new-tab\": \"3.3.0\",\n \"prop-filtered-order\": \"4.3.0\",\n \"prop-ignore-accents\": \"4.2.0\"\n }\n },\n \"VAvatar\": {\n \"props\": {\n \"text\": \"3.4.0\",\n \"border\": \"3.7.0\",\n \"badge\": \"4.0.0\"\n },\n \"slots\": {\n \"badge\": \"4.0.0\"\n },\n \"examples\": {\n \"prop-badge\": \"4.0.0\"\n }\n },\n \"VBadge\": {\n \"props\": {\n \"dotSize\": \"4.0.0\"\n }\n },\n \"VBanner\": {\n \"props\": {\n \"bgColor\": \"3.4.0\"\n }\n },\n \"VBottomSheet\": {\n \"props\": {\n \"contextMenu\": \"4.3.0\"\n }\n },\n \"VBreadcrumbsItem\": {\n \"props\": {\n \"width\": \"3.11.0\",\n \"maxWidth\": \"3.11.0\"\n }\n },\n \"VBtn\": {\n \"props\": {\n \"text\": \"3.2.0\",\n \"slim\": \"3.4.0\",\n \"readonly\": \"3.6.0\",\n \"activeColor\": \"3.7.0\",\n \"spaced\": \"3.10.0\"\n },\n \"examples\": {\n \"prop-spaced\": \"3.10.0\",\n \"misc-readonly\": \"3.6.0\"\n }\n },\n \"VBtnGroup\": {\n \"props\": {\n \"connected\": \"4.3.0\",\n \"size\": \"4.2.0\"\n }\n },\n \"VCarousel\": {\n \"props\": {\n \"crossfade\": \"3.10.0\",\n \"transitionDuration\": \"3.10.0\",\n \"pauseOnHover\": \"4.3.0\"\n },\n \"examples\": {\n \"misc-vertical\": \"3.9.0\",\n \"prop-custom-transition\": \"3.10.0\"\n }\n },\n \"VCalendar\": {\n \"props\": {\n \"format\": \"4.1.0\",\n \"intervalHighlight\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-hour24\": \"4.1.0\"\n }\n },\n \"VCheckbox\": {\n \"props\": {\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VCheckboxBtn\": {\n \"props\": {\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VChip\": {\n \"props\": {\n \"baseColor\": \"3.8.0\"\n }\n },\n \"VChipGroup\": {\n \"props\": {\n \"scrollToActive\": \"3.10.6\"\n }\n },\n \"VColorInput\": {\n \"props\": {\n \"openOnFocus\": \"4.2.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"reset\": \"4.3.0\",\n \"resetValidation\": \"4.3.0\",\n \"validate\": \"4.3.0\",\n \"isValid\": \"4.3.0\",\n \"errorMessages\": \"4.3.0\"\n }\n },\n \"VColorPicker\": {\n \"props\": {\n \"hideEyeDropper\": \"3.10.0\",\n \"eyeDropperIcon\": \"3.10.0\",\n \"hideTitle\": \"3.10.0\",\n \"hideInputLabels\": \"4.1.0\"\n }\n },\n \"VCombobox\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"alwaysFilter\": \"3.10.4\",\n \"autocomplete\": \"3.10.0\",\n \"clearOnSelect\": \"3.5.0\",\n \"closeOnInputClick\": \"4.2.0\",\n \"filteredOrder\": \"4.3.0\",\n \"form\": \"4.2.0\",\n \"listProps\": \"3.5.0\",\n \"menuElevation\": \"4.0.0\",\n \"openOnFocus\": \"4.2.0\",\n \"trimValues\": \"4.2.0\"\n },\n \"slots\": {\n \"menu-header\": \"3.12.0\",\n \"menu-footer\": \"3.12.0\"\n },\n \"events\": {\n \"item:added\": \"4.2.0\",\n \"item:removed\": \"4.2.0\",\n \"item:created\": \"4.2.0\"\n },\n \"examples\": {\n \"slot-menu-header\": \"3.12.0\"\n }\n },\n \"VConfirmEdit\": {\n \"props\": {\n \"hideActions\": \"3.8.0\"\n }\n },\n \"VDateInput\": {\n \"props\": {\n \"openOnFocus\": \"4.2.0\"\n }\n },\n \"VDatePicker\": {\n \"props\": {\n \"events\": \"3.11.0\",\n \"eventColor\": \"3.11.0\",\n \"controlHeight\": \"3.8.0\",\n \"controlVariant\": \"3.11.0\",\n \"firstDayOfYear\": \"3.10.0\",\n \"headerColor\": \"3.8.0\",\n \"headerDateFormat\": \"3.11.0\",\n \"hideTitle\": \"3.10.0\",\n \"landscape\": \"3.11.0\",\n \"landscapeHeaderWidth\": \"3.11.0\",\n \"noAutoNavigation\": \"4.1.0\",\n \"noMonthPicker\": \"3.11.0\",\n \"wheel\": \"4.3.0\"\n },\n \"slots\": {\n \"controls\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-landscape\": \"3.11.0\",\n \"prop-events\": \"3.11.0\",\n \"slots-controls\": \"3.11.0\"\n }\n },\n \"VDataIterator\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"groupKey\": \"4.1.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-grouping\": \"4.1.0\"\n }\n },\n \"VDataTable\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"collapseIcon\": \"3.10.0\",\n \"expandIcon\": \"3.10.0\",\n \"expandStrategy\": \"4.1.0\",\n \"expandTransition\": \"4.1.0\",\n \"gridlines\": \"4.1.0\",\n \"groupCollapseIcon\": \"3.10.0\",\n \"groupExpandIcon\": \"3.10.0\",\n \"groupKey\": \"4.1.0\",\n \"headerProps\": \"3.5.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\",\n \"pageBy\": \"3.12.0\",\n \"showFirstLastPage\": \"4.1.0\",\n \"sortIcon\": \"3.12.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\",\n \"expanded\": \"4.1.0\",\n \"group-summary\": \"3.10.0\"\n },\n \"examples\": {\n \"prop-grouping\": \"4.1.0\",\n \"prop-sort-icon\": \"3.12.0\",\n \"slot-expanded\": \"4.1.0\",\n \"slot-group-summary\": \"3.10.0\"\n }\n },\n \"VDataTableServer\": {\n \"props\": {\n \"collapseIcon\": \"3.10.0\",\n \"expandIcon\": \"3.10.0\",\n \"expandStrategy\": \"4.1.0\",\n \"expandTransition\": \"4.1.0\",\n \"gridlines\": \"4.1.0\",\n \"groupCollapseIcon\": \"3.10.0\",\n \"groupExpandIcon\": \"3.10.0\",\n \"groupKey\": \"4.1.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\",\n \"pageBy\": \"3.12.0\",\n \"showFirstLastPage\": \"4.1.0\",\n \"sortIcon\": \"3.12.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\",\n \"expanded\": \"4.1.0\",\n \"group-summary\": \"3.10.0\"\n }\n },\n \"VDataTableVirtual\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"collapseIcon\": \"3.10.0\",\n \"expandIcon\": \"3.10.0\",\n \"expandStrategy\": \"4.1.0\",\n \"expandTransition\": \"4.1.0\",\n \"gridlines\": \"4.1.0\",\n \"groupCollapseIcon\": \"3.10.0\",\n \"groupExpandIcon\": \"3.10.0\",\n \"groupKey\": \"4.1.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\",\n \"sortIcon\": \"3.12.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\",\n \"expanded\": \"4.1.0\",\n \"group-summary\": \"3.10.0\"\n }\n },\n \"VDialog\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"contextMenu\": \"4.3.0\",\n \"retainFocus\": \"3.11.0\",\n \"stickToTarget\": \"3.10.0\",\n \"viewportMargin\": \"3.11.0\"\n }\n },\n \"VDivider\": {\n \"props\": {\n \"gradient\": \"3.11.0\",\n \"contentOffset\": \"3.11.0\",\n \"variant\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-gradient\": \"3.11.0\"\n }\n },\n \"VExpansionPanels\": {\n \"props\": {\n \"static\": \"3.4.0\",\n \"gap\": \"4.1.0\",\n \"hover\": \"4.1.0\",\n \"noDivider\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-rounded-gap\": \"4.1.0\"\n }\n },\n \"VExpansionPanelTitle\": {\n \"props\": {\n \"hover\": \"4.1.0\"\n }\n },\n \"VField\": {\n \"props\": {\n \"iconColor\": \"3.8.0\",\n \"glow\": \"3.8.0\"\n }\n },\n \"VFileInput\": {\n \"props\": {\n \"filterByType\": \"3.10.0\",\n \"truncateLength\": \"3.10.0\"\n }\n },\n \"VFileUpload\": {\n \"props\": {\n \"filterByType\": \"3.10.0\",\n \"loading\": \"4.1.0\"\n },\n \"slots\": {\n \"loader\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-loading\": \"4.1.0\"\n }\n },\n \"VIcon\": {\n \"props\": {\n \"opacity\": \"3.8.0\"\n }\n },\n \"VIconBtn\": {\n \"props\": {\n \"widthVariant\": \"4.3.0\"\n }\n },\n \"VImg\": {\n \"props\": {\n \"position\": \"3.4.0\",\n \"draggable\": \"3.4.0\",\n \"referrerpolicy\": \"3.4.0\",\n \"crossorigin\": \"3.4.0\",\n \"absolute\": \"3.7.0\",\n \"imageClass\": \"3.12.0\"\n },\n \"examples\": {\n \"prop-image-class\": \"3.12.0\"\n }\n },\n \"VInput\": {\n \"props\": {\n \"detailsActive\": \"4.2.0\",\n \"iconColor\": \"3.8.0\",\n \"glow\": \"3.8.0\"\n }\n },\n \"VList\": {\n \"props\": {\n \"indent\": \"3.11.0\",\n \"itemsRegistration\": \"3.11.0\",\n \"prependGap\": \"3.11.0\"\n },\n \"exposed\": {\n \"activeDescendant\": \"4.3.0\"\n }\n },\n \"VListItem\": {\n \"props\": {\n \"baseColor\": \"3.3.0\",\n \"prependGap\": \"3.11.0\",\n \"slim\": \"3.4.0\"\n }\n },\n \"VMenu\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"contextMenu\": \"4.3.0\",\n \"openOnArrow\": \"4.2.0\",\n \"retainFocus\": \"3.11.0\",\n \"stickToTarget\": \"3.10.0\",\n \"submenu\": \"3.7.0\",\n \"viewportMargin\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-context-menu\": \"4.3.0\",\n \"prop-submenu\": \"3.7.0\"\n }\n },\n \"VNavigationDrawer\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"retainFocus\": \"3.11.0\",\n \"persistent\": \"3.6.0\"\n }\n },\n \"VNumberInput\": {\n \"props\": {\n \"autocomplete\": \"3.10.0\",\n \"grouping\": \"4.1.0\",\n \"groupSeparator\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-grouping\": \"4.1.0\"\n }\n },\n \"VOtpInput\": {\n \"props\": {\n \"density\": \"3.12.0\",\n \"masked\": \"3.12.0\",\n \"merged\": \"4.1.0\",\n \"pattern\": \"4.1.0\"\n },\n \"slots\": {\n \"divider\": \"4.1.0\"\n },\n \"examples\": {\n \"misc-custom-layout\": \"4.1.0\",\n \"prop-merged\": \"4.1.0\",\n \"prop-pattern\": \"4.1.0\",\n \"slot-divider\": \"4.1.0\"\n }\n },\n \"VOverlay\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"contextMenu\": \"4.3.0\",\n \"retainFocus\": \"3.11.0\",\n \"stickToTarget\": \"3.10.0\",\n \"viewportMargin\": \"3.11.0\"\n }\n },\n \"VPicker\": {\n \"props\": {\n \"hideTitle\": \"3.10.0\"\n }\n },\n \"VProgress\": {\n \"examples\": {\n \"misc-loading-indicator\": \"4.3.0\"\n }\n },\n \"VProgressCircular\": {\n \"props\": {\n \"reveal\": \"3.12.0\",\n \"rounded\": \"3.11.0\",\n \"shape\": \"4.3.0\",\n \"transition\": \"4.2.0\",\n \"variant\": \"4.3.0\"\n },\n \"examples\": {\n \"prop-reveal\": \"3.12.0\",\n \"prop-transition\": \"4.2.0\"\n }\n },\n \"VProgressLinear\": {\n \"props\": {\n \"chunkCount\": \"3.10.0\",\n \"chunkGap\": \"3.10.0\",\n \"chunkWidth\": \"3.10.0\",\n \"reveal\": \"4.2.0\",\n \"shape\": \"4.3.0\",\n \"stopIndicator\": \"4.3.0\",\n \"transition\": \"4.2.0\",\n \"variant\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-chunks\": \"3.10.0\",\n \"prop-transition\": \"4.2.0\"\n }\n },\n \"VRadio\": {\n \"props\": {\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VRadioGroup\": {\n \"events\": {\n \"update:focused\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VRangeSlider\": {\n \"examples\": {\n \"prop-value-format\": \"4.3.0\"\n },\n \"props\": {\n \"endThumbAriaLabel\": \"4.3.0\",\n \"size\": \"4.3.0\",\n \"startThumbAriaLabel\": \"4.3.0\",\n \"thumbGap\": \"4.3.0\",\n \"valueFormat\": \"4.3.0\",\n \"variant\": \"4.3.0\"\n }\n },\n \"VRating\": {\n \"props\": {\n \"iconSize\": \"4.3.0\"\n }\n },\n \"VRow\": {\n \"props\": {\n \"gapSm\": \"4.3.0\",\n \"gapMd\": \"4.3.0\",\n \"gapLg\": \"4.3.0\",\n \"gapXl\": \"4.3.0\",\n \"gapXxl\": \"4.3.0\",\n \"size\": \"4.0.0\"\n }\n },\n \"VSelect\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"autocomplete\": \"3.10.0\",\n \"form\": \"4.2.0\",\n \"listProps\": \"3.5.0\",\n \"menuElevation\": \"4.0.0\",\n \"noAutoScroll\": \"3.9.0\",\n \"openOnFocus\": \"4.2.0\"\n },\n \"slots\": {\n \"menu-header\": \"3.12.0\",\n \"menu-footer\": \"3.12.0\"\n },\n \"events\": {\n \"item:added\": \"4.2.0\",\n \"item:removed\": \"4.2.0\"\n },\n \"examples\": {\n \"prop-list-props\": \"3.5.0\",\n \"slot-menu-header-and-footer\": \"3.12.0\"\n }\n },\n \"VSelectionControl\": {\n \"props\": {\n \"indeterminate\": \"4.1.0\",\n \"indeterminateIcon\": \"4.1.0\",\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\"\n }\n },\n \"VSelectionControlGroup\": {\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\"\n }\n },\n \"VSkeletonLoader\": {\n \"props\": {\n \"types\": \"4.2.0\"\n },\n \"examples\": {\n \"prop-types\": \"4.2.0\"\n }\n },\n \"VSlider\": {\n \"examples\": {\n \"prop-value-format\": \"4.3.0\"\n },\n \"events\": {\n \"start\": \"3.2.0\",\n \"end\": \"3.2.0\"\n },\n \"props\": {\n \"appendInnerIcon\": \"4.3.0\",\n \"centered\": \"4.3.0\",\n \"prependInnerIcon\": \"4.3.0\",\n \"size\": \"4.3.0\",\n \"thumbGap\": \"4.3.0\",\n \"valueFormat\": \"4.3.0\",\n \"variant\": \"4.3.0\"\n },\n \"slots\": {\n \"append-inner\": \"4.3.0\",\n \"prepend-inner\": \"4.3.0\"\n }\n },\n \"VSlideGroup\": {\n \"props\": {\n \"contentClass\": \"3.9.0\",\n \"gap\": \"4.3.0\",\n \"padding\": \"4.3.0\",\n \"scrollDistance\": \"4.2.0\",\n \"scrollSnap\": \"4.2.0\",\n \"scrollToActive\": \"3.10.6\"\n },\n \"events\": {\n \"edge\": \"4.2.0\"\n },\n \"exposed\": {\n \"hasOverflow\": \"4.2.0\",\n \"slide\": \"4.2.0\"\n },\n \"examples\": {\n \"misc-image-slider\": \"4.3.0\"\n }\n },\n \"VSnackbar\": {\n \"props\": {\n \"loading\": \"4.0.0\",\n \"prependAvatar\": \"4.0.0\",\n \"prependIcon\": \"4.0.0\",\n \"reverseTimer\": \"4.0.0\",\n \"timer\": \"3.4.0\",\n \"timerColor\": \"4.0.0\",\n \"text\": \"3.4.0\"\n },\n \"slots\": {\n \"header\": \"4.0.0\",\n \"prepend\": \"4.0.0\"\n },\n \"examples\": {\n \"prop-prepend-icon\": \"4.0.0\",\n \"prop-prepend-avatar\": \"4.0.0\",\n \"prop-loading\": \"4.0.0\",\n \"prop-timer-position\": \"4.0.0\",\n \"slot-header\": \"4.0.0\",\n \"slot-prepend\": \"4.0.0\"\n }\n },\n \"VSnackbarQueue\": {\n \"props\": {\n \"closable\": \"4.0.0\",\n \"closeText\": \"4.0.0\",\n \"gap\": \"4.0.0\",\n \"totalVisible\": \"4.0.0\"\n },\n \"examples\": {\n \"misc-promise\": \"4.0.0\",\n \"prop-total-visible\": \"3.11.0\",\n \"prop-transition\": \"4.0.0\"\n }\n },\n \"VSpeedDial\": {\n \"props\": {\n \"contextMenu\": \"4.3.0\"\n }\n },\n \"VSparkline\": {\n \"props\": {\n \"animation\": \"4.1.0\",\n \"autoDraw\": \"4.1.0\",\n \"inset\": \"4.1.0\",\n \"interactive\": \"4.1.0\",\n \"markerSize\": \"4.1.0\",\n \"markerStroke\": \"4.1.0\",\n \"showMarkers\": \"4.1.0\",\n \"smoothMode\": \"4.1.0\",\n \"tooltip\": \"4.1.0\"\n },\n \"events\": {\n \"update:currentIndex\": \"4.1.0\"\n },\n \"examples\": {\n \"misc-interactive\": \"4.1.0\",\n \"prop-animation\": \"4.1.0\",\n \"prop-inset\": \"4.1.0\",\n \"prop-smooth-mode\": \"4.1.0\"\n }\n },\n \"VStepper\": {\n \"props\": {\n \"itemProps\": \"3.11.0\"\n }\n },\n \"VSwitch\": {\n \"props\": {\n \"size\": \"4.1.0\",\n \"thumbColor\": \"4.1.0\",\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"thumb\": \"3.5.0\",\n \"track-false\": \"3.5.0\",\n \"track-true\": \"3.5.0\",\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VTab\": {\n \"props\": {\n \"inset\": \"3.11.2\",\n \"text\": \"3.2.0\",\n \"spaced\": \"3.10.0\",\n \"sliderTransition\": \"3.11.0\",\n \"sliderTransitionDuration\": \"3.11.0\",\n \"sliderVariant\": \"4.3.0\"\n }\n },\n \"VTable\": {\n \"props\": {\n \"gridlines\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\"\n }\n },\n \"VTabs\": {\n \"props\": {\n \"inset\": \"3.11.0\",\n \"insetPadding\": \"3.11.0\",\n \"insetRadius\": \"3.11.0\",\n \"spaced\": \"3.10.0\",\n \"sliderTransition\": \"3.11.0\",\n \"sliderTransitionDuration\": \"3.11.0\",\n \"sliderVariant\": \"4.3.0\"\n },\n \"slots\": {\n \"next\": \"3.11.0\",\n \"prev\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-slider-transition\": \"3.11.0\",\n \"prop-spaced\": \"3.10.0\"\n }\n },\n \"VTextarea\": {\n \"props\": {\n \"maxHeight\": \"3.11.0\"\n }\n },\n \"VTextField\": {\n \"props\": {\n \"autocomplete\": \"3.10.0\"\n }\n },\n \"VTimePicker\": {\n \"props\": {\n \"density\": \"3.11.0\",\n \"hideTitle\": \"3.10.0\",\n \"period\": \"3.10.0\",\n \"variant\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-scrollable\": \"4.3.0\"\n }\n },\n \"VTreeview\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"hideActions\": \"3.9.0\",\n \"hideNoData\": \"3.10.0\",\n \"noDataText\": \"3.10.0\",\n \"separateRoots\": \"3.9.0\",\n \"indentLines\": \"3.9.0\",\n \"indentLinesColor\": \"3.12.0\",\n \"indentLinesOpacity\": \"3.12.0\",\n \"itemsRegistration\": \"3.11.0\"\n },\n \"slots\": {\n \"header\": \"3.10.0\",\n \"footer\": \"3.11.0\",\n \"no-data\": \"3.11.0\",\n \"toggle\": \"3.10.0\"\n },\n \"examples\": {\n \"prop-items-registration\": \"3.11.0\",\n \"slot-no-data\": \"3.11.0\",\n \"slot-toggle\": \"3.10.0\"\n }\n },\n \"VTreeviewItem\": {\n \"props\": {\n \"hideActions\": \"3.9.0\",\n \"indentLines\": \"3.9.0\"\n },\n \"slots\": {\n \"toggle\": \"3.10.0\"\n }\n },\n \"VToolbar\": {\n \"props\": {\n \"collapsePosition\": \"3.11.0\",\n \"location\": \"3.12.0\"\n },\n \"examples\": {\n \"prop-location\": \"3.12.0\"\n }\n },\n \"VTooltip\": {\n \"props\": {\n \"eager\": \"3.2.0\",\n \"interactive\": \"3.8.0\",\n \"stickToTarget\": \"3.10.0\",\n \"viewportMargin\": \"3.11.0\",\n \"persistent\": \"3.11.3\"\n },\n \"examples\": {\n \"prop-interactive\": \"3.8.0\"\n }\n },\n \"VVirtualScroll\": {\n \"props\": {\n \"itemKey\": \"3.8.0\"\n }\n },\n \"VWindow\": {\n \"props\": {\n \"crossfade\": \"3.10.0\",\n \"transitionDuration\": \"3.10.0\",\n \"wheel\": \"4.3.0\"\n }\n }\n}\n","frontmatter":{"useTheme":{"exposed":{"change":"3.9.0","toggle":"3.9.0","cycle":"3.9.0"}},"VAlert":{"props":{"timeout":"4.3.0","timer":"4.3.0","transition":"4.3.0"}},"VAppBar":{"props":{"scrollBehavior":"3.2.0"}},"VAutocomplete":{"props":{"ignoreAccents":"4.2.0","autocomplete":"3.10.0","autoSelectFirst":"3.3.0","clearOnSelect":"3.5.0","closeOnInputClick":"4.2.0","filteredOrder":"4.3.0","form":"4.2.0","listProps":"3.5.0","menuElevation":"4.0.0","openOnFocus":"4.2.0"},"slots":{"menu-header":"3.12.0","menu-footer":"3.12.0"},"events":{"item:added":"4.2.0","item:removed":"4.2.0"},"examples":{"slot-menu-footer":"3.12.0","misc-new-tab":"3.3.0","prop-filtered-order":"4.3.0","prop-ignore-accents":"4.2.0"}},"VAvatar":{"props":{"text":"3.4.0","border":"3.7.0","badge":"4.0.0"},"slots":{"badge":"4.0.0"},"examples":{"prop-badge":"4.0.0"}},"VBadge":{"props":{"dotSize":"4.0.0"}},"VBanner":{"props":{"bgColor":"3.4.0"}},"VBottomSheet":{"props":{"contextMenu":"4.3.0"}},"VBreadcrumbsItem":{"props":{"width":"3.11.0","maxWidth":"3.11.0"}},"VBtn":{"props":{"text":"3.2.0","slim":"3.4.0","readonly":"3.6.0","activeColor":"3.7.0","spaced":"3.10.0"},"examples":{"prop-spaced":"3.10.0","misc-readonly":"3.6.0"}},"VBtnGroup":{"props":{"connected":"4.3.0","size":"4.2.0"}},"VCarousel":{"props":{"crossfade":"3.10.0","transitionDuration":"3.10.0","pauseOnHover":"4.3.0"},"examples":{"misc-vertical":"3.9.0","prop-custom-transition":"3.10.0"}},"VCalendar":{"props":{"format":"4.1.0","intervalHighlight":"4.1.0"},"examples":{"prop-hour24":"4.1.0"}},"VCheckbox":{"props":{"description":"4.3.0"},"slots":{"description":"4.3.0"},"exposed":{"blur":"4.3.0","focus":"4.3.0","isFocused":"4.3.0"}},"VCheckboxBtn":{"props":{"description":"4.3.0"},"slots":{"description":"4.3.0"},"exposed":{"blur":"4.3.0","focus":"4.3.0","isFocused":"4.3.0"}},"VChip":{"props":{"baseColor":"3.8.0"}},"VChipGroup":{"props":{"scrollToActive":"3.10.6"}},"VColorInput":{"props":{"openOnFocus":"4.2.0"},"exposed":{"blur":"4.3.0","focus":"4.3.0","reset":"4.3.0","resetValidation":"4.3.0","validate":"4.3.0","isValid":"4.3.0","errorMessages":"4.3.0"}},"VColorPicker":{"props":{"hideEyeDropper":"3.10.0","eyeDropperIcon":"3.10.0","hideTitle":"3.10.0","hideInputLabels":"4.1.0"}},"VCombobox":{"props":{"ignoreAccents":"4.2.0","alwaysFilter":"3.10.4","autocomplete":"3.10.0","clearOnSelect":"3.5.0","closeOnInputClick":"4.2.0","filteredOrder":"4.3.0","form":"4.2.0","listProps":"3.5.0","menuElevation":"4.0.0","openOnFocus":"4.2.0","trimValues":"4.2.0"},"slots":{"menu-header":"3.12.0","menu-footer":"3.12.0"},"events":{"item:added":"4.2.0","item:removed":"4.2.0","item:created":"4.2.0"},"examples":{"slot-menu-header":"3.12.0"}},"VConfirmEdit":{"props":{"hideActions":"3.8.0"}},"VDateInput":{"props":{"openOnFocus":"4.2.0"}},"VDatePicker":{"props":{"events":"3.11.0","eventColor":"3.11.0","controlHeight":"3.8.0","controlVariant":"3.11.0","firstDayOfYear":"3.10.0","headerColor":"3.8.0","headerDateFormat":"3.11.0","hideTitle":"3.10.0","landscape":"3.11.0","landscapeHeaderWidth":"3.11.0","noAutoNavigation":"4.1.0","noMonthPicker":"3.11.0","wheel":"4.3.0"},"slots":{"controls":"3.11.0"},"examples":{"prop-landscape":"3.11.0","prop-events":"3.11.0","slots-controls":"3.11.0"}},"VDataIterator":{"props":{"ignoreAccents":"4.2.0","groupKey":"4.1.0","initialSortOrder":"3.11.0","openAll":"4.1.0","opened":"4.1.0"},"events":{"update:opened":"4.1.0"},"examples":{"prop-grouping":"4.1.0"}},"VDataTable":{"props":{"ignoreAccents":"4.2.0","collapseIcon":"3.10.0","expandIcon":"3.10.0","expandStrategy":"4.1.0","expandTransition":"4.1.0","gridlines":"4.1.0","groupCollapseIcon":"3.10.0","groupExpandIcon":"3.10.0","groupKey":"4.1.0","headerProps":"3.5.0","initialSortOrder":"3.11.0","openAll":"4.1.0","opened":"4.1.0","pageBy":"3.12.0","showFirstLastPage":"4.1.0","sortIcon":"3.12.0"},"events":{"update:opened":"4.1.0"},"slots":{"caption":"4.1.0","expanded":"4.1.0","group-summary":"3.10.0"},"examples":{"prop-grouping":"4.1.0","prop-sort-icon":"3.12.0","slot-expanded":"4.1.0","slot-group-summary":"3.10.0"}},"VDataTableServer":{"props":{"collapseIcon":"3.10.0","expandIcon":"3.10.0","expandStrategy":"4.1.0","expandTransition":"4.1.0","gridlines":"4.1.0","groupCollapseIcon":"3.10.0","groupExpandIcon":"3.10.0","groupKey":"4.1.0","initialSortOrder":"3.11.0","openAll":"4.1.0","opened":"4.1.0","pageBy":"3.12.0","showFirstLastPage":"4.1.0","sortIcon":"3.12.0"},"events":{"update:opened":"4.1.0"},"slots":{"caption":"4.1.0","expanded":"4.1.0","group-summary":"3.10.0"}},"VDataTableVirtual":{"props":{"ignoreAccents":"4.2.0","collapseIcon":"3.10.0","expandIcon":"3.10.0","expandStrategy":"4.1.0","expandTransition":"4.1.0","gridlines":"4.1.0","groupCollapseIcon":"3.10.0","groupExpandIcon":"3.10.0","groupKey":"4.1.0","initialSortOrder":"3.11.0","openAll":"4.1.0","opened":"4.1.0","sortIcon":"3.12.0"},"events":{"update:opened":"4.1.0"},"slots":{"caption":"4.1.0","expanded":"4.1.0","group-summary":"3.10.0"}},"VDialog":{"props":{"captureFocus":"3.11.0","contextMenu":"4.3.0","retainFocus":"3.11.0","stickToTarget":"3.10.0","viewportMargin":"3.11.0"}},"VDivider":{"props":{"gradient":"3.11.0","contentOffset":"3.11.0","variant":"3.11.0"},"examples":{"prop-gradient":"3.11.0"}},"VExpansionPanels":{"props":{"static":"3.4.0","gap":"4.1.0","hover":"4.1.0","noDivider":"4.1.0"},"examples":{"prop-rounded-gap":"4.1.0"}},"VExpansionPanelTitle":{"props":{"hover":"4.1.0"}},"VField":{"props":{"iconColor":"3.8.0","glow":"3.8.0"}},"VFileInput":{"props":{"filterByType":"3.10.0","truncateLength":"3.10.0"}},"VFileUpload":{"props":{"filterByType":"3.10.0","loading":"4.1.0"},"slots":{"loader":"4.1.0"},"examples":{"prop-loading":"4.1.0"}},"VIcon":{"props":{"opacity":"3.8.0"}},"VIconBtn":{"props":{"widthVariant":"4.3.0"}},"VImg":{"props":{"position":"3.4.0","draggable":"3.4.0","referrerpolicy":"3.4.0","crossorigin":"3.4.0","absolute":"3.7.0","imageClass":"3.12.0"},"examples":{"prop-image-class":"3.12.0"}},"VInput":{"props":{"detailsActive":"4.2.0","iconColor":"3.8.0","glow":"3.8.0"}},"VList":{"props":{"indent":"3.11.0","itemsRegistration":"3.11.0","prependGap":"3.11.0"},"exposed":{"activeDescendant":"4.3.0"}},"VListItem":{"props":{"baseColor":"3.3.0","prependGap":"3.11.0","slim":"3.4.0"}},"VMenu":{"props":{"captureFocus":"3.11.0","contextMenu":"4.3.0","openOnArrow":"4.2.0","retainFocus":"3.11.0","stickToTarget":"3.10.0","submenu":"3.7.0","viewportMargin":"3.11.0"},"examples":{"prop-context-menu":"4.3.0","prop-submenu":"3.7.0"}},"VNavigationDrawer":{"props":{"captureFocus":"3.11.0","retainFocus":"3.11.0","persistent":"3.6.0"}},"VNumberInput":{"props":{"autocomplete":"3.10.0","grouping":"4.1.0","groupSeparator":"4.1.0"},"examples":{"prop-grouping":"4.1.0"}},"VOtpInput":{"props":{"density":"3.12.0","masked":"3.12.0","merged":"4.1.0","pattern":"4.1.0"},"slots":{"divider":"4.1.0"},"examples":{"misc-custom-layout":"4.1.0","prop-merged":"4.1.0","prop-pattern":"4.1.0","slot-divider":"4.1.0"}},"VOverlay":{"props":{"captureFocus":"3.11.0","contextMenu":"4.3.0","retainFocus":"3.11.0","stickToTarget":"3.10.0","viewportMargin":"3.11.0"}},"VPicker":{"props":{"hideTitle":"3.10.0"}},"VProgress":{"examples":{"misc-loading-indicator":"4.3.0"}},"VProgressCircular":{"props":{"reveal":"3.12.0","rounded":"3.11.0","shape":"4.3.0","transition":"4.2.0","variant":"4.3.0"},"examples":{"prop-reveal":"3.12.0","prop-transition":"4.2.0"}},"VProgressLinear":{"props":{"chunkCount":"3.10.0","chunkGap":"3.10.0","chunkWidth":"3.10.0","reveal":"4.2.0","shape":"4.3.0","stopIndicator":"4.3.0","transition":"4.2.0","variant":"4.1.0"},"examples":{"prop-chunks":"3.10.0","prop-transition":"4.2.0"}},"VRadio":{"props":{"description":"4.3.0"},"slots":{"description":"4.3.0"},"exposed":{"blur":"4.3.0","focus":"4.3.0","isFocused":"4.3.0"}},"VRadioGroup":{"events":{"update:focused":"4.3.0"},"exposed":{"blur":"4.3.0","focus":"4.3.0","isFocused":"4.3.0"}},"VRangeSlider":{"examples":{"prop-value-format":"4.3.0"},"props":{"endThumbAriaLabel":"4.3.0","size":"4.3.0","startThumbAriaLabel":"4.3.0","thumbGap":"4.3.0","valueFormat":"4.3.0","variant":"4.3.0"}},"VRating":{"props":{"iconSize":"4.3.0"}},"VRow":{"props":{"gapSm":"4.3.0","gapMd":"4.3.0","gapLg":"4.3.0","gapXl":"4.3.0","gapXxl":"4.3.0","size":"4.0.0"}},"VSelect":{"props":{"ignoreAccents":"4.2.0","autocomplete":"3.10.0","form":"4.2.0","listProps":"3.5.0","menuElevation":"4.0.0","noAutoScroll":"3.9.0","openOnFocus":"4.2.0"},"slots":{"menu-header":"3.12.0","menu-footer":"3.12.0"},"events":{"item:added":"4.2.0","item:removed":"4.2.0"},"examples":{"prop-list-props":"3.5.0","slot-menu-header-and-footer":"3.12.0"}},"VSelectionControl":{"props":{"indeterminate":"4.1.0","indeterminateIcon":"4.1.0","description":"4.3.0"},"slots":{"description":"4.3.0"},"exposed":{"blur":"4.3.0","focus":"4.3.0"}},"VSelectionControlGroup":{"exposed":{"blur":"4.3.0","focus":"4.3.0"}},"VSkeletonLoader":{"props":{"types":"4.2.0"},"examples":{"prop-types":"4.2.0"}},"VSlider":{"examples":{"prop-value-format":"4.3.0"},"events":{"start":"3.2.0","end":"3.2.0"},"props":{"appendInnerIcon":"4.3.0","centered":"4.3.0","prependInnerIcon":"4.3.0","size":"4.3.0","thumbGap":"4.3.0","valueFormat":"4.3.0","variant":"4.3.0"},"slots":{"append-inner":"4.3.0","prepend-inner":"4.3.0"}},"VSlideGroup":{"props":{"contentClass":"3.9.0","gap":"4.3.0","padding":"4.3.0","scrollDistance":"4.2.0","scrollSnap":"4.2.0","scrollToActive":"3.10.6"},"events":{"edge":"4.2.0"},"exposed":{"hasOverflow":"4.2.0","slide":"4.2.0"},"examples":{"misc-image-slider":"4.3.0"}},"VSnackbar":{"props":{"loading":"4.0.0","prependAvatar":"4.0.0","prependIcon":"4.0.0","reverseTimer":"4.0.0","timer":"3.4.0","timerColor":"4.0.0","text":"3.4.0"},"slots":{"header":"4.0.0","prepend":"4.0.0"},"examples":{"prop-prepend-icon":"4.0.0","prop-prepend-avatar":"4.0.0","prop-loading":"4.0.0","prop-timer-position":"4.0.0","slot-header":"4.0.0","slot-prepend":"4.0.0"}},"VSnackbarQueue":{"props":{"closable":"4.0.0","closeText":"4.0.0","gap":"4.0.0","totalVisible":"4.0.0"},"examples":{"misc-promise":"4.0.0","prop-total-visible":"3.11.0","prop-transition":"4.0.0"}},"VSpeedDial":{"props":{"contextMenu":"4.3.0"}},"VSparkline":{"props":{"animation":"4.1.0","autoDraw":"4.1.0","inset":"4.1.0","interactive":"4.1.0","markerSize":"4.1.0","markerStroke":"4.1.0","showMarkers":"4.1.0","smoothMode":"4.1.0","tooltip":"4.1.0"},"events":{"update:currentIndex":"4.1.0"},"examples":{"misc-interactive":"4.1.0","prop-animation":"4.1.0","prop-inset":"4.1.0","prop-smooth-mode":"4.1.0"}},"VStepper":{"props":{"itemProps":"3.11.0"}},"VSwitch":{"props":{"size":"4.1.0","thumbColor":"4.1.0","description":"4.3.0"},"slots":{"thumb":"3.5.0","track-false":"3.5.0","track-true":"3.5.0","description":"4.3.0"},"exposed":{"blur":"4.3.0","focus":"4.3.0","isFocused":"4.3.0"}},"VTab":{"props":{"inset":"3.11.2","text":"3.2.0","spaced":"3.10.0","sliderTransition":"3.11.0","sliderTransitionDuration":"3.11.0","sliderVariant":"4.3.0"}},"VTable":{"props":{"gridlines":"4.1.0"},"slots":{"caption":"4.1.0"}},"VTabs":{"props":{"inset":"3.11.0","insetPadding":"3.11.0","insetRadius":"3.11.0","spaced":"3.10.0","sliderTransition":"3.11.0","sliderTransitionDuration":"3.11.0","sliderVariant":"4.3.0"},"slots":{"next":"3.11.0","prev":"3.11.0"},"examples":{"prop-slider-transition":"3.11.0","prop-spaced":"3.10.0"}},"VTextarea":{"props":{"maxHeight":"3.11.0"}},"VTextField":{"props":{"autocomplete":"3.10.0"}},"VTimePicker":{"props":{"density":"3.11.0","hideTitle":"3.10.0","period":"3.10.0","variant":"3.11.0"},"examples":{"prop-scrollable":"4.3.0"}},"VTreeview":{"props":{"ignoreAccents":"4.2.0","hideActions":"3.9.0","hideNoData":"3.10.0","noDataText":"3.10.0","separateRoots":"3.9.0","indentLines":"3.9.0","indentLinesColor":"3.12.0","indentLinesOpacity":"3.12.0","itemsRegistration":"3.11.0"},"slots":{"header":"3.10.0","footer":"3.11.0","no-data":"3.11.0","toggle":"3.10.0"},"examples":{"prop-items-registration":"3.11.0","slot-no-data":"3.11.0","slot-toggle":"3.10.0"}},"VTreeviewItem":{"props":{"hideActions":"3.9.0","indentLines":"3.9.0"},"slots":{"toggle":"3.10.0"}},"VToolbar":{"props":{"collapsePosition":"3.11.0","location":"3.12.0"},"examples":{"prop-location":"3.12.0"}},"VTooltip":{"props":{"eager":"3.2.0","interactive":"3.8.0","stickToTarget":"3.10.0","viewportMargin":"3.11.0","persistent":"3.11.3"},"examples":{"prop-interactive":"3.8.0"}},"VVirtualScroll":{"props":{"itemKey":"3.8.0"}},"VWindow":{"props":{"crossfade":"3.10.0","transitionDuration":"3.10.0","wheel":"4.3.0"}}},"isInternal":false,"tokens":7058,"sizeBytes":18185},{"name":"page-to-api.json","path":"packages/docs/src/data/page-to-api.json","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/data/page-to-api.json","title":"Data Skill","category":"anthropic-skill","format":"json","content":"{\n \"components/alerts\": [\"VAlert\", \"VAlertTitle\"],\n \"components/app-bars\": [\n \"VAppBar\",\n \"VAppBarNavIcon\",\n \"VAppBarTitle\"\n ],\n \"components/application\": [\n \"VApp\",\n \"VLayout\",\n \"VLayoutItem\",\n \"VMain\"\n ],\n \"components/aspect-ratios\": [\"VResponsive\"],\n \"components/audio-players\": [\"VAudio\", \"VAudioControls\", \"VAudioWaveform\", \"VMediaProgressBar\", \"VMediaVolume\"],\n \"components/autocompletes\": [\"VAutocomplete\"],\n \"components/avatars\": [\"VAvatar\"],\n \"components/avatar-groups\": [\"VAvatarGroup\"],\n \"components/badges\": [\"VBadge\"],\n \"components/banners\": [\n \"VBanner\",\n \"VBannerActions\",\n \"VBannerText\"\n ],\n \"components/bottom-navigation\": [\"VBottomNavigation\"],\n \"components/bottom-sheets\": [\"VBottomSheet\"],\n \"components/breadcrumbs\": [\n \"VBreadcrumbs\",\n \"VBreadcrumbsDivider\",\n \"VBreadcrumbsItem\"\n ],\n \"components/button-groups\": [\n \"VBtn\",\n \"VBtnGroup\",\n \"VBtnToggle\"\n ],\n \"components/buttons\": [\n \"VBtn\",\n \"VBtnGroup\",\n \"VBtnToggle\"\n ],\n \"components/calendars\": [\n \"VCalendar\",\n \"VCalendarDay\",\n \"VCalendarHeader\",\n \"VCalendarInterval\",\n \"VCalendarIntervalEvent\",\n \"VCalendarMonthDay\"\n ],\n \"components/cards\": [\n \"VCard\",\n \"VCardActions\",\n \"VCardItem\",\n \"VCardSubtitle\",\n \"VCardText\",\n \"VCardTitle\"\n ],\n \"components/carousels\": [\"VCarousel\", \"VCarouselItem\"],\n \"components/checkboxes\": [\"VCheckbox\", \"VCheckboxBtn\"],\n \"components/chip-groups\": [\"VChip\", \"VChipGroup\"],\n \"components/chips\": [\"VChip\", \"VChipGroup\"],\n \"components/color-inputs\": [\"VColorInput\", \"VColorPicker\"],\n \"components/color-pickers\": [\"VColorPicker\"],\n \"components/combobox\": [\"VCombobox\"],\n \"components/command-palettes\": [\"VCommandPalette\", \"VCommandPaletteItem\"],\n \"components/confirm-edit\": [\"VConfirmEdit\"],\n \"components/data-iterators\": [\"VDataIterator\"],\n \"components/date-inputs\": [\"VDateInput\", \"VDatePicker\"],\n \"components/date-pickers-month\": [\"VDatePicker\"],\n \"components/date-pickers\": [\"VDatePicker\", \"VDateInput\"],\n \"components/date-range-pickers\": [\"VDateRangePicker\"],\n \"components/defaults-providers\": [\"VDefaultsProvider\"],\n \"components/data-tables\": [\n \"VDataTable\",\n \"VDataTableFooter\",\n \"VDataTableRow\",\n \"VDataTableRows\",\n \"VDataTableServer\",\n \"VDataTableVirtual\"\n ],\n \"components/data-tables/server-side-tables\": [\n \"VDataTableServer\"\n ],\n \"components/data-tables/virtual-tables\": [\n \"VDataTableVirtual\"\n ],\n \"components/dialogs\": [\"VDialog\", \"VOverlay\"],\n \"components/dividers\": [\"VDivider\"],\n \"components/empty-states\": [\"VEmptyState\"],\n \"components/expansion-panels\": [\n \"VExpansionPanel\",\n \"VExpansionPanels\",\n \"VExpansionPanelText\",\n \"VExpansionPanelTitle\"\n ],\n \"components/file-inputs\": [\"VFileInput\"],\n \"components/file-upload\": [\"VFileUpload\"],\n \"components/floating-action-buttons\": [\"VFab\"],\n \"components/footers\": [\"VFooter\"],\n \"components/forms\": [\"VForm\"],\n \"components/grids\": [\"VCol\", \"VContainer\", \"VRow\", \"VSpacer\"],\n \"components/heatmaps\": [\"VHeatmap\", \"VHeatmapCell\", \"VHeatmapLegend\", \"VHeatmapLegendCell\"],\n \"components/highlights\": [\"VHighlight\"],\n \"components/hotkeys\": [\"VHotkey\"],\n \"components/hover\": [\"VHover\"],\n \"components/icon-buttons\": [\"VIconBtn\"],\n \"components/icons\": [\"VIcon\"],\n \"components/images\": [\"VImg\"],\n \"components/infinite-carousels\": [\"VInfiniteCarousel\"],\n \"components/loading-indicators\": [\"VLoadingIndicator\"],\n \"components/infinite-scroller\": [\"VInfiniteScroll\"],\n \"components/inputs\": [\"VInput\"],\n \"components/item-groups\": [\"VItem\", \"VItemGroup\"],\n \"components/lazy\": [\"VLazy\"],\n \"components/lists\": [\n \"VList\",\n \"VListGroup\",\n \"VListItem\",\n \"VListItemAction\",\n \"VListItemMedia\",\n \"VListItemSubtitle\",\n \"VListItemTitle\",\n \"VListSubheader\",\n \"VListImg\"\n ],\n \"components/locale-providers\": [\"VLocaleProvider\"],\n \"components/mask-inputs\": [\"VMaskInput\"],\n \"components/menus\": [\"VMenu\"],\n \"components/navigation-drawers\": [\"VNavigationDrawer\"],\n \"components/no-ssr\": [\"VNoSsr\"],\n \"components/month-pickers\": [\"VMonthPicker\"],\n \"components/number-inputs\": [\"VNumberInput\"],\n \"components/otp-input\": [\"VOtpInput\", \"VOtpField\", \"VOtpGroup\", \"VOtpSeparator\"],\n \"components/overlays\": [\"VOverlay\"],\n \"components/paginations\": [\"VPagination\"],\n \"components/parallax\": [\"VParallax\"],\n \"components/pie-charts\": [\"VPie\", \"VPieSegment\", \"VPieTooltip\"],\n \"components/progress\": [\"VProgress\"],\n \"components/progress-circular\": [\"VProgressCircular\"],\n \"components/progress-linear\": [\"VProgressLinear\"],\n \"components/pull-to-refresh\": [\"VPullToRefresh\"],\n \"components/radio-buttons\": [\"VRadio\", \"VRadioGroup\"],\n \"components/range-sliders\": [\"VRangeSlider\", \"VSlider\"],\n \"components/ratings\": [\"VRating\"],\n \"components/selects\": [\"VSelect\"],\n \"components/sheets\": [\"VSheet\"],\n \"components/skeleton-loaders\": [\"VSkeletonLoader\"],\n \"components/slide-groups\": [\"VSlideGroup\", \"VSlideGroupItem\"],\n \"components/sliders\": [\"VRangeSlider\", \"VSlider\"],\n \"components/snackbar-queue\": [\"VSnackbarQueue\", \"VSnackbar\"],\n \"components/snackbars\": [\"VSnackbar\"],\n \"components/sparklines\": [\"VSparkline\", \"VSparklineTooltip\"],\n \"components/speed-dials\": [\"VSpeedDial\"],\n \"components/split-buttons\": [\"VSplitBtn\"],\n \"components/steppers\": [\n \"VStepper\",\n \"VStepperHeader\",\n \"VStepperItem\",\n \"VStepperWindow\",\n \"VStepperWindowItem\"\n ],\n \"components/switches\": [\"VSwitch\"],\n \"components/system-bars\": [\"VSystemBar\"],\n \"components/tables\": [\"VTable\"],\n \"components/tabs\": [\"VTabs\", \"VTab\"],\n \"components/text-fields\": [\"VTextField\"],\n \"components/textareas\": [\"VTextarea\"],\n \"components/theme-providers\": [\"VThemeProvider\"],\n \"components/time-pickers\": [\"VTimePicker\"],\n \"components/time-inputs\": [\"VTimeInput\", \"VTimePicker\"],\n \"components/timelines\": [\"VTimeline\", \"VTimelineItem\"],\n \"components/toolbars\": [\"VToolbar\", \"VToolbarItems\", \"VToolbarTitle\"],\n \"components/tooltips\": [\"VTooltip\"],\n \"components/treeview\": [\n \"VTreeview\",\n \"VTreeviewItem\",\n \"VTreeviewChildren\",\n \"VTreeviewGroup\"\n ],\n \"components/vertical-steppers\": [\"VStepperVertical\", \"VStepperVerticalActions\", \"VStepperVerticalItem\"],\n \"components/videos\": [\"VVideo\", \"VVideoControls\", \"VMediaProgressBar\", \"VMediaVolume\"],\n \"components/virtual-scroller\": [\"VVirtualScroll\"],\n \"components/windows\": [\"VWindow\", \"VWindowItem\"],\n \"directives/click-outside\": [\"v-click-outside\"],\n \"directives/intersect\": [\"v-intersect\"],\n \"directives/mutate\": [\"v-mutate\"],\n \"directives/resize\": [\"v-resize\"],\n \"directives/ripple\": [\"v-ripple\"],\n \"directives/scroll\": [\"v-scroll\"],\n \"directives/touch\": [\"v-touch\"],\n \"directives/touch-hold\": [\"v-touch-hold\"],\n \"directives/tooltip\": [\"v-tooltip\"],\n \"features/dates\": [\"useDate\"],\n \"features/display-and-platform\": [\"useDisplay\"],\n \"features/hotkey\": [\"useHotkey\"],\n \"features/scrolling\": [\"useGoTo\"],\n \"features/global-configuration\": [\"VDefaultsProvider\"],\n \"features/internationalization\": [\"useLocale\", \"VLocaleProvider\"],\n \"features/theme\": [\"useTheme\", \"VThemeProvider\"],\n \"styles/transitions\": [\n \"VDialogBottomTransition\",\n \"VDialogTopTransition\",\n \"VDialogTransition\",\n \"VExpandTransition\",\n \"VExpandXTransition\",\n \"VFabTransition\",\n \"VFadeTransition\",\n \"VScaleTransition\",\n \"VScrollXTransition\",\n \"VScrollXReverseTransition\",\n \"VScrollYTransition\",\n \"VScrollYReverseTransition\",\n \"VSlideXTransition\",\n \"VSlideXReverseTransition\",\n \"VSlideYTransition\",\n \"VSlideYReverseTransition\"\n ]\n}\n","frontmatter":{"components/alerts":["VAlert","VAlertTitle"],"components/app-bars":["VAppBar","VAppBarNavIcon","VAppBarTitle"],"components/application":["VApp","VLayout","VLayoutItem","VMain"],"components/aspect-ratios":["VResponsive"],"components/audio-players":["VAudio","VAudioControls","VAudioWaveform","VMediaProgressBar","VMediaVolume"],"components/autocompletes":["VAutocomplete"],"components/avatars":["VAvatar"],"components/avatar-groups":["VAvatarGroup"],"components/badges":["VBadge"],"components/banners":["VBanner","VBannerActions","VBannerText"],"components/bottom-navigation":["VBottomNavigation"],"components/bottom-sheets":["VBottomSheet"],"components/breadcrumbs":["VBreadcrumbs","VBreadcrumbsDivider","VBreadcrumbsItem"],"components/button-groups":["VBtn","VBtnGroup","VBtnToggle"],"components/buttons":["VBtn","VBtnGroup","VBtnToggle"],"components/calendars":["VCalendar","VCalendarDay","VCalendarHeader","VCalendarInterval","VCalendarIntervalEvent","VCalendarMonthDay"],"components/cards":["VCard","VCardActions","VCardItem","VCardSubtitle","VCardText","VCardTitle"],"components/carousels":["VCarousel","VCarouselItem"],"components/checkboxes":["VCheckbox","VCheckboxBtn"],"components/chip-groups":["VChip","VChipGroup"],"components/chips":["VChip","VChipGroup"],"components/color-inputs":["VColorInput","VColorPicker"],"components/color-pickers":["VColorPicker"],"components/combobox":["VCombobox"],"components/command-palettes":["VCommandPalette","VCommandPaletteItem"],"components/confirm-edit":["VConfirmEdit"],"components/data-iterators":["VDataIterator"],"components/date-inputs":["VDateInput","VDatePicker"],"components/date-pickers-month":["VDatePicker"],"components/date-pickers":["VDatePicker","VDateInput"],"components/date-range-pickers":["VDateRangePicker"],"components/defaults-providers":["VDefaultsProvider"],"components/data-tables":["VDataTable","VDataTableFooter","VDataTableRow","VDataTableRows","VDataTableServer","VDataTableVirtual"],"components/data-tables/server-side-tables":["VDataTableServer"],"components/data-tables/virtual-tables":["VDataTableVirtual"],"components/dialogs":["VDialog","VOverlay"],"components/dividers":["VDivider"],"components/empty-states":["VEmptyState"],"components/expansion-panels":["VExpansionPanel","VExpansionPanels","VExpansionPanelText","VExpansionPanelTitle"],"components/file-inputs":["VFileInput"],"components/file-upload":["VFileUpload"],"components/floating-action-buttons":["VFab"],"components/footers":["VFooter"],"components/forms":["VForm"],"components/grids":["VCol","VContainer","VRow","VSpacer"],"components/heatmaps":["VHeatmap","VHeatmapCell","VHeatmapLegend","VHeatmapLegendCell"],"components/highlights":["VHighlight"],"components/hotkeys":["VHotkey"],"components/hover":["VHover"],"components/icon-buttons":["VIconBtn"],"components/icons":["VIcon"],"components/images":["VImg"],"components/infinite-carousels":["VInfiniteCarousel"],"components/loading-indicators":["VLoadingIndicator"],"components/infinite-scroller":["VInfiniteScroll"],"components/inputs":["VInput"],"components/item-groups":["VItem","VItemGroup"],"components/lazy":["VLazy"],"components/lists":["VList","VListGroup","VListItem","VListItemAction","VListItemMedia","VListItemSubtitle","VListItemTitle","VListSubheader","VListImg"],"components/locale-providers":["VLocaleProvider"],"components/mask-inputs":["VMaskInput"],"components/menus":["VMenu"],"components/navigation-drawers":["VNavigationDrawer"],"components/no-ssr":["VNoSsr"],"components/month-pickers":["VMonthPicker"],"components/number-inputs":["VNumberInput"],"components/otp-input":["VOtpInput","VOtpField","VOtpGroup","VOtpSeparator"],"components/overlays":["VOverlay"],"components/paginations":["VPagination"],"components/parallax":["VParallax"],"components/pie-charts":["VPie","VPieSegment","VPieTooltip"],"components/progress":["VProgress"],"components/progress-circular":["VProgressCircular"],"components/progress-linear":["VProgressLinear"],"components/pull-to-refresh":["VPullToRefresh"],"components/radio-buttons":["VRadio","VRadioGroup"],"components/range-sliders":["VRangeSlider","VSlider"],"components/ratings":["VRating"],"components/selects":["VSelect"],"components/sheets":["VSheet"],"components/skeleton-loaders":["VSkeletonLoader"],"components/slide-groups":["VSlideGroup","VSlideGroupItem"],"components/sliders":["VRangeSlider","VSlider"],"components/snackbar-queue":["VSnackbarQueue","VSnackbar"],"components/snackbars":["VSnackbar"],"components/sparklines":["VSparkline","VSparklineTooltip"],"components/speed-dials":["VSpeedDial"],"components/split-buttons":["VSplitBtn"],"components/steppers":["VStepper","VStepperHeader","VStepperItem","VStepperWindow","VStepperWindowItem"],"components/switches":["VSwitch"],"components/system-bars":["VSystemBar"],"components/tables":["VTable"],"components/tabs":["VTabs","VTab"],"components/text-fields":["VTextField"],"components/textareas":["VTextarea"],"components/theme-providers":["VThemeProvider"],"components/time-pickers":["VTimePicker"],"components/time-inputs":["VTimeInput","VTimePicker"],"components/timelines":["VTimeline","VTimelineItem"],"components/toolbars":["VToolbar","VToolbarItems","VToolbarTitle"],"components/tooltips":["VTooltip"],"components/treeview":["VTreeview","VTreeviewItem","VTreeviewChildren","VTreeviewGroup"],"components/vertical-steppers":["VStepperVertical","VStepperVerticalActions","VStepperVerticalItem"],"components/videos":["VVideo","VVideoControls","VMediaProgressBar","VMediaVolume"],"components/virtual-scroller":["VVirtualScroll"],"components/windows":["VWindow","VWindowItem"],"directives/click-outside":["v-click-outside"],"directives/intersect":["v-intersect"],"directives/mutate":["v-mutate"],"directives/resize":["v-resize"],"directives/ripple":["v-ripple"],"directives/scroll":["v-scroll"],"directives/touch":["v-touch"],"directives/touch-hold":["v-touch-hold"],"directives/tooltip":["v-tooltip"],"features/dates":["useDate"],"features/display-and-platform":["useDisplay"],"features/hotkey":["useHotkey"],"features/scrolling":["useGoTo"],"features/global-configuration":["VDefaultsProvider"],"features/internationalization":["useLocale","VLocaleProvider"],"features/theme":["useTheme","VThemeProvider"],"styles/transitions":["VDialogBottomTransition","VDialogTopTransition","VDialogTransition","VExpandTransition","VExpandXTransition","VFabTransition","VFadeTransition","VScaleTransition","VScrollXTransition","VScrollXReverseTransition","VScrollYTransition","VScrollYReverseTransition","VSlideXTransition","VSlideXReverseTransition","VSlideYTransition","VSlideYReverseTransition"]},"isInternal":false,"tokens":2097,"sizeBytes":7575},{"name":"team.json","path":"packages/docs/src/data/team.json","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/data/team.json","title":"Data Skill","category":"anthropic-skill","format":"json","content":"{\n \"johnleider\": {\n \"discord\": \"johnleider\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/johnleider)\",\n \"[Paypal](https://paypal.me/vuetify)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"john-leider-626183a2\",\n \"location\": \"Keller, TX, USA\",\n \"name\": \"John Leider\",\n \"team\": \"company\",\n \"twitter\": \"zeroskillz\",\n \"work\": \"Engineer @ Vuetify\",\n \"joined\": \"Jun 2016\"\n },\n \"heatherleider\": {\n \"discord\": \"heatherleider\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Keller, TX, USA\",\n \"name\": \"Heather Leider\",\n \"team\": \"company\",\n \"twitter\": \"grneyedgrl01\",\n \"work\": \"COO @ Vuetify\",\n \"joined\": \"Nov 2019\"\n },\n \"KaelWD\": {\n \"discord\": \"kaelwd\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\",\n \"[vuetify-loader](https://github.com/vuetifyjs/vuetify-loader)\",\n \"[eslint-plugin-vuetify](https://github.com/vuetifyjs/eslint-plugin-vuetify)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/kaelwd)\",\n \"[Patreon](https://patreon.com/kaelwd)\",\n \"[Open Collective](https://opencollective.com/vuetify)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Melbourne, Australia\",\n \"name\": \"Kael Watts-Deuchar\",\n \"team\": \"core\",\n \"joined\": \"Oct 2017\"\n },\n \"nekosaur\": {\n \"discord\": \".nekosaur\",\n \"languages\": [\n \"Swedish\",\n \"English\"\n ],\n \"location\": \"Malmö, Sweden\",\n \"name\": \"Albert Kaaman\",\n \"team\": \"legends\",\n \"joined\": \"Jun 2017\"\n },\n \"MajesticPotatoe\": {\n \"discord\": \"majesticpotatoe\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\",\n \"[vuetifyjs/docs](https://github.com/vuetifyjs/vuetify/tree/master/packages/docs)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/majesticpotatoe)\",\n \"[Open Collective](https://opencollective.com/vuetify)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"andrew-henry-01049830\",\n \"location\": \"Rochester, NY, USA\",\n \"name\": \"Andrew Henry\",\n \"team\": \"core\",\n \"twitter\": \"SeeMWhyK\",\n \"joined\": \"Dec 2018\"\n },\n \"blalan05\": {\n \"discord\": \"blalan05\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"blalan05\",\n \"location\": \"Wisconsin, USA\",\n \"name\": \"Blaine Landowski\",\n \"team\": \"core\",\n \"work\": \"CEO at Foundational Technologies LLC\",\n \"joined\": \"Feb 2021\"\n },\n \"userquin\": {\n \"discord\": \"userquin\",\n \"focus\": [\n \"[vuetifyjs/create](https://github.com/vuetifyjs/create)\",\n \"[Nuxt](https://github.com/userquin/vuetify-nuxt-module)\"\n ],\n \"languages\": [\n \"Spanish\",\n \"English\"\n ],\n \"location\": \"Madrid, Spain\",\n \"name\": \"Joaquín Sánchez\",\n \"twitter\": \"userquin\",\n \"team\": \"core\",\n \"joined\": \"Mar 2024\"\n },\n \"MatthewAry\": {\n \"discord\": \"bitshift_\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Spokane, WA, USA\",\n \"name\": \"Matthew Ary\",\n \"twitter\": \"MatthewAry\",\n \"linkedin\": \"matthewary\",\n \"work\": \"Director of Product Development at Symplsoft Inc.\",\n \"team\": \"core\",\n \"joined\": \"May 2024\"\n },\n \"J-Sek\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/j-sek.png\",\n \"discord\": \"jacek#1420\",\n \"focus\": [\n \"[vuetifyjs/vuetify](https://github.com/vuetifyjs/vuetify)\"\n ],\n \"languages\": [\n \"Polish\",\n \"English\"\n ],\n \"location\": \"Gdańsk, Poland\",\n \"name\": \"Jacek Czarniecki\",\n \"team\": \"core\",\n \"joined\": \"Nov 2024\"\n },\n \"Spatlani\": {\n \"name\": \"Shubham Patlani\",\n \"team\": \"core\",\n \"discord\": \"spatlani\",\n \"focus\": [\"[vuetifyjs/*](https://github.com/vuetifyjs)\"],\n \"languages\": [\"English\", \"Hindi\", \"Punjabi\"],\n \"linkedin\": \"spatlani\",\n \"github\": \"spatlani\",\n \"avatar\": \"https://avatars.githubusercontent.com/u/11574195\",\n \"location\": \"Delhi, India\",\n \"joined\": \"March 2025\"\n },\n \"Haviles04\": {\n \"name\": \"Henry Aviles\",\n \"team\": \"core\",\n \"discord\": \"hankthetank4\",\n \"linkedin\": \"henry-aviles\",\n \"focus\": [\"[One](https://github.com/vuetifyjs/one)\"],\n \"languages\": [\"English\"],\n \"joined\": \"March 2025\",\n \"location\": \"Huntington, NY, USA\"\n },\n \"ikushum\": {\n \"name\": \"Ishan Subedi\",\n \"team\": \"core\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"Nepali\",\n \"English\"\n ],\n \"discord\": \"ikushum\",\n \"linkedin\": \"ikushum\",\n \"joined\": \"March 2025\",\n \"location\": \"Kathmandu, Nepal\",\n \"avatar\": \"https://avatars.githubusercontent.com/u/17315781\"\n },\n \"AndreyYolkin\": {\n \"name\": \"Andrei Elkin\",\n \"team\": \"core\",\n \"discord\": \"yol_kin\",\n \"focus\": [\n \"[vuetifyjs/create](https://github.com/vuetifyjs/create)\",\n \"[vuetify-loader](https://github.com/vuetifyjs/vuetify-loader)\",\n \"[Nuxt](https://github.com/vuetifyjs/nuxt-module)\"\n ],\n \"languages\": [\n \"Polish\",\n \"English\",\n \"Russian\"\n ],\n \"location\": \"Kraków, Poland\",\n \"linkedin\": \"yolkin\",\n \"joined\": \"March 2025\"\n },\n \"jcjp\": {\n \"name\": \"JC Puno\",\n \"team\": \"core\",\n \"discord\": \"psi#8085\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\",\n \"[Nuxt](https://github.com/userquin/vuetify-nuxt-module)\"\n ],\n \"languages\": [\n \"Tagalog / Filipino\",\n \"English\"\n ],\n \"location\": \"Manila, Philipines\",\n \"joined\": \"March 2025\"\n },\n \"oumoussa98\": {\n \"name\": \"Abdelouahed Oumoussa\",\n \"team\": \"core\",\n \"discord\": \"oumoussa\",\n \"twitter\": \"oumoussa_\",\n \"github\": \"oumoussa98\",\n \"linkedin\": \"aoumoussa\",\n \"avatar\": \"https://gravatar.com/avatar/7d1a8ba680ab9d49bd9cdaeff05d0e76\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"Arabic\",\n \"English\"\n ],\n \"joined\": \"March 2025\",\n \"location\": \"Casablanca, Morocco\"\n },\n \"yuwu9145\": {\n \"discord\": \"yuwu9145\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\",\n \"Chinese(Mandarin)\"\n ],\n \"location\": \"Melbourne, Australia\",\n \"name\": \"Yuchao Wu\",\n \"team\": \"legends\",\n \"joined\": \"Mar 2023\"\n },\n \"kieuminhcanh\": {\n \"discord\": \"kieuminhcanh\",\n \"focus\": [\n \"[vuetifyjs/studio](https://github.com/vuetifyjs/studio)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/kieuminhcanh)\",\n \"[Patreon](https://patreon.com/kieuminhcanh)\",\n \"[Open Collective](https://opencollective.com/vuetify)\"\n ],\n \"languages\": [\n \"English\",\n \"Vietnamese\"\n ],\n \"location\": \"California, US\",\n \"name\": \"Ken Kieu\",\n \"team\": \"legends\",\n \"twitter\": \"kieuminhcanh\",\n \"joined\": \"April 2024\"\n },\n \"jacekkarczmarczyk\": {\n \"discord\": \"jacek#3542\",\n \"languages\": [\n \"Polish\",\n \"English\"\n ],\n \"location\": \"Warsaw, Poland\",\n \"name\": \"Jacek Karczmarczyk\",\n \"team\": \"legends\"\n },\n \"chewy94\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/chewy94.jpg\",\n \"discord\": \"Sean Kimball#0001\",\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"sean-kimball-b50922126\",\n \"location\": \"Goodyear, Arizona, USA\",\n \"name\": \"Sean Kimball\",\n \"team\": \"legends\"\n },\n \"bdeo\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/bdeo.jpg\",\n \"discord\": \"brandondeo#0001\",\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"brandondeo\",\n \"location\": \"Philadelphia, PA, USA\",\n \"name\": \"Brandon Deo\",\n \"team\": \"legends\"\n },\n \"ElijahKotyluk\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/ElijahKotyluk.jpg\",\n \"discord\": \"edk#4363\",\n \"languages\": [\n \"English\"\n ],\n \"location\": \"USA\",\n \"name\": \"Elijah Kotyluk\",\n \"team\": \"legends\"\n },\n \"santiagoaloi\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/santiagoaloi.jpg\",\n \"discord\": \"lannnister\",\n \"languages\": [\n \"Swedish\",\n \"English\",\n \"Spanish\"\n ],\n \"linkedin\": \"santiagoaloi\",\n \"location\": \"Stockholm, Sweden\",\n \"name\": \"Santiago Aloi\",\n \"team\": \"legends\",\n \"joined\": \"Feb 2023\"\n },\n \"yooneskh\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/yooneskh.png\",\n \"discord\": \"YoonesKh#7826\",\n \"languages\": [\n \"English\",\n \"Persian\"\n ],\n \"twitter\": \"yooneskh\",\n \"linkedin\": \"yooneskh \",\n \"location\": \"Iran\",\n \"name\": \"Yoones Khoshghadam\",\n \"team\": \"legends\",\n \"joined\": \"January 2023\"\n },\n \"elvinagarcia\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/elvinagarcia.png\",\n \"discord\": \"elvinagarcia\",\n \"focus\": [\n \"Design/Animations\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Virginia, USA\",\n \"name\": \"Elvina Garcia\",\n \"team\": \"legends\",\n \"joined\": \"Feb 2023\"\n }\n}\n","frontmatter":{"johnleider":{"discord":"johnleider","focus":["[vuetifyjs/*](https://github.com/vuetifyjs)"],"funding":["[GitHub Sponsors](https://github.com/sponsors/johnleider)","[Paypal](https://paypal.me/vuetify)"],"languages":["English"],"linkedin":"john-leider-626183a2","location":"Keller, TX, USA","name":"John Leider","team":"company","twitter":"zeroskillz","work":"Engineer @ Vuetify","joined":"Jun 2016"},"heatherleider":{"discord":"heatherleider","focus":["[vuetifyjs/*](https://github.com/vuetifyjs)"],"languages":["English"],"location":"Keller, TX, USA","name":"Heather Leider","team":"company","twitter":"grneyedgrl01","work":"COO @ Vuetify","joined":"Nov 2019"},"KaelWD":{"discord":"kaelwd","focus":["[vuetifyjs/*](https://github.com/vuetifyjs)","[vuetify-loader](https://github.com/vuetifyjs/vuetify-loader)","[eslint-plugin-vuetify](https://github.com/vuetifyjs/eslint-plugin-vuetify)"],"funding":["[GitHub Sponsors](https://github.com/sponsors/kaelwd)","[Patreon](https://patreon.com/kaelwd)","[Open Collective](https://opencollective.com/vuetify)"],"languages":["English"],"location":"Melbourne, Australia","name":"Kael Watts-Deuchar","team":"core","joined":"Oct 2017"},"nekosaur":{"discord":".nekosaur","languages":["Swedish","English"],"location":"Malmö, Sweden","name":"Albert Kaaman","team":"legends","joined":"Jun 2017"},"MajesticPotatoe":{"discord":"majesticpotatoe","focus":["[vuetifyjs](https://github.com/vuetifyjs)","[vuetifyjs/docs](https://github.com/vuetifyjs/vuetify/tree/master/packages/docs)"],"funding":["[GitHub Sponsors](https://github.com/sponsors/majesticpotatoe)","[Open Collective](https://opencollective.com/vuetify)"],"languages":["English"],"linkedin":"andrew-henry-01049830","location":"Rochester, NY, USA","name":"Andrew Henry","team":"core","twitter":"SeeMWhyK","joined":"Dec 2018"},"blalan05":{"discord":"blalan05","focus":["[vuetifyjs](https://github.com/vuetifyjs)"],"languages":["English"],"linkedin":"blalan05","location":"Wisconsin, USA","name":"Blaine Landowski","team":"core","work":"CEO at Foundational Technologies LLC","joined":"Feb 2021"},"userquin":{"discord":"userquin","focus":["[vuetifyjs/create](https://github.com/vuetifyjs/create)","[Nuxt](https://github.com/userquin/vuetify-nuxt-module)"],"languages":["Spanish","English"],"location":"Madrid, Spain","name":"Joaquín Sánchez","twitter":"userquin","team":"core","joined":"Mar 2024"},"MatthewAry":{"discord":"bitshift_","focus":["[vuetifyjs/*](https://github.com/vuetifyjs)"],"languages":["English"],"location":"Spokane, WA, USA","name":"Matthew Ary","twitter":"MatthewAry","linkedin":"matthewary","work":"Director of Product Development at Symplsoft Inc.","team":"core","joined":"May 2024"},"J-Sek":{"avatar":"https://cdn.vuetifyjs.com/docs/images/team/j-sek.png","discord":"jacek#1420","focus":["[vuetifyjs/vuetify](https://github.com/vuetifyjs/vuetify)"],"languages":["Polish","English"],"location":"Gdańsk, Poland","name":"Jacek Czarniecki","team":"core","joined":"Nov 2024"},"Spatlani":{"name":"Shubham Patlani","team":"core","discord":"spatlani","focus":["[vuetifyjs/*](https://github.com/vuetifyjs)"],"languages":["English","Hindi","Punjabi"],"linkedin":"spatlani","github":"spatlani","avatar":"https://avatars.githubusercontent.com/u/11574195","location":"Delhi, India","joined":"March 2025"},"Haviles04":{"name":"Henry Aviles","team":"core","discord":"hankthetank4","linkedin":"henry-aviles","focus":["[One](https://github.com/vuetifyjs/one)"],"languages":["English"],"joined":"March 2025","location":"Huntington, NY, USA"},"ikushum":{"name":"Ishan Subedi","team":"core","focus":["[vuetifyjs/*](https://github.com/vuetifyjs)"],"languages":["Nepali","English"],"discord":"ikushum","linkedin":"ikushum","joined":"March 2025","location":"Kathmandu, Nepal","avatar":"https://avatars.githubusercontent.com/u/17315781"},"AndreyYolkin":{"name":"Andrei Elkin","team":"core","discord":"yol_kin","focus":["[vuetifyjs/create](https://github.com/vuetifyjs/create)","[vuetify-loader](https://github.com/vuetifyjs/vuetify-loader)","[Nuxt](https://github.com/vuetifyjs/nuxt-module)"],"languages":["Polish","English","Russian"],"location":"Kraków, Poland","linkedin":"yolkin","joined":"March 2025"},"jcjp":{"name":"JC Puno","team":"core","discord":"psi#8085","focus":["[vuetifyjs](https://github.com/vuetifyjs)","[Nuxt](https://github.com/userquin/vuetify-nuxt-module)"],"languages":["Tagalog / Filipino","English"],"location":"Manila, Philipines","joined":"March 2025"},"oumoussa98":{"name":"Abdelouahed Oumoussa","team":"core","discord":"oumoussa","twitter":"oumoussa_","github":"oumoussa98","linkedin":"aoumoussa","avatar":"https://gravatar.com/avatar/7d1a8ba680ab9d49bd9cdaeff05d0e76","focus":["[vuetifyjs/*](https://github.com/vuetifyjs)"],"languages":["Arabic","English"],"joined":"March 2025","location":"Casablanca, Morocco"},"yuwu9145":{"discord":"yuwu9145","focus":["[vuetifyjs](https://github.com/vuetifyjs)"],"languages":["English","Chinese(Mandarin)"],"location":"Melbourne, Australia","name":"Yuchao Wu","team":"legends","joined":"Mar 2023"},"kieuminhcanh":{"discord":"kieuminhcanh","focus":["[vuetifyjs/studio](https://github.com/vuetifyjs/studio)"],"funding":["[GitHub Sponsors](https://github.com/sponsors/kieuminhcanh)","[Patreon](https://patreon.com/kieuminhcanh)","[Open Collective](https://opencollective.com/vuetify)"],"languages":["English","Vietnamese"],"location":"California, US","name":"Ken Kieu","team":"legends","twitter":"kieuminhcanh","joined":"April 2024"},"jacekkarczmarczyk":{"discord":"jacek#3542","languages":["Polish","English"],"location":"Warsaw, Poland","name":"Jacek Karczmarczyk","team":"legends"},"chewy94":{"avatar":"https://cdn.vuetifyjs.com/docs/images/team/chewy94.jpg","discord":"Sean Kimball#0001","languages":["English"],"linkedin":"sean-kimball-b50922126","location":"Goodyear, Arizona, USA","name":"Sean Kimball","team":"legends"},"bdeo":{"avatar":"https://cdn.vuetifyjs.com/docs/images/team/bdeo.jpg","discord":"brandondeo#0001","languages":["English"],"linkedin":"brandondeo","location":"Philadelphia, PA, USA","name":"Brandon Deo","team":"legends"},"ElijahKotyluk":{"avatar":"https://cdn.vuetifyjs.com/docs/images/team/ElijahKotyluk.jpg","discord":"edk#4363","languages":["English"],"location":"USA","name":"Elijah Kotyluk","team":"legends"},"santiagoaloi":{"avatar":"https://cdn.vuetifyjs.com/docs/images/team/santiagoaloi.jpg","discord":"lannnister","languages":["Swedish","English","Spanish"],"linkedin":"santiagoaloi","location":"Stockholm, Sweden","name":"Santiago Aloi","team":"legends","joined":"Feb 2023"},"yooneskh":{"avatar":"https://cdn.vuetifyjs.com/docs/images/team/yooneskh.png","discord":"YoonesKh#7826","languages":["English","Persian"],"twitter":"yooneskh","linkedin":"yooneskh ","location":"Iran","name":"Yoones Khoshghadam","team":"legends","joined":"January 2023"},"elvinagarcia":{"avatar":"https://cdn.vuetifyjs.com/docs/images/team/elvinagarcia.png","discord":"elvinagarcia","focus":["Design/Animations"],"languages":["English"],"location":"Virginia, USA","name":"Elvina Garcia","team":"legends","joined":"Feb 2023"}},"isInternal":false,"tokens":2953,"sizeBytes":9135},{"name":"code-of-conduct.md","path":"packages/docs/src/pages/en/about/code-of-conduct.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/about/code-of-conduct.md","title":"About Skill","category":"anthropic-skill","format":"markdown","content":"---\nmeta:\n title: Code of conduct\n description: Vuetify provides a safe, inclusive, and judgment free community for developers from all walks of life!\n keywords: vuetify code of conduct, vuetify coc, community conduct\n---\n\n# Code of conduct\n\nFor questions or concerns regarding our *Code of Conduct*, please reach out to us at [support@vuetifyjs.com](mailto:support@vuetifyjs.com).\n\n\n\n\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@vuetifyjs.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant](https://contributor-covenant.org), version 1.4, available at [https://contributor-covenant.org/version/1/4](https://contributor-covenant.org/version/1/4/)\n","frontmatter":{"meta":{"title":"Code of conduct","description":"Vuetify provides a safe, inclusive, and judgment free community for developers from all walks of life!","keywords":"vuetify code of conduct, vuetify coc, community conduct"}},"isInternal":false,"tokens":668,"sizeBytes":3561},{"name":"2026-06-nyven-infostealer.md","path":"packages/docs/src/pages/en/about/incidents/2026-06-nyven-infostealer.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/about/incidents/2026-06-nyven-infostealer.md","title":"Incidents Skill","category":"anthropic-skill","format":"markdown","content":"---\nmeta:\n nav: Discord takeover (June 2026)\n title: 'Incident report: Discord takeover (June 2026)'\n description: An infostealer on a maintainer's machine led to the takeover of the Vuetify Discord account. No Vuetify packages, releases, or user data were affected.\n keywords: vuetify security incident, infostealer, discord account takeover, extortion, incident report, nyven\nrelated:\n - /about/security-disclosure/\n - /introduction/enterprise-support/\n - /introduction/long-term-support/\n---\n\n# Incident report June 2026\n\nThis page documents the June 2026 security incident affecting Vuetify's Discord support account.\n\n\n\n::: info\n**TLDR:** On 2026-06-03, a Vuetify maintainer's personal machine was compromised by a commodity infostealer after a social-engineering lure. The attacker used credentials harvested from the browser to take over the Vuetify Discord support account, added 2FA to lock the owner out, and sent an extortion demand, which was refused. No Vuetify package, source, release, CI pipeline, or user data was affected. The Discord account was recovered on 2026-06-10, but the original community server was deleted and cannot be restored; the community now lives on a replacement server — see [Where to find us now](#where-to-find-us-now).\n:::\n\n## Summary { #summary }\n\nOn 2026-06-03, a Vuetify maintainer ran an unsigned installer that was a packaged infostealer. It harvested the credentials, cookies, and autofill data saved in the browser and exfiltrated them.\n\nThe attacker used those credentials to take over the Vuetify Discord support account. After taking control, the attacker added 2FA to lock the owner out and sent an extortion demand under threat to leak and sell the data. The demand was refused and no payment was made.\n\nThe compromise was limited to one personal machine and the accounts reachable from it. No part of Vuetify's software supply chain was affected.\n\n## What was and was not affected { #scope }\n\n| Asset | Status |\n| - | - |\n| **npm packages & releases** | **Not affected.** No package was modified, tampered with, or published. |\n| **Source & GitHub org** | **Not affected.** No repository, branch, tag, or release was altered. |\n| **CI/CD & infrastructure** | **Not affected.** |\n| **User data & databases** | **Not affected.** |\n| **Google Workspace** | **Not breached.** The `vuetifyjs.com` account was auto-suspended by Google as a precaution; the password was reset and control retained. |\n| **Discord support account** | **Recovered (2026-06-10).** The attacker added 2FA after taking it over; the account was later recovered, but the original community server was deleted and cannot be restored, per Discord support. |\n| **Browser-stored secrets** | **Exposed.** Saved credentials, cookies, and autofill on the affected machine are treated as compromised and have been rotated or removed pending an internal audit. |\n| **Developer tokens & keys** | **Treated as exposed.** Tokens on the host, including those with npm/GitHub access, have been rotated or removed and their sessions revoked, pending an internal audit. No evidence any were used against project infrastructure. |\n\nCredentials and tokens on the machine that could reach npm or GitHub have been rotated or removed pending an internal audit. Vuetify's release pipeline already enforces several layers of protection, including OIDC-based trusted publishing to npm and mandatory two-factor authentication, which limit what any single stolen credential can do. There is no sign any were used against Vuetify's packages, repositories, or releases, and all areas of the ecosystem are being actively monitored for suspicious activity. No action is required of users.\n\n## Timeline { #timeline }\n\nAll times are UTC on 2026-06-03 unless noted. Approximate times are marked with `~`.\n\n| Time (UTC) | Event | Detail |\n| - | - | - |\n| `~17:00` | Installer downloaded | The unsigned installer was downloaded from the throwaway site. |\n| `17:06` | Malware executed | The installer was run; the infostealer harvested browser-stored credentials and cookies and exfiltrated them. |\n| `17:08` | Host isolated | The machine was disconnected from the network. |\n| `17:16` | Extortion email received | The attacker emailed claiming to hold the stolen passwords, cookies, and autofill data. |\n| `17:25` | Refused to engage | The attacker's contact was declined. |\n| `~17:46–17:58` | Discord account takeover | The attacker used the stolen credentials to seize the Vuetify support account and added 2FA to lock the owner out. |\n| `18:06` | Email/GitHub secured | Email and GitHub passwords were changed and all sessions forced to re-authenticate. |\n| `18:10` | OAuth revoked | Third-party OAuth grants were revoked and active sessions cut. |\n| `18:25` | Payment demanded | The attacker demanded payment under threat to leak and sell the data; no payment was made. |\n| `2026-06-04` | Discord recovery blocked | Self-service recovery failed because of the attacker-added 2FA; a recovery case was opened with Discord. |\n| `2026-06-05` | Replacement server opened | A new Vuetify Discord server was opened as the verified home for the community. |\n| `2026-06-10` | Account recovered; server lost | The support account was recovered. Discord support confirmed the original server was deleted and cannot be restored. |\n\n## Root cause { #root-cause }\n\nThe maintainer was led to a throwaway website and ran an unsigned installer that was malware. Because credentials were stored in the browser, a single execution exposed the full set at once.\n\n## Discord outcome { #discord-recovery }\n\nThe Vuetify Discord support account has been recovered. The original community server, however, was deleted, and Discord support has confirmed there is no ability to restore it — the loss of the server, its channels, and its message history is permanent.\n\nA replacement server was opened while recovery was pending and is now the official home of the Vuetify community on Discord. The verified invite is in [Where to find us now](#where-to-find-us-now).\n\nThe exfiltration channel and the attacker's delivery infrastructure have been reported to the relevant platforms.\n\n## Where to find us now { #where-to-find-us-now }\n\n::: warning\nThe original server is permanently gone. We have started rebuilding and you can request an invite by going to [https://community.vuetifyjs.com](https://community.vuetifyjs.com).\n\nIf any other server, or any direct message, claims to be us and asks for money, credentials, or 2FA codes, it is not us.\n:::\n\nChanges to the official channels will be posted here and on [vuetifyjs.com](https://vuetifyjs.com), the [GitHub organization](https://github.com/vuetifyjs), and [@vuetifyjs on X](https://x.com/vuetifyjs).\n\n## For security researchers and organizations { #coordinated-disclosure }\n\nA complete evidence package has been preserved: forensic artifacts, the full set of indicators of compromise, and the malware sample. Security vendors, researchers, CERT/CSIRTs, and platform trust-and-safety teams that can action it can request it at [security@vuetifyjs.com](mailto:security@vuetifyjs.com?subject=INCIDENT) (subject: INCIDENT).\n\nA subset of indicators is published below; the complete set is available on request.\n\n### Indicators (public subset) { #indicators }\n\n- Malware family: a commodity \"Nyven\" infostealer (Electron dropper delivering an obfuscated Java credential grabber).\n- Delivery: an unsigned installer (`NyvenSetupV1.exe`) downloaded from a throwaway `*.pages.dev` site (`nyvanbeta.pages.dev`).\n- Behavior: harvests browser-stored credentials, cookies, and autofill data and exfiltrates them over a Discord channel.\n\nFull indicators (file hashes, exfiltration channel identifiers, and build metadata) are withheld here to avoid interfering with platform recovery, and are shared with vetted parties on request.\n\n## Contact { #contact }\n\nQuestions about this incident, or related information, can be sent to [security@vuetifyjs.com](mailto:security@vuetifyjs.com?subject=INCIDENT)\n\n---\n\n### Updates { #updates }\n\nDated entries are added here rather than editing the report above.\n\n| Date | Update |\n| - | - |\n| 2026-06-05 | Initial publication. |\n| 2026-06-10 | The Discord support account has been recovered. Discord support confirmed the original server was deleted and cannot be restored; the replacement server is now active at [https://community.vuetifyjs.com](https://community.vuetifyjs.com). |\n","frontmatter":{"meta":{"nav":"Discord takeover (June 2026)","title":"Incident report: Discord takeover (June 2026)","description":"An infostealer on a maintainer's machine led to the takeover of the Vuetify Discord account. No Vuetify packages, releases, or user data were affected.","keywords":"vuetify security incident, infostealer, discord account takeover, extortion, incident report, nyven"},"related":["/about/security-disclosure/","/introduction/enterprise-support/","/introduction/long-term-support/"]},"isInternal":false,"tokens":1932,"sizeBytes":8457},{"name":"licensing.md","path":"packages/docs/src/pages/en/about/licensing.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/about/licensing.md","title":"About Skill","category":"anthropic-skill","format":"markdown","content":"---\nmeta:\n nav: Licensing\n title: Licensing\n description: Vuetify is available under the MIT License — understand your freedoms to use, modify, and distribute it, and how community contributions are licensed.\n keywords: MIT License, open source, Vuetify license, free software\nrelated:\n - /introduction/why-vuetify/\n - /getting-started/contributing/\n - /introduction/enterprise-support/\n---\n\n# Licensing\n\nThis document provides comprehensive details about the licensing of the Vuetify framework.\n\n\n\n\n\n## Overview\n\nVuetify is an open-source project that is free to use. It is licensed under the [MIT License](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md), one of the most permissive and flexible open source licenses available.\n\n## What is the MIT License?\n\nThe MIT License is one of the most widely used licenses in the open-source community, known for its simplicity and permissiveness. This license grants users significant freedom in how they use, modify, and distribute software. Here are its key features and what they mean for Vuetify users:\n\n- **Freedom to Use**: The MIT License allows you to use Vuetify for any purpose - whether it's a private hobby project, a high-scale commercial application, or a public service. This level of freedom ensures that Vuetify is accessible to everyone, regardless of their project's nature or scale.\n- **Freedom to Modify**: Flexibility is at the core of Vuetify, and the MIT License extends this principle. You have the freedom to tweak, customize, and modify Vuetify to suit your project's unique requirements. This feature is particularly beneficial for developers looking to tailor their UI/UX without constraints.\n- **Freedom to Distribute**: The license not only allows you to use and modify Vuetify but also to distribute your version of it. Whether you're distributing your Vuetify-based project openly or commercially, the MIT License supports your endeavors. This aspect is crucial for fostering a culture of sharing and innovation in the developer community.\n- **No Warranty**: Please note that Vuetify is provided \"as is\", without any warranty of any kind. This is a standard clause in open-source licenses, emphasizing that users should test and evaluate the software in their specific contexts. While there's no formal warranty, the Vuetify team is committed to delivering a high-quality, robust framework, continuously working to improve its reliability and functionality.\n\nThe MIT License's simplicity and breadth make it an ideal choice for Vuetify, aligning with our commitment to open-source values and community-driven development.\n\n## Why MIT License for Vuetify?\n\nChoosing the MIT License for Vuetify was a deliberate decision to align with our core values of openness, simplicity, and community collaboration. Here’s why this license is the perfect fit for Vuetify:\n\n- **Simplicity and Permissiveness**: The MIT License is renowned for its simplicity and clarity. It doesn't impose complex restrictions, making it straightforward for developers to use Vuetify in various projects. Whether you're building a small personal project or a large-scale commercial application, the MIT License keeps things simple and unrestricted.\n- **Broad Compatibility**: One of Vuetify's strengths is its compatibility with a wide range of other tools and libraries. The MIT License is known for its broad compatibility with other open-source licenses. This compatibility makes it easier for developers to integrate Vuetify with other software, fostering a more vibrant and versatile ecosystem.\n- **Encourages Open Source Contribution**: Vuetify thrives on community contributions. The permissive nature of the MIT License encourages developers from around the world to contribute to Vuetify, enhancing its features and functionality. This collaborative spirit has been pivotal in shaping Vuetify into the robust and versatile framework it is today.\n\nBy adopting the MIT License, Vuetify remains committed to promoting innovation, collaboration, and freedom in software development. We believe this approach not only benefits Vuetify but also the broader open-source community.\n\n## Using Vuetify in Your Projects\n\nYou are free to use Vuetify in your projects, be it personal, commercial, or for educational purposes. The flexibility of the MIT License allows for a wide range of applications. When redistributing Vuetify or derivative works, the only requirement is to include the original copyright and license notice in any copy of the software/source code.\n\nTo get inspired or see what's possible with Vuetify, check out [Awesome Vuetify](https://github.com/vuetifyjs/awesome-vuetify), a curated list of awesome Vuetify resources, libraries, and tools. Additionally, explore the [Made With Vuetify](/resources/made-with-vuetify/) page to see a showcase of applications and projects built using Vuetify. These resources can provide you with ideas and examples of how Vuetify can enhance your projects.\n\n## Contributions to Vuetify\n\nContributions to Vuetify are also subject to the MIT License. By contributing to the Vuetify project, you agree that your contributions will be licensed under the MIT License. See our [Contributing](/getting-started/contributing/) page for more details.\n\n## Questions and Comments\n\nIf you have any questions or comments about our licensing policy, or if you need clarification on legal aspects of using Vuetify in your projects, please [contact us](mailto:hello@vuetifyjs.com).\n\n## Legal Disclaimer\n\nThe information provided on this page is for general informational purposes only and is not intended as legal advice. For specific legal questions regarding the use of Vuetify, please consult with a qualified attorney.\n","frontmatter":{"meta":{"nav":"Licensing","title":"Licensing","description":"Vuetify is available under the MIT License — understand your freedoms to use, modify, and distribute it, and how community contributions are licensed.","keywords":"MIT License, open source, Vuetify license, free software"},"related":["/introduction/why-vuetify/","/getting-started/contributing/","/introduction/enterprise-support/"]},"isInternal":false,"tokens":1168,"sizeBytes":5760},{"name":"meet-the-team.md","path":"packages/docs/src/pages/en/about/meet-the-team.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/about/meet-the-team.md","title":"About Skill","category":"anthropic-skill","format":"markdown","content":"---\nmeta:\n title: Meet the team\n description: Meet the team responsible for building Vuetify. These are the core individuals who drive the vision of the framework.\n keywords: vuetify dev team, vuetify core team\nrelated:\n - /introduction/enterprise-support/\n - /introduction/long-term-support/\n - /introduction/roadmap/\n---\n\n# Meet the team\n\nVuetify is _not_ a one person show. We have a very active and engaged team that is **constantly striving** to bring developers a better experience. Keep in mind the below is not an exhaustive list of all the individuals that help make Vuetify great.\n\n\n\n\n\n## Company\n\nVuetify (the framework) is [MIT Licensed](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md) and [Open Source](https://opensource.com/resources/what-open-source). You can support the ongoing development of Vuetify by sponsoring the project on [GitHub](https://github.com/sponsors/johnleider).\n\n\n\n## Core Team\n\nThe core development team are Open Source developers that help guide the direction of Vuetify and its ecosystem.\n\n\n\n\n\n## Legends\n\nLegends are inactive members of the core team. They have contributed a significant amount of time and effort to the project and are recognized for their contributions.\n\n\n","frontmatter":{"meta":{"title":"Meet the team","description":"Meet the team responsible for building Vuetify. These are the core individuals who drive the vision of the framework.","keywords":"vuetify dev team, vuetify core team"},"related":["/introduction/enterprise-support/","/introduction/long-term-support/","/introduction/roadmap/"]},"isInternal":false,"tokens":329,"sizeBytes":1420},{"name":"security-disclosure.md","path":"packages/docs/src/pages/en/about/security-disclosure.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/about/security-disclosure.md","title":"About Skill","category":"anthropic-skill","format":"markdown","content":"---\nmeta:\n nav: Security disclosure\n title: Security disclosure procedures\n description: This document outlines security procedures and general policies for the Vuetify project.\n keywords: security, security vulnerability, disclosure policy, security disclosure\nrelated:\n - /introduction/enterprise-support/\n - /getting-started/contributing/\n - /introduction/long-term-support/\n---\n\n# Security disclosure procedures\n\nThis document outlines security procedures and general policies for the Vuetify project.\n\n\n\n\n\n## Incidents\n\nIn the interest of transparency, confirmed security incidents that affect Vuetify or its community are logged here, each linking to a full public report.\n\n| Date | Incident | Severity | Status | Report |\n| - | - | - | - | - |\n| 2026-06-03 | Maintainer endpoint compromise → Discord account takeover & extortion | High | Contained — Discord recovery ongoing | [Read the report](/about/incidents/2026-06-nyven-infostealer/) |\n\n::: warning\nThe Vuetify Discord support account was taken over in the June 2026 incident and has not yet been recovered. Until it is restored, the only verified home for our community on Discord is **[vtfy.link/discord-fallback](https://vtfy.link/discord-fallback)**. Anyone using the old server — or a DM — to ask you for money, credentials, or 2FA codes is not us.\n:::\n\n## Reporting a Bug\n\nThe Vuetify team and community take all security bugs in Vuetify seriously. We appreciate your efforts and responsible disclosure and will make every effort to acknowledge your contributions.\n\nTo report a security issue, email [security@vuetifyjs.com](mailto:security@vuetifyjs.com?subject=SECURITY) and include the word **\\\"SECURITY\\\"** in the subject line.\n\nThe Vuetify team will send a response indicating the next steps in handling your report. After the initial reply to your report, the security team will keep you informed of the progress towards a fix and full announcement, and may ask for additional information or guidance.\n\nReport security bugs in third-party modules to the person or team maintaining the module.\n\n## Disclosure Policy\n\nWhen the security team receives a security bug report, they will assign it to a primary handler. This person will coordinate the fix and release process, involving the following steps:\n\n- Confirm the problem and determine the affected versions.\n- Audit code to find any potential similar problems.\n- Prepare fixes for all releases still under maintenance.These fixes will be released as fast as possible to npm.\n\n## Comments on this Policy\n\nIf you have suggestions on how this process could be improved please submit a pull request using the [issue creator](https://issues.vuetifyjs.com).\n","frontmatter":{"meta":{"nav":"Security disclosure","title":"Security disclosure procedures","description":"This document outlines security procedures and general policies for the Vuetify project.","keywords":"security, security vulnerability, disclosure policy, security disclosure"},"related":["/introduction/enterprise-support/","/getting-started/contributing/","/introduction/long-term-support/"]},"isInternal":false,"tokens":586,"sizeBytes":2757},{"name":"[name].md","path":"packages/docs/src/pages/en/api/[name].md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/api/[name].md","title":"Api Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blank\nmeta:\n title: API\n description: API documentation\n keywords: api, vuetify\n---\n\n\n\n\n\n# {{ name }} API\n\n\n\n\n\n\n\n\n\n\n","frontmatter":{"layout":"blank","meta":{"title":"API","description":"API documentation","keywords":"api, vuetify"}},"isInternal":false,"tokens":87,"sizeBytes":312},{"name":"use-hotkey.md","path":"packages/docs/src/pages/en/api/use-hotkey.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/api/use-hotkey.md","title":"Api Skill","category":"anthropic-skill","format":"markdown","content":"---\nmeta:\n title: useHotkey API\n description: API documentation for the useHotkey composable\n keywords: useHotkey, hotkey, keyboard shortcuts, composable, api\n---\n\n\n\n# useHotkey API\n\nHandle keyboard shortcuts within your application using the **useHotkey** composable.\n\n\n\n\n\n\n\n\n\n## Function Signature\n\n```typescript\nfunction useHotkey(\n keys: MaybeRef,\n callback: (e: KeyboardEvent) => void,\n options?: HotkeyOptions\n): () => void\n```\n\n## Parameters\n\n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n## Options\n\n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n## Return Value\n\n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n","frontmatter":{"meta":{"title":"useHotkey API","description":"API documentation for the useHotkey composable","keywords":"useHotkey, hotkey, keyboard shortcuts, composable, api"}},"isInternal":false,"tokens":1497,"sizeBytes":5885},{"name":"announcing-vuetify-3.8.md","path":"packages/docs/src/pages/en/blog/announcing-vuetify-3.8.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/announcing-vuetify-3.8.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: Announcing Vuetify v3.8\n description: Vuetify v3.8 is here! Discover the latest features, improvements, and bug fixes in this minor release, including new components and form input enhancements.\n keywords: Vuetify v3.8, VNumberInput, VSnackbarQueue, VDataTable, VTooltip, VDateInput, useRules, VIconBtn\n---\n\n# Announcing Vuetify v3.8\n\n---\n\n🖊️ John Leider • 📅 April 8th, 2025\n\n\n\n---\n\n## Introduction\n\nToday we are excited to announce the release of Vuetify v3.8 \"Andromeda\"!\n\nThis minor release contains no breaking changes and is packed with new features, improvements, and bug fixes. This blog post will highlight some of the most notable changes—for a full list of changes and new features, please see [the full changelog](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.0).\n\n---\n\n- [Form input improvements](#form-input-improvements)\n - [Multi-word search highlight](#multi-word-search-highlight)\n - [Input icon states](#input-icon-states)\n- [New components](#new-components)\n - [VNumberInput](#vnumberinput)\n - [VSnackbarQueue](#vsnackbarqueue)\n- [Other updates](#other-updates)\n - [VDataTable selection](#vdatatable-selection)\n - [VTooltip interactive](#vtooltip-interactive)\n- [Labs](#labs)\n - [VDateInput](#vdateinput)\n - [useRules composable](#userules-composable)\n - [VIconBtn](#viconbtn)\n\n## Form input improvements\n\nIn v3.8, we have made several improvements to form controls, including new styling options and additional components. These changes are designed to give you more control over the look and feel of inputs.\n\n### Multi-word search highlight\n\nSearch terms that match multiple words in the item text will now be highlighted in VAutocomplete and VCombobox. This enhancement makes it easier for users to see how their search terms match available options, improving the overall search experience.\n\n**Before:**\n![Image of Autocomplete with single word highlighting](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/autocomplete-before.png \"Single-word highlighting\"){ height=300 }\n\n**After:**\n![Image of Autocomplete with multi word highlighting](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/autocomplete-after.png \"Multi-word highlighting\"){ height=300 }\n\n**Details:** [PR#16462](https://github.com/vuetifyjs/vuetify/pull/16462)\n\n### Input icon states\n\nIn earlier versions of Vuetify, focused inputs would add color to their icons. This is now possible using the new **icon-color** and **glow** props. The former allows you to set the default color of the icon, when combined with the latter, the icon will change color when the input is focused.\n\n![Gif of input icon states](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/icon-color-glow-prop.gif \"Input icon states\"){ height=300 }\n\nThis is perfect for drawing attention to active inputs or creating dynamic, responsive forms.\n\n**Details:** [PR#21076](https://github.com/vuetifyjs/vuetify/pull/21076)\n\n## New components\n\nBoth VNumberInput and VSnackbarQueue have been promoted from labs to the core framework. They offer a clean experience and are easy to use.\n\n### VNumberInput\n\nThe [v-number-input](https://vuetifyjs.com/components/number-inputs/) component has moved from Labs to the Core framework in v3.8. It's intended to be a replacement for the standard `` and supports all of the standard Vuetify input variant props.\n\n![Gif of the NumberInput component](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/number-input.gif \"VNumberInput component\"){ height=300 }\n\n**Details:**\n\n- [Documentation](https://vuetifyjs.com/components/number-inputs/)\n- [PR#18162](https://github.com/vuetifyjs/vuetify/pull/18162)\n\n### VSnackbarQueue\n\nThe [v-snackbar-queue](https://vuetifyjs.com/components/snackbar-queue/) component has moved from Labs to the Core framework in v3.8. This component makes it easy to create a queue of snackbars that can be displayed one after the other.\n\nSetting up a queue of snackbars is as simple as creating a store that holds the queue and passing it to the VSnackbarQueue component.\n\n```ts { resource=\"src/stores/queue.ts\" }\nimport { defineStore } from 'pinia'\nimport { Ref } from 'vue'\n\nexport type Snackbar = Record\n\nexport interface SnackbarQueueState {\n queue: Ref\n show: (text: Snackbar | string) => void\n}\n\nexport const useQueueStore = defineStore('Queue', () => {\n const queue = ref([])\n\n function show (text: Snackbar) {\n const record = typeof text === 'string' ? { text } : text\n\n queue.value.push(record)\n }\n\n return {\n queue,\n show,\n } as SnackbarQueueState\n})\n```\n\n```html { resource=\"src/App/AppSnackbarQueue.vue\"}\n\n\n\n```\n\nQueue items support all [v-snackbar](https://vuetifyjs.com/components/snackbars/) props, including **timeout** and **color**.\n\n**Details:**\n\n- [Documentation](https://vuetifyjs.com/components/snackbar-queue/)\n- [PR#19629](https://github.com/vuetifyjs/vuetify/pull/19629)\n\n## Other updates\n\nSome other small updates in v3.8 involve quality of life improvements to existing components such as VDataTable and VTooltip.\n\n### VDataTable selection\n\nIn v3.8, when using the **show-select** property and VDataTable, you can hold the shift key when making a selection to select a range of items.\n\n![Gif of VDataTable selection](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/data-table-select.gif \"v-data-table selection\"){ height=500 }\n\n**Details:** [Commit c9a2a22](https://github.com/vuetifyjs/vuetify/commit/c9a2a2269b0492cc3cd0b757888be9ddd96316ba)\n\n### VTooltip interactive\n\nv3.8 introduces the **interactive** property to the [v-tooltip](https://vuetifyjs.com/components/tooltips/) component. When enabled, this allows users to interact with and select text within the tooltip.\n\n![Gif of v-tooltip interactive](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/tooltip-interactive.gif \"v-tooltip interactive\"){ height=300 }\n\n**Details:** [Commit 1599512](https://github.com/vuetifyjs/vuetify/commit/159951278e9a27309d4d1eb633b426c770989584)\n\n## Labs\n\nThe latest version of Vuetify also includes a number of updates to existing Labs components, including the new VIconBtn. In addition, we're also bringing a new composable for testing named **useRules**.\n\n### VDateInput\n\nThe [v-date-input](https://vuetifyjs.com/components/date-inputs) component received multiple quality of life improvements, including:\n\n- Now has actions hidden by default, reducing screen clutter\n- Improved inputmode usage on mobile\n- Normalized control button sizes giving the component a more consistent look\n\n![Image of v-date-input](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/date-input-enhancements.png \"v-date-input component\"){ height=300 }\n\nThis component is getting close to being ready for production, keep an eye out for it in the next release!\n\n### useRules composable\n\nThe useRules composable is a new way to propagate shared rules through your application with full localization support. After following the [Installation Guide](https://vuetifyjs.com/features/rules/#installation), you can use the composable in your components.\n\n```html\n\n\n\n```\n\nRules also support localization, allowing text strings to change based upon the injected locale. This applies globally, as well as inline:\n\n```html\n\n```\n\nThis simplifies managing validation rules across your app, ensuring consistency and easing localization.\n\n### VIconBtn\n\n[v-icon-btn](https://vuetifyjs.com/components/icon-buttons/) is a new component in testing that's intended to bridge the gap between VBtn and VIcon. Its size is meant to be more intentional and is ideal for compact UI patterns like toolbars, icon-only lists, or action grids.\n\n![Gif of v-icon-btn](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/icon-btn.gif \"v-icon-btn component\"){ height=300 }\n\nWe're also experimenting with a new way of mapping sizes, moving the configuration from SCSS to props.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nimport { createVuetify } from 'vuetify'\n\nexport default createVuetify({\n defaults: {\n VIconBtn: {\n sizes: [\n ['x-small', 16],\n ['small', 20],\n ['medium', 24],\n ['large', 28],\n ['x-large', 32],\n ],\n iconSizes: [\n ['x-small', 10],\n ['small', 12],\n ['medium', 14],\n ['large', 16],\n ['x-large', 18],\n ],\n size: 'small',\n }\n }\n})\n```\n\nMoving to a system like this also opens up the ability to configure your own sizing names:\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\n{\n VIconBtn: {\n sizes: [\n ['xs', 16],\n ['sm', 20],\n ['md', 24],\n ['lg', 28],\n ['xl', 32],\n ['2xl', 36],\n ],\n iconSizes: [\n ['xs', 10],\n ['sm', 12],\n ['md', 14],\n ['lg', 16],\n ['xl', 18],\n ['2xl', 20],\n ],\n size: 'xl',\n }\n}\n```\n\nThis is still in testing so please give us your feedback by dropping a line on our [Discord](https://community.vuetifyjs.com/)\n\n**Details:** [PR#21114](https://github.com/vuetifyjs/vuetify/pull/21114)\n\n---\n\nFor a complete list of all the changes and features in v3.8, please see the [full changelog](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.0).\n","frontmatter":{"layout":"blog","meta":{"title":"Announcing Vuetify v3.8","description":"Vuetify v3.8 is here! Discover the latest features, improvements, and bug fixes in this minor release, including new components and form input enhancements.","keywords":"Vuetify v3.8, VNumberInput, VSnackbarQueue, VDataTable, VTooltip, VDateInput, useRules, VIconBtn"}},"isInternal":false,"tokens":2654,"sizeBytes":10316},{"name":"announcing-vuetify-4.3.md","path":"packages/docs/src/pages/en/blog/announcing-vuetify-4.3.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/announcing-vuetify-4.3.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: Announcing Vuetify v4.3\n description: Vuetify v4.3 \"Paladin\" brings data table and form controls, new labs components, right-click menus, opt-in MD Expressive styles and a steadier SSR layout.\n keywords: Vuetify v4.3, Vuetify Paladin, VDataTable, VAutocomplete, VMenu, context-menu, Material Design Expressive, VBtn, VSlider, VTabs, VSlideGroup, SSR, v-touch-hold, Vuetify0\n---\n\n# Announcing Vuetify v4.3\n\n---\n\n🖊️ John Leider • 📅 October 20th, 2026\n\n\n\n![Hero image for Vuetify v4.3](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/hero.png \"Vuetify v4.3 Paladin hero image\"){ height=112 }\n\n---\n\n## Introduction\n\nVuetify v4.3 is a minor release with no breaking changes.\n\nIt adds more control over filtering and selection in data tables and forms, a batch of new labs components, right-click menus for VMenu, and opt-in Material Design Expressive styles for 7 components. It also includes new options for carousels and slide groups, and a more stable layout for SSR apps.\n\nThis post covers the highlights. For everything else, see [the full changelog](https://github.com/vuetifyjs/vuetify/releases/tag/v4.3.0).\n\n---\n\n- [Data tables & forms](#data-tables-forms)\n- [Labs preview](#labs-preview)\n- [VMenu context-menu](#vmenu-context-menu)\n- [7 components aligned with Material Design Expressive](#7-components-aligned-with-material-design-expressive)\n - [Button sizes](#button-sizes)\n - [Progress](#progress)\n - [Sliders](#sliders)\n - [Tabs](#tabs)\n- [Carousel alternatives](#carousel-alternatives)\n - [VSlideGroup padding and gap](#vslidegroup-padding-and-gap)\n - [VCarousel pause-on-hover](#vcarousel-pause-on-hover)\n - [Wheel navigation](#wheel-navigation)\n - [VInfiniteCarousel](#vinfinitecarousel)\n- [Stable layout & SSR](#stable-layout-ssr)\n- [Under the hood](#under-the-hood)\n- [v-touch-hold](#v-touch-hold)\n- [Promoted from labs](#promoted-from-labs)\n\n## Data tables & forms\n\nMore control over how lists filter and how rows select.\n\n### Filtered order\n\n`VAutocomplete` and `VCombobox` have a **filtered-order** prop for controlling the order of items after filtering.\n\n**Details:** [PR#23282](https://github.com/vuetifyjs/vuetify/pull/23282)\n\n### Filtered select strategy\n\n`VDataTable` adds a **filtered** select strategy, so select all applies to the rows that match the current filter.\n\n**Details:** [041bb72](https://github.com/vuetifyjs/vuetify/commit/041bb7269d228e97f9dda210362d149a4d0ff709), closes [#22867](https://github.com/vuetifyjs/vuetify/issues/22867)\n\n### Row state in row-props\n\n`isSelected` and `isExpanded` are now passed to **row-props**, and selected and expanded rows are marked with data attributes, so you can style them without extra bookkeeping.\n\n**Details:** [PR#23238](https://github.com/vuetifyjs/vuetify/pull/23238), [1b4a6b4](https://github.com/vuetifyjs/vuetify/commit/1b4a6b430340a5dc32a441b3ba281ae1d874a711), closes [#17670](https://github.com/vuetifyjs/vuetify/issues/17670)\n\n### Descriptions on selection controls\n\nCheckboxes, radios and switches can show a description through the new **description** prop and slot on `VSelectionControl`.\n\n**Details:** [3e734be](https://github.com/vuetifyjs/vuetify/commit/3e734be3d6e9141237f1b57dd32a1010f5a4f7b8), closes [#21773](https://github.com/vuetifyjs/vuetify/issues/21773)\n\n![Image of v-checkbox and v-switch with descriptions](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/selection-control-descriptions.png \"Selection control descriptions\"){ height=150 }\n\n### Smaller form updates\n\n- `VDateInput` shows a localized format hint ([PR#23173](https://github.com/vuetifyjs/vuetify/pull/23173))\n- `VTextarea` keeps native undo history when **auto-grow** is on ([PR#23279](https://github.com/vuetifyjs/vuetify/pull/23279))\n\n## Labs preview\n\nThese are new in labs. You can try them today, but the API may still change before they move to core, so pin your version if you use them in production.\n\n![Image of v-split-btn](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/labs-split-btn.png \"v-split-btn component\"){ height=250 }\n\n![Image of v-time-input](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/labs-time-input.png \"v-time-input component\"){ height=120 }\n\n![Image of v-loading-indicator](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/labs-loading-indicator.png \"v-loading-indicator component\"){ height=120 }\n\n- `VAudio` ([Docs](/components/audio-players/), [PR#23227](https://github.com/vuetifyjs/vuetify/pull/23227))\n- `VSplitBtn` ([Docs](/components/split-buttons/), [PR#23267](https://github.com/vuetifyjs/vuetify/pull/23267))\n- `VTimeInput` ([Docs](/components/time-inputs/), [PR#23141](https://github.com/vuetifyjs/vuetify/pull/23141))\n- `VLoadingIndicator` ([Docs](/components/loading-indicators/), [c5ce339](https://github.com/vuetifyjs/vuetify/commit/c5ce3396e1c3e51c6925aab8f3a63365f7acc42a))\n\n`VVideo` also picked up an **actions** prop and an overhauled progress bar and volume control ([PR#23241](https://github.com/vuetifyjs/vuetify/pull/23241)).\n\nTry them out and let us know what you think on [Discord](https://community.vuetifyjs.com/).\n\n## VMenu context-menu\n\n[v-menu](https://vuetifyjs.com/components/menus/) can now open on right click with the new **context-menu** prop.\n\n![Image of v-menu opened with right click](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/menu-contextmenu.png \"v-menu context menu\"){ height=300 }\n\n```html\n\n```\n\n**Details:** [PR#23196](https://github.com/vuetifyjs/vuetify/pull/23196), closes [#9235](https://github.com/vuetifyjs/vuetify/issues/9235)\n\n## 7 components aligned with Material Design Expressive\n\n`VBtn`, `VIconBtn`, `VBtnGroup`, `VProgressLinear`, `VProgressCircular`, `VSlider` and `VTabs` have new options that follow Material Design Expressive. They are regular props you can use with any blueprint. The `md3` blueprint now turns on the new progress look (split variant, rounded bar, stop indicator) and the primary tab slider by default.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nimport { createVuetify } from 'vuetify'\nimport { md3 } from 'vuetify/blueprints'\n\nexport default createVuetify({\n blueprint: md3,\n})\n```\n\n::: info\nThe `md3` blueprint will make `VSlider` use the pill variant by default in an upcoming patch.\n:::\n\n### Button sizes\n\n`VBtn`, `VIconBtn` and `VBtnGroup` support the Expressive sizes, plus the radius animation on press. There's a new guide that walks through it: [MD3 button sizes](https://vuetifyjs.com/features/md3-button-sizes/).\n\n![Image of MD3 button sizes](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/md3-buttons.png \"MD3 button sizes\")\n\n**Details:** [PR#23253](https://github.com/vuetifyjs/vuetify/pull/23253)\n\n### Progress\n\n[v-progress-linear](https://vuetifyjs.com/components/progress-linear/) and [v-progress-circular](https://vuetifyjs.com/components/progress-circular/) add a split variant, a stop indicator, a rounded bar and a wavy track.\n\n![Image of MD3 progress variants](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/md3-progress.png \"MD3 progress variants\")\n\n**Details:** [PR#23276](https://github.com/vuetifyjs/vuetify/pull/23276)\n\n### Sliders\n\n[v-slider](https://vuetifyjs.com/components/sliders/) has a new **pill** variant and a **centered** prop for values that start from the middle.\n\n```html\n\n\n\n```\n\n![Image of v-slider pill variant](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/md3-sliders.png \"v-slider pill variant\")\n\n**Details:** [PR#22699](https://github.com/vuetifyjs/vuetify/pull/22699), [PR#23277](https://github.com/vuetifyjs/vuetify/pull/23277)\n\n### Tabs\n\n`VTab` gets a **slider-variant** prop for the primary tab indicator style.\n\n\n\n**Details:** [PR#23181](https://github.com/vuetifyjs/vuetify/pull/23181)\n\n## Carousel alternatives\n\nSpacing props for `VSlideGroup`, pausing and wheel navigation for `VCarousel`, and a new looping carousel in labs.\n\n### VSlideGroup padding and gap\n\n[v-slide-group](https://vuetifyjs.com/components/slide-groups/) has **padding** and **gap** props, so you can space items without custom CSS. VTabs and VChipGroup are built on VSlideGroup, so they get these too.\n\n**Example:** [Image slider](https://vuetifyjs.com/components/slide-groups/#image-slider)\n\n**Details:** [PR#23184](https://github.com/vuetifyjs/vuetify/pull/23184), closes [#11972](https://github.com/vuetifyjs/vuetify/issues/11972)\n\n### VCarousel pause-on-hover\n\nThe new **pause-on-hover** prop pauses a cycling carousel while the pointer is over it. Keyboard focus inside the carousel now pauses it too, with or without the prop.\n\n```html\n\n```\n\n**Details:** [e835b88](https://github.com/vuetifyjs/vuetify/commit/e835b885a181052f830f75e80cb716764e634da6), closes [#10544](https://github.com/vuetifyjs/vuetify/issues/10544)\n\n### Wheel navigation\n\n`VWindow` and `VCarousel` support mouse wheel navigation, and the wrap animation is now correct when using arrows or touch.\n\n**Details:** [PR#22906](https://github.com/vuetifyjs/vuetify/pull/22906)\n\n### VInfiniteCarousel\n\n`VInfiniteCarousel` is new in labs, for content that loops continuously. Unlike most marquee implementations, it is fully navigable with arrow keys: focus moves between focusable items and scrolls them into view, otherwise the arrows shift the content. The motion runs on the Web Animations API rather than pure CSS, and keeps its position when paused, reversed or scrubbed with drag and wheel.\n\n**Docs:** [v-infinite-carousel](https://vuetifyjs.com/components/infinite-carousels/)\n\n**Details:** [PR#23116](https://github.com/vuetifyjs/vuetify/pull/23116)\n\n## Stable layout & SSR\n\nLayout item sizes and offsets now render before mount, so SSR apps keep a stable layout on load instead of shifting once the app hydrates.\n\n**Details:** [PR#23250](https://github.com/vuetifyjs/vuetify/pull/23250)\n\nA few other layout updates:\n\n- `VRow` has responsive gap props ([PR#23246](https://github.com/vuetifyjs/vuetify/pull/23246))\n- New `vuetify/styles/layers` entry point with only the default `@layer` order declaration ([ed2dbea](https://github.com/vuetifyjs/vuetify/commit/ed2dbeaa96c944052e85e7bf9678f8b8da9956a3))\n- `VNavigationDrawer` has a **modal** prop and `v-model:expanded` ([PR#23182](https://github.com/vuetifyjs/vuetify/pull/23182))\n\n## Under the hood\n\nWe've started porting core framework features over to use Vuetify0 under the hood. The first pieces are the display, locale, RTL and observer composables ([PR#23210](https://github.com/vuetifyjs/vuetify/pull/23210), [PR#23220](https://github.com/vuetifyjs/vuetify/pull/23220)). You shouldn't notice anything in your app. More of the framework will follow in upcoming releases.\n\n## v-touch-hold\n\n`v-touch-hold` is a new directive for long-press interactions on mobile and other touch devices.\n\n**Details:** [PR#23269](https://github.com/vuetifyjs/vuetify/pull/23269), closes [#5322](https://github.com/vuetifyjs/vuetify/issues/5322)\n\n## Promoted from labs\n\n[v-avatar-group](https://vuetifyjs.com/components/avatar-groups/), [v-highlight](https://vuetifyjs.com/components/highlights/) and [v-progress](https://vuetifyjs.com/components/progress/) graduated from labs to core, so update any `vuetify/labs` imports.\n\n---\n\n::: warning\n\n**Vuetify needs your support.** Open Collective is how we fund the team that builds releases like this one. If your team relies on Vuetify, point your organization at [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider).\n\n:::\n\nFor a complete list of all the changes and features in v4.3, please see the [full changelog](https://github.com/vuetifyjs/vuetify/releases/tag/v4.3.0).\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://community.vuetifyjs.com), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements.*\n","frontmatter":{"layout":"blog","meta":{"title":"Announcing Vuetify v4.3","description":"Vuetify v4.3 \"Paladin\" brings data table and form controls, new labs components, right-click menus, opt-in MD Expressive styles and a steadier SSR layout.","keywords":"Vuetify v4.3, Vuetify Paladin, VDataTable, VAutocomplete, VMenu, context-menu, Material Design Expressive, VBtn, VSlider, VTabs, VSlideGroup, SSR, v-touch-hold, Vuetify0"}},"isInternal":false,"tokens":3523,"sizeBytes":12549},{"name":"announcing-vuetify0-alpha.md","path":"packages/docs/src/pages/en/blog/announcing-vuetify0-alpha.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/announcing-vuetify0-alpha.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: Announcing the Vuetify0 Alpha\n description: The Vuetify0 alpha is here — a headless Vue framework with 46 components, 63 composables, first-class AI integration, 100% TypeScript, and zero styles.\n keywords: Vuetify0 alpha, headless Vue, Vue component library, AI-native framework, TypeScript components, Vuetify MCP\n---\n\n\n\n# Announcing the Vuetify0 Alpha\n\n**The foundation of the next generation of Vuetify is here.** Vuetify0 is a headless Vue framework — 100% TypeScript, zero styles, built from the ground up to power custom UI libraries, design systems, and the Vuetify ecosystem itself. Today we're releasing the first public alpha.\n\n🖊️ John Leider • 📅 April 7th, 2026\n\n\n\n---\n\n\n\n## What is Vuetify0?\n\nVuetify0 is not a component library — it's a **meta-framework for building component libraries**. Every component is a standard Vue SFC using the latest macros (`defineModel`, `defineSlots`, generics). Every composable is a pure TypeScript function. Nothing ships with styles, opinions about your CSS framework, or assumptions about your design language.\n\nThe primitives handle the hard parts — accessibility, keyboard navigation, focus management, state coordination, form validation — so you can focus on what makes your library yours: the design.\n\n```html { resource=\"src/components/MyButton.vue\" }\n\n\n\n\n\n```\n\nYou bring the styles. Vuetify0 brings everything else.\n\n---\n\n## What's in the Alpha\n\nThe alpha ships with **46 components** and **63 composables** across three maturity levels:\n\n| Maturity | Components | Composables | What it means |\n|----------|-----------|-------------|---------------|\n| **Stable** | 0 | 6 | API locked, production-ready |\n| **Preview** | 34 | 54 | Implemented, API may change |\n| **Draft** | 13 | 3 | Planned or in early development |\n\n::: success\nSee the full breakdown on the [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix) — every component and composable with its current stability level.\n:::\n\n**Components** span six categories — every one headless, accessible, and keyboard-navigable out of the box:\n\n- **Forms** — [Input](https://0.vuetifyjs.com/components/forms/input), [Select](https://0.vuetifyjs.com/components/forms/select), [Combobox](https://0.vuetifyjs.com/components/forms/combobox), [Checkbox](https://0.vuetifyjs.com/components/forms/checkbox), [Radio](https://0.vuetifyjs.com/components/forms/radio), [Switch](https://0.vuetifyjs.com/components/forms/switch), [Slider](https://0.vuetifyjs.com/components/forms/slider), [Rating](https://0.vuetifyjs.com/components/forms/rating)\n- **Disclosure** — [Dialog](https://0.vuetifyjs.com/components/disclosure/dialog), [Popover](https://0.vuetifyjs.com/components/disclosure/popover), [Tabs](https://0.vuetifyjs.com/components/disclosure/tabs), [Collapsible](https://0.vuetifyjs.com/components/disclosure/collapsible), [ExpansionPanel](https://0.vuetifyjs.com/components/disclosure/expansion-panel), [Treeview](https://0.vuetifyjs.com/components/disclosure/treeview)\n- **Navigation** — [Breadcrumbs](https://0.vuetifyjs.com/components/semantic/breadcrumbs), [Pagination](https://0.vuetifyjs.com/components/semantic/pagination)\n- **Layout** — [Splitter](https://0.vuetifyjs.com/components/semantic/splitter)\n- **Feedback** — [Snackbar](https://0.vuetifyjs.com/components/semantic/snackbar)\n- **Primitives** — [Atom](https://0.vuetifyjs.com/components/primitives/atom), [Portal](https://0.vuetifyjs.com/components/primitives/portal), [Presence](https://0.vuetifyjs.com/components/primitives/presence)\n\n[Browse all components](https://0.vuetifyjs.com/components).\n\n**Composables** go even deeper:\n\n- **Selection** — [single](https://0.vuetifyjs.com/composables/selection/create-single), [multi](https://0.vuetifyjs.com/composables/selection/create-group), [grouped](https://0.vuetifyjs.com/composables/selection/create-selection), [stepped](https://0.vuetifyjs.com/composables/selection/create-step), [nested](https://0.vuetifyjs.com/composables/selection/create-nested)\n- **Data** — [filtering](https://0.vuetifyjs.com/composables/data/create-filter), [pagination](https://0.vuetifyjs.com/composables/data/create-pagination), [virtual scrolling](https://0.vuetifyjs.com/composables/data/create-virtual), [data tables](https://0.vuetifyjs.com/composables/data/create-data-table)\n- **Forms** — [validation](https://0.vuetifyjs.com/composables/forms/create-validation) with Standard Schema support, [form coordination](https://0.vuetifyjs.com/composables/forms/create-form), [rules engine](https://0.vuetifyjs.com/composables/plugins/use-rules)\n- **Plugins** — [theme](https://0.vuetifyjs.com/composables/plugins/use-theme), [locale](https://0.vuetifyjs.com/composables/plugins/use-locale), [breakpoints](https://0.vuetifyjs.com/composables/plugins/use-breakpoints), [features](https://0.vuetifyjs.com/composables/plugins/use-features), [permissions](https://0.vuetifyjs.com/composables/plugins/use-permissions), [logger](https://0.vuetifyjs.com/composables/plugins/use-logger), [storage](https://0.vuetifyjs.com/composables/plugins/use-storage), [notifications](https://0.vuetifyjs.com/composables/plugins/use-notifications)\n- **Browser** — [observers](https://0.vuetifyjs.com/composables/system/use-resize-observer), [event listeners](https://0.vuetifyjs.com/composables/system/use-event-listener), [hotkeys](https://0.vuetifyjs.com/composables/system/use-hotkey), [media queries](https://0.vuetifyjs.com/composables/system/use-media-query)\n\n---\n\n## Built for AI\n\n\n\nVuetify0 is the first Vue framework designed from day one to be consumed by AI agents.\n\nEvery documentation page includes **Ask AI** — ask a question about any component or composable and get an answer grounded in the actual source code and API reference. The docs ship with `llms.txt` and `llms-full.txt` files for direct LLM consumption, plus `SKILL.md` files that let AI agents discover and use Vuetify0 capabilities automatically.\n\nThe [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) connects your IDE to the full documentation and API surface. Use it with Claude, Cursor, Copilot, or any MCP-compatible tool to get context-aware assistance while you build.\n\n::: info\n**Try Vuetify0 with Claude.** Our [Vuetify MCP guide](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp#claude-code) walks you through connecting Vuetify MCP to your development environment.\n:::\n\n---\n\n## Progressive Enhancement\n\nVuetify0's plugin system follows a simple principle: **only take what you use**. Every plugin is optional and tree-shakeable. A minimal setup might use nothing at all — just import components and composables directly. As your needs grow, add plugins:\n\n```ts\nimport { createApp } from 'vue'\nimport {\n createBreakpointsPlugin,\n createThemePlugin,\n createLocalePlugin,\n createStoragePlugin,\n} from '@vuetify/v0'\n\nconst app = createApp(App)\n\n// Add only what you need\napp.use(createThemePlugin({ default: 'light', themes: { light, dark } }))\napp.use(createBreakpointsPlugin())\napp.use(createLocalePlugin({ default: 'en', messages: { en, es } }))\napp.use(createStoragePlugin())\n```\n\nAvailable plugins include `useTheme`, `useLocale`, `useBreakpoints`, `useFeatures`, `usePermissions`, `useLogger`, `useStorage`, `useNotifications`, `useRules`, `useRtl`, and `useStack`. Each one follows the same pattern: install the plugin to provide app-wide context, or use the `create*` factory for scoped instances in component subtrees. [Browse all composables](https://0.vuetifyjs.com/composables).\n\n---\n\n## Adapter-Based Architecture\n\nMost plugins accept **adapters** — swappable implementations that let you plug in the tools you already use. Vuetify0 ships with sensible defaults, but you're never locked in.\n\n```ts { resource=\"src/plugins/vuetify0.ts\" }\nimport { createLocalePlugin } from '@vuetify/v0'\nimport { VueI18nLocaleAdapter } from '@vuetify/v0/locale/adapters/vue-i18n'\nimport { createI18n } from 'vue-i18n'\n\nconst i18n = createI18n({ locale: 'en', messages: { en, es } })\n\napp.use(\n createLocalePlugin({\n adapter: new VueI18nLocaleAdapter({ i18n }),\n })\n)\n```\n\nThe adapter pattern extends across the framework:\n\n| Plugin | Default | Third-party adapters |\n|--------|---------|---------------------|\n| Logger | Console | Pino, Consola |\n| Locale | Built-in | VueI18n |\n| Date | Built-in | Custom (implement DateAdapter) |\n| Features | Built-in | LaunchDarkly, Flagsmith, PostHog |\n| Notifications | Built-in | Knock, Novu |\n| Validation | Built-in | Standard Schema (Zod, Valibot, ArkType) |\n| Storage | localStorage | sessionStorage, memory |\n| Theme | CSS variables | Unhead (SSR) |\n\nWrite your own adapter by implementing a single interface. The framework handles the rest.\n\n---\n\n## Performance\n\nPerformance was a priority from the start, not an afterthought. Every composable is independently importable and tree-shakeable. There is no runtime CSS — your bundle includes exactly the JavaScript you use and nothing else.\n\nComponents use lazy mounting (`usePresence`, `useLazy`) so dialogs, popovers, and menus don't render their content until they're opened. Observer composables (`useResizeObserver`, `useIntersectionObserver`, `useMutationObserver`) clean up automatically on scope disposal.\n\nThe registry system — the foundation of every stateful composable — uses cached iterations and batched mutations to minimize reactive overhead. Performance-critical paths include benchmarks (`*.bench.ts`) tracked across releases.\n\n::: info\n**Want the numbers?** Check out our [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) for detailed performance testing guidelines and results.\n:::\n\n---\n\n## Documentation\n\nThe documentation at [0.vuetifyjs.com](https://0.vuetifyjs.com) is designed to be the most complete documentation experience available.\n\n- **Live examples** on every component and composable page with full source code\n- **Auto-generated API reference** extracted directly from TypeScript source — always accurate, never stale\n- **Ask AI** on every page — ask questions grounded in the actual docs and source\n- **Skill-based filtering** — pages are tagged beginner, intermediate, or advanced so you see content matched to your experience\n- **Personalized documentation** — the [Vuetify CLI](https://github.com/vuetifyjs/cli) generates docs context tailored to your project's installed plugins and components\n\n---\n\n## Ecosystem\n\nVuetify0 works with the tools the Vuetify community already uses:\n\n- **[Vuetify CLI](https://github.com/vuetifyjs/cli)** — Scaffold new projects, generate components, and get personalized documentation based on your project setup\n- **[Vuetify Play](https://vtfy.link/vuetify0-play)** — Try components and composables in the browser without installing anything\n- **[Vuetify0 Play](https://v0play.vuetifyjs.com)** (beta) — Vuetify Play built entirely with Vuetify0\n- **[Vuetify MCP](https://mcp.vuetifyjs.com)** — Connect your IDE to the full Vuetify0 API surface for context-aware AI assistance\n\n---\n\n## Road to v1\n\nToday's alpha is the first milestone on the path to a stable release:\n\n- **Alpha** (April 7, 2026) — Open for feedback, APIs mostly stable, expect minor breaking changes\n- **Beta** (June 2026) — API freeze, stability and performance focus\n- **v1.0** (July 2026) — Stable release\n\nSee the full [roadmap](https://0.vuetifyjs.com/roadmap) for milestone details and timelines.\n\n\n\nAfter v1, the next chapter is **[Vuetify Paper](https://github.com/vuetifyjs/0/tree/master/packages/paper)**: complete design systems built on Vuetify0. Paper design systems recreate popular design languages as ready-to-use component libraries powered by v0's headless primitives. We're starting with two original design systems, **Emerald** and **Onyx**, with recreations of well-known design systems to follow.\n\nVuetify0 is the result of over a decade of building component frameworks and learning what works. It's already being integrated into the core Vuetify framework, quietly powering the next generation from the inside out. The alpha is live. [Go break things](https://0.vuetifyjs.com/introduction/getting-started).\n\n::: info\n**Considering building with Vuetify0?** We'd love to hear about your use case. [Get in touch](https://vuetifyjs.com/introduction/enterprise-support/) about enterprise support and consulting.\n:::\n\n---\n\n## Let's Build Something\n\nEnough about what Vuetify0 *can* do — let's see it in action. We're going to build **DevKey**, a developer API dashboard, as a reusable UI library. Three pages, ten components, one composite component that ties it all together.\n\nBy the end, you'll have a publishable package that any Vue app can install and use. The full source is on GitHub: [vuetifyjs/devkey](https://github.com/vuetifyjs/devkey).\n\n> This guide uses plain CSS for styling. Vuetify0 works great with [UnoCSS, Tailwind, or any CSS approach](https://0.vuetifyjs.com/guide/fundamentals/styling) you prefer.\n\n### Project Setup\n\nFirst, install the alpha:\n\n::: tabs\n\n```bash [pnpm]\npnpm add @vuetify/v0\n```\n\n```bash [npm]\nnpm install @vuetify/v0\n```\n\n```bash [yarn]\nyarn add @vuetify/v0\n```\n\n```bash [bun]\nbun add @vuetify/v0\n```\n\n:::\n\nThen create a plugin file that registers the v0 plugins we'll use throughout the project:\n\n```ts { resource=\"src/plugins/devkey.ts\" }\nimport {\n createBreakpointsPlugin,\n createPermissionsPlugin,\n createRulesPlugin,\n} from '@vuetify/v0'\nimport type { App } from 'vue'\n\nexport default function devkey (app: App) {\n app.use(\n createPermissionsPlugin({\n permissions: {\n admin: [['manage', '*']],\n developer: [['read', 'keys'], ['create', 'keys']],\n viewer: [['read', 'keys']],\n },\n })\n )\n\n app.use(\n createRulesPlugin({\n aliases: {\n required: v => !!v || 'Required',\n email: v => /.+@.+\\..+/.test(String(v)) || 'Invalid email',\n },\n })\n )\n\n app.use(createBreakpointsPlugin())\n}\n```\n\nThe theme is configured separately in its own plugin file, using the `V0StyleSheetThemeAdapter` to generate CSS custom properties with a `v0-theme` prefix:\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nimport { createThemePlugin, V0StyleSheetThemeAdapter } from '@vuetify/v0'\n\nexport default createThemePlugin({\n default: 'dark',\n target: 'html',\n adapter: new V0StyleSheetThemeAdapter({ prefix: 'v0-theme' }),\n themes: {\n dark: {\n dark: true,\n colors: {\n 'primary': '#818cf8',\n 'secondary': '#fbbf24',\n 'error': '#f87171',\n 'info': '#38bdf8',\n 'success': '#4ade80',\n 'warning': '#fb923c',\n 'background': '#18181b',\n 'surface': '#1f1f23',\n 'surface-tint': '#2a2a2a',\n 'surface-variant': '#1e1e1e',\n 'text': '#f1f5f9',\n 'muted': '#94a3b8',\n 'border': '#2e2e32',\n 'divider': '#404040',\n 'on-primary': '#1a1a1a',\n 'on-secondary': '#1a1a1a',\n 'on-error': '#1a1a1a',\n 'on-info': '#1a1a1a',\n 'on-success': '#1a1a1a',\n 'on-warning': '#1a1a1a',\n 'on-background': '#e0e0e0',\n 'on-surface': '#e0e0e0',\n 'on-surface-variant': '#a0a0a0',\n },\n },\n },\n})\n```\n\nAnd wire it into your app entry:\n\n```ts { resource=\"src/main.ts\" }\nimport { createApp } from 'vue'\nimport devkey from './plugins/devkey'\nimport vuetify from './plugins/vuetify'\nimport App from './App.vue'\n\nconst app = createApp(App)\ndevkey(app)\napp.use(vuetify)\napp.mount('#app')\n```\n\nFour plugins across two files, each doing one job: `createPermissionsPlugin` sets up RBAC so we can gate dashboard actions by role, `createRulesPlugin` registers validation rule aliases so our form fields can use `'required'` and `'email'` by name, `createThemePlugin` with `V0StyleSheetThemeAdapter` provides DevKey's color tokens as CSS variables (`var(--v0-theme-primary)`, `var(--v0-theme-on-primary)`, etc.), and `createBreakpointsPlugin` gives us reactive viewport detection for the responsive dashboard layout.\n\nHere's what we're building:\n\n**Components:**\n\n| Component | Wraps | Description |\n|-----------|-------|-------------|\n| `DkButton` | [Button](https://0.vuetifyjs.com/components/actions/button) | Styled button with variants |\n| `DkInput` | [Input](https://0.vuetifyjs.com/components/forms/input) | Form field with label and errors |\n| `DkCard` | [Atom](https://0.vuetifyjs.com/components/primitives/atom) | Content container |\n| `DkToggle` | [Single](https://0.vuetifyjs.com/components/providers/single) | Option switcher |\n| `DkTabs` | [Tabs](https://0.vuetifyjs.com/components/disclosure/tabs) | Tab navigation |\n| `DkTable` | [createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table) | Filterable, paginated table |\n| `DkCollapsible` | [Collapsible](https://0.vuetifyjs.com/components/disclosure/collapsible) | Expandable section |\n| `DkLayout` | [useBreakpoints](https://0.vuetifyjs.com/composables/plugins/use-breakpoints) | Responsive shell |\n| `DkCommandPalette` | [Dialog](https://0.vuetifyjs.com/components/disclosure/dialog) + [Input](https://0.vuetifyjs.com/components/forms/input) + [createFilter](https://0.vuetifyjs.com/composables/data/create-filter) + [useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey) + [useVirtualFocus](https://0.vuetifyjs.com/composables/system/use-virtual-focus) | `Cmd+K` search overlay with keyboard navigation |\n\n**Plugins:**\n\n| Plugin | Purpose |\n|--------|---------|\n| [createThemePlugin](https://0.vuetifyjs.com/composables/plugins/use-theme) | Dark theme with V0StyleSheetThemeAdapter for CSS custom properties |\n| [createBreakpointsPlugin](https://0.vuetifyjs.com/composables/plugins/use-breakpoints) | Reactive viewport detection for responsive layout |\n| [createPermissionsPlugin](https://0.vuetifyjs.com/composables/plugins/use-permissions) | RBAC to gate dashboard actions by role |\n| [createRulesPlugin](https://0.vuetifyjs.com/composables/plugins/use-rules) | Built-in validation rules (required, email, minLength) |\n\n---\n\n## Part 1: Landing Page\n\nThe landing page introduces two core patterns in v0:\n\n- **[Button](https://0.vuetifyjs.com/components/actions/button)** uses a compound component pattern — `Button.Root` handles state (loading, disabled, ARIA), `Button.Content` and `Button.Loading` swap visibility automatically. You style the root, v0 handles the behavior.\n- **[Single](https://0.vuetifyjs.com/components/providers/single)** manages single-selection state. `Single.Root` provides the context, `Single.Item` exposes `isSelected` and `toggle` — perfect for our pricing interval toggle. No state management code needed.\n\nBoth patterns show up everywhere in v0: compound components for structure, provider components for state. Once you learn one, you know them all. We'll build `DkButton`, `DkCard`, `DkToggle`, and `DkLayout`.\n\n![DevKey Landing Page](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/landing.png \"DevKey Landing Page\")\n\n### DkButton\n\nOur first component wraps Vuetify0's [Button](https://0.vuetifyjs.com/components/actions/button) with DevKey's visual style. Button uses a compound component pattern — `Button.Root` handles all the state (loading, disabled, selected, ARIA), and we style on top:\n\n```html { resource=\"src/components/DkButton.vue\" }\n\n\n\n\n\n```\n\nNotice what we *didn't* write: loading state management, disabled coordination, toggle group support, or grace period timing. `Button.Root` handles all of that — we just pass `loading` and `disabled` props through. `Button.Content` renders when the button isn't loading, and `Button.Loading` renders when it is — with an absolutely positioned spinner overlay and `[data-loading]` disabling pointer events. We just add our styles on top.\n\n### DkToggle — Pricing Interval Switcher\n\nThe pricing section needs a toggle between monthly and yearly. We use [Single](https://0.vuetifyjs.com/components/providers/single) for single-selection state — `Single.Root` provides the context, and `Single.Item` exposes `isSelected` and `toggle` for each option:\n\n```html { resource=\"src/components/DkToggle.vue\" }\n\n\n\n\n\n```\n\nThe `mandatory` prop on `Single.Root` ensures something is always selected. The `isSelected` and `toggle` slot props from `Single.Item` give us everything we need to render the active state and handle clicks. Zero state management code in our component.\n\n---\n\n## Part 2: Login Page\n\nThe login page is where Vuetify0's form system shines. Three composables work together here:\n\n- **[Form](https://0.vuetifyjs.com/components/forms/form)** coordinates validation across all fields. When the form submits, it validates every registered input and reports whether the form is valid.\n- **[Input](https://0.vuetifyjs.com/components/forms/input)** handles individual field state — value binding, validation errors, ARIA attributes, dirty/pristine tracking — through a compound component pattern (`Input.Root`, `Input.Control`, `Input.Description`, `Input.Error`).\n- **[createRulesPlugin](https://0.vuetifyjs.com/composables/plugins/use-rules)** provides named rule aliases. In our plugin setup we registered `'required'` and `'email'` — now any `Input.Root` with `:rules=\"['required', 'email']\"` resolves those aliases automatically. You can mix aliases with inline functions for custom validation.\n\nWe'll build `DkInput` — a styled wrapper around Input — and assemble the login page.\n\n![DevKey Login Page](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/login.png \"DevKey Login Page\")\n\n### DkInput\n\nWrapping Vuetify0's [Input](https://0.vuetifyjs.com/components/forms/input) compound component. `Input.Root` handles validation, ARIA attributes, and field state. `Input.Control` renders the native ``. `Input.Description` and `Input.Error` are automatically wired to `aria-describedby` and `aria-errormessage`:\n\n```html { resource=\"src/components/DkInput.vue\" }\n\n\n\n\n\n```\n\n### Login Page Assembly\n\nNow we compose the login page using Vuetify0's [Form](https://0.vuetifyjs.com/components/forms/form) component. Form coordinates all child validations automatically — the `submit` slot prop is a function that validates every registered field and returns a boolean. We pass it to our `onSubmit` handler via `@click=\"onSubmit(submit)\"`, which manages the loading state with a try/finally pattern. The `:rules` prop on `DkInput` accepts both string aliases (`'required'`, `'email'`) from the [rules plugin](https://0.vuetifyjs.com/composables/plugins/use-rules) and inline functions:\n\n```html { resource=\"src/pages/LoginPage.vue\" }\n\n\n\n\n\n```\n\n---\n\n## Part 3: Dashboard\n\nThis is where v0 really shows its depth. The dashboard composes more primitives than the previous two pages combined, and demonstrates how they stay out of each other's way:\n\n- **[createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table)** handles the API key list — filtering, pagination, and column definitions in a single composable. We wire a search input to its `search()` method and let it manage the data pipeline.\n- **[useBreakpoints](https://0.vuetifyjs.com/composables/plugins/use-breakpoints)** powers the responsive layout — sidebar visible on desktop, hidden on mobile — through the plugin we registered earlier.\n- **The command palette** is the showcase piece: five v0 primitives ([Dialog](https://0.vuetifyjs.com/components/disclosure/dialog), [Input](https://0.vuetifyjs.com/components/forms/input), [createFilter](https://0.vuetifyjs.com/composables/data/create-filter), [useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey), [useVirtualFocus](https://0.vuetifyjs.com/composables/system/use-virtual-focus)) composed into a single interaction.\n\n![DevKey Dashboard](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/dashboard.png \"DevKey Dashboard\")\n\n### DkTable — API Key Management\n\nThe API key table uses [createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table), which composes filtering, pagination, and sorting into a single reactive state:\n\n```html { resource=\"src/components/DkTable.vue\" }\n\n\n\n\n\n```\n\nThe `createDataTable` composable handles all the data wrangling — filtering rows by the search query, computing page counts, slicing the visible rows — while our component handles only the rendering.\n\n### DkCommandPalette — The Showcase\n\nThis is the component that shows what composing Vuetify0 primitives really looks like. A `Cmd+K` command palette that combines five v0 primitives into a single, polished interaction:\n\n- [Dialog](https://0.vuetifyjs.com/components/disclosure/dialog) — modal overlay with focus trapping\n- [Input](https://0.vuetifyjs.com/components/forms/input) — search field with ARIA\n- [createFilter](https://0.vuetifyjs.com/composables/data/create-filter) — live filtering\n- [useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey) — `Cmd+K` activation\n- [useVirtualFocus](https://0.vuetifyjs.com/composables/system/use-virtual-focus) — keyboard navigation with `scrollIntoView`\n\n```html { resource=\"src/components/DkCommandPalette.vue\" }\n\n\n\n\n\n```\n\nThat's roughly 100 lines of template and script for a fully functional command palette with keyboard navigation, live filtering, grouped results, and a hotkey trigger. Five Vuetify0 primitives, each doing one thing well, composed into something greater than the sum of its parts.\n\n\n\n![DevKey Command Palette](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/command-palette.png \"DevKey Command Palette\")\n\n---\n\n## Ship It\n\nThe full DevKey source is on GitHub: [vuetifyjs/devkey](https://github.com/vuetifyjs/devkey). Clone it, run `pnpm dev`, and you have a working app.\n\nTo deploy to production, build the project and preview it locally:\n\n::: tabs\n\n```bash [pnpm]\npnpm build\nnpx http-server dist\n```\n\n```bash [npm]\nnpm run build\nnpx http-server dist\n```\n\n```bash [yarn]\nyarn build\nnpx http-server dist\n```\n\n```bash [bun]\nbun run build\nbunx http-server dist\n```\n\n:::\n\nThe `dist/` directory contains everything you need. Deploy it anywhere that serves static files — Vercel, Netlify, Cloudflare Pages, or your own server. The entire app, including all Vuetify0 primitives, builds to **~235 kB JS** (84 kB gzipped).\n\n::: info\n**Want to package your components as a reusable library?** We'll cover publishing and consuming a v0-based component library in an upcoming blog post. In the meantime, the [Building Frameworks](https://0.vuetifyjs.com/guide/fundamentals/building-frameworks) guide walks through using v0 as a dependency for your own library.\n:::\n\n---\n\n## FAQ\n\n### How is Vuetify0 different from Reka UI or other headless libraries?\n\nMost headless libraries give you components. v0 gives you both the components *and* the underlying composables used to build them — so when a component doesn't fit your exact need, you're not stuck. The plugin system is also distinct: framework-level features like theme, locale, permissions, and notifications ship with fallbacks, so any component works standalone without requiring the full plugin to be installed. And v0 is built from a decade of Vuetify production experience by the same team — not a port of a React library.\n\n### Is this only for teams building design systems?\n\nNo. Import a `Select` and stop there — you don't need the plugin system, the composables, or any of it. The advanced layer is there when you need it, invisible when you don't.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They don't conflict. You can start adopting v0 components and composables in a Vuetify 4 project today. The migration path to future Vuetify versions is expected to require trivial changes at most.\n\n### Do I have to use all the plugins?\n\nNo. Every plugin is optional and tree-shakeable. A component import is just an import — no required setup. Add plugins as your needs grow.\n\n### Is the alpha API stable enough to build on?\n\nMostly, yes. We ship ~5,000 unit tests and over 300 benchmark scenarios across the framework. The alpha label reflects completeness, not instability — expect minor breaking changes until beta, but nothing requiring rewrites.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\nThe alpha is open for feedback. File issues, ask questions in Discord, or just build something and tell us about it. This is the foundation — help us shape it.\n\n::: info\n**Try Vuetify0 with Claude.** Connect the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/ai-tools) to get AI-assisted development with full access to the v0 docs and API reference.\n:::\n\n---\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Follow us on [Twitter](https://twitter.com/vuetifyjs), join the conversation on [Discord](https://community.vuetifyjs.com), and star us on [GitHub](https://github.com/vuetifyjs/0).*\n","frontmatter":{"layout":"blog","meta":{"title":"Announcing the Vuetify0 Alpha","description":"The Vuetify0 alpha is here — a headless Vue framework with 46 components, 63 composables, first-class AI integration, 100% TypeScript, and zero styles.","keywords":"Vuetify0 alpha, headless Vue, Vue component library, AI-native framework, TypeScript components, Vuetify MCP"}},"isInternal":false,"tokens":12019,"sizeBytes":46387},{"name":"announcing-vuetify0-beta.md","path":"packages/docs/src/pages/en/blog/announcing-vuetify0-beta.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/announcing-vuetify0-beta.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: Announcing the Vuetify0 Beta\n description: Vuetify0 hits beta and freezes its public API — 49 components, 68 composables, a headless drag-and-drop family, and the testing work leading to v1.\n keywords: Vuetify0 beta, headless Vue, API freeze, Vue drag and drop, createSortable, createKanban, TypeScript components, Vuetify0 v1\n---\n\n\n\n# Announcing the Vuetify0 Beta\n\nVuetify0 has reached beta. The main change from the alpha is that the public API is now frozen: the existing composables and components keep their current names and signatures, and we don't expect them to change before v1. Work from here is focused on stability, documentation, and edge cases.\n\n🖊️ John Leider • 📅 June 2nd, 2026\n\n\n\n---\n\n\n\n## What beta means\n\nThe alpha, released in April, came with the caveat that APIs were mostly stable but could still shift between releases. Beta removes that caveat for the existing surface. From here to v1.0:\n\n- Existing composables and components keep their names, signatures, and behavior. A breaking change would only happen if a critical issue required one, and it would be documented in the release notes.\n- Development shifts toward edge cases, documentation, accessibility, and performance rather than new API.\n- v0 is the headless layer being built into Vuetify itself. Freezing it gives that migration a fixed target to build against.\n\n---\n\n## Where things stand\n\nSince the [alpha](/blog/announcing-vuetify0-alpha/) in April, the totals went from 46 components and 63 composables to **49 components and 68 composables**. The maturity mix also changed: at alpha, three composables and thirteen components were still marked draft. Now no composables are in draft, and ten components remain there.\n\n| Maturity | Components | Composables | What it means |\n|----------|-----------|-------------|---------------|\n| **Stable** | 0 | 6 | In use across releases, no planned breaking changes |\n| **Preview** | 39 | 62 | Feature-complete and documented |\n| **Draft** | 10 | 0 | Experimental or planned for a future release |\n\n::: info\nThe full list is on the [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix), with the current level for every component and composable.\n:::\n\nThe preview label describes how long a primitive has been in use, not whether its API is settled. With the freeze, the existing preview surface is not expected to change before v1.\n\n---\n\n## Drag and drop\n\nThe largest addition since the alpha is a group of three composables for drag-and-drop. Like the rest of v0, they handle state and behavior only, with no markup or styling.\n\n- **[useDragDrop](https://0.vuetifyjs.com/composables/system/use-drag-drop)** ([#225](https://github.com/vuetifyjs/0/pull/225)) — the base primitive: a pointer and keyboard input adapter that owns two registries (draggables and drop zones) and the active-drag state.\n- **[createSortable](https://0.vuetifyjs.com/composables/data/create-sortable)** ([#231](https://github.com/vuetifyjs/0/pull/231)) — ordered-list state, with `move`, `swap`, and `reorder` mutations and a typed `move:ticket` event. It has no DOM or input handling of its own, so it can be driven from buttons, gestures, or server updates.\n- **[createKanban](https://0.vuetifyjs.com/composables/data/create-kanban)** ([#234](https://github.com/vuetifyjs/0/pull/234)) — two levels of `createSortable` (columns and their items) plus a `transfer` method for moving items between columns.\n\nBecause `createSortable` is state only, a pair of buttons can drive it without any drag handling:\n\n```ts\nimport { createSortable } from '@vuetify/v0'\nimport type { SortableTicketInput } from '@vuetify/v0'\n\ninterface TaskTicket extends SortableTicketInput {\n value: { id: number, label: string }\n}\n\nconst sortable = createSortable()\n\nconst [a, b, c] = sortable.onboard([\n { value: { id: 1, label: 'Cut alpha' } },\n { value: { id: 2, label: 'Ship docs' } },\n { value: { id: 3, label: 'Tweet' } },\n])\n\nsortable.move(a.id, 2) // move a ticket to a new index\nsortable.swap(a.id, b.id) // swap two tickets\nsortable.reorder([b.id, a.id, c.id]) // apply a full permutation\n```\n\nThe same state rendered as a list — this is the example from the documentation:\n\n```html { resource=\"src/components/ReorderList.vue\" }\n\n\n\n```\n\n`useDragDrop` adds pointer and keyboard dragging on top, calling the same `move`, `swap`, and `reorder` methods.\n\n---\n\n## Other additions\n\nOther primitives added since the alpha:\n\n- **[createOtp](https://0.vuetifyjs.com/composables/forms/create-otp)** ([#238](https://github.com/vuetifyjs/0/pull/238)) — state and focus management for one-time-code and verification inputs.\n- **[Overflow](https://0.vuetifyjs.com/components/semantic/overflow)** ([#220](https://github.com/vuetifyjs/0/pull/220)) — a container that detects overflow and exposes scroll state to its children.\n- **useDelay** — debounce and delayed-execution timing.\n- **[toHighlight](https://0.vuetifyjs.com/composables/transformers/to-highlight)** ([#222](https://github.com/vuetifyjs/0/pull/222)) — a transformer that marks matched substrings, for search results and filters.\n\n`createRegistry`, which the stateful composables build on, also gained a bulk `reorder` primitive and an `offboard` that returns removed entries. The latter is what `createKanban` uses to move items between columns.\n\n---\n\n## Testing and performance\n\nCurrent numbers:\n\n- 5,700+ unit tests across 142 spec files.\n- 98.7% average test coverage across the 105 primitives with recorded metrics.\n- 12 benchmark suites covering performance-sensitive paths such as `createDataTable`, `createFilter`, and the registry core. `createSortable`'s reorder was rewritten to use the registry's bulk operation rather than a per-item loop.\n- 100% TypeScript and no runtime CSS. The package ships no styles, and exports are annotated so bundlers can drop unused composables.\n\n::: info\nThe [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) documents the methodology and per-primitive results.\n:::\n\nOne change since the alpha: `useTheme`, `useLocale`, and `useFeatures` use a reactive registry by default ([#210](https://github.com/vuetifyjs/0/pull/210)), so switching a theme or feature flag updates consumers without extra setup. The convention is [documented](https://0.vuetifyjs.com/guide/fundamentals/reactivity) for plugin authors.\n\n---\n\n## AI tooling\n\n\n\nAs in the alpha, each documentation page has an Ask AI option, the docs publish `llms.txt` and `llms-full.txt`, and the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) connects an editor to the API reference. The MCP data is synced to the beta.\n\n::: info\nThe [Vuetify MCP guide](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp#claude-code) covers connecting it to an editor.\n:::\n\n---\n\n## Road to v1\n\nThe beta is the second of three milestones:\n\n- **Alpha** (April 7, 2026) — open for feedback, APIs mostly stable\n- **Beta** (June 2, 2026) — API freeze; stability, documentation, and edge cases\n- **v1.0** (July 2026) — milestone-driven; ships when the milestones are met\n\nSee the [roadmap](https://0.vuetifyjs.com/roadmap) for details.\n\n---\n\n## FAQ\n\n### What changes at beta?\n\nThe public API stops changing. During alpha, names and signatures could change between releases; from beta to v1.0 they don't, unless a critical fix requires it. The stable, preview, and draft labels still indicate how long each primitive has been in use.\n\n### Can I use the beta in production?\n\nCode written against the beta API should keep working through v1, since the API is frozen. The remaining work is hardening and documentation.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They don't conflict, and v0 is already used inside Vuetify's internals. The path to future Vuetify versions is expected to need minimal changes.\n\n### Will there be breaking changes between beta and v1?\n\nNone are planned. If a critical bug or accessibility issue requires one, it will be noted in the release notes.\n\n### Do I have to use the whole framework?\n\nNo. You can import a single component or composable on its own. The plugins and other layers are optional.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Documentation is at [0.vuetifyjs.com](https://0.vuetifyjs.com); source is on [GitHub](https://github.com/vuetifyjs/0).*\n","frontmatter":{"layout":"blog","meta":{"title":"Announcing the Vuetify0 Beta","description":"Vuetify0 hits beta and freezes its public API — 49 components, 68 composables, a headless drag-and-drop family, and the testing work leading to v1.","keywords":"Vuetify0 beta, headless Vue, API freeze, Vue drag and drop, createSortable, createKanban, TypeScript components, Vuetify0 v1"}},"isInternal":false,"tokens":2861,"sizeBytes":11048},{"name":"announcing-vuetify0-rc.md","path":"packages/docs/src/pages/en/blog/announcing-vuetify0-rc.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/announcing-vuetify0-rc.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: Announcing the Vuetify0 Release Candidate\n description: Vuetify0 reaches release candidate. The API freeze held through five beta releases and 60 fixes — 50 components, 71 composables, and the last stretch to v1.\n keywords: Vuetify0 RC, release candidate, headless Vue, API freeze, accessibility, WCAG, useReducedMotion, Vuetify0 v1\n---\n\n\n\n# Announcing the Vuetify0 Release Candidate\n\nVuetify0 has reached release candidate. The API freeze announced at [beta](/blog/announcing-vuetify0-beta/) held through six beta releases: nothing was renamed, nothing was removed, and the only additions were additive — a reduced-motion plugin and an accessibility helper on the locale system. From here to v1.0, the work is final testing and documentation. No new features.\n\n🖊️ John Leider • 📅 July 2nd, 2026\n\n\n\n---\n\n\n\n## Table of Contents\n\n- [What a release candidate means](#what-a-release-candidate-means)\n- [Where things stand](#where-things-stand)\n- [A month of hardening](#a-month-of-hardening)\n- [Accessible by default](#accessible-by-default)\n- [Testing and benchmarks](#testing-and-benchmarks)\n- [A reference implementation](#a-reference-implementation)\n- [Documentation](#documentation)\n- [AI tooling](#ai-tooling)\n- [Road to v1](#road-to-v1)\n- [FAQ](#faq)\n\n---\n\n## What a release candidate means\n\nThe beta froze the public API and promised that existing composables and components would keep their names, signatures, and behavior. A month and six releases later, that promise held — and it is now enforced mechanically: a repository check fails any pull request that changes the public surface ([#409](https://github.com/vuetifyjs/0/pull/409)).\n\nThe release candidate narrows scope further. Between now and v1.0:\n\n- **No breaking changes and no new features.** The beta still accepted additive changes; the RC does not. The single exception is a critical security vulnerability that cannot be fixed any other way — and it would be documented in the release notes.\n- **The time goes to testing.** Exercising the frozen surface against edge cases, accessibility passes, and security testing on top of the hardening the betas already shipped.\n- **Documentation and feedback.** The rest of the effort is documentation, and the RC window is the last chance for feedback to catch a problem before the API locks in for the whole 1.x line. An API that fights you, a doc that misleads, a behavior that surprises — report it at [issues.vuetifyjs.com](https://issues.vuetifyjs.com) or on [Discord](https://community.vuetifyjs.com).\n- **v1.0 is milestone-driven**, targeted for Q3 2026. Barring release-blocking discoveries, the RC is what v1.0 ships as — it releases when the milestones are met, not on a date.\n\nAfter v1.0, the surface is governed by semver: breaking changes only in major releases.\n\n---\n\n## Where things stand\n\nAt the beta announcement the totals were 49 components and 68 composables. Beta.0 itself shipped the [Tooltip](https://0.vuetifyjs.com/components/disclosure/tooltip) component with its [useTooltip](https://0.vuetifyjs.com/composables/plugins/use-tooltip) plugin and [createDataGrid](https://0.vuetifyjs.com/composables/data/create-data-grid); the freeze window added [useReducedMotion](https://0.vuetifyjs.com/composables/plugins/use-reduced-motion) in beta.2. The RC surface is **50 components, 71 composables, and 24 utilities**.\n\nThe RC also promotes the v1 stable set ([#470](https://github.com/vuetifyjs/0/pull/470)): the selection family — `createModel`, `createSelection`, `createSingle`, `createStep`, `createGroup`, `createNested` — plus `createRegistry` and the `useTheme`, `useStorage`, and `useBreakpoints` plugins are now API-locked for 1.0. They join the already-stable foundation and observer composables, bringing the stable surface to 16 composables and 17 utilities.\n\n| Maturity | Components | Composables | Utilities | What it means |\n|----------|-----------|-------------|-----------|---------------|\n| **Stable** | 0 | 16 | 17 | In use across releases, no planned breaking changes |\n| **Preview** | 40 | 55 | 7 | Feature-complete and documented |\n| **Draft** | 10 | 0 | 0 | Experimental or planned for a future release |\n\n::: info\nThe full list is on the [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix), with the current level for every component and composable.\n:::\n\nThe ten draft components — DatePicker, DateRangePicker, TimePicker, Otp, Alert, DataGrid, DataTable, Kanban, Virtualizer, and Tour — are experimental and sit outside the frozen surface. They are not committed to v1 and promote individually when ready.\n\n---\n\n## A month of hardening\n\nThe beta cycle ran on a weekly cadence — five follow-up releases between June 9 and the RC cut — and produced 184 commits: 60 fixes, 5 performance rewrites, and 66 documentation commits. The fixes cluster into a few themes:\n\n- **Security and input hardening** — composables were hardened against prototype pollution, CSS injection, and unbounded allocation ([#271](https://github.com/vuetifyjs/0/pull/271)); theme adapters now validate their CSS prefix ([#440](https://github.com/vuetifyjs/0/pull/440)) and popover anchor names are coerced to a safe charset ([#416](https://github.com/vuetifyjs/0/pull/416)).\n- **Overlays and the top layer** — a native modal `` paints above all z-index, so overlays teleported to `body` rendered underneath it. Snackbar and Portal can now teleport into the topmost open modal instead ([#397](https://github.com/vuetifyjs/0/pull/397)), and non-modal overlays no longer count toward stack blocking or scrim state ([#354](https://github.com/vuetifyjs/0/pull/354), [#352](https://github.com/vuetifyjs/0/pull/352)).\n- **SSR and adapter lifecycle** — CSP nonces are applied to server-rendered theme styles ([#441](https://github.com/vuetifyjs/0/pull/441)), adopted stylesheets are removed on dispose ([#424](https://github.com/vuetifyjs/0/pull/424)), and plugins defer factory work to install time so unused plugins no longer allocate resources ([#343](https://github.com/vuetifyjs/0/pull/343)).\n- **Selection and registry contracts** — disabled items can no longer slip in through the v-model sync path ([#426](https://github.com/vuetifyjs/0/pull/426)) or be toggled off ([#311](https://github.com/vuetifyjs/0/pull/311)), circular tree references are guarded ([#316](https://github.com/vuetifyjs/0/pull/316)), and registry cache consistency was tightened ([#331](https://github.com/vuetifyjs/0/pull/331)).\n- **Forms edge cases** — submitting a form with a field id of `0` ([#288](https://github.com/vuetifyjs/0/pull/288)), invalidating in-flight async validation ([#294](https://github.com/vuetifyjs/0/pull/294)), and committing parsed NumberField values before the reactivity round-trip completes ([#371](https://github.com/vuetifyjs/0/pull/371)).\n- **Renderless mode** — the element and handler contracts are now exposed through slot attributes across dialogs, form controls, Scrim, and Snackbar ([#327](https://github.com/vuetifyjs/0/pull/327)), so the consumer-owned-DOM path carries the same guarantees as the rendered one.\n\nPerformance work landed alongside: registry reordering moved from a Map rebuild to an order-array splice with windowed reindexing ([#273](https://github.com/vuetifyjs/0/pull/273)), proxy registry snapshots rebuild lazily on read ([#280](https://github.com/vuetifyjs/0/pull/280)), `createDataTable` replaced its reactive row registry with an event-driven version signal ([#328](https://github.com/vuetifyjs/0/pull/328)), and Overflow visibility checks dropped from O(n²) to O(n) per resize ([#417](https://github.com/vuetifyjs/0/pull/417)).\n\n---\n\n## Accessible by default\n\nThe largest user-facing change of the cycle is invisible until you turn on a screen reader. Every v0 component now ships a built-in English aria label through the locale system's new `ti` method ([#372](https://github.com/vuetifyjs/0/pull/372)) — \"translate if exists\" — which returns the translation or `undefined` instead of echoing the key:\n\n```ts\nconst label = locale.ti('Button.label') ?? 'Button'\n```\n\nApps with no locale plugin get meaningful accessible names (WCAG 4.1.2) with zero locale strings bundled into the runtime. The canonical English catalog is exposed as an optional `@vuetify/v0/locale/messages/en` export for seeding translations.\n\nThe RC audit of the project's [PHILOSOPHY](https://github.com/vuetifyjs/0/blob/master/packages/0/PHILOSOPHY.md) document surfaced two more attribute-compliance bugs, fixed in the same pass ([#451](https://github.com/vuetifyjs/0/pull/451)): ExpansionPanel emitted `data-selected=\"false\"` instead of dropping the attribute, and Slider and Rating dropped `aria-disabled` entirely when enabled instead of emitting a concrete boolean for assistive tech.\n\nBeta.2 also added the [useReducedMotion](https://0.vuetifyjs.com/composables/plugins/use-reduced-motion) plugin ([#278](https://github.com/vuetifyjs/0/pull/278)) — a three-way `system` / `always` / `never` mode over `prefers-reduced-motion`, with a reactive flag and a body data attribute for CSS-only consumers:\n\n```ts\nimport { useReducedMotion } from '@vuetify/v0'\n\nconst motion = useReducedMotion()\n\nmotion.isReduced.value // should motion be minimized right now?\nmotion.select('always') // force reduce\nmotion.select('system') // follow the OS setting\n```\n\n---\n\n## Testing and benchmarks\n\nCurrent numbers:\n\n- 6,338 passing unit tests across 159 test files.\n- 97.8% average test coverage across the 113 primitives with recorded metrics; 78 of them sit at 100%.\n- 13 benchmark suites with 399 recorded cases. Benchmark history is now regenerated on every release against a fixed apparatus ([#394](https://github.com/vuetifyjs/0/pull/394), [#422](https://github.com/vuetifyjs/0/pull/422)), so regressions show up as history, not anecdotes.\n- 100% TypeScript and no runtime CSS. The package ships no styles, and exports are annotated so bundlers can drop unused composables.\n\n::: info\nThe [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) documents the methodology and per-primitive results.\n:::\n\n---\n\n## A reference implementation\n\nNumbers describe the surface; [DevKey](https://devkey.vuetifyjs.com) shows it in use. The developer API dashboard from the [alpha tutorial](/blog/announcing-vuetify0-alpha/) is maintained as the reference v0 implementation and is updated in lockstep with releases — including this RC. Its command palette is a good picture of how the primitives compose: a `Dialog`, an `Input`, `createFilter`, `useHotkey`, and `useVirtualFocus` in one component (condensed from the source):\n\n```html { resource=\"src/components/DkCommandPalette.vue\" }\n\n```\n\nNo positioning math, no key-event switch statements, no filter re-implementation — the component is mostly wiring. The full source is at [vuetifyjs/devkey](https://github.com/vuetifyjs/devkey), and the [integration guide](https://0.vuetifyjs.com/guide/integration/devkey) walks through the architecture.\n\n---\n\n## Documentation\n\nThe 61 documentation commits were mostly one push: a full audit of the guide pages. Component and composable pages were normalized to one structure ([#392](https://github.com/vuetifyjs/0/pull/392)), FAQ sections homogenized ([#395](https://github.com/vuetifyjs/0/pull/395)), examples converted to multi-file copy-paste blocks ([#382](https://github.com/vuetifyjs/0/pull/382)), and stale data corrected across the board ([#458](https://github.com/vuetifyjs/0/pull/458), [#461](https://github.com/vuetifyjs/0/pull/461)).\n\nNew pages landed for [testing](https://0.vuetifyjs.com/guide/tooling/testing) ([#283](https://github.com/vuetifyjs/0/pull/283)) and a [core terminology glossary](https://0.vuetifyjs.com/guide/essentials/glossary) ([#410](https://github.com/vuetifyjs/0/pull/410)). The release pipeline moved to [Changesets](https://github.com/changesets/changesets) ([#365](https://github.com/vuetifyjs/0/pull/365)), and the docs now derive feature counts directly from the maturity manifest instead of hand-maintained numbers ([#378](https://github.com/vuetifyjs/0/pull/378)).\n\nFor learning the framework, [Vuetify0 Skillz](https://0.vuetifyjs.com/skillz) — interactive, hands-on tutorials built into the docs, itself in beta — now counts three guided tours: Using the Docs, Using Search, and Using Examples, the newest landing alongside the RC ([#459](https://github.com/vuetifyjs/0/pull/459)) to walk through live examples, the Playground, and multi-file recipes. Every page is also tagged Beginner, Intermediate, or Advanced, and the [skill filter](https://0.vuetifyjs.com/guide/essentials/using-the-docs#skill-levels-learning-tracks) trims the navigation to the levels you choose.\n\n---\n\n## AI tooling\n\n\n\nAs before, each documentation page has an Ask AI option, the docs publish `llms.txt` and `llms-full.txt`, and the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) connects an editor to the API reference. The MCP data is synced to the RC.\n\n::: info\nThe [Vuetify MCP guide](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp#claude-code) covers connecting it to an editor.\n:::\n\n---\n\n## Road to v1\n\nThe release candidate is the last milestone before v1.0:\n\n- **Alpha** (April 7, 2026) — open for feedback, APIs mostly stable\n- **Beta** (June 2, 2026) — API freeze; stability, documentation, and edge cases\n- **RC** (July 2, 2026) — final testing and documentation; no new features\n- **v1.0** (Q3 2026) — milestone-driven; ships when the milestones are met\n\nSee the [roadmap](https://0.vuetifyjs.com/roadmap) for details.\n\n---\n\n## FAQ\n\n### What changes at RC?\n\nScope, not API. The beta froze names and signatures but still accepted additive features; the RC accepts none. Between now and v1.0 only release-blocking fixes and documentation land — the focus is testing, security review, and feedback. New features resume after v1.\n\n### Can I use the RC in production?\n\nCode written against the beta API ran through six beta releases and the RC without changes, and the same guarantee carries to v1: the surface is frozen and the freeze is enforced by a repository check on every pull request.\n\n### Will the draft components ship in v1?\n\nThe ten draft components are experimental and outside the frozen surface, and each is already plotted on the public [milestones](https://github.com/vuetifyjs/0/milestones): table components in v1.1, product tours in v1.2, virtualized lists, Kanban, and OTP input in v1.3, then time and date pickers in v1.4 and v1.5. Each promotes when it meets the bar.\n\n### Will there be breaking changes between RC and v1?\n\nNone are planned. The only thing that could force one is a critical security vulnerability with no other fix, and it would be documented in the release notes.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They don't conflict, and you can adopt v0 primitives inside a Vuetify 4 app today. Meanwhile, Vuetify 5's internals are being refactored to use v0 directly — the frozen surface is the foundation that work builds on.\n\n### How do I report a problem or contribute?\n\nBug reports go through [issues.vuetifyjs.com](https://issues.vuetifyjs.com) — issues opened outside the generator are closed automatically. The [contributing guide](https://0.vuetifyjs.com/introduction/contributing) covers local setup and conventions, and [Discord](https://community.vuetifyjs.com) is the place to discuss before you build.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Report an issue** — [issues.vuetifyjs.com](https://issues.vuetifyjs.com)\n- **Contributing** — [Contributing guide](https://0.vuetifyjs.com/introduction/contributing)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Documentation is at [0.vuetifyjs.com](https://0.vuetifyjs.com); source is on [GitHub](https://github.com/vuetifyjs/0).*\n","frontmatter":{"layout":"blog","meta":{"title":"Announcing the Vuetify0 Release Candidate","description":"Vuetify0 reaches release candidate. The API freeze held through five beta releases and 60 fixes — 50 components, 71 composables, and the last stretch to v1.","keywords":"Vuetify0 RC, release candidate, headless Vue, API freeze, accessibility, WCAG, useReducedMotion, Vuetify0 v1"}},"isInternal":false,"tokens":4440,"sizeBytes":17414},{"name":"announcing-vuetify0-v1.md","path":"packages/docs/src/pages/en/blog/announcing-vuetify0-v1.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/announcing-vuetify0-v1.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: Announcing Vuetify0 1.0\n description: Vuetify0 1.0 — a headless meta-framework for Vue 3. Its foundation is now locked under semver — the logic layer plus a stable component spine.\n keywords: Vuetify0 1.0, Vuetify0 v1, headless Vue, meta-framework, composables, WAI-ARIA, semver\n---\n\n\n\n# Announcing Vuetify0 1.0\n\nI've built Vuetify0 — the framework, its documentation, and everything surrounding it — with one express intent: to take everything I've learned over a decade of building Vuetify and pour it into something that will stand the test of time. The principles and the underlying functionality that drive v0 weren't invented for this release; they were honed over ten years of Vuetify, tested against real applications, and only then extracted into a foundation you can build on directly.\n\nVuetify0 is 1.0. The release candidate held — the frozen surface shipped through the validation window without a breaking change — and the package is now `@vuetify/v0`, no tag required. For most projects, 1.0 is the signal that a library is safe to build on. For a framework whose job is to build other frameworks, it means something more precise: the contracts are locked.\n\n🖊️ John Leider • 📅 July 22nd, 2026\n\n\n\n---\n\n\n\n## Table of Contents\n\n- [What 1.0 means](#what-1-0-means)\n- [What Vuetify0 is](#what-vuetify0-is)\n- [Headless, accessible by default](#headless-accessible-by-default)\n- [The whole logic layer](#the-whole-logic-layer)\n- [Where it sits in the stack](#where-it-sits-in-the-stack)\n- [Logic without components](#logic-without-components)\n- [Proven, not promised](#proven-not-promised)\n- [The road to v1.x](#the-road-to-v1-x)\n- [Get started](#get-started)\n- [FAQ](#faq)\n\n---\n\n## What 1.0 means { #what-1-0-means }\n\nI want to be precise about what shipped, because it is easy to read \"1.0\" as \"every component is finished.\" Not all of them are — and for a meta-framework, that is by design.\n\nVuetify0 is a headless meta-framework — a logic layer you build UI libraries *on top of*. Its value is not a catalog of buttons; it is the guarantee that the primitives underneath your buttons will not move. So 1.0 is a promise about the foundation:\n\n- **The stable set is locked under semver.** Nineteen composables, seventeen utilities, and thirteen components — the selection family, the registry, the foundation and observer primitives, the `useTheme`, `useStorage`, and `useBreakpoints` plugins, and the structural spine the rest of the library is built from (Tabs, Checkbox, Radio, Switch, the providers, and more) — carry a no-breaking-changes guarantee for the entire 1.x line. Breaking changes wait for a major.\n- **The freeze is enforced mechanically.** A repository check fails any pull request that alters the public surface. The guarantee is not a promise in a blog post; it is CI.\n- **The rest of the components promote individually.** Beyond that stable spine, the remaining components are `preview` and graduate onto the frozen foundation one at a time, each on its own milestone rather than gated behind a single number. Stabilizing the engine and its load-bearing components first is exactly the right order for a meta-framework — everything downstream inherits that stability.\n\nIf you have used Vuetify at any point in the last decade, you have relied on this logic without seeing it — selection, registries, focus management, theming. 1.0 is that logic, extracted, hardened, and frozen, so you can build on it directly.\n\n![The Vuetify0 maturity matrix — 49 stable primitives across 15 categories at 1.0](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-v1/maturity-matrix-dark.png \"The Vuetify0 maturity matrix\"){ width=100% }\n\n::: info\nThe [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix) lists the current level for every component, composable, and utility.\n:::\n\n---\n\n## What Vuetify0 is\n\nIf this is your first time hearing about it: **Vuetify0 (v0) is a headless meta-framework for Vue 3.** Logic only, zero styling. You do not install v0 to get a button — you install it to *build* the button your design system paints.\n\nThat distinction is the whole point. Most component libraries hand you finished, opinionated UI and ask you to fight the defaults when they do not fit. Most headless libraries hand you a dozen primitives and leave the rest to you. v0 aims at the layer underneath both: the complete state, accessibility, and behavior of a UI library, exposed as composables and unstyled compound components, with nothing rendered until you say so.\n\nThe acid test v0 holds itself to: strip every stylesheet from the page, and the components still work — still manage focus, still enforce selection rules, still announce their state to a screen reader. If styling is load-bearing, it is not headless.\n\nThere is no plugin to register and nothing is global. Everything is a tree-shakeable import:\n\n```ts\nimport { createSelection, useBreakpoints } from '@vuetify/v0'\nimport { Tabs, Dialog } from '@vuetify/v0/components'\n```\n\n---\n\n## Headless, accessible by default\n\nHeadless is not an excuse to ship less. Every v0 component is WAI-ARIA correct out of the box, SSR-safe by default, and exposes each piece of its state as a `data-*` attribute so a stylesheet — or a design system — can react to it without touching the logic.\n\nAccessibility does not wait for a locale plugin, either. Every component ships a built-in English aria label through the locale system's `ti` method — \"translate if exists\" — which returns a translation when one is registered and falls back to the inline default otherwise:\n\n```ts\nconst label = locale.ti('Button.label') ?? 'Button'\n```\n\nAn app with no i18n configured still gets meaningful accessible names (WCAG 4.1.2), with zero locale strings bundled into the runtime. Add a locale plugin later and the same components localize with no code change. That is the pattern throughout v0: correct defaults for the beginner, full control for the framework author.\n\nThe release cycle closed with a dedicated accessibility pass — carousel autoplay that pauses on focus (WCAG 2.2.2), `aria-current` on tree items, explicit group labels on sliders and splitters, and more — so the guarantee holds in the details, not just the headline.\n\n---\n\n## The whole logic layer\n\nThe number that matters is not how many buttons v0 draws — it is how much of the hard logic you never have to write again. At 1.0, v0 ships **40 components, 71 composables, and 24 utilities** across fifteen categories, with ten more components already scheduled through v1.5.\n\nBefore you write custom logic, the odds are v0 already has the primitive:\n\n| You need | Reach for |\n|----------|-----------|\n| Single, multi, grouped, or nested selection | `createSingle`, `createSelection`, `createGroup`, `createNested` |\n| Wizard / carousel / step tracking | `createStep` |\n| Form validation with async + dirty tracking | `createForm`, `createValidation` |\n| Autocomplete / combobox | `createCombobox` |\n| Paginated, virtualized, sortable, filterable data | `createPagination`, `createVirtual`, `createSortable`, `createFilter`, `createDataTable` |\n| Floating UI — popover, tooltip, menu | `usePopover` |\n| Roving tabindex / virtual focus | `useRovingFocus`, `useVirtualFocus` |\n| Breakpoints, theme, RTL, locale, storage | `useBreakpoints`, `useTheme`, `useRtl`, `useLocale`, `useStorage` |\n\nThis is where \"meta-framework\" stops being marketing. The goal is breadth no point-solution can match — the selection, forms, data, and system primitives that every serious UI library re-implements, written once, tested once, and shared. See how that stacks up against a typical headless library in [Beyond a Component Library](https://0.vuetifyjs.com/introduction/why-vuetify0#beyond-a-component-library).\n\n---\n\n## Where it sits in the stack\n\nv0 is the bottom of a three-layer stack, and each layer only depends on the one below it:\n\n- **Vuetify0** — headless logic (this release)\n- **Design systems** — Material, and the in-development Emerald, Helix, and Onyx — each a *complete framework* with its own visual language, built directly on the v0 primitives\n- **Vuetify** — orchestration and the defaults system that ties it together\n\nThe clearest proof that the foundation is solid is that we are rebuilding on it ourselves. Vuetify's own internals are being refactored to consume v0 directly — the frozen 1.0 surface is exactly what that work stands on. A decade of Vuetify — 41k+ GitHub stars, millions of monthly downloads, MIT-licensed with nothing gated behind a paid tier — is being rebuilt from this layer up.\n\n---\n\n## Logic without components\n\nThe fastest way to understand v0 is to use a composable with nothing rendered. `createSelection` is a complete multi-selection engine — mandatory rules, batch operations, enrollment — and it does not care whether you ever draw a list:\n\n```ts\nimport { createSelection } from '@vuetify/v0'\n\nconst selection = createSelection({ mandatory: true })\n\nconst home = selection.register({ value: 'home' })\nconst search = selection.register({ value: 'search' })\n\nhome.select() // ticket self-method — select this item\nhome.isSelected.value // -> true\nselection.selectedIds // -> reactive Set of selected ids\nselection.selectedValues.value // -> reactive Set { 'home' }\n```\n\nWhen you *do* want UI, the same logic backs a headless compound component. The root owns state; the sub-components read it through context — no prop-drilling between siblings:\n\n```html\n\n\n\n```\n\nBoth examples run live in the docs — [createSelection](https://0.vuetifyjs.com/composables/selection/create-selection) and [Tabs](https://0.vuetifyjs.com/components/disclosure/tabs) — and every example on the site is a multi-file, copy-paste recipe you can open in the playground.\n\nWhere it gets interesting is at application scale. [DevKey](https://devkey.vuetifyjs.com), a developer API dashboard, is the reference implementation — maintained in lockstep with every release. Its dashboard is almost entirely wiring: a `Tabs` view over a data layer that is `useStorage` and nothing more, driving the components that render it.\n\n![The DevKey dashboard — API-key management built on Vuetify0](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-v1/devkey-dashboard.png \"DevKey — the Vuetify0 reference implementation\"){ width=100% }\n\nThe code behind that view is mostly this:\n\n```html\n\n\n\n```\n\nThe stable spine here — `Tabs` and the `useStorage`-backed data layer — is exactly what 1.0 freezes. The components it orchestrates (`DkTable`, the create-key dialog, the command palette) are built on preview primitives today; the data-table components promote to stable in v1.1, and the rest follow across the 1.x line. The wiring above doesn't change when they do. Build it yourself with the [DevKey integration guide](https://0.vuetifyjs.com/guide/integration/devkey).\n\n---\n\n## Proven, not promised\n\nThe 1.x guarantee is only worth as much as the testing behind it. Heading into 1.0:\n\n- **6,200+ passing unit tests** across the primitives, with average coverage above 98% and 80 of them at 100%.\n- **16 benchmark suites** regenerated on every release against a fixed apparatus, so regressions surface as history rather than anecdotes — `mergeDeep`, for instance, clears 1.7M+ ops/sec on a shallow merge, and a recent rewrite cut large-grid sort time by roughly 28×. The [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) documents the methodology and per-primitive results.\n- **A dedicated security pass** hardened the composables against prototype pollution and CSS injection, and validated theme, locale, and feature-flag inputs against safe charsets.\n- **100% TypeScript, zero runtime CSS.** The package ships no styles, and exports are annotated so bundlers drop anything you do not import.\n\nv0 is also built to be understood by the tools people now build with: every documentation page has an Ask AI option, the docs publish `llms.txt` and `llms-full.txt`, and the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) wires the full API reference into your editor.\n\n---\n\n## The road to v1.x { #the-road-to-v1-x }\n\n1.0 locks the engine. Everything on the roadmap from here is components promoting onto that stable foundation — and because the logic already shipped and is already frozen, each one is assembly over a proven primitive, not a rewrite. The milestones are public:\n\n- **v1.1** — DataTable and DataGrid components over the shipped `createDataTable` and `createDataGrid`, plus the Alert component\n- **v1.2** — Tour, a headless primitive for guided product tours and feature discovery\n- **v1.3** — Virtualizer, Kanban, and Otp over the shipped `createVirtual`, `createKanban`, and `createOtp`\n- **v1.4** — TimePicker, headless and accessible time selection\n- **v1.5** — DatePicker and DateRangePicker for single dates and ranges\n\nBeyond the components, the first design systems — Emerald and Onyx — come next, and the whole surface is authored for forward-compatibility with Vue Vapor. Track it on the [roadmap](https://0.vuetifyjs.com/roadmap) and the [milestones](https://github.com/vuetifyjs/0/milestones).\n\n---\n\n## Get started\n\n```bash\npnpm install @vuetify/v0\n```\n\nNo plugin to register, nothing global. Import what you need:\n\n```ts\nimport { createSelection } from '@vuetify/v0'\nimport { Dialog } from '@vuetify/v0/components'\n```\n\nThe [getting-started guide](https://0.vuetifyjs.com/introduction/getting-started) covers setup, and [Vuetify0 Skillz](https://0.vuetifyjs.com/skillz) walks through the docs, search, and examples interactively.\n\n---\n\n## FAQ\n\n### Does 1.0 mean the components are stable?\n\nThe spine is. Thirteen components — the structural and selection primitives the rest of the library builds on, like Tabs, Checkbox, Radio, and Switch — are stable and semver-locked at 1.0, alongside nineteen composables and seventeen utilities. The remaining components are `preview` and promote individually as they meet the bar. For a meta-framework, the engine and its load-bearing components are what must not move first; everything downstream inherits that stability.\n\n### Can I use it in production?\n\nYes. Code written against the beta API ran through six beta releases, the release candidate, and into 1.0 without changes, and the surface freeze is enforced by CI on every pull request. The stable set will not break under you within 1.x.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They do not conflict, and you can adopt v0 primitives inside a Vuetify 4 app today. Vuetify's own internals are being refactored to consume v0 directly.\n\n### When do the draft components ship?\n\nEach is plotted on the public [milestones](https://github.com/vuetifyjs/0/milestones): table components in v1.1, tours in v1.2, virtualized lists, Kanban, and OTP in v1.3, then time and date pickers in v1.4 and v1.5. Each promotes when it is ready.\n\n### How do I report a problem or contribute?\n\nBug reports go through [issues.vuetifyjs.com](https://issues.vuetifyjs.com). The [contributing guide](https://0.vuetifyjs.com/introduction/contributing) covers local setup, and [Discord](https://community.vuetifyjs.com) is the place to discuss before you build.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Report an issue** — [issues.vuetifyjs.com](https://issues.vuetifyjs.com)\n- **Contributing** — [Contributing guide](https://0.vuetifyjs.com/introduction/contributing)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Documentation is at [0.vuetifyjs.com](https://0.vuetifyjs.com); source is on [GitHub](https://github.com/vuetifyjs/0).*\n","frontmatter":{"layout":"blog","meta":{"title":"Announcing Vuetify0 1.0","description":"Vuetify0 1.0 — a headless meta-framework for Vue 3. Its foundation is now locked under semver — the logic layer plus a stable component spine.","keywords":"Vuetify0 1.0, Vuetify0 v1, headless Vue, meta-framework, composables, WAI-ARIA, semver"}},"isInternal":false,"tokens":4346,"sizeBytes":17757},{"name":"april-2025-update.md","path":"packages/docs/src/pages/en/blog/april-2025-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/april-2025-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: April 2025 Update\n description: April delivered tangible progress on MCP, the new theming engine, component refinements, docs, ESLint v4, and tooling across the Vuetify ecosystem.\n keywords: Vuetify April 2025, Model Context Protocol, Vuetify theming, ESLint flat config, Vuetify Playground, Tailwind integration\n---\n\n# April 2025 Update\n\nThis month is packed full of exciting updates and progress across the Vuetify ecosystem.\n\n---\n\n🖊️ John Leider • 📅 May 1st, 2025\n\n\n\n---\n\n## Building Momentum\n\nApril was a month of execution. Multiple long-standing features landed, foundational work for future flexibility accelerated, and we’re seeing clearer paths emerge around how Vuetify can scale—technically, visually, and in terms of contributor access.\n\nFrom labs promotions like VNumberInput and VSnackbarQueue, to the start of public-facing infrastructure like @vuetify/mcp, the team is pushing forward on all fronts. This kind of momentum is what sets up big things for the summer and fall—especially as we close in on shipping the new theming engine and continue to clean up performance bottlenecks.\n\n::: success\n\nCool example of the month: [VScrollSelect](https://play.vuetifyjs.com/playgrounds/CS5a9g) by [J-Sek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n- [Building Momentum](#building-momentum)\n - [Releases](#releases)\n - [MCP soon](#mcp-soon)\n - [Theming evolved](#theming-evolved)\n - [Performance improvements](#performance-improvements)\n- [Ecosystem updates](#ecosystem-updates)\n - [DX Efforts](#dx-efforts)\n - [Unvuetify](#unvuetify)\n - [Vuetify One teams](#vuetify-one-teams)\n - [Vuetify Play](#vuetify-play)\n - [Vuetify Issues](#vuetify-issues)\n- [The Road Ahead](#the-road-ahead)\n\n### Releases\n\nThe month of April saw the release of \"Andromeda\", the latest version of Vuetify, which includes a host of new features, improvements, and bug fixes. Most notably, [VNumberInput](https://vuetifyjs.com/components/number-inputs/) and [VSnackbarQueue](https://vuetifyjs.com/components/snackbar-queue/) were promoted from Labs to the Core framework! We've also followed up with several patch releases to address bugs and improve stability.\n\n![Hero image for andromeda release notes](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/andromeda-release-banner.png \"Andromeda release notes hero image\"){ height=150}\n\n**Details:**\n\n- [v3.8.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.0)\n- [v3.8.1](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.1)\n- [v3.8.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.2)\n- [v3.8.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.3)\n\n### MCP soon\n\nOne of the most exciting developments underway is the creation of [MCP: Model Context Protocol](https://modelcontextprotocol.io/introduction) and our efforts to provide LLMs with the most up to date framework information using it. The **@vuetify/mcp** package represents our attempt to improve how developers interact with Vuetify through AI and LLM-powered tools.\n\n![Image of outdated LLM response showing Vuetify 2](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/outdated-llm-responses.png \"Outdated LLM response\"){ height=500 }\n\nToday, developers often receive outdated or inaccurate help from AI chatbots because these models aren't trained on Vuetify’s latest updates and new innovations we're building. MCP is our answer to that problem.\n\nWe want to ensure developers have access to contextually accurate, up-to-date, and deeply integrated Vuetify tools, documentation, snippets and much more right when they need it.\n\n![Image of VSCode in Agent mode](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/vuetify-mcp.png \"VSCode agent querying vuetify-mcp\"){ height=550 }\n\nThis initiative won't just improve AI responses—it will fundamentally change how accessible and powerful Vuetify development can be.\n\nMCP is a major step towards empowering our community even further and we look forward to making the package public soon (like very soon).\n\n**Details:** [@vuetify/mcp](https://github.com/vuetifyjs/mcp)\n\n### Theming evolved\n\nAlongside MCP, another major focus has been Vuetify’s theming system. Our goal is to enable full customization of Vuetify — allowing developers to use any UI library, support long-awaited Material Design 3, and adapt the framework effortlessly to a wide variety of design systems. This includes things such as:\n\n- First party Tailwind integration.\n- Support for unstyled mode that includes only the necessary styles for components to function.\n- New and improved ways of interacting with the theme system.\n\nThe work happening right now is a foundational step toward that vision. We're targeting an October reveal for this theming overhaul and will be teasing more about it in the months ahead. Here's a small preview of the new theming API in action:\n\n```html\n\n\n\n```\n\nThese changes focus on expanding Vuetify’s flexibility, making it an even more powerful tool for projects of every scale and style.\n\n**Details:**\n\n- [PR#21244](https://github.com/vuetifyjs/vuetify/pull/21244)\n- [PR#21224](https://github.com/vuetifyjs/vuetify/pull/21224)\n- [Commit 3190331](https://github.com/vuetifyjs/vuetify/commit/3190331e70f42b7fdf4d7ee04f662b15eefde026)\n- [Commit abfdb77](https://github.com/vuetifyjs/vuetify/commit/abfdb777e0e00d4a1798f52d7e4c118e7409fcb9)\n\n### Performance improvements\n\nThis month, we focused on performance improvements across the board, including saving a bunch of overhead associated with computed caching and call frequency.\n\nFor those anticipating the release of [VTreeview](https://vuetifyjs.com/components/treeview), there has been movement on an [upstream](https://github.com/vuejs/babel-plugin-jsx/issues/712) issue that was bottlenecking performance. Once released, we will be able to wrap up the component and move it to the Core framework 🎉.\n\n**Details:**\n\n- [PR#21167](https://github.com/vuetifyjs/vuetify/pull/21167)\n- [Commit 8d798e3](https://github.com/vuetifyjs/vuetify/commit/8d798e36baf86f04eebf2828be0cffa0dc31053a)\n- [vue-macros#942](https://github.com/vue-macros/vue-macros/pull/942)\n\n## Ecosystem updates\n\nFrom the release of team subscriptions for Vuetify One, to major rewrites of tools like Vuetify Create and the modernized Vuetify Issues site, April was about refining the developer experience across the board. New tooling like @unvuetify is pushing boundaries with Nuxt and auto-import support, and MCP continues to bridge the gap between AI and accurate Vuetify usage.\n\n### DX efforts\n\nA major focus has been making Vuetify more accessible to developers at all levels.\n\n- **MCP**: Coding companion that provides contextually accurate, up-to-date, and deeply integrated Vuetify tools, documentation, snippets and much more right when you need it.\n- **Vuetify Create**: Multiple updates with improvements and planning for 3.0 representing a total rewrite of our project scaffolding tool.\n- **Labs Components**: Added auto-import support by default for labs components.\n- **Internationalization**: Expansion of translations including Spanish additions to the documentation.\n- **Modern ESLint Configuration**: Complete rewrite of our ESLint configuration with a functional approach, being rolled out across all repositories.\n\n**Details:**\n\n- [create/releases](https://github.com/vuetifyjs/create/releases)\n- [ESLint configuration](https://github.com/vuetifyjs/eslint-config-vuetify)\n- [Commit 98ef110](https://github.com/vuetifyjs/vuetify-loader/commit/98ef1106fb3875a5079d309986de61e12cd5683d)\n\n### Unvuetify\n\nThe motivation behind @unvuetify is simple: existing plugins aren’t keeping up with the evolving capabilities of Vue and Nuxt. Features like lazy hydration, auto-importing, and tree shaking are either missing or cumbersome in older tools.\n\nThis monorepo isn’t a hard replacement — you can still use vite-plugin-vuetify or webpack-plugin-vuetify if they suit your needs. But if you're working with Nuxt 3, Vue 3.5, or want more flexibility and performance, @unvuetify is built for you.\n\nCreated [@unvuetify](https://github.com/userquin/unvuetify-monorepo) repository to enable:\n\n- Vue Lazy Hydration support: ready to use Vue Lazy Hydration with Vuetify components and Nuxt 3/4.\n- Extensible: allow prefixing Vuetify components, directives and composables with Vuetify prefix.\n- VSCode directives suggestions.\n- Nuxt 3/4 utilities: drop a simple Nuxt module and it will auto-import all Vuetify components, directives and composables for you.\n- and more...\n\n**Details:**\n\n- [@unvuetify/shared](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/shared): utilities to resolve Vuetify components and directives\n- [@unvuetify/unimport-presets](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/unimport-presets): presets to auto-import Vuetify composables and directives\n- [@unvuetify/unplugin-vue-components-resolvers](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/unplugin-vue-components-resolvers): resolvers to auto-import Vuetify components and directives\n- [@unvuetify/vite-styles-plugin](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/styles-plugin): Vite plugin to load Vuetify sass/scss styles with Nuxt 3 SSR support\n- [@unvuetify/nuxt-utils](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/nuxt-utils): utilities to configure Vuetify composables, directives, components and styles in your Nuxt 3 application\n\n### Vuetify One teams\n\nWe have recently updated Vuetify One to support teams, which allows you to invite up to 25 members to collaborate on your Vuetify projects. This update is designed to share subscription benefits across your team.\n\n![Image of Vuetify One teams subscription panel](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/one-teams.png \"Vuetify One teams subscription panel\"){ height=400 }\n\nSubscribe by logging into Vuetify One (top right) and clicking on **Subscriptions**. If you have any issues or questions, please reach out to us on [Discord](https://community.vuetifyjs.com).\n\n**Details:** [PR#15](https://github.com/vuetifyjs/one/pull/15)\n\n### Vuetify Play\n\nOf the many changes coming to [Vuetify Play](https://play.vuetifyjs.com/), one of the longest requested features is finally here: **router support**! This means you can now create and share Vuetify Play projects that include Vue Router, allowing for more complex and interactive examples.\n\n![Image of Vuetify Play with router support](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/play-router.png \"Vuetify Play with router support\"){ height=250 }\n\nWe are also in the process of updating the entire Vuetify Play interface to be more intuitive and user-friendly. This includes a new design, improved navigation, and better organization of examples and components. We look forward to sharing more details in the coming months.\n\n**Details:**\n\n- [PR#7](https://github.com/vuetifyjs/play/pull/7)\n- [Commit 0e89a33](https://github.com/vuetifyjs/play/commit/0e89a334f241d440987908a456c205bed53e96d6)\n\n### Vuetify Issues\n\nWe are wrapping up the new [Vuetify Issue Generator](https://issues.vuetifyjs.com/), which will replace the current system (still on Vuetify v1.5!).\n\n\n\nThe new interface is faster, clearer, and built with Vuetify 3 from the ground up.\n\n## The Road Ahead\n\nMay is all about delivery. MCP will ship publicly, and early previews of the new theming system will start rolling out with documentation and migration guides. We're also beginning to lay the foundation for Vuetify 4. The focus is simple: ship real features, reduce friction, and keep moving fast.\n\nMore to come next month—stay tuned.\n","frontmatter":{"layout":"blog","meta":{"title":"April 2025 Update","description":"April delivered tangible progress on MCP, the new theming engine, component refinements, docs, ESLint v4, and tooling across the Vuetify ecosystem.","keywords":"Vuetify April 2025, Model Context Protocol, Vuetify theming, ESLint flat config, Vuetify Playground, Tailwind integration"}},"isInternal":false,"tokens":3206,"sizeBytes":12811},{"name":"april-2026-update.md","path":"packages/docs/src/pages/en/blog/april-2026-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/april-2026-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: April 2026 Update\n description: April shipped the Vuetify0 v1.0.0 public alpha — 46 headless components, 63 composables — plus 3 Vuetify patches, MCP v0.7.0, and ESLint 10 support.\n keywords: Vuetify April 2026, Vuetify0 v1.0.0 alpha, VTooltip cursor, VVideo controls, VNumberInput grouping, MCP playground tools, useTheme reactive\n---\n\n\n\n# April 2026 Update\n\n**Vuetify0 went public this month.** On April 7, v0 published its first 1.0 alpha alongside a [public announcement](/blog/announcing-vuetify0-alpha/) — 46 components, 63 composables, and a complete picture of where v0 fits in the next-generation stack. Two more alphas followed in the same month, the framework shipped three patches, and the MCP server gained playground and link tools.\n\n![Hero image for April update](https://cdn.vuetifyjs.com/docs/images/blog/april-2026-update/april-hero.png \"April hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 May 4th, 2026\n\n\n\n---\n\n## Going public\n\nApril was the alpha launch. **847 commits** across 14 active repositories, **52 merged PRs**, and **14 releases**, with [Vuetify0 v1.0.0-alpha.0](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.0) (April 7) at the center of it all. v0 alone shipped **756 commits** across four releases — v0.2.1, v1.0.0-alpha.0, v1.0.0-alpha.1, and v1.0.0-alpha.2 — culminating with reactive-by-default theming and locale, and with new headless Carousel, Image, NumberField, and Progress components. On the framework side, [J-Sek](https://github.com/J-Sek) drove most of April's 13 merged PRs alongside contributions from [userquin](https://github.com/userquin), [joatansampaio](https://github.com/joatansampaio), [12rambau](https://github.com/12rambau), [mueller-jens](https://github.com/mueller-jens), and [AriPerkkio](https://github.com/AriPerkkio). And the [Vuetify → Vuetify0 migration](https://vuetifyjs.com/blog/march-2026-update/) crossed its first finish line, with `display` now delegating to v0's `createBreakpoints`.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Spotlight: Vuetify0 Alpha](#vuetify0-alpha)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Vuetify MCP v0.7.0](#vuetify-mcp)\n* [Tooling Updates](#tooling-updates)\n* [Snips v2.0.0](#snips-v2)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [Product Updates](#product-updates)\n* [April 2026 Changelog](#april-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nApril shipped **14 releases across 6 repositories**. The framework patched twice (v4.0.5, v4.0.6) on the v4 line and once (v3.12.5) on the v3 line. v0 published four — including its first **v1.0.0-alpha.0** on April 7. The MCP server hit **v0.7.0**, ESLint Config landed four (**v4.5.0** through **v4.6.2**) including ESLint 10 support, the UnoCSS preset shipped **v0.3.0**, and the codemods CLI shipped **v1.0.6**.\n\n\n\n### Key Improvements\n\n* **[Vuetify0 v1.0.0-alpha.0](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.0)** — public alpha with 46 components and 63 composables ([announcement](/blog/announcing-vuetify0-alpha/))\n* **[VTooltip](/components/tooltips/)** — `target=\"cursor\"` now works for hoverable tooltips (pending v4.0.7)\n* **[VVideo](/components/videos/)** — Standalone `VVideoControls` component and progress bar shown by default (v4.0.6 Labs)\n* **[VPagination](/components/paginations/) / [VDataTableFooter](/components/data-tables/basics/)** — Ability to hide the last page (pending v4.0.7)\n* **[VNumberInput](/components/number-inputs/)** — `grouping` prop for thousands separator (pending v4.0.7)\n* **[VExpansionPanels](/components/expansion-panels/)** — Additional customization props (pending v4.0.7)\n* **display** — Migrated to v0's `createBreakpoints` (pending v4.0.7)\n* **[Vuetify MCP v0.7.0](https://github.com/vuetifyjs/mcp/releases/tag/v0.7.0)** — Playground and link CRUD tools\n\nView the complete list of changes in the [Full Changelog](#april-2026-changelog).\n\n**Details:**\n\n* [v4.0.6](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.6)\n* [v4.0.5](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.5)\n* [v3.12.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.5)\n* [Vuetify0 v1.0.0-alpha.2](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.2)\n* [Vuetify0 v1.0.0-alpha.1](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.1)\n* [Vuetify0 v1.0.0-alpha.0](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.0)\n\n---\n\n## Spotlight: Vuetify0 Alpha { #vuetify0-alpha }\n\n\n\n
\n\nAfter almost two years of building, **Vuetify0 published its first 1.0 alpha on April 7**. The release ships **46 components** and **63 composables** of headless Vue primitives — 100% TypeScript, zero styles, and built from the ground up to power custom UI libraries, design systems, and the Vuetify ecosystem itself.\n\nThe alpha was [announced in a dedicated post](/blog/announcing-vuetify0-alpha/) the same day, covering what v0 is, who it's for, what it ships with, and how it fits into the stack underneath the upcoming **Vuetify 5**, design systems built on Paper, and the existing **Vuetify 4** framework.\n\n**Maturity at alpha:**\n\n| Maturity | Components | Composables | What it means |\n|----------|------------|-------------|----------------------------|\n| Stable | 0 | 6 | API locked, production-ready |\n| Preview | 34 | 54 | Implemented, API may change |\n| Draft | 13 | 3 | Planned or in early development |\n\n**What followed:** Two more alpha releases shipped in the same month. **v1.0.0-alpha.1** (April 21) added the headless **Carousel** and **Image** components plus security-audit fixes across foundational composables. **v1.0.0-alpha.2** (April 28) made `useTheme`, `useLocale`, and `useFeatures` reactive-by-default, widened `SplitterPanel` size props, and codified the [reactive-default convention](https://0.vuetifyjs.com/guide/fundamentals/reactivity/) for plugins.\n\n**Details:**\n\n* [Announcing the Vuetify0 Alpha](/blog/announcing-vuetify0-alpha/)\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v1.0.0-alpha.2 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.2)\n* [v1.0.0-alpha.1 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.1)\n* [v1.0.0-alpha.0 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.0)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nApril merged **13 PRs** across the framework, with most landing after v4.0.6 and pending the next release. The headline pattern: feature work picked back up after March's stabilization sprint, with new props on existing components and a first cross-cut from v0 into Vuetify 4 mainline.\n\n### New Features\n\n**[VTooltip](/components/tooltips/)** — `target=\"cursor\"` now works for hoverable tooltips, anchoring the tooltip to the pointer position while still allowing the user to mouse onto the tooltip itself ([#22728](https://github.com/vuetifyjs/vuetify/pull/22728)).\n\n**[VExpansionPanels](/components/expansion-panels/)** — Additional customization props for finer control over the panel surface and transitions ([#22723](https://github.com/vuetifyjs/vuetify/pull/22723)).\n\n**[VPagination](/components/paginations/) and [VDataTableFooter](/components/data-tables/basics/)** — Ability to hide the last page in pagination controls, contributed by [userquin](https://github.com/userquin) ([#22788](https://github.com/vuetifyjs/vuetify/pull/22788)).\n\n**[VNumberInput](/components/number-inputs/)** — New `grouping` prop adds locale-aware thousands separators to numeric input ([#22134](https://github.com/vuetifyjs/vuetify/pull/22134)).\n\n**[VVideo](/components/videos/)** — Three Labs improvements landed in v4.0.6: `VVideoControls` is now usable as a standalone component, the progress bar is shown by default, and a fix prevents the volume tooltip from obstructing the slider.\n\n**display → v0** — The first internal Vuetify composable migrated to its v0 equivalent. The `display` plugin now delegates breakpoint management to v0's `createBreakpoints` ([#22710](https://github.com/vuetifyjs/vuetify/pull/22710)). This is the first cross-cut from v0 into Vuetify 4 mainline — the bridge between today's framework and tomorrow's headless layer.\n\n**Details:**\n\n* [VTooltip cursor target PR#22728](https://github.com/vuetifyjs/vuetify/pull/22728)\n* [VExpansionPanels customization PR#22723](https://github.com/vuetifyjs/vuetify/pull/22723)\n* [VPagination/VDataTableFooter hide-last-page PR#22788](https://github.com/vuetifyjs/vuetify/pull/22788)\n* [VNumberInput grouping PR#22134](https://github.com/vuetifyjs/vuetify/pull/22134)\n* [display → v0 createBreakpoints PR#22710](https://github.com/vuetifyjs/vuetify/pull/22710)\n\n### Bug Fixes\n\n| Component | Fix | Version | PR |\n|-----------|-----|---------|----|\n| **useActivator** | Avoid closing a hovered menu when its tooltip hides | v3.12.5 / v4.0.5 | — |\n| **SSR** | Avoid errors when rendering with the latest Vue | v4.0.5 | [#22764](https://github.com/vuetifyjs/vuetify/pull/22764) |\n| **types** | Support `noUncheckedSideEffectImports` | v4.0.5 | [#22766](https://github.com/vuetifyjs/vuetify/issues/22766) |\n| **VSnackbar** | Avoid blocking navigation | v4.0.5 | — |\n| **VPie** | Shrink hovered slices back on `mouseleave` | v4.0.5 Labs | — |\n| **VBadge** | Do not accept clicks within disabled elements | v4.0.6 | — |\n| **VField** | Pass color to `icon-color` when `glow` prop is true | v4.0.6 | [#21547](https://github.com/vuetifyjs/vuetify/pull/21547) |\n| **VOtpInput** | Remove stray semicolon from sass file | v4.0.6 | — |\n| **VSelectionControl** | `readonly` should not suppress `focus-visible` | v4.0.6 | [#22527](https://github.com/vuetifyjs/vuetify/pull/22527) |\n| **VVideo** | Avoid tooltip obstructing volume slider | v4.0.6 Labs | — |\n| **VSnackbarQueue** | Avoid stale z-index | v4.0.7 | [#22796](https://github.com/vuetifyjs/vuetify/pull/22796) |\n| **VField** | Correct baseline alignment | v4.0.7 | [#22812](https://github.com/vuetifyjs/vuetify/pull/22812) |\n| **VCheckbox** | Align indeterminate opacity and color with MD3 | v4.0.7 | [#22804](https://github.com/vuetifyjs/vuetify/pull/22804) |\n| **VProgressLinear** | Correct calculation for filled chunks | v4.0.7 | — |\n| **VBtnToggle** | Correct background when active | v4.0.7 | — |\n| **VList** | Invisibly focus first element after open | v4.0.7 | — |\n| **VSelects** | Merge `menuProps.contentClass` correctly | v4.0.7 | — |\n\n**Details:**\n\n* [VSelectionControl focus-visible PR#22527](https://github.com/vuetifyjs/vuetify/pull/22527)\n* [VField glow color PR#21547](https://github.com/vuetifyjs/vuetify/pull/21547)\n* [VSnackbarQueue z-index PR#22796](https://github.com/vuetifyjs/vuetify/pull/22796)\n* [VField baseline PR#22812](https://github.com/vuetifyjs/vuetify/pull/22812)\n* [VCheckbox MD3 alignment PR#22804](https://github.com/vuetifyjs/vuetify/pull/22804)\n\n### In Development\n\nA handful of significant features moved forward in April but remain open as the month closed:\n\n#### VHighlight\n\n[J-Sek](https://github.com/J-Sek) opened [#22817](https://github.com/vuetifyjs/vuetify/pull/22817) for **VHighlight**, a new component for highlighting matches in text — useful for search results, filtering, and command palettes. A complementary `toHighlight` utility is also being added in v0 ([#222](https://github.com/vuetifyjs/0/pull/222)).\n\n#### VSparkline Markers and Tooltips\n\n[#22748](https://github.com/vuetifyjs/vuetify/pull/22748) — Interactive markers and hover tooltips for the data visualization component, carrying over from March.\n\n#### VSlider Pill Variant\n\n[#22699](https://github.com/vuetifyjs/vuetify/pull/22699) — A `pill` variant for VSlider aligned with Material Design 3's rounded slider track design.\n\n#### Solar Iconset\n\n[#22706](https://github.com/vuetifyjs/vuetify/pull/22706) — Adding the Solar iconset via UnoCSS, expanding the icon options shipped through the iconify ecosystem.\n\n#### VOverlay GPU Compositing\n\n[#22800](https://github.com/vuetifyjs/vuetify/pull/22800) — Promote `VOverlay` to a GPU compositing layer to prevent flicker on WebKit, contributed by [e1berd](https://github.com/e1berd).\n\n#### Continued v0 Migration\n\nThe Vuetify → Vuetify0 refactor continues with the remaining core systems open for review:\n\n* **Theme** — Migrate the entire theme system to v0 ([#22765](https://github.com/vuetifyjs/vuetify/pull/22765))\n* **Locale/RTL** — Delegate locale and RTL management to v0 ([#22753](https://github.com/vuetifyjs/vuetify/pull/22753))\n* **Date** — Delegate to v0's `createDate` runtime ([#22768](https://github.com/vuetifyjs/vuetify/pull/22768))\n\nThe display migration ([#22710](https://github.com/vuetifyjs/vuetify/pull/22710)) merged in April and is the first of these to land.\n\n**Details:**\n\n* [VHighlight PR#22817](https://github.com/vuetifyjs/vuetify/pull/22817)\n* [VSparkline markers PR#22748](https://github.com/vuetifyjs/vuetify/pull/22748)\n* [VSlider pill PR#22699](https://github.com/vuetifyjs/vuetify/pull/22699)\n* [Solar iconset PR#22706](https://github.com/vuetifyjs/vuetify/pull/22706)\n* [VOverlay GPU compositing PR#22800](https://github.com/vuetifyjs/vuetify/pull/22800)\n* [Theme migration PR#22765](https://github.com/vuetifyjs/vuetify/pull/22765)\n* [Locale/RTL migration PR#22753](https://github.com/vuetifyjs/vuetify/pull/22753)\n* [Date migration PR#22768](https://github.com/vuetifyjs/vuetify/pull/22768)\n\n---\n\n## Vuetify MCP v0.7.0 { #vuetify-mcp }\n\n\n\n
\n\nThe MCP server released **v0.7.0** on April 28, shipping the [playground CRUD tools](/blog/march-2026-update/#mcp-playground-crud) that merged in late March alongside a new set of link tools.\n\n### What's New { #mcp-whats-new }\n\n**Playground CRUD** — 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 ([PR#19](https://github.com/vuetifyjs/mcp/pull/19)).\n\n**Link Tools** — A new set of tools for managing short links via [vtfy.link](https://vtfy.link). Generate, list, and update branded short URLs from inside the editor — useful for sharing playground demos, doc references, and AI-generated examples in support threads ([PR#20](https://github.com/vuetifyjs/mcp/pull/20)).\n\n**v0 Alpha Sync** — Composables, components, and exports synced for `v1.0.0-alpha.0`, so any AI assistant using the MCP server now generates accurate code against the latest v0 alpha API surface.\n\n### Setup\n\nInstall with the Vuetify CLI:\n\n::: tabs\n\n```bash [pnpm]\npnpm dlx @vuetify/cli add mcp\n```\n\n```bash [npm]\nnpx @vuetify/cli add mcp\n```\n\n```bash [yarn]\nyarn dlx @vuetify/cli add mcp\n```\n\n```bash [bun]\nbunx @vuetify/cli add mcp\n```\n\n:::\n\nOr configure manually:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [v0.7.0 Release](https://github.com/vuetifyjs/mcp/releases/tag/v0.7.0)\n* [Link Tools PR#20](https://github.com/vuetifyjs/mcp/pull/20)\n* [Playground CRUD PR#19](https://github.com/vuetifyjs/mcp/pull/19)\n\n---\n\n## Tooling Updates { #tooling-updates }\n\n### ESLint Config\n\n\n\n
\n\nThe shared ESLint config — used internally across the ecosystem and by teams that want Vuetify's house style out of the box — shipped **four releases** in April.\n\n**v4.5.0** — Added support for **ESLint 10**, matching the ecosystem-wide bump that began in March's eslint-plugin-vuetify v2.7.0 release.\n\n**v4.6.0** — Introduces a new Vue rule that **enforces blank lines between multiline sibling tags**, surfacing inconsistent template formatting that the autoformatter would otherwise leave alone.\n\n**v4.6.1, v4.6.2** — Refinement releases. v4.6.1 switched the new rule to use the `:multi-line` pseudo-class so single-line siblings aren't required to have separators, and v4.6.2 bumped dependencies.\n\n**Details:**\n\n* [ESLint Config GitHub Repository](https://github.com/vuetifyjs/eslint-config-vuetify)\n* [v4.6.2](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.6.2)\n* [v4.6.0](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.6.0)\n* [v4.5.0](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.5.0)\n\n### UnoCSS Preset\n\nThe UnoCSS preset shipped **v0.3.0** on April 23, addressing two issues from teams adopting the v4 + UnoCSS stack:\n\n* **Drop grid styles** — The grid utility variants no longer ship from the preset, since v4's CSS layers and UnoCSS Wind4 cover the same ground without conflicts ([#14](https://github.com/vuetifyjs/unocss-preset-vuetify/pull/14)).\n* **Breakpoint variant scoping** — Breakpoint variants now apply only to the rules owned by the preset, preventing accidental side effects on user rules ([#17](https://github.com/vuetifyjs/unocss-preset-vuetify/pull/17)).\n\nBoth fixes were authored by [J-Sek](https://github.com/J-Sek), and the preset is now the recommended companion for [Vuetify 4 + UnoCSS](https://vuetifyjs.com/blog/building-with-nuxt-and-unocss/) projects.\n\n**Details:**\n\n* [UnoCSS Preset GitHub Repository](https://github.com/vuetifyjs/unocss-preset-vuetify)\n* [v0.3.0 Release](https://github.com/vuetifyjs/unocss-preset-vuetify/releases/tag/v0.3.0)\n\n### Vuetify Codemods\n\nThe migration codemod CLI shipped **v1.0.6** on April 28 with a single but impactful fix: typography migrations now **preserve original font sizes** rather than mapping every legacy class to MD3 defaults. This addresses a regression in the v3-to-v4 migration tooling that surfaced as teams ran the codemod against larger codebases.\n\n**Details:**\n\n* [Vuetify Codemods GitHub Repository](https://github.com/vuetifyjs/vuetify-codemods)\n* [v1.0.6](https://github.com/vuetifyjs/vuetify-codemods/releases/tag/v1.0.6)\n\n---\n\n## Snips v2.0.0 { #snips-v2 }\n\n\n\n
\n\n**[Vuetify Snips](https://snips.vuetifyjs.com/)** shipped **v2.0.0** on April 23, completing its **Vuetify 3 → 4 migration**. Snips is now running on the v4 stack alongside the rest of the property line.\n\n::: success\n\n**Save 40% on Snips v4** — use code `SNIPS40` at checkout to celebrate the v4 release.\n\n:::\n\n**Details:**\n\n* [Vuetify Snips](https://snips.vuetifyjs.com/)\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\nApril was Vuetify0's most productive month yet — **756 commits**, **25 merged PRs**, and **4 releases** culminating in the public alpha. Beyond the alpha launch itself, the headline shifts were a wave of new components, a foundational change in plugin reactivity, and a security-audit pass across the core composables.\n\n\n\n### New Components\n\nSix new headless components were merged into v0 during April, each with a composable layer and compound component pattern:\n\n* **[Carousel](https://0.vuetifyjs.com/components/semantic/carousel/)** — Swipeable slide container with horizontal and vertical orientations, shift+wheel discrete navigation, and auto-mirrored scroll padding ([#190](https://github.com/vuetifyjs/0/pull/190), in v1.0.0-alpha.1)\n* **[Image](https://0.vuetifyjs.com/components/semantic/image/)** — Headless image component with lazy-loading and a dedicated `useImage` composable ([#191](https://github.com/vuetifyjs/0/pull/191), in v1.0.0-alpha.1)\n* **[NumberField](https://0.vuetifyjs.com/components/forms/number-field/)** — Numeric input with stepper, min/max, and locale-aware grouping ([#183](https://github.com/vuetifyjs/0/pull/183), in v0.2.1)\n* **[Progress](https://0.vuetifyjs.com/components/semantic/progress/)** — Progress indicator with indeterminate, determinate, and buffer states ([#180](https://github.com/vuetifyjs/0/pull/180), in v0.2.1)\n* **[Toggle](https://0.vuetifyjs.com/components/actions/toggle/)** — Dual-mode toggle button with group support (in v0.2.1)\n* **[Overflow](https://0.vuetifyjs.com/components/semantic/overflow/)** — Container that detects overflow and exposes scroll state to children ([#220](https://github.com/vuetifyjs/0/pull/220), pending v1.0.0-alpha.3)\n\nPlus **[AlertDialog](https://0.vuetifyjs.com/components/disclosure/alert-dialog/)**, **[Collapsible](https://0.vuetifyjs.com/components/disclosure/collapsible/)**, **[Portal](https://0.vuetifyjs.com/components/primitives/portal/)**, and **[Presence](https://0.vuetifyjs.com/components/primitives/presence/)** all landed alongside the alpha in v0.2.1.\n\n### New Composables\n\n* **[createNumeric](https://0.vuetifyjs.com/composables/forms/create-numeric/) / [createInput](https://0.vuetifyjs.com/composables/forms/create-input/)** — Foundational input composables that NumberField, Slider, and other form primitives now build on ([#181](https://github.com/vuetifyjs/0/pull/181))\n* **[useImage](https://0.vuetifyjs.com/composables/system/use-image/)** — Image loading state, srcset, and intersection-based lazy loading ([#191](https://github.com/vuetifyjs/0/pull/191))\n* **[createRating](https://0.vuetifyjs.com/composables/forms/create-rating/)** — Rating composable with compound component pattern\n* **[usePresence](https://0.vuetifyjs.com/composables/system/use-presence/)** — Mount/unmount lifecycle helper for transitions\n\n### Reactive-Default Plugins\n\nThe biggest architectural change of the month: **`useTheme`, `useLocale`, and `useFeatures` now use a reactive registry by default** ([#210](https://github.com/vuetifyjs/0/pull/210), [#211](https://github.com/vuetifyjs/0/pull/211)). This eliminates the workarounds previously needed to keep theme colors and feature flags reactive after switching, and the convention is now [codified in the docs](https://0.vuetifyjs.com/guide/fundamentals/reactivity/) for all plugin authors ([#213](https://github.com/vuetifyjs/0/pull/213)).\n\nA companion fix in `createRegistry` skips the `values`/`keys`/`entries` cache when the registry is reactive, so consumers get fresh reads every access ([#209](https://github.com/vuetifyjs/0/pull/209)).\n\n### Security and Performance\n\n* **Security audit** — Foundational composables received a sweep of security-audit fixes ([30cc5e1](https://github.com/vuetifyjs/0/commit/30cc5e1118187c412d416d1ef2c6c7c2d73349f2)), including `useTheme` sanitizing theme names and color values in CSS generation.\n* **Tree-shaking** — Module-level allocations annotated with `/* @__PURE__ */` and exports marked with `/* #__NO_SIDE_EFFECTS__ */` so bundlers can eliminate unused composables more aggressively.\n* **Test infrastructure** — Test coverage raised to **97.2%**, vitest pool switched to vmThreads, and tsdown + web-types generation now run in parallel.\n\n```html { resource=\"src/components/Gallery.vue\" }\n\n\n\n```\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n### Coming Next in v0\n\n* **[useDragDrop](https://github.com/vuetifyjs/0/pull/225)** — Headless drag-and-drop primitive\n* **[Tooltip](https://github.com/vuetifyjs/0/pull/226)** — Headless tooltip with region coordination\n* **[Tour](https://github.com/vuetifyjs/0/pull/178)** — Tour component and `useTour` composable for product walkthroughs\n* **[createDataGrid](https://github.com/vuetifyjs/0/pull/174)** — Data grid composable for advanced table layouts\n* **[Emerald Paper Design System](https://github.com/vuetifyjs/0/pull/167)** — Phase 0 of the first commercial design system built on Paper\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v1.0.0-alpha.2 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.2)\n* [Carousel PR#190](https://github.com/vuetifyjs/0/pull/190)\n* [Image PR#191](https://github.com/vuetifyjs/0/pull/191)\n* [Overflow PR#220](https://github.com/vuetifyjs/0/pull/220)\n* [NumberField PR#183](https://github.com/vuetifyjs/0/pull/183)\n* [Reactive-default useTheme PR#210](https://github.com/vuetifyjs/0/pull/210)\n* [Reactive-default useLocale/useFeatures PR#211](https://github.com/vuetifyjs/0/pull/211)\n\n---\n\n## Product Updates { #product-updates }\n\n### DevKey\n\n\n\n
\n\n**[DevKey](https://github.com/vuetifyjs/devkey)** is a small Vuetify0 demo project — the same reference app used as the [implementation walkthrough in the alpha announcement](/blog/announcing-vuetify0-alpha/). It's not a real product; the public repo exists so anyone learning v0 can read along and see how the headless primitives compose into a credible-looking app shell.\n\nApril brought a brand pass to make the demo presentable: a Coolify deploy workflow, a Geist-based wordmark, a `DkLogo` component, an asset-generation script for favicons and og images, and branded landing, login, and dashboard pages.\n\n![DevKey demo](https://cdn.vuetifyjs.com/docs/images/blog/april-2026-update/devkey.png \"DevKey — Vuetify0 demo project\")\n\n**Details:**\n\n* [DevKey GitHub Repository](https://github.com/vuetifyjs/devkey)\n* [Implementation walkthrough (in the alpha announcement)](/blog/announcing-vuetify0-alpha/)\n\n### Vuetify One\n\n\n\n
\n\n**[Vuetify One](https://one.vuetifyjs.com/)** received a **v4.0.6 update** alongside two CSS layer ordering fixes that resolved a class of issues where utility classes were being overridden by the framework reset. The same fix pattern was applied across **issues** (the issue triage app) earlier in the month, completing the v4 migration cleanup that began in February.\n\n---\n\n## April 2026 Changelog { #april-2026-changelog }\n\nThe following section provides an overview of the changes made in April 2026, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* v3.12.5 / v4.0.5: SSR compatibility with the latest Vue, useActivator menu/tooltip fix, VSnackbar navigation fix, VPie hover Labs fix\n* v4.0.6: VBadge clicks within disabled, VField glow icon-color, VSelectionControl focus-visible, VVideo standalone controls and progress-bar default\n* Pending v4.0.7: VTooltip cursor target, VExpansionPanels customization, VPagination/VDataTableFooter hide-last-page, VNumberInput grouping, VField baseline, VCheckbox MD3 alignment, display → v0 migration\n\n**Expand** this section to see the detailed changelog for April 2026:\n\n
\nApril 2026 Full Changelog\n\n### v3.12.5 (2026-04-02)\n\n**:wrench: Bug Fixes**\n\n* **useActivator:** avoid closing hovered menu when tooltip hides ([71d657b](https://github.com/vuetifyjs/vuetify/commit/71d657b))\n\n---\n\n### v4.0.5 (2026-04-02)\n\n**:wrench: Bug Fixes**\n\n* **SSR:** avoid errors when rendering with latest Vue ([#22764](https://github.com/vuetifyjs/vuetify/issues/22764)) ([ecbe030](https://github.com/vuetifyjs/vuetify/commit/ecbe030)), closes [#22762](https://github.com/vuetifyjs/vuetify/issues/22762)\n* **types:** support noUncheckedSideEffectImports ([2098fb1](https://github.com/vuetifyjs/vuetify/commit/2098fb1)), closes [#22766](https://github.com/vuetifyjs/vuetify/issues/22766)\n* **useActivator:** avoid closing hovered menu when tooltip hides ([131e659](https://github.com/vuetifyjs/vuetify/commit/131e659)), closes [#22759](https://github.com/vuetifyjs/vuetify/issues/22759)\n* **VSnackbar:** avoid blocking navigation ([143ceaa](https://github.com/vuetifyjs/vuetify/commit/143ceaa)), closes [#18283](https://github.com/vuetifyjs/vuetify/issues/18283)\n\n**:test_tube: Labs**\n\n* **VPie:** shrink back hovered slices on mouseleave ([1893748](https://github.com/vuetifyjs/vuetify/commit/1893748))\n\n---\n\n### v4.0.6 (2026-04-22)\n\n**:wrench: Bug Fixes**\n\n* **VBadge:** do not accept clicks within disabled elements ([996cd6e](https://github.com/vuetifyjs/vuetify/commit/996cd6e)), closes [#22172](https://github.com/vuetifyjs/vuetify/issues/22172)\n* **VField:** pass color to icon-color if glow prop is true ([#21547](https://github.com/vuetifyjs/vuetify/issues/21547)) ([10125b7](https://github.com/vuetifyjs/vuetify/commit/10125b7)), closes [#21388](https://github.com/vuetifyjs/vuetify/issues/21388)\n* **VOtpInput:** remove semicolon from sass file ([bf53f9e](https://github.com/vuetifyjs/vuetify/commit/bf53f9e)), closes [#22798](https://github.com/vuetifyjs/vuetify/issues/22798)\n* **VSelectionControl:** readonly should not suppress focus-visible ([#22527](https://github.com/vuetifyjs/vuetify/issues/22527)) ([ce234a8](https://github.com/vuetifyjs/vuetify/commit/ce234a8)), closes [#22513](https://github.com/vuetifyjs/vuetify/issues/22513)\n\n**:test_tube: Labs**\n\n* **VVideo:** avoid tooltip obstructing volume slider ([add2a7e](https://github.com/vuetifyjs/vuetify/commit/add2a7e))\n* **VVideo:** support VVideoControls as standalone component ([aaf9cf5](https://github.com/vuetifyjs/vuetify/commit/aaf9cf5)), closes [#22529](https://github.com/vuetifyjs/vuetify/issues/22529)\n* **VVideo:** show progress bar by default ([1be0091](https://github.com/vuetifyjs/vuetify/commit/1be0091))\n\n
\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nMay continues on three fronts. **Vuetify4** has a queue of merged PRs awaiting v4.0.7 — VTooltip cursor target, VExpansionPanels customization, VPagination/VDataTableFooter hide-last-page, VNumberInput grouping, the display → v0 migration, and a stack of fixes from J-Sek. **Vuetify0** has v1.0.0-alpha.3 work in flight, including useDragDrop, the headless Tooltip, the Tour component, createDataGrid, and the first phase of the **Emerald Paper Design System**. And the **theme**, **locale**, and **date** v0 migrations all have open PRs in vuetify ready to follow display through to merge.\n\n* The [Vuetify0 alpha](/blog/announcing-vuetify0-alpha/) is live — try it in a new project or via [v0play](https://v0play.vuetifyjs.com)\n* The [Vuetify MCP server](https://github.com/vuetifyjs/mcp) now ships playground and link tools for [Vuetify One](/one/) subscribers — manage demos and short links from your editor\n\n::: error\n\n**Vuetify needs your support.** OpenCollective funds are exhausted and we're currently unable to compensate contributors for ongoing work on the framework and ecosystem tools. If your team relies on Vuetify, please consider sponsoring us via [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution keeps Vuetify shipping.\n\n:::\n\nVuetify is and always will be free and open source. If your team builds on the framework, the v0 alpha, the MCP, the CLI, the Nuxt module, the ESLint plugin, or any of the design systems coming behind them, your support directly funds continued development. [Vuetify One](https://one.vuetifyjs.com/) and [GitHub Sponsors](https://github.com/sponsors/johnleider) are the most direct ways to help.\n\nThank you for being part of the Vuetify community. See you in May!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","frontmatter":{"layout":"blog","meta":{"title":"April 2026 Update","description":"April shipped the Vuetify0 v1.0.0 public alpha — 46 headless components, 63 composables — plus 3 Vuetify patches, MCP v0.7.0, and ESLint 10 support.","keywords":"Vuetify April 2026, Vuetify0 v1.0.0 alpha, VTooltip cursor, VVideo controls, VNumberInput grouping, MCP playground tools, useTheme reactive"}},"isInternal":false,"tokens":10060,"sizeBytes":34992},{"name":"august-2025-update.md","path":"packages/docs/src/pages/en/blog/august-2025-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/august-2025-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: August 2025 Update\n description: August prepares the Vuetify0 pre-alpha, launches the redesigned issues page, and continues delivering powerful components and improvements.\n keywords: Vuetify August 2025, Vuetify0, v0 pre-alpha, VEditor, issues page redesign, theming webinar, performance optimization\n---\n\n# August 2025 Update\n\nWelcome to our August update! This month marks a pivotal moment in Vuetify's evolution as we prepare to release the pre-alpha of Vuetify0, launch our redesigned issues page, and continue delivering powerful components and improvements.\n\n![Hero image for August update](https://cdn.vuetifyjs.com/docs/images/blog/august-2025-update/august-hero.png \"August hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 September 9th, 2025\n\n\n\n---\n\n## From Zero\n\nVuetify0 reached pre-alpha status this month, delivering the first public release of our meta-framework for UI library development. The release includes foundational composables for registration and selection, plus core plugins for breakpoints, hydration, locale management, storage, and theming. These framework-agnostic tools represent the extracted intelligence that powers Vuetify, now available as standalone packages for any development environment.\n\nEcosystem improvements continued throughout August with significant team-community collaboration driving advances in foundational architecture, component refinements, and developer experience enhancements. The 87 pull requests merged this month reflect ongoing contributions that strengthen not just Vuetify0, but the entire ecosystem. This pre-alpha milestone sets the foundation for broader adoption while maintaining our commitment to developer productivity and framework flexibility.\n\n::: success\n\nCool example of the month: [VVideo Card](https://play.vuetifyjs.com/playgrounds/-10f7g) by [Vuetify](https://github.com/vuetifyjs)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n* [\"Mastering Vuetify Theming\" Webinar Recap](#mastering-vuetify-theming-webinar-recap)\n* [Vuetify0 in Pre-Alpha](#vuetify0-in-pre-alpha)\n* [Framework Updates](#framework-updates)\n* [Ecosystem Spotlight: Vuetify Issues](#ecosystem-spotlight-vuetify-issues)\n* [Free Premium Themes](#free-premium-themes)\n* [Building the Future](#building-the-future)\n\n---\n\n## Releases\n\nAugust focused on general component stability and bug fixes. View the complete list of changes in the [Full Changelog](#august-2025-changelog).\n\n**Details:**\n\n* [v3.9.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.4)\n* [v3.9.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.5)\n* [v3.9.6](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.6)\n\n## \"Mastering Vuetify Theming\" Webinar Recap { #mastering-vuetify-theming-webinar-recap }\n\nOn August 27th, we hosted our second community webinar: **\"Mastering Vuetify's Theming Engine\"**. Following the success of July's migration webinar, this session dove deep into one of Vuetify's most powerful features.\n\n### What We Covered\n\n* **Theme Architecture**: Understanding how Vuetify's theming system works under the hood\n* **Custom Theme Creation**: Step-by-step guide to building professional themes\n* **Dynamic Theming**: Implementing runtime theme switching and user preferences\n* **Performance Optimization**: Best practices for theme efficiency\n* **Advanced Techniques**: CSS variables, theme inheritance, and component-specific theming\n\n### Community Response\n\nThe turnout exceeded our expectations, with developers from around the world joining to level up their theming skills. The Q&A session revealed common challenges that we're already addressing in our documentation and tooling improvements.\n\n### Recording\n\nWe have the event recorded and are working on what the process looks like to bring it to you. More than likely will end up on our [YouTube Channel](https://www.youtube.com/@vuetifyjs), make sure to subscribe if you haven't already.\n\n### Upcoming Webinar: \"Performance Crisis\"\n\nBased on your feedback, our September webinar will tackle one of the most requested topics: **\"Performance Crisis: Slash Your Bundle Size\"**. This session will show you how to dramatically reduce your Vuetify application's footprint through:\n\n* Advanced tree-shaking techniques\n* Component lazy loading strategies\n* Build optimization configurations\n* Real-world case studies with measurable results\n\n![Webinar highlights](https://cdn.vuetifyjs.com/docs/images/blog/august-2025-update/webinar.png \"Performance Crisis Webinar\"){ height=135 }\n\n**Details:**\n\n* Tuesday, September 30th at 9:00 AM CST\n* [Performance Crisis Sign-up](https://discord.gg/vuetify-340160225338195969?event=1414654608541749308)\n\n## Vuetify0 in Pre-Alpha\n\nIf you missed my initial mentions of it, [Vuetify0](https://0.vuetifyjs.com/) is a **meta framework** for building UI libraries. We've distilled the core of Vuetify into a collection of highly optimized, framework-agnostic composables. This means the power that drives Vuetify—its layout system, theming engine, localization setup, and component logic—will be available as a standalone package.\n\n**Modern Development Experience**: Built from the ground up for Vue 3, TypeScript, and modern build tools, v0 embraces the latest web platform features while maintaining broad compatibility.\n\n### What to Expect in the Pre-Alpha\n\nThe initial Vuetify0 release will focus on the foundational pillars of the framework. Some pages are still receiving their initial content so please pardon our dust. Here's what you'll be able to explore:\n\n**Composables:**\n\n* **Foundational** composables are the backbone of Vuetify0 and are the basic building blocks for creating a UI library.\n* **Registration** composables are the foundational pieces for selection and tokenization.\n* **Selection** composables serve as the core logic for managing selectable items, including single and multiple selection modes.\n* **Plugins**: [Breakpoints](https://0.vuetifyjs.com/composables/plugin/use-breakpoints), [Hydration](https://0.vuetifyjs.com/composables/plugin/use-hydration), [Locale](https://0.vuetifyjs.com/composables/plugin/use-locale), [Storage](https://0.vuetifyjs.com/composables/plugin/use-storage), and [Theme](https://0.vuetifyjs.com/composables/plugin/use-theme) plugins to manage global application state.\n\n::: info\n\nIf you're wondering how Vuetify0 will affect you as a Vuetify user, the short answer is: it won't—at least not immediately.\n\n:::\n\nThe long-term plan is to incrementally integrate Vuetify0 composables into Vuetify over time, starting with new components and gradually refactoring existing ones. This approach allows us to enhance the framework's architecture without disrupting your current projects. If you're wondering how Vuetify0 will affect you as a Vuetify user, the short answer is: it won't—at least not immediately. What it *will* do is open the door for new libraries and tools to be built on the same fundamentals that drive Vuetify. Allowing developers to opt into the Vuetify ecosystem without having to commit to \"Big Vuetify\" as we've started calling it internally.\n\n**Details:**\n\n* [Vuetify0 Composables](https://0.vuetifyjs.com/composables)\n* [v0.0.2 Release Notes](https://github.com/vuetifyjs/0/releases/tag/v0.0.2)\n* [Discussion on Discord](https://discord.gg/vK6T89eNP7)\n\n## Framework Updates\n\nWe've made significant progress on several key components and features this month. The team merged **87 pull requests** in August alone, primarily focusing on component enhancements, bug fixes, and developer experience improvements.\n\n### VEditor: Final Testing, Coming Soon\n\nVEditor is in the final stages of testing and will be available soon. This rich text editor brings professional content editing capabilities to Vuetify applications, including:\n\n![VEditor showcase](https://cdn.vuetifyjs.com/docs/images/blog/august-2025-update/veditor.png \"VEditor rich text formatting features\"){ height=135 }\n\n* **Rich Text Formatting:** Comprehensive formatting options like bold, italic, underline, strikethrough, code blocks, heading levels (H1-H6), subscript, superscript, and blockquotes\n* **Customizable Toolbar:** Choose which formatting options to display, hide the toolbar completely, or configure it dynamically at runtime with Material Design Icons\n* **Form Integration:** Full v-model support with Vuetify's validation system, including rules for required content, character limits, and seamless v-form compatibility\n* **Flexible Styling:** Configurable height, multiple variants (outlined, solo, underlined), responsive design, and full Vuetify theme integration\n* **Advanced Features:** Clearable content functionality, proper focus management, accessibility support with ARIA labels, and cross-browser contentEditable implementation\n\n**Details:**\n\n* [VEditor PR#21653](https://github.com/vuetifyjs/vuetify/pull/21653)\n\n## Ecosystem Spotlight: Vuetify Issues { #ecosystem-spotlight-vuetify-issues }\n\nThe redesigned issues experience is now live at [issues.vuetifyjs.com](https://issues.vuetifyjs.com). This release focused on migrating the app from Vuetify v1.5 to v3 for a modern, consistent UI and better developer ergonomics. We also integrated Vuetify One to enable future enhancements—like special labels for subscribers—to streamline triage and improve visibility.\n\n\n\n::: info\n\nThe previous issues page was originally built with Vuetify v1.5 in 2018\n\n:::\n\n**Details:**\n\n* [New Issues Page](https://issues.vuetifyjs.com)\n* [Contributing Guide](https://vuetifyjs.com/about/contributing/)\n* [Community Discord](https://community.vuetifyjs.com)\n\n## Free Premium Themes\n\nAll Vuetify‑made themes—designed, built, and maintained by the Vuetify team—are now free for **personal** use. Enjoy polished, production‑ready starting points to learn best practices, explore ideas, and accelerate side projects without licensing friction.\n\n### Now Available for Free\n\nThis move reflects our commitment to lowering barriers to entry and helping developers create beautiful applications faster. Visit the [Vuetify Store](https://store.vuetifyjs.com) to explore the expanded free collection.\n\n![Vuetify Store showcase](https://cdn.vuetifyjs.com/docs/images/blog/august-2025-update/store.png \"Free premium themes now available\"){ height=600 }\n\n**Details:**\n\n* [Crypto Coin Theme](https://store.vuetifyjs.com/products/crypto-coin-theme)\n* [Flairo Theme Pro](https://store.vuetifyjs.com/products/flairo-theme-pro)\n* [Vuetify 3 Nebula UI Kit](https://store.vuetifyjs.com/products/vuetify-3-nebula-ui-kit)\n* [Zero Theme Pro](https://store.vuetifyjs.com/products/zero-theme-pro)\n* [Made by Vuetify Bundle](https://store.vuetifyjs.com/products/made-by-vuetify-bundle)\n\n## August 2025 Changelog\n\nThe following section provides an overview of the changes made in August 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* Accessibility and high-contrast: forced-colors fixes in VBtn/VCard, ARIA labels in VColorPicker, role added to VTextField input\n* Smarter selection UX: VSelect fixes placeholder overlap and shows selected text\n* More reliable date picking: VDatePicker prioritizes allowed months/years and fixes year scroll/focus\n* Tables/inputs polish: VDataTable row/stripe fixes, VNumberInput focus/icons, VField clear, menu/tooltip reposition\n* Labs upgrades: VVideo aspect-ratio and visuals, VPie touch segments, VColorInput pip/focus, VIconBtn icon-color\n\n**Expand** this section to see the detailed changelog for August 2025:\n\n
\n\n### :wrench: Bug Fixes\n\n* **validation:** return aliases when called without arguments ([#21868](https://github.com/vuetifyjs/vuetify/issues/21868)) ([64a82d4](https://github.com/vuetifyjs/vuetify/commit/64a82d4776d22628db5d3a55fc070ce2463eb602)), closes [#21477](https://github.com/vuetifyjs/vuetify/issues/21477)\n* **VAlert:** restore unit-less support in Sass variable for title line-height ([#21843](https://github.com/vuetifyjs/vuetify/issues/21843)) ([8c1778a](https://github.com/vuetifyjs/vuetify/commit/8c1778a26a08d9d663681d83d6dd9160e3cb5c74)), closes [#21841](https://github.com/vuetifyjs/vuetify/issues/21841)\n* **VBtn:** render border in forced-colors mode ([#21848](https://github.com/vuetifyjs/vuetify/issues/21848)) ([25af169](https://github.com/vuetifyjs/vuetify/commit/25af169ae03c28bc6472f00347edaeaefb73aeb3))\n* **VCard:** hide progress border in forced-colors mode ([#21836](https://github.com/vuetifyjs/vuetify/issues/21836)) ([4335576](https://github.com/vuetifyjs/vuetify/commit/43355769444e256eed6111d23b75d7dc2838a093)), closes [#21835](https://github.com/vuetifyjs/vuetify/issues/21835)\n* **VColorPicker:** aria labels for main controls ([#21839](https://github.com/vuetifyjs/vuetify/issues/21839)) ([e2ab73a](https://github.com/vuetifyjs/vuetify/commit/e2ab73a7aafb1c443ad30b28134e41b4662c27fe)), closes [#21834](https://github.com/vuetifyjs/vuetify/issues/21834)\n* **VColorPicker:** keep canvas visible when width is not px ([22b828f](https://github.com/vuetifyjs/vuetify/commit/22b828f5cc625adeeb206e20746154dd79f33e0c))\n* **VColorPicker:** prevent sass nested deprecation warning ([8083db9](https://github.com/vuetifyjs/vuetify/commit/8083db971f7fe51151241447f90a4cd14cff32be)), closes [#21909](https://github.com/vuetifyjs/vuetify/issues/21909)\n* **VDataTable:** correct row height when with show-select and compact ([#21829](https://github.com/vuetifyjs/vuetify/issues/21829)) ([29b3bb0](https://github.com/vuetifyjs/vuetify/commit/29b3bb0b3363e8c295cf16286ed500e8ae269e98)), closes [#21767](https://github.com/vuetifyjs/vuetify/issues/21767)\n* **VDataTable:** missing stripes on fixed columns ([#21715](https://github.com/vuetifyjs/vuetify/issues/21715)) ([739a6c9](https://github.com/vuetifyjs/vuetify/commit/739a6c9aa8ac6064d7484e1e40dbf111d2ab75c5))\n* **VDatePicker:** prioritize allowed-months and allowed-years ([#21916](https://github.com/vuetifyjs/vuetify/issues/21916)) ([810645c](https://github.com/vuetifyjs/vuetify/commit/810645c5c37aeeb3aec1a575763c5e836b7bb8b6)), closes [#21911](https://github.com/vuetifyjs/vuetify/issues/21911)\n* **VDatePickerYears:** fix scroll/focus of selected year ([#21951](https://github.com/vuetifyjs/vuetify/issues/21951)) ([b531dbf](https://github.com/vuetifyjs/vuetify/commit/b531dbfa1ae6e08dddea41f965912b8cf60a55ce)), closes [#21950](https://github.com/vuetifyjs/vuetify/issues/21950)\n* **VField:** avoid duplicated emits on clear ([#21865](https://github.com/vuetifyjs/vuetify/issues/21865)) ([a97f103](https://github.com/vuetifyjs/vuetify/commit/a97f10306bd32e739c4cd52f4939e2b6d3b648d1)), closes [#21417](https://github.com/vuetifyjs/vuetify/issues/21417)\n* **VMenu, VTooltip:** apply scroll-strategy reposition for horizontal overflow ([#21309](https://github.com/vuetifyjs/vuetify/issues/21309)) ([bd48658](https://github.com/vuetifyjs/vuetify/commit/bd486588ae665014abe9a2af09bee12868e8574f)), closes [#20625](https://github.com/vuetifyjs/vuetify/issues/20625)\n* **VNumberInput:** consistent color of control icons ([#21936](https://github.com/vuetifyjs/vuetify/issues/21936)) ([6a50b44](https://github.com/vuetifyjs/vuetify/commit/6a50b44bf48b11f975c52c78074f99f52e34ab10)), closes [#21931](https://github.com/vuetifyjs/vuetify/issues/21931)\n* **VNumberInput:** keep focus when incrementing in the list ([#21824](https://github.com/vuetifyjs/vuetify/issues/21824)) ([d6b3384](https://github.com/vuetifyjs/vuetify/commit/d6b338465a1c55fa72838c668276dcc9855b4f54)), closes [#17083](https://github.com/vuetifyjs/vuetify/issues/17083)\n* **VOtpInput:** support composing character with IME ([42e15a3](https://github.com/vuetifyjs/vuetify/commit/42e15a349c1de7721c754d9aee2b437144b1a89b)), closes [#21918](https://github.com/vuetifyjs/vuetify/issues/21918)\n* **VOverlay:** don't use content element as scroll parent ([06c4c91](https://github.com/vuetifyjs/vuetify/commit/06c4c91f94d18af53041961f2c9fb0cc7e364cb2))\n* **VSelect:** select placeholder overlap ([#21923](https://github.com/vuetifyjs/vuetify/issues/21923)) ([5c06ba7](https://github.com/vuetifyjs/vuetify/commit/5c06ba7bd76bca370320433e7a0f058362d6028f)), closes [#21922](https://github.com/vuetifyjs/vuetify/issues/21922)\n* **VSelect:** use selected text instead of value ([#21902](https://github.com/vuetifyjs/vuetify/issues/21902)) ([d0ef001](https://github.com/vuetifyjs/vuetify/commit/d0ef0016adf8517620ce14c5e1e50e800195fb95)), closes [#21097](https://github.com/vuetifyjs/vuetify/issues/21097)\n* **VSlider:** avoid thumb label wedge gap ([#21847](https://github.com/vuetifyjs/vuetify/issues/21847)) ([059e578](https://github.com/vuetifyjs/vuetify/commit/059e578e21f376bf1059c59fbf72eb278664ed93))\n* **VSparkline:** accept a single number ([#21944](https://github.com/vuetifyjs/vuetify/issues/21944)) ([d7b0e34](https://github.com/vuetifyjs/vuetify/commit/d7b0e34e9d717ce96c898875c4e480ab89d81eea)), closes [#19697](https://github.com/vuetifyjs/vuetify/issues/19697)\n* **VStepper:** align title and subtitle to the avatar ([12735e6](https://github.com/vuetifyjs/vuetify/commit/12735e6797e1c482db74fd7615af7b484e282614)), closes [#21884](https://github.com/vuetifyjs/vuetify/issues/21884)\n* **VStepper:** correct cursor for readonly item ([aeb6f4d](https://github.com/vuetifyjs/vuetify/commit/aeb6f4d70291ebb5c907ebe86490bb622f2929ea)), closes [#21867](https://github.com/vuetifyjs/vuetify/issues/21867)\n* **VStepper:** keep correct alignment with alt-labels ([1a0a9e6](https://github.com/vuetifyjs/vuetify/commit/1a0a9e6f19d776fe104caaae4c659a3f6d3d3e55))\n* **VTextField:** assign role to input element ([#21903](https://github.com/vuetifyjs/vuetify/issues/21903)) ([d77285f](https://github.com/vuetifyjs/vuetify/commit/d77285fcae70522dfafbc66c775f72b03684bb38)), closes [#18125](https://github.com/vuetifyjs/vuetify/issues/18125)\n* **VTreeview:** allow expanding disabled nodes ([ed4d8cf](https://github.com/vuetifyjs/vuetify/commit/ed4d8cfb06079a231064dbc6ebedb05d3ad6ef06)), closes [#21075](https://github.com/vuetifyjs/vuetify/issues/21075) [#21116](https://github.com/vuetifyjs/vuetify/issues/21116)\n* **VWindow:** correctly reveal vertical arrows on hover ([521ba7b](https://github.com/vuetifyjs/vuetify/commit/521ba7b7a5749f495b13face6fabca7b971e56bf))\n\n### :microscope: Code Refactoring\n\n* **VDataTable:** avoid Array.toReversed() ([3894f98](https://github.com/vuetifyjs/vuetify/commit/3894f98c333abaad63fc2a651ae558ffbb75d620))\n\n### :test_tube: Labs\n\n* **VColorInput:** pip customization ([#21820](https://github.com/vuetifyjs/vuetify/issues/21820)) ([db389d5](https://github.com/vuetifyjs/vuetify/commit/db389d5bb0386eccb00302c0b3134f39c201a35a))\n* **VColorInput:** allow inner fields focus using mouse ([7657d52](https://github.com/vuetifyjs/vuetify/commit/7657d522ba5604ce53fad877e84033f7bf5ad960)), closes [#21897](https://github.com/vuetifyjs/vuetify/issues/21897)\n* **VIconBtn:** correctly apply `icon-color` ([b2ece2c](https://github.com/vuetifyjs/vuetify/commit/b2ece2c033ec8cc097f644cda912bb915d1df84e)), closes [#21930](https://github.com/vuetifyjs/vuetify/issues/21930)\n* **VPie:** support touch for segment interaction ([#21871](https://github.com/vuetifyjs/vuetify/issues/21871)) ([93f4218](https://github.com/vuetifyjs/vuetify/commit/93f421848601fe6f24e32395a7810c41790f92cf))\n* **VVideo:** prefer `max-width`, default to 100% ([22d5dd5](https://github.com/vuetifyjs/vuetify/commit/22d5dd5e5814c9aea59a5d4778c2d4ea6c3c9ba6))\n* **VVideo:** add `aspect-ratio` prop ([83e67d1](https://github.com/vuetifyjs/vuetify/commit/83e67d137b2659535da355ac23d9a24d8345537b))\n* **VVideo:** correct default track color with pills ([e98919d](https://github.com/vuetifyjs/vuetify/commit/e98919d0c3ec9ed128bc58fe5678b1821f7f5478))\n* **VVideo:** correct color customization ([13da3e1](https://github.com/vuetifyjs/vuetify/commit/13da3e1b33b7dfee1d506c4d47782ab47a3f7f6c))\n* **VVideo:** correctly move elevation to pills ([3df9494](https://github.com/vuetifyjs/vuetify/commit/3df9494480b80f091bef6e0f1e65066dbe4b5642))\n* **VVideo:** hide overlays for background variant ([466dc6f](https://github.com/vuetifyjs/vuetify/commit/466dc6fb87acf5a0e6e2d67f9196eaf3f6705e9f))\n\n
\n\n## Building the Future{ .mt-4 }\n\nAugust is about laying the foundation to begin integrating Vuetify0 into Vuetify. The pre‑alpha work is shaping the path for incremental adoption of Zero‑powered primitives across the framework.\n\nIn parallel, the ecosystem continues to be polished and expanded:\n\n* VEditor is nearing release with robust formatting and form integration.\n* VVideo and related media features are progressing.\n* Improvements to performance, theming, docs, and the redesigned issues experience are landing steadily.\n\nThanks for the feedback and contributions—these foundations will turn into practical wins shipping over the next few releases.\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/eXubxyJ), and upcoming webinar series announcements.*\n","frontmatter":{"layout":"blog","meta":{"title":"August 2025 Update","description":"August prepares the Vuetify0 pre-alpha, launches the redesigned issues page, and continues delivering powerful components and improvements.","keywords":"Vuetify August 2025, Vuetify0, v0 pre-alpha, VEditor, issues page redesign, theming webinar, performance optimization"}},"isInternal":false,"tokens":5932,"sizeBytes":21298},{"name":"august-2026-update.md","path":"packages/docs/src/pages/en/blog/august-2026-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/august-2026-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: August 2026 Update\n description: This August team delivered Vuetify 4.2 beta, which made @vuetify/v0 a runtime dependency of the framework.\n keywords: Vuetify August 2026, Vuetify 4.2, @vuetify/v0, open-on-focus, Sass variables, Vuetify0 1.2, Emerald, Vuetify MCP\n---\n\n\n\n# August 2026 Update\n\n**August was about v4.2.** The features and fixes have been steadily merged to `dev` branch eventually shipped as [v4.2.0-beta.0](/getting-started/release-notes/?version=v4.2.0-beta.0) on August 27 and as stable [v4.2.0](/getting-started/release-notes/?version=v4.2.0) week after. The v4.1 line got five additional patches along the way, and v3.13 got its first two LTS patches. Most notable change: starting with 4.2, `vuetify` depends on `@vuetify/v0` at runtime.\n\n![Hero image for August update](https://cdn.vuetifyjs.com/docs/images/blog/august-2026-update/august-hero.png \"August hero image\"){ height=112 }\n\n🖊️ Jacek Czarniecki • 📅 September 14th, 2026\n\n\n\n---\n\n## August in numbers\n\n**33 merged PRs** in the framework repo, **16 features and 47 fixes** (unique commits) and **8 releases**. Open issues went from 351 to 286: 96 closed, and 31 new opened. [Vuetify0](https://0.vuetifyjs.com/) merged 163 PRs (33 features, 42 fixes, 62 for docs) and shipped 5 releases, headlined by v1.2.0.\n\n---\n\n## Table of Contents\n\n* [Key Improvements](#key-improvements)\n* [Spotlight: Vuetify 4.2](#vuetify-4-2)\n * [Before you upgrade](#before-you-upgrade)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [Tooling Updates](#ecosystem-tooling)\n* [What's Next](#whats-next)\n\n---\n\n## Key Improvements\n\n**In Vuetify 4.2** ([beta](/getting-started/release-notes/?version=v4.2.0-beta.0) on August 27, [stable](/getting-started/release-notes/?version=v4.2.0) on September 2):\n\n* **[VSelect / VAutocomplete / VCombobox](/components/selects/)** — `open-on-focus`, persistent menus, `close-on-input-click`, and keyboard navigation that no longer breaks in long lists ([#23126](https://github.com/vuetifyjs/vuetify/pull/23126), [#23008](https://github.com/vuetifyjs/vuetify/pull/23008), [#23023](https://github.com/vuetifyjs/vuetify/pull/23023), [#23031](https://github.com/vuetifyjs/vuetify/pull/23031))\n* **Defaults** — nested defaults can change the sizes and variants components hardcode on their inner controls ([#23108](https://github.com/vuetifyjs/vuetify/pull/23108))\n* **[VDateInput](/components/date-inputs/)** — separators are inserted as user types ([#23052](https://github.com/vuetifyjs/vuetify/pull/23052))\n* **[VSlideGroup](/components/slide-groups/)** — `scroll-snap`, `scroll-distance`, an `edge` event and an exposed `slide()` for programmatic control\n* **Sass** — 125 variables that had no effect are gone in v4.2.0, and those might make your CI red if you did define them ([#23136](https://github.com/vuetifyjs/vuetify/issues/23136))\n\n**Beyond Vuetify core:**\n\n* **[Vuetify0 1.2](https://0.vuetifyjs.com/releases/?version=v1.2.0)** — headless DataTable, DataGrid and Alert, plus a floating-ui adapter for browsers without CSS anchor positioning ([#825](https://github.com/vuetifyjs/0/pull/825), [#826](https://github.com/vuetifyjs/0/pull/826), [#823](https://github.com/vuetifyjs/0/pull/823), [#917](https://github.com/vuetifyjs/0/pull/917))\n* **[Emerald](https://0.vuetifyjs.com/systems/emerald)** — first public release of the styled design system on v0, with a [live demo](https://0.vuetifyjs.com/demo/emerald/) and a [Figma UI kit](https://store.vuetifyjs.com/products/official-emerald-ui-kit-for-figma)\n* **[Bulma](https://0.vuetifyjs.com/systems/bulma)** — Vue behavior for the `bulma.css` you already load ([#760](https://github.com/vuetifyjs/0/pull/760))\n* **Vuetify MCP** — hosted server works without an account at `https://mcp.vuetifyjs.com/mcp`, and v0.11.0 adds a v2 → v3 upgrade toolkit ([#41](https://github.com/vuetifyjs/mcp/pull/41), [#43](https://github.com/vuetifyjs/mcp/pull/43))\n* **[v0 playground](https://v0play.vuetifyjs.com)** — saves playgrounds to Vuetify One and switches Vuetify versions, nightly included ([#817](https://github.com/vuetifyjs/0/pull/817), [#836](https://github.com/vuetifyjs/0/pull/836))\n\n**Details:**\n\n* Vuetify v4.2: [v4.2.0](/getting-started/release-notes/?version=v4.2.0) · [v4.2.0-beta.0](/getting-started/release-notes/?version=v4.2.0-beta.0)\n* Vuetify v4.1: [v4.1.12](/getting-started/release-notes/?version=v4.1.12) · [v4.1.11](/getting-started/release-notes/?version=v4.1.11) · [v4.1.10](/getting-started/release-notes/?version=v4.1.10) · [v4.1.9](/getting-started/release-notes/?version=v4.1.9) · [v4.1.8](/getting-started/release-notes/?version=v4.1.8)\n* Vuetify v3 LTS: [v3.13.2](/getting-started/release-notes/?version=v3.13.2) · [v3.13.1](/getting-started/release-notes/?version=v3.13.1)\n* Vuetify0: [v1.2.0](https://0.vuetifyjs.com/releases/?version=v1.2.0) · [v1.1.0](https://0.vuetifyjs.com/releases/?version=v1.1.0) · [v1.0.5](https://0.vuetifyjs.com/releases/?version=v1.0.5) · [v1.0.4](https://0.vuetifyjs.com/releases/?version=v1.0.4) · [v1.0.3](https://0.vuetifyjs.com/releases/?version=v1.0.3)\n\n---\n\n## Spotlight: Vuetify 4.2 { #vuetify-4-2 }\n\n\n\n
\n\n[v4.2.0](/getting-started/release-notes/?version=v4.2.0) is the second minor of the v4 line. It collects everything merged to `dev` branch since June. That includes the work covered in the [July update](/blog/july-2026-update/): multi-selection events, `VSkeletonLoader` types, `size` on VBtnGroup, VTreeview keyboard navigation and a11y improvements to name a few. It adds the features [below](#new-features), and [`validation rules`](/features/rules/) are finally out of Labs.\n\n### Before you upgrade\n\nThree changes that aren't new props.\n\n**`@vuetify/v0` is now a dependency.** Before 4.2, `vuetify` did not require any direct dependencies. v4.2.0 depends on `@vuetify/v0@^1.2.1` but for now, the surface is limited to safe and simple utilities (`isString`, `isObject`, …), `range` and the `toHighlight` transformer from it ([#23039](https://github.com/vuetifyjs/vuetify/pull/23039)). We expect v0 to slowly take over more and more of responsibility within the Vuetify codebase.\n\n**Sass variables cleanup.** 125 variables across 39 components were declared but never read by any stylesheet ([2d01fae](https://github.com/vuetifyjs/vuetify/commit/2d01fae)). Setting them did not have any effect. Cleanup make it clear these were never part of the intended API of v3 and v4. If your `settings.scss` did include them, you might be prompted to remove them by the compiler:\n\n```txt\nError: This variable was not declared with !default in the @used module.\n```\n\nThe full list is posted in the dedicated page: [Unused Sass variables](/getting-started/unused-sass-variables/).\n\n**Buttons clip their overlay.** VBtn and VIconBtn now set `overflow: hidden`, so hover overlays and tonal underlays do not have any gaps when combined with thick borders ([#22992](https://github.com/vuetifyjs/vuetify/pull/22992)). We anticipated it may susprise some developers and some of them already shared that VBadge placed inside button is clipped. There are at least 3 easy solutions to this and you only need to pick one that suites your project (see [#23179](https://github.com/vuetifyjs/vuetify/issues/23179)).\n\n---\n\n## Framework Updates\n\n### New Features\n\nEverything in this section shipped in v4.2.0.\n\n**The select family.** VSelect, VAutocomplete and VCombobox received four additions:\n\n* **Persistent menus.** `:menu-props=\"{ persistent: true }\"` keeps the menu open, and `closeOnContentClick: false` keeps it open after a selection. Both were ignored before ([#23008](https://github.com/vuetifyjs/vuetify/pull/23008), closes [#20590](https://github.com/vuetifyjs/vuetify/issues/20590)).\n* **`trim-values`** on VCombobox trims typed values and drops whitespace-only entries ([#22895](https://github.com/vuetifyjs/vuetify/pull/22895), closes [#14874](https://github.com/vuetifyjs/vuetify/issues/14874)).\n* **`open-on-focus`** opens the menu when the field gets focus, from Tab as well as a click ([#23126](https://github.com/vuetifyjs/vuetify/pull/23126), closes [#22934](https://github.com/vuetifyjs/vuetify/issues/22934)). Focus returning to the field after the menu closes does not reopen it. VDateInput and VColorInput have the same prop.\n* **`close-on-input-click`** on VAutocomplete and VCombobox makes a click on the input toggle the menu instead of always opening it ([#23023](https://github.com/vuetifyjs/vuetify/pull/23023)).\n\nThe last two help improve experience if end-users are used to clicking the input to dismiss/toggle the menu.\n\n```html\n\n```\n\nKeyboard navigation in these menus was reworked around the virtual list ([#23031](https://github.com/vuetifyjs/vuetify/pull/23031), [aae8fc4](https://github.com/vuetifyjs/vuetify/commit/aae8fc4)). The problem was haunting any list longer than 50 elements. While not very noticable in general it most certainly impacted form-heavy apps especially if users rely on the keyboard to navigate and update selections ([#18383](https://github.com/vuetifyjs/vuetify/issues/18383), [#22770](https://github.com/vuetifyjs/vuetify/issues/22770)).\n\n**Defaults for inner controls.** Some components render inner controls with hardcoded props: chips in VSelect are `size=\"small\"`, VStepperActions buttons are `text` and `tonal`, the items-per-page select in the data table footer has a fixed variant. Customizing those was previously very had and involved deep CSS overrides or forced developers to use slots. Now it is a straightforward nested object structure in using the standard configuration system ([#23108](https://github.com/vuetifyjs/vuetify/pull/23108)):\n\n```js { resource=\"src/plugins/vuetify.js\" }\ncreateVuetify({\n defaults: {\n VSelect: { VChip: { size: 'large' } }, // also VAutocomplete, VCombobox, VFileInput\n VStepperActions: { VBtn: { variant: 'outlined' } },\n VDataTableFooter: { VSelect: { variant: 'solo-filled' } },\n },\n})\n```\n\nVisit [Global configuration](/features/global-configuration/) to inspect the full list of nested keys, where we listed new `VStepperActionsPrevBtn` and `VStepperActionsNextBtn` role names as well.\n\n**[VDateInput](/components/date-inputs/)** now types like a masked input ([#23052](https://github.com/vuetifyjs/vuetify/pull/23052), closes [#23051](https://github.com/vuetifyjs/vuetify/issues/23051)) while making sure user won't input invalid dates. Separators are inserted/enforced following current locale, range format and RTL. Further improvements are planned for v4.3.0 - input will show localized placeholders marking major i18n improvement ([#23173](https://github.com/vuetifyjs/vuetify/pull/23173)).\n\n**[VSlideGroup](/components/slide-groups/)** got three long-standing issues closed:\n\n* `scroll-snap` (`start`, `center` or `end`) enables CSS scroll snapping, and the prev/next arrows stop on item boundaries ([#15916](https://github.com/vuetifyjs/vuetify/issues/15916))\n* `scroll-distance` sets how far the arrows scroll, in pixels or as a percentage\n* `slide()` is exposed for scrolling programmatically: `slide('next')`, `slide({ by: 200 })`, `slide({ index: 3 })` ([#21250](https://github.com/vuetifyjs/vuetify/issues/21250))\n* the `edge` event fires with `'start'` or `'end'` when scrolling reaches either end ([#11364](https://github.com/vuetifyjs/vuetify/issues/11364))\n\n**[VProgressLinear](/components/progress-linear/) and [VProgressCircular](/components/progress-circular/)** take a `transition` prop: `false` turns off the value animation, and `{ duration: 600 }` makes it slower ([#22442](https://github.com/vuetifyjs/vuetify/issues/22442)). New `reveal` prop has been shipped to align with the circular counterpart.\n\nSmaller additions:\n\n* **[VNavigationDrawer](/components/navigation-drawers/)** — `width` accepts percentages ([#16150](https://github.com/vuetifyjs/vuetify/issues/16150)).\n* **[VRadio](/components/radio-buttons/)** — `v-model` works on a radio without VRadioGroup ([#16245](https://github.com/vuetifyjs/vuetify/issues/16245))\n* **[VFileInput](/components/file-inputs/)** — supports `placeholder` and `persistent-placeholder` ([#23048](https://github.com/vuetifyjs/vuetify/pull/23048)), and shows dashed outline while dragging files over it ([#22909](https://github.com/vuetifyjs/vuetify/pull/22909))\n* **[VVirtualScroll](/components/virtual-scroller/)** — `scrollToIndex(index, position)` accepts second argument with `'start'`, `'center'` or `'end'` ([#18574](https://github.com/vuetifyjs/vuetify/pull/18574))\n\n### Bug Fixes\n\nMost of August's fixes landed in overlays, virtual scrolling and the select family. Three worth reading about:\n\n**Dialogs opened from menus.** Clicking inside a VDialog opened from a VMenu closed the whole menu chain ([#20468](https://github.com/vuetifyjs/vuetify/issues/20468), from 2024). Non-menu overlays now stop the close cascade ([e30eb47](https://github.com/vuetifyjs/vuetify/commit/e30eb47cc5999f4a26a32dcd472f4ea19e2820f0)), and custom overlays and tooltips no longer keep a menu from closing ([#22993](https://github.com/vuetifyjs/vuetify/pull/22993)).\n\n**Android \"desktop site\" mode.** Overlays should now be correctly positioned in \"desktop site\" mode ([#22124](https://github.com/vuetifyjs/vuetify/issues/22124)) since v4.1.8 and v3.13.1, and on pages using CSS `zoom` again since v4.2.1.\n\n**Active links on refresh.** In Nuxt, links with `to` could flash as active on a hard refresh while the router was still resolving the first navigation ([#23131](https://github.com/vuetifyjs/vuetify/pull/23131)).\n\n| Component | Fix | Version | PR / commit |\n|---------------------------|-------------------------------------------------------------------------|---------|-----------------------------------------------------------------|\n| **VNumberInput** | Strip the grouping separator before parsing (German locale) | v4.1.8 | [94e94a9](https://github.com/vuetifyjs/vuetify/commit/94e94a9) |\n| **theme** | Emit `color-scheme: light` so native scrollbars follow a theme switch | v4.1.8 | [#23071](https://github.com/vuetifyjs/vuetify/pull/23071) |\n| **VFileUpload** | No SSR crash with an empty file list | v4.1.8 | [4cd5288](https://github.com/vuetifyjs/vuetify/commit/4cd5288) |\n| **package** | Accept Vue 3.6 prereleases in the peer range | v4.1.8 | [#23040](https://github.com/vuetifyjs/vuetify/pull/23040) |\n| **rounded** | Restore classes for per-side values containing `0` | v4.1.9 | [27962f3](https://github.com/vuetifyjs/vuetify/commit/27962f3) |\n| **validation** | Run rules as soon as a field is cleared, not on blur | v4.1.9 | [58b5537](https://github.com/vuetifyjs/vuetify/commit/58b5537) |\n| **VDataTableVirtual** | Correct height with several expanded rows per item | v4.1.9 | [6f5f04b](https://github.com/vuetifyjs/vuetify/commit/6f5f04b) |\n| **VSelect** | Focus the right item when opened with the keyboard in Shadow DOM | v4.1.9 | [#23102](https://github.com/vuetifyjs/vuetify/pull/23102) |\n| **VDataTable** | Key cells so slot props don't leak between columns | v4.1.10 | [#23124](https://github.com/vuetifyjs/vuetify/pull/23124) |\n| **VNumberInput** | Spin buttons snap an out-of-range value to `min`/`max` | v4.1.10 | [#23109](https://github.com/vuetifyjs/vuetify/pull/23109) |\n| **VDialog** | No error when unmounted while closing | v4.1.10 | [#23054](https://github.com/vuetifyjs/vuetify/pull/23054) |\n| **VProgressLinear** | Keep indeterminate bars visible in Firefox | v4.1.10 | [694fcdb](https://github.com/vuetifyjs/vuetify/commit/694fcdb) |\n| **VProgressLinear** | Restore the `split` variant animation, broken in v4.1.7 | v4.1.10 | [537a5f7](https://github.com/vuetifyjs/vuetify/commit/537a5f7) |\n| **VDatePicker** | Restore the hover preview in range selection | v4.1.10 | [6c1dee2](https://github.com/vuetifyjs/vuetify/commit/6c1dee2) |\n| **VOverlay** | Return focus to the activator when `eager` | v4.1.10 | [c879795](https://github.com/vuetifyjs/vuetify/commit/c879795) |\n| **VBtn / VDivider / VImg**| No `value` on links, no redundant `role` on `
`, no empty `aria-label` | v4.1.10 | [#23122](https://github.com/vuetifyjs/vuetify/pull/23122), [#23107](https://github.com/vuetifyjs/vuetify/pull/23107), [#23112](https://github.com/vuetifyjs/vuetify/pull/23112) |\n| **VVirtualScroll** | Measure dividers and subheaders, estimate item height by median | v4.1.11 | [cb60a1f](https://github.com/vuetifyjs/vuetify/commit/cb60a1f) |\n| **VVirtualScroll** | Scrolling no longer locks up when items contain a divider | v4.1.11 | [f1cf0b0](https://github.com/vuetifyjs/vuetify/commit/f1cf0b0) |\n| **VRow** | Restore 8px gutters for `dense` | v4.1.11 | [ea6c628](https://github.com/vuetifyjs/vuetify/commit/ea6c628) |\n| **VOverlay** | Correct position when the activator changes mid-transition | v4.1.12 | [63cccbb](https://github.com/vuetifyjs/vuetify/commit/63cccbb) |\n| **VProgressLinear** | `rounded-bar` with `reverse` and buffer | v4.1.12 | [55fed01](https://github.com/vuetifyjs/vuetify/commit/55fed01) |\n| **locale** | Ukrainian translation fixes, missing Arabic keys | v4.1.12 | [#23139](https://github.com/vuetifyjs/vuetify/pull/23139) |\n| **VIconBtn** | Default color matches VBtn (icons disappeared on colored backgrounds) | v4.2.0 | [1695a49](https://github.com/vuetifyjs/vuetify/commit/1695a49) |\n| **VMenu** | One open submenu per level; Tab and ArrowLeft return focus to the activator | v4.2.0 | [#22904](https://github.com/vuetifyjs/vuetify/pull/22904) |\n| **VTextField** | Keep caret and selection when toggling `type` in Chrome | v4.2.0 | [47c9cc1](https://github.com/vuetifyjs/vuetify/commit/47c9cc1) |\n| **VTreeview** | Open matching nodes when searching | v4.2.0 | [#22983](https://github.com/vuetifyjs/vuetify/pull/22983) |\n| **VInput** | Consistent transitions for messages, details and counter | v4.2.0 | [#23049](https://github.com/vuetifyjs/vuetify/pull/23049) |\n| **v-touch** | Ignore scrolling inside the element | v4.2.0 | [19ee74e](https://github.com/vuetifyjs/vuetify/commit/19ee74e) |\n| **VSlideGroup** | A click on a partially visible item selects it instead of scrolling it | v4.2.0 | [55d8e80](https://github.com/vuetifyjs/vuetify/commit/55d8e80) |\n\nThe VTextField fix covers the password reveal pattern: toggling `type` from an `append-inner` icon put the caret back at the start. It had been open since 2022 ([#16109](https://github.com/vuetifyjs/vuetify/issues/16109)).\n\n### In Development\n\nThe July update listed six PRs for 4.2: VSlider `pill` ([#22699](https://github.com/vuetifyjs/vuetify/pull/22699)), VMaskInput dynamic masks ([#22501](https://github.com/vuetifyjs/vuetify/pull/22501)), VTimePicker keyboard controls ([#22604](https://github.com/vuetifyjs/vuetify/pull/22604)), VBtn/VIconBtn MD3 sizing ([#21831](https://github.com/vuetifyjs/vuetify/pull/21831)), VDatePicker week selection ([#20867](https://github.com/vuetifyjs/vuetify/pull/20867)) and a VField `border` prop ([#19819](https://github.com/vuetifyjs/vuetify/pull/19819)). None of them made it. VSlider, VMaskInput and VDatePicker moved to the v4.3.0 milestone together with the VBreadcrumbs accessibility PR ([#22358](https://github.com/vuetifyjs/vuetify/pull/22358)). The other three have no target yet.\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\n163 merged PRs, three patches ([v1.0.3](https://0.vuetifyjs.com/releases/?version=v1.0.3) on August 4, [v1.0.4](https://0.vuetifyjs.com/releases/?version=v1.0.4) on August 12, [v1.0.5](https://0.vuetifyjs.com/releases/?version=v1.0.5) on August 18) and [v1.2.0](https://0.vuetifyjs.com/releases/?version=v1.2.0) on August 25. A release tooling slip published a partial v1.1.0 an hour earlier; 1.2.0 includes all of it.\n\n### New in 1.2\n\n* **[DataTable](https://0.vuetifyjs.com/components/data/data-table)** and **[DataGrid](https://0.vuetifyjs.com/components/data/data-grid)** — headless compounds over `createDataTable` and `createDataGrid`. DataTable renders semantic `
NameTypeDefaultDescription
\n keys\n \n MaybeRef<string | undefined>\n \n required\n \n

The key combination string or reactive reference to a key combination. Supports modifiers (ctrl, cmd, alt, shift, meta) and key sequences separated by dashes. Changes to reactive refs are automatically applied.

\n
\n callback\n \n (e: KeyboardEvent) => void\n \n required\n \n

Function to execute when the hotkey is triggered. Receives the KeyboardEvent as a parameter.

\n
\n options\n \n HotkeyOptions\n \n {}\n \n

Optional configuration object to customize hotkey behavior. All options support reactive refs and will update automatically when changed.

\n
NameTypeDefaultDescription
\n event\n \n MaybeRef<'keydown' | 'keyup'>\n \n 'keydown'\n \n

The keyboard event type to listen for. Can be reactive - changing this will automatically re-register the event listener.

\n
\n inputs\n \n MaybeRef<boolean>\n \n false\n \n

Whether to trigger hotkeys when input elements (input, textarea, contenteditable) are focused. When false, hotkeys are disabled in input contexts. Changes to reactive refs take effect immediately.

\n
\n preventDefault\n \n MaybeRef<boolean>\n \n true\n \n

Whether to call preventDefault() on the keyboard event when the hotkey matches. Can be reactive to dynamically control event prevention.

\n
\n sequenceTimeout\n \n MaybeRef<number>\n \n 1000\n \n

Timeout in milliseconds for key sequences. If the next key in a sequence isn't pressed within this time, the sequence resets. Changes to reactive refs apply to new sequences.

\n
TypeDescription
\n () => void\n \n

Cleanup function that removes the keyboard event listener. Automatically called when the component unmounts if used within a Vue component setup context.

\n
` markup with `aria-sort` and `aria-rowcount`; DataGrid adds column pinning and resizing, cell editing and row spanning ([#825](https://github.com/vuetifyjs/0/pull/825), [#826](https://github.com/vuetifyjs/0/pull/826))\n* **[Alert](https://0.vuetifyjs.com/components/semantic/alert)** — a live region, `role=\"alert\"` by default and `role=\"status\"` for messages that shouldn't interrupt ([#823](https://github.com/vuetifyjs/0/pull/823))\n* **[usePopover](https://0.vuetifyjs.com/composables/system/use-popover)** — positioning adapters. CSS anchor positioning stays the default. Firefox ESR and Safari before 26 don't support it, so there is now a first-party floating-ui adapter at `@vuetify/v0/popover/adapters/floating-ui` (with `@floating-ui/dom` as a peer), and `createPopoverPlugin` sets an adapter for the whole app ([#846](https://github.com/vuetifyjs/0/pull/846), [#917](https://github.com/vuetifyjs/0/pull/917))\n* **useTheme** — `system: { light, dark }` follows `prefers-color-scheme` until the user picks a theme ([#872](https://github.com/vuetifyjs/0/pull/872))\n* **`persist`** for `createFeaturesPlugin` and `createNotificationsPlugin`. Features store only the flags the user changed; notifications store read/seen/archived/snoozed state, never content ([#388](https://github.com/vuetifyjs/0/pull/388), [#384](https://github.com/vuetifyjs/0/pull/384))\n* **NumberField** — `commitOn: 'input'` writes the model on every keystroke and leaves clamping for blur. The same PR found that `NumberField.Root` never clamped unless you passed `:clamp=\"true\"` ([#786](https://github.com/vuetifyjs/0/pull/786))\n\n### Fixes\n\n* **useDate** — every locale got Sunday-start weeks in Firefox, and server and client could disagree when Node and browser ICU versions differ. Week data now comes from CLDR 48 on every runtime ([#796](https://github.com/vuetifyjs/0/pull/796)). This matters for Vuetify too, since the framework's date composables are moving onto v0.\n* **`getActiveElement()`** walks open shadow roots, the same fix Vuetify made for Shadow DOM in July. `useHotkey`, `useClickOutside` and `useDragDrop` use it ([#693](https://github.com/vuetifyjs/0/pull/693)).\n* **Snackbar** — NVDA skipped toasts injected into a fresh `role=\"status\"` region. `Snackbar.Portal` now renders persistent polite and assertive live regions and mirrors each toast into them ([#774](https://github.com/vuetifyjs/0/pull/774)).\n* **AlertDialog** focuses the Cancel action on open, per the APG pattern ([#630](https://github.com/vuetifyjs/0/pull/630)).\n\n### Design systems on v0\n\n**[Emerald](https://0.vuetifyjs.com/systems/emerald)** (`@paper/emerald` 0.1.0) is a styled design system on v0: 28 component families, Figma-sourced tokens, light and dark themes that follow the OS, and an icon set addressed by role. There's a [live demo](https://0.vuetifyjs.com/demo/emerald/) and a [Figma UI kit](https://store.vuetifyjs.com/products/official-emerald-ui-kit-for-figma).\n\n**[Bulma](https://0.vuetifyjs.com/systems/bulma)** (`@paper/bulma` 0.1.0) goes the other way. Its components render the markup Bulma documents against the `bulma.css` you already load, and add the JavaScript Bulma never had: open state, click-outside, Escape, focus and form wiring. The package ships no CSS.\n\nThe [v0 playground](https://v0play.vuetifyjs.com) can save playgrounds to Vuetify One ([#817](https://github.com/vuetifyjs/0/pull/817)) and switch Vuetify versions (incl. nightly releases ([#836](https://github.com/vuetifyjs/0/pull/836))).\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v1.1.0 Release](https://0.vuetifyjs.com/releases/?version=v1.1.0)\n* [v1.2.0 Release](https://0.vuetifyjs.com/releases/?version=v1.2.0)\n* [v0play](https://v0play.vuetifyjs.com)\n\n---\n\n## Tooling Updates { #ecosystem-tooling }\n\n### Vuetify MCP\n\n\n\n
\n\nFour releases: v0.9.0 and v0.9.1 (August 13), v0.10.0 (August 27) and v0.11.0 (August 28). The hosted server now has two endpoints ([#41](https://github.com/vuetifyjs/mcp/pull/41)):\n\n| URL | Auth | Tools |\n|-----------------------------------|-----------------------|----------------------------------------------|\n| `https://mcp.vuetifyjs.com/mcp` | none | docs, API, issues |\n| `https://mcp.vuetifyjs.com/one` | OAuth (Vuetify One) | the same, plus bins, playgrounds and links |\n\nv0.11.0 adds a Vuetify 2 → 3 upgrade toolkit that targets 3.13 LTS ([#43](https://github.com/vuetifyjs/mcp/pull/43)): `get_v3_upgrade_playbook` (ordered phases, starting with a Playwright baseline), `get_v2_to_v3_component_map`, `get_v3_breaking_changes` and an `upgrade-v2-to-v3` prompt. Before this, `get_upgrade_guide('v2.7')` returned the v4 guide. The v3 upgrade guide got an MCP quick start to go with it ([#23154](https://github.com/vuetifyjs/vuetify/pull/23154)).\n\n### Vuetify CLI\n\nNo release in August. Two features are merged and wait for the next one: `vuetify add` copies v0 examples from the docs registry into your project and tracks them in `vuetify.json`, with `diff` and `refresh` against the source ([#27](https://github.com/vuetifyjs/cli/pull/27)), and `create --features=mcp` writes client config for Cursor, Claude Code and Grok pointing at the hosted server ([#29](https://github.com/vuetifyjs/cli/pull/29)).\n\n### Nuxt Module\n\n[v1.0.0-rc.4](https://github.com/vuetifyjs/nuxt-module/releases/tag/v1.0.0-rc.4) (August 2) and [rc.5](https://github.com/vuetifyjs/nuxt-module/releases/tag/v1.0.0-rc.5) (August 22) are dependency updates (Nuxt 4.5.1) and a documented workaround for the `useLayout` auto-import collision.\n\n### Upgrade guide\n\nTwo v3 → v4 migration problems from a production migration are now documented ([#22848](https://github.com/vuetifyjs/vuetify/pull/22848)). In Vite dev mode the dependency pre-bundler can create two `useStack` instances, and menus opened inside a dialog end up behind it; the fix is `optimizeDeps.include`. The guide digs deeper into the `@layer` order that is a typical friction point for developers trying to upgrade existing projects.\n\n### Snips\n\n[Snips](https://snips.vuetifyjs.com/) prices are cut by half with no end date: category packs $74, all-access $149, team all-access $399.\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\n[v4.2.0](/getting-started/release-notes/?version=v4.2.0) went stable on September 2 and [v4.2.1](/getting-started/release-notes/?version=v4.2.1) followed on September 9. If you set Sass variables, read [Before you upgrade](#before-you-upgrade) first. Three of the PRs that missed 4.2 are on the v4.3.0 milestone, and more of v0 will move into the framework through 4.x minors.\n\n* [Vuetify 4.2](/getting-started/release-notes/?version=v4.2.0) is stable, and it installs `@vuetify/v0` with it\n* [Vuetify0 1.2](https://0.vuetifyjs.com/releases/?version=v1.2.0) adds headless DataTable, DataGrid and Alert\n* The hosted MCP works without an account at `https://mcp.vuetifyjs.com/mcp`\n\n::: warning\n\n**Vuetify needs your support.** Open Collective funds are running low, the team has scaled down, and contributors are barely compensated for their work. If your team relies on Vuetify, point your organization at [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider).\n\n:::\n\nThanks to everyone who sent a PR in August: [lazerg](https://github.com/lazerg), [BatLeDev](https://github.com/BatLeDev), [waterWang](https://github.com/waterWang), [vianmangal](https://github.com/vianmangal), [userquin](https://github.com/userquin), [mahsarajabpour](https://github.com/mahsarajabpour), [klivak](https://github.com/klivak), [jcollins1983](https://github.com/jcollins1983) and [jaketig](https://github.com/jaketig) in the framework, and [sridhar-3009](https://github.com/sridhar-3009), [MuslumYilmaz](https://github.com/MuslumYilmaz) and [Haviles04](https://github.com/Haviles04) in Vuetify0 and the MCP.\n\nSee you in September!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://community.vuetifyjs.com), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements.*\n","frontmatter":{"layout":"blog","meta":{"title":"August 2026 Update","description":"This August team delivered Vuetify 4.2 beta, which made @vuetify/v0 a runtime dependency of the framework.","keywords":"Vuetify August 2026, Vuetify 4.2, @vuetify/v0, open-on-focus, Sass variables, Vuetify0 1.2, Emerald, Vuetify MCP"}},"isInternal":false,"tokens":8949,"sizeBytes":30822},{"name":"building-a-basic-nuxt-application-with-vuetify.md","path":"packages/docs/src/pages/en/blog/building-a-basic-nuxt-application-with-vuetify.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/building-a-basic-nuxt-application-with-vuetify.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: Vuetify — Building a Basic Nuxt App with Vuetify\n description: Learn how to build a basic Nuxt app with Vuetify\n keywords: Vuetify, Nuxt, Vue, JavaScript, Web Development\n---\n\n# Building a Basic Nuxt Application with Vuetify\n\n---\n\n🖊️ Eric Sarrion • 📅 February 21st, 2025\n\n\n\n---\n\n## Introduction\n\nIn this article, we will build a basic application using Vue.js and Vuetify, leveraging the Nuxt framework.\n\nWhy do we use the Nuxt framework?\n\n1. It allows us to easily create new pages in our application using URLs such as /contact to access the contact page, or /products to access the products page.\n1. It simplifies the use of Vuetify components through a simple configuration in the nuxt.config.ts file.\n1. It automatically loads Vue.js methods and the components of our application without the need to import them manually each time. No more instructions like import { ref } from \"vue\".\n\nFor the mere simplification of the code enabled by the automatic loading of Vue.js methods and our application’s components, using Nuxt in our projects is highly recommended.\n\nWhy do we use Vuetify?\n\n1. Vuetify was created in 2016 and has been regularly updated and improved since then. Version 3 fully utilizes the latest version of Vue.js, with the `\n```\n\nVuetify offers the v-spacer component, which allows \"pushing\" the elements that follow it to the right. The buttons will therefore be positioned on the right side of the toolbar.\n\nTo display the buttons, we use the v-btn component with the icon attribute. This attribute allows the button to be displayed in a circular shape, according to the icon it contains. The @click attribute is also used to handle navigation to the desired page, just as we did in the navigation menu.\n\nThe application is now displayed:\n\n![Toolbar with additional navigation buttons for quick page access.](https://cdn.vuetifyjs.com/docs/images/blog/building-a-basic-nuxt-application-with-vuetify/14.png){ height=500 }\n\nClicking on the buttons displays the desired page. For example, the /contact page:\n\n![Contact page displayed after selecting it from the navigation menu.](https://cdn.vuetifyjs.com/docs/images/blog/building-a-basic-nuxt-application-with-vuetify/15.png){ height=500 }\n\n## Conclusion\n\nIn this article, we have covered fundamental aspects of using Vue.js and Vuetify in a Nuxt application.\n\nWe explored several Vuetify components that help design the application, and we learned how to break down the application into different pages, through which we navigated.\n","frontmatter":{"layout":"blog","meta":{"title":"Vuetify — Building a Basic Nuxt App with Vuetify","description":"Learn how to build a basic Nuxt app with Vuetify","keywords":"Vuetify, Nuxt, Vue, JavaScript, Web Development"}},"isInternal":false,"tokens":6140,"sizeBytes":27320},{"name":"building-with-nuxt-and-unocss.md","path":"packages/docs/src/pages/en/blog/building-with-nuxt-and-unocss.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/building-with-nuxt-and-unocss.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: Build with Nuxt and UnoCSS\n description: Learn how to effectively integrate Vuetify v3 with UnoCSS taking into consideration breakpoints, theme, typography and CSS layers.\n keywords: UnoCSS, TailwindCSS, Theme, CSS Layers\n---\n\n# Creating a highly optimized Vuetify 3 project with Nuxt and UnoCSS\n\nAlthough traditionally we tend to think about Vuetify as a great fit for large projects, it can also serve smaller projects that tend to prioritize performance. When scaffolding new projects it comes with tree-shaking out-of-the-box, but there is still some room for improvement as main CSS bundle ships hundreds of kB of CSS we might not need. If the users like your page loading animation and you can afford a bit of overhead, there is nothing wrong with simplified setup that does the job and lets you focus on the business logic or UX. That said, integrating UnoCSS (atomic CSS engine) will help us trim the bundle and enable dynamic utilities. With its superpowers we not only avoid writing plain CSS (most of the time), but can also make use of TailwindCSS tooling (IDE extensions) or standardize certain utilities.\n\nThe article will walk through scaffolding a starter project, installing and wiring UnoCSS, customizing fonts, handling light/dark mode and aligning breakpoints. Finally, \"CSS layers\" section shows how to order Vuetify, UnoCSS, and app‑specific styles to avoid specificity conflicts.\n\n🖊️ Jacek Czarniecki • 📅 December 22nd, 2025\n\n\n\n---\n\n## Table of Contents\n\n* [The steps ahead](#the-steps-ahead)\n* [Scaffold a new project](#scaffold-a-new-project)\n* [Keep an eye on the outputs](#keep-an-eye-on-the-outputs)\n* [Disable CSS for utilities](#disable-css-for-utilities)\n * [Shortest way to setup UnoCSS](#shortest-way-to-setup-unocss)\n * [Migrating to utilities from TailwindCSS v4](#migrating-to-utilities-from-tailwindcss-v4)\n * [Resolve specificity issues (quickly)](#resolve-specificity-issues-quickly)\n * [Font family configuration](#font-family-configuration)\n * [Light/dark mode compatibility](#light-dark-mode-compatibility)\n * [Custom typography (text variants)](#custom-typography-text-variants)\n * [Customize breakpoints](#customize-breakpoints)\n* [Using CSS layers](#using-css-layers)\n\n---\n\n## The steps ahead\n\nRight after generating starter project we are going to disable all CSS for non-theme colors (Material colors palette) and CSS utilities. This leaves out styles for \"reset\", transitions and components. UnoCSS is going to generate them on the fly making sure we only bundle CSS we actually use.\n\nAlong the way we will keep in mind that successful integration has to correctly match following aspects:\n\n* themes (light / dark mode)\n* custom typography\n* responsive breakpoints\n\nLastly, we will enable CSS layers to establish order. This part is meant for advanced frontend developers and teams that have a solid knowledge of CSS and the layers can impact day to day work. It is not a free lunch and it might not always fit the workflow or the way you write CSS.\n\n## Scaffold a new project\n\n::: tabs\n\n```bash [pnpm]\npnpm create vuetify@2.8.0\n```\n\n```bash [yarn]\nyarn create vuetify@2.8.0\n```\n\n```bash [npm]\nnpm create vuetify@2.8.0\n```\n\n```bash [bun]\nbun create vuetify@2.8.0\n```\n\n:::\n\n...choose \"Nuxt Recommended\". Following questions don't matter much.\n\nStart the project on localhost\n\n::: tabs\n\n```bash [pnpm]\npnpm dev\n```\n\n```bash [yarn]\nyarn dev\n```\n\n```bash [npm]\nnpm run dev\n```\n\n```bash [bun]\nbun run dev\n```\n\n:::\n\n## Keep an eye on the outputs\n\nNuxt uses Vite under the hood to build assets for production. Sizes are all layed out in the logs.\n\n::: tabs\n\n```bash [pnpm]\npnpm build\n```\n\n```bash [yarn]\nyarn build\n```\n\n```bash [npm]\nnpm run build\n```\n\n```bash [bun]\nbun run build\n```\n\n:::\n\n![Log from Nuxt build showing entry bundle exceeding 500kB (unminified)](https://cdn.vuetifyjs.com/docs/images/blog/building-with-nuxt-and-unocss/nuxt-build-log.png)\n\nAnytime you build the project, bundle files are right there in the `.output/public/_nuxt` directory. The CSS bundle file named `entry{hash}.css` is one that might be particularly interesting.\n\n::: tip\nWhen inspecting bundles, keep in mind VSCode might refuse to format large files, freeze or even crash. I recommend Zed editor for the optimal experience.\n:::\n\n## Disable CSS for utilities\n\nLet's adjust the `app/assets/settings.scss`:\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $utilities: false,\n);\n```\n\nIf you run `pnpm build` again, you may observe that `entry.*.css` bundle is significantly smaller. We could get even further by replacing MDI font icons with SVG icons or UnoCSS preset for icons, but it is out of scope for this article.\n\n### Shortest way to setup UnoCSS\n\n::: tabs\n\n```bash [pnpm]\npnpm add -D unocss unocss-preset-vuetify @unocss/nuxt\n```\n\n```bash [yarn]\nyarn add -D unocss unocss-preset-vuetify @unocss/nuxt\n```\n\n```bash [npm]\nnpm i -D unocss unocss-preset-vuetify @unocss/nuxt\n```\n\n```bash [bun]\nbun add -D unocss unocss-preset-vuetify @unocss/nuxt\n```\n\n:::\n\nRegister the module in `nuxt.config.ts` and paste initial configuration nearby:\n\n```ts { resource=\"nuxt.config.ts\" }\nimport { presetVuetify } from 'unocss-preset-vuetify'\n\nexport default defineNuxtConfig({\n // ...\n\n modules: [\n '@unocss/nuxt',\n // ... keep other modules\n ],\n\n // vuetify: { ... }\n\n unocss: {\n presets: [\n presetVuetify(),\n ],\n safelist: [/* classes that have to be always generated */],\n },\n})\n```\n\nWith the dedicated preset for Vuetify, we get all the utilities back. Except this time, UnoCSS scans the project files and generates CSS only for the classes we actually use.\n\nKeep in mind that this library was released fairly recently. If you notice any problem or limitation, reach out on [Discord](https://community.vuetifyjs.com) or post the issue on [GitHub](https://github.com/vuetifyjs/unocss-preset-vuetify).\n\n### Migrating to utilities from TailwindCSS v4\n\n::: tabs\n\n```bash [pnpm]\npnpm remove unocss-preset-vuetify\npnpm add -D @unocss/preset-wind4\n```\n\n```bash [yarn]\nyarn remove unocss-preset-vuetify\nyarn add -D @unocss/preset-wind4\n```\n\n```bash [npm]\nnpm un unocss-preset-vuetify\nnpm i -D @unocss/preset-wind4\n```\n\n```bash [bun]\nbun remove unocss-preset-vuetify\nbun add -D @unocss/preset-wind4\n```\n\n:::\n\nThe preset called [Wind4](https://unocss.dev/presets/wind4) is an official configuration builder providing making it easy to expose all the utilities from TailwindCSS v4 in your project. There are 2 configuration points - an object passed to the main `presetWind4` method and `theme` field next to the `presets`. Unlike using pure TailwindCSS v4 it lets us configure stuff in JavaScript code.\n\n```ts { resource=\"nuxt.config.ts\" }\nimport presetWind4 from '@unocss/preset-wind4'\n\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [\n presetWind4({\n preflights: {\n reset: false,\n },\n }),\n ],\n theme: {},\n },\n})\n```\n\nThe code above ensures we use only CSS reset from Vuetify and won't experience conflicts.\n\nSince TailwindCSS preset comes with its color palette we can use it instead of the Material palette from Vuetify. It is not an equivalent replacement, but if you want to go all-in with TailwindCSS utilities, you probably know what to expect ahead. Let's change the `app/assets/settings.scss`:\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $color-pack: false, // <- disable colors from Material palette\n $utilities: false,\n);\n```\n\nWe can finish this part with small adjustment to the example content in `HelloWorld.vue` and `AppFooter.vue`\n\n* replace `fill-height` with `h-full`\n* replace `font-weight-` with `font-`\n* replace `mb-n1` with `-mb-1`\n\nOptionally replace typography classes if you intend to use utilities from TailwindCSS. Further in the article, we will configure UnoCSS to provide typography aligned with Vuetify conventions. If you already know you won't need it, these are the closest equivalents (for the font size only):\n\n* `text-h2` » `text-5xl`\n* `text-h5` » `text-2xl`\n* `text-subtitle-1` » `text-base`\n* `text-body-2` » `text-sm`\n\nTurns out `v-container` paired with `fill-height` class gets special additional styles when `v-row` is also on the page. So we need to add some more utility classes to move the content to the center:\n\n```html\n\n```\n\nThere is one more component that relies on utility classes - `v-row`. Convenient props named `justify` and `align` rely on the utilitity classes for CSS properties `justify-content` and `align-items` respectively. TailwindCSS won't detect them though and even if we could force it to generate them, the classes in TailwindCSS are named slightly differently (e.g. `justify-space-between` vs `justify-between`). There are couple of ways to get around it.\n\n* just paste the classes in any CSS/SCSS file meant for global styles (e.g. `main.scss`)\n* spread `$utilites` to selectively disable most of them while keeping `justify-content` and `align-items`\n* don't use VRow/VCol or ban just those two problematic props (can be achieved by patching `vuetify-eslint-plugin`)\n\nIf you go with the first option, you can copy the classes below.\n\n```scss\n.justify-start { justify-content: flex-start }\n.justify-end { justify-content: flex-end }\n.justify-center { justify-content: center }\n.justify-space-between { justify-content: space-between }\n.justify-space-around { justify-content: space-around }\n.justify-space-evenly { justify-content: space-evenly }\n\n.align-start { align-items: flex-start }\n.align-end { align-items: flex-end }\n.align-center { align-items: center }\n.align-baseline { align-items: baseline }\n.align-stretch { align-items: stretch }\n\n.order-1 { order: 1 }\n// repeat until 12...\n.order-last { order: 13 }\n```\n\nSecond option is trading hardcoded styles for some noise in the Sass configuration.\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $utilities: (\n \"align-items\": (responsive: false, unimportant: (align-items)),\n \"justify-content\": (responsive: false, unimportant: (justify-content)),\n \"order\": (responsive: false, unimportant: (order)),\n // followed by 80+ lines with all other utilities set to `false`\n ),\n);\n```\n\nBy default, those utilities have `responsive: true` and `!important`. The example above is something I would recommend if you plan on using `@layer` which we will go over in the last section of this article.\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $utilities: (\n // \"align-items\" // keep default\n // \"justify-content\" // keep default\n // \"order\" // keep default\n // followed by 80+ lines with all other utilities set to `false`\n ),\n);\n```\n\nThe important thing to note here is that we did not use CSS layers so you might see that utility classes from TailwindCSS do not override default styles. An example would be:\n\n```scss { resource=\"app/components/HelloWorld.vue\" }\n...\n```\n\nSomething that is not really noticable at first glance is the card rounding. `rounded=\"lg\"` is not recognized by UnoCSS with TailwindCSS preset and `.rounded-lg` class won't appear in the output CSS.\n\n```scss\n.rounded-0 { border-radius: 0 }\n.rounded-sm { border-radius: 2px }\n.rounded { border-radius: 4px }\n.rounded-lg { border-radius: 8px }\n.rounded-xl { border-radius: 24px }\n.rounded-pill { border-radius: 9999px }\n.rounded-circle { border-radius: 50% }\n.rounded-shaped { border-radius: 24px 0 }\n```\n\nor\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $utilities: (\n // ...\n \"rounded\": (responsive: false, unimportant: (border-radius)),\n // ...\n ),\n);\n```\n\nDid I mention we have the same problem with `border`? ...ugh... same story, let's move on.\n\nAssuming you want to use VRow and VCol and `$utilities` is no longer `false`, you might be surprised to notice that utilities like `elevation-*`, `hidden-*` (and 2 more) got re-enabled. Those do not have their dedicated flags in the `$utilities` configuration map and only get removed when using strictly `$utilities: false`. It will be resolved in the future - keep an eye on ([#22405](https://github.com/vuetifyjs/vuetify/pull/22405)).\n\n### Resolve specificity issues (quickly)\n\nIn our current configuration order in which the styles are loaded matters - which might make our application look differently after deployment, as usually Vite \"just loads\" assets when working on localhost. This means the order may be quite different for the production bundle.\n\nUsually the easiest fix would be to make UnoCSS generate all the styles with `!important`. This would make them equivalent to original Vuetify utility classes that all had `!important` by default. It is not very elegant, but get's the job done and is easy to reason about. If you are interested in using CSS layers instead, skip to the [final](#using-css-layers) part of this article.\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [\n presetWind4({\n important: true, // <- utility classes always win\n preflights: { ... },\n }),\n ],\n theme: {},\n },\n})\n```\n\n### Font family configuration\n\nTo customize fonts we will rely on `@nuxt/fonts` to minimize the amount of configuration required to set up custom font family. Beware, it scans the output CSS - doing a magic trick similar to TailwindCSS, but for the fonts. So you might want to inspect the build logs and make sure there is no mention of Roboto after applying the changes described below.\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [ ... ],\n theme: {\n font: {\n heading: \"'Bricolage Grotesque', sans-serif\",\n body: \"Sen, sans-serif\",\n mono: \"'Sometype Mono', monospace\",\n },\n },\n safelist: ['font-heading', 'font-body', 'font-mono'],\n },\n fonts: {\n defaults: {\n weights: [300, 400, 500, 700],\n styles: ['normal', 'italic'],\n subsets: ['latin'],\n },\n },\n})\n```\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $heading-font-family: var(--font-heading),\n $body-font-family: var(--font-body),\n // ...\n);\n```\n\nWe can also create `/assets/main.scss` to make use of monospace font in global styles. It is not strictly necessary, but apps usually need some custom global styles anyway.\n\n```scss { resource=\"app/assets/main.scss\" }\ncode,\npre,\n.v-code {\n font-family: var(--font-mono);\n}\n```\n\nNew file has to be referenced or imported. Go ahead and include it in `nuxt.config.ts`:\n\n```ts { resource=\"nuxt.config.ts\" }\n css: ['assets/main.scss'],\n```\n\n### Light/dark mode compatibility\n\nLet's add some colors and try using `dark:*` prefix for some classes to see what happens.\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [ ... ],\n theme: {\n font: { ... },\n colors: {\n primary: {\n 800: '#003256',\n },\n secondary: {\n 600: '#00677e',\n 800: '#003543',\n },\n },\n },\n },\n})\n```\n\nNow we can try `dark:bg-primary-800` to one of the cards, and `dark:bg-linear-to-r dark:from-secondary-800 dark:to-secondary-600` to another.\n\nIn order to toggle themes we can add a quick button in the corner of the page. Simply paste the following code anywhere (e.g. in `default.vue` layout file).\n\n```html\n\n```\n\n> When adding new colors in `nuxt.config.ts` you might need to occasionally restart the Dev server.\n\nAt this point, toggling dark mode won't apply the background and gradient from classes generated by UnoCSS.\n\nUpon inspection of Elements tab in the browser DevTools, we can find the generated code by searching for `.dark\\:`\n\n```css\n.dark .dark\\:from-secondary-800 { ... }\n.dark .dark\\:to-secondary-600 { ... }\n.dark .dark\\:bg-linear-to-r { ... }\n```\n\nWhat we actually want there is `.v-theme--dark` not `.dark`.\n\nTo align UnoCSS with Vuetify we need add some more code inside `presetWind4({ ... })`\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n //...\n unocss: {\n presets: [\n presetWind4({\n preflights: { ... },\n dark: {\n dark: '.v-theme--dark',\n light: '.v-theme--light',\n },\n }),\n ],\n },\n})\n```\n\n### Custom typography (text variants)\n\n> If you intend to fully rely on TailwindCSS classes or have some specific typography requirements, you can skip to the next part.\n\nLet's add a quick preview page for all the typography options that used to be provided by Vuetify.\n\n```html\n\n\n\n```\n\nWe can see none of the usual helper classes work because we disabled `$utilities`. Theoretically we could opt out more granularly, but those classes won't work with responsive prefixes (`sm:*`, `md:*`, etc) - by default they are generated with responsive variants stuffed in the middle (e.g. `*-sm-*`, `*-md-*`, etc.). Having both conventions may be considered an unnecessary mental overhead, so the recommended approach would is to recreate the helpers in UnoCSS configuration `shortcuts`.\n\nFollowing configuration is aligned with defaults from Vuetify v3.11.x\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n //...\n unocss: {\n presets: [ ... ],\n theme: { ... },\n shortcuts: {\n 'text-h1': 'font-heading normal-case text-[6rem] font-[300] leading-[1] tracking-[-.015625em]',\n 'text-h2': 'font-heading normal-case text-[3.75rem] font-[300] leading-[1] tracking-[-.0083333333em]',\n 'text-h3': 'font-heading normal-case text-[3rem] font-[400] leading-[1.05] tracking-[normal]',\n 'text-h4': 'font-heading normal-case text-[2.125rem] font-[400] leading-[1.175] tracking-[.0073529412em]',\n 'text-h5': 'font-heading normal-case text-[1.5rem] font-[400] leading-[1.333] tracking-[normal]',\n 'text-h6': 'font-heading normal-case text-[1.25rem] font-[500] leading-[1.6] tracking-[.0125em]',\n 'text-subtitle-1': 'font-body normal-case text-[1rem] font-[400] leading-[1.75] tracking-[.009375em]',\n 'text-subtitle-2': 'font-body normal-case text-[.875rem] font-[500] leading-[1.6] tracking-[.0071428571em]',\n 'text-body-1': 'font-body normal-case text-[1rem] font-[400] leading-[1.5] tracking-[.03125em]',\n 'text-body-2': 'font-body normal-case text-[.875rem] font-[400] leading-[1.425] tracking-[.0178571429em]',\n 'text-button': 'font-body uppercase text-[.875rem] font-[500] leading-[2.6] tracking-[.0892857143em]',\n 'text-caption': 'font-body normal-case text-[.75rem] font-[400] leading-[1.667] tracking-[.0333333333em]',\n 'text-overline': 'font-body uppercase text-[.75rem] font-[500] leading-[2.667] tracking-[.1666666667em]',\n },\n },\n})\n```\n\n### Customize breakpoints\n\nDefault breakpoints provided by TailwindCSS preset are not compatible with Vuetify. This mismatch can lead to confusing layout bugs, so let's address this right away.\n\nUnlike other aspects of configuration, it is more challenging to have a squicky cleanup with a single definition. When we customize vanilla Vuetify project we end up having some duplication. This is true even without integrating Vuetify with UnoCSS or Tailwind. It is usually not a big deal, and we can add comments that remind us to keep both places in sync.\n\n* `settings.scss` - breakpoints for VContainer, VCol and responsive utilities (if we would keep any)\n* general Vuetify configuration `display` » `thresholds` for responsive logic in some components, `useDisplay` and `$vuetify.display.*`\n\nUnoCSS needs its own values and expects slightly different format, but we can still define them in a separate TS file and, so we won't end up with 3 places to maintain. As a side-note, integration with TailwindCSS v4 (without UnoCSS) would mean we are back with 3 definitions, because latest TailwindCSS expects pure CSS variables. Anyway, enough talking - let's jump right into the code.\n\nCreate `breakpoints.ts` under `./app/theme` (create new `theme` folder) with the following content:\n\n```ts { resource=\"app/theme/breakpoints.ts\" }\nimport type { DisplayThresholds } from 'vuetify'\n\n// repeated in settings.scss\nconst breakpoints: DisplayThresholds = {\n xs: 0,\n sm: 400,\n md: 840,\n lg: 1145,\n xl: 1545,\n xxl: 2138,\n}\n\nexport const forVuetify = breakpoints\n\nexport const forTailwind = Object.entries(breakpoints)\n .reduce(\n (o, [key, value]) => ({ ...o, [key]: `${value}px` }),\n {} as Record,\n )\n```\n\nImport and apply it to both Vuetify in UnoCSS in `nuxt.config.ts`\n\n```ts { resource=\"nuxt.config.ts\" }\nimport * as breakpoints from './app/theme/breakpoints'\n\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [ ... ],\n theme: {\n font: { ... },\n colors: { ... },\n breakpoint: breakpoints.forTailwind,\n },\n shortcuts: { ... },\n },\n\n vuetify: {\n moduleOptions: { ... },\n vuetifyOptions: {\n display: {\n mobileBreakpoint: 'md',\n thresholds: breakpoints.forVuetify,\n },\n },\n },\n}),\n```\n\nNow adjust the SCSS variables for Vuetify. Note that in **v3.x** the `$container-max-widths` would be calculated from breakpoints without rounding the values. If you prefer those values to be stable and rounded to `100px`, you can simply define them right below.\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $grid-breakpoints: (\n // repeated in breakpoints.ts\n 'xs': 0,\n 'sm': 400px,\n 'md': 840px,\n 'lg': 1145px,\n 'xl': 1545px,\n 'xxl': 2138px,\n ),\n $container-max-widths: (\n // manually calculated (optional after https://github.com/vuetifyjs/vuetify/pull/19759)\n 'md': 700px,\n 'lg': 1000px,\n 'xl': 1400px,\n 'xxl': 2000px,\n ),\n);\n```\n\nThe important next step is to verify the changes. I recommend creating and keeping a hidden technical page that will help verify changes or quickly troubleshoot the regression. Here is what you can paste into `app/pages/breakpoints.ts`:\n\n```html\n\n\n\n```\n\nRestart the Dev server and open `localhost:3000/breakpoints`.\n\n## Using CSS layers\n\nCSS `@layer` is a relatively new feature designed to scope blocks of CSS and avoid conflicts over specificity. Layers establish a defined order and quite easy to reason about. Anything that is not wrapped in `@layer my-name { ... }` is applied on top. The only tricky part is how browser handles `!important`. If you never used them, you can read more on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer) or an [excellent article from CSS Tricks](https://css-tricks.com/css-cascade-layers/).\n\nIn our example, all we want from CSS layers is to separate utility classes and ensure they get applied on top of base and components CSS without using `!important`. We will start by ensuring we don't have any leftover configuration in `nuxt.config.ts`:\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [\n presetWind4({\n // important: true, // <- we won't need it\n preflights: { ... },\n }),\n ],\n },\n})\n```\n\nCSS layers are going to be enabled by default in Vuetify v4. If you still use version 3.x, you can opt-in by changing two places: Sass variables and theme configuration.\n\n```scss { resource=\"app/assets/settings.scss\" }\n@use 'vuetify/settings' with (\n $layers: true, // <- enable layers for CSS generated with Sass\n // ...\n);\n```\n\nThis will ensure CSS reset, base styles, transitions, component-specific styles and utilities are all wrapped in the dedicated layers.\n\nUpdate Vuetify configuration to enable `@layers` for themes - CSS that is generated at runtime and injected into document ``.\n\n```ts { resourcce=\"vuetify.config.ts\" }\nexport default defineVuetifyConfiguration({\n theme: {\n layers: true, // <- enable layers for theme CSS\n defaultTheme: 'dark',\n themes: { ... },\n // ...\n }\n // ...\n})\n```\n\nFinally we update UnoCSS configuration\n\n```ts { resource=\"nuxt.config.ts\" }\nexport default defineNuxtConfig({\n // ...\n unocss: {\n presets: [ ... ],\n layers: {\n 'uno.theme': 0,\n 'uno.shortcuts': 1,\n 'uno.utilities': 2,\n },\n outputToCssLayers: {\n cssLayerName: (layer) => layer === 'properties' ? null : `uno.${layer}`,\n },\n theme: { ... },\n shortcuts: { ... },\n },\n})\n```\n\nYou can now utilize them to manage overrides without fighting specificity.\nFor example:\n\n```scss { resource=\"app/assets/main.scss\" }\n@layer vuetify.base {\n code, pre, .v-code {\n font-family: var(--font-mono);\n }\n}\n```\n\nWhen it comes to regular development, you should define layers you intend make sense for your app size. For medium projects I tend to start with no-brainer split into `base`, `components`, and custom `utilities`.\n\n```scss\n@layer app {\n @layer base, components, utilities;\n}\n```\n\nHere are some examples that help visualize the purpose of each group.\n\n```scss { resource=\"app/assets/main.scss\" }\n@layer app.base {\n .page {\n padding: 0 2rem 4rem;\n\n &__header {\n padding: 2rem 0 1rem;\n }\n }\n\n * {\n scrollbar-width: thin;\n scrollbar-color: #888a #8882;\n }\n}\n\n@layer app.utilities {\n .force-center {\n display: grid;\n place-items: center;\n }\n\n .flex-expand-even {\n display: flex;\n > * {\n flex: 1;\n }\n }\n}\n```\n\n`@layer app.components { ... }` is meant to be used in `\n```\n\n---\n\n## Summary\n\nWhoa! That's a lot. Integrating UnoCSS with a Vuetify + Nuxt project proves to be more than just `$utilities: false` and droping any configuration. Although we could take a shortcut with `important: true` I hope you will take an opportunity to use powerful `@layer` feature and elevate your development experience even more. Regardless, we achieved smaller CSS bundles and on-demand utility generation. Here are the key takeaways:\n\n* `unocss-preset-vuetify` (although experimental) can be a drop-in replacement of Vuetify utilities in projects that prefer to avoid full migration to TailwindCSS and its conventions\n* `@unocss/preset-wind4` is a go-to for developers eager to embrace widely adopted utilities\n* **Dark mode alignment**: Configure UnoCSS to use `.v-theme--dark` and `.v-theme--light` selectors instead of the default `.dark` class\n* **typography** can be fully restored using UnoCSS shortcuts also gaining responsive prefix support\n* **breakpoints** can be aligned across Vuetify's display config, Sass variables, and UnoCSS theme to avoid layout inconsistencies\n* **CSS layers**: enable `$layers: true` in Sass and configure UnoCSS layers to establish a clear cascade order without relying on `!important`\n\nThe result is a leaner, more maintainable styling setup that combines Vuetify's component library with atomic CSS utilities.\n\nIn the future we will explore similar setup based on Vite and pure TailwindCSS v4.\n\nHappy coding!\n","frontmatter":{"layout":"blog","meta":{"title":"Build with Nuxt and UnoCSS","description":"Learn how to effectively integrate Vuetify v3 with UnoCSS taking into consideration breakpoints, theme, typography and CSS layers.","keywords":"UnoCSS, TailwindCSS, Theme, CSS Layers"}},"isInternal":false,"tokens":7797,"sizeBytes":30016},{"name":"building-with-vite-and-tailwindcss.md","path":"packages/docs/src/pages/en/blog/building-with-vite-and-tailwindcss.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/building-with-vite-and-tailwindcss.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: Build with Vite and TailwindCSS v4\n description: Learn how to integrate Vuetify v4 with TailwindCSS v4 in a Vite project, covering theme colors, dark mode, fonts, breakpoints and CSS layers.\n keywords: TailwindCSS v4, Vuetify v4, Vite, Theme, CSS Layers\n---\n\n# Integrating Vuetify v4 with TailwindCSS v4 in a Vite project\n\nIn the previous article we explored integrating UnoCSS with Vuetify v3 and Nuxt. This time we take a more direct route: pairing Vuetify v4 with TailwindCSS v4 on a plain Vite setup with both running as Vite plugins. Vuetify v4 ships with CSS layers enabled by default, which makes integrating TailwindCSS significantly smoother than before.\n\nWe will go through the following steps:\n\n* Scaffold a starter project and wire up TailwindCSS\n* Restore `rounded-*` utilities\n* Customize fonts\n* Discuss strategy for theme colors management\n* Ensure Vuetify's light/dark themes work with TailwindCSS `light:*` and `dark:*` prefixes\n* Align breakpoints configuration\n\n🖊️ Jacek Czarniecki • 📅 February 16th, 2026\n\n\n\n---\n\n## Table of Contents\n\n* [Scaffold and install TailwindCSS](#scaffold-and-install-tailwindcss)\n * [Create the project](#create-the-project)\n * [Add TailwindCSS v4 via the Vite plugin](#add-tailwindcss-v4-via-the-vite-plugin)\n * [Disable Vuetify utilities](#disable-vuetify-utilities)\n * [Migrate HelloWorld.vue and AppFooter.vue](#migrate-helloworldvue-and-appfootervue)\n* [Restore classes for rounded corners](#restore-classes-for-rounded-corners)\n* [Customize fonts](#customize-fonts)\n* [Avoid conflicting color utilities](#avoid-conflicting-color-utilities)\n* [Configure class-based light/dark variants](#configure-class-based-lightdark-variants)\n* [Breakpoints](#breakpoints)\n* [Summary](#summary)\n\n---\n\n## Scaffold and install TailwindCSS\n\n### Create the project\n\n::: tabs\n\n```bash [pnpm]\npnpm create vuetify@latest\n```\n\n```bash [yarn]\nyarn create vuetify\n```\n\n```bash [npm]\nnpm create vuetify\n```\n\n```bash [bun]\nbun create vuetify\n```\n\n:::\n\n...choose the \"Base\" preset and \"None\" when asked for the CSS framework. The point is to learn how the pieces work together by performing code changes manually.\n\nVerify the boilerplate by building it with the standard NPM build script (e.g. `pnpm run build`).\n\nAdd a few generated files to `.gitignore`, so they won't annoy us when inspecting applied changes.\n\n```sh { resource=\".gitignore\" }\n# Generated files\nauto-imports.d.ts\ncomponents.d.ts\ntyped-router.d.ts\n.eslintrc-auto-import.json\n```\n\nCommit all files as a baseline. This way you can always diff against it and keep track of changes we are about to introduce.\n\n### Add TailwindCSS v4 via the Vite plugin\n\n::: tabs\n\n```bash [pnpm]\npnpm add -D tailwindcss @tailwindcss/vite\n```\n\n```bash [yarn]\nyarn add -D tailwindcss @tailwindcss/vite\n```\n\n```bash [npm]\nnpm i -D tailwindcss @tailwindcss/vite\n```\n\n```bash [bun]\nbun add -D tailwindcss @tailwindcss/vite\n```\n\n:::\n\nRegister `tailwindcss()` in the `plugins` array of `vite.config.ts` and create `src/styles/tailwind.css`. Vuetify v4 already provides its own reset, so we skip Tailwind's preflight to avoid two competing resets:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@import \"tailwindcss/theme\" layer(tailwind.theme);\n/* @import \"tailwindcss/preflight.css\" layer(tailwind.reset); <-- skipped intentionally */\n@import \"tailwindcss/utilities\" layer(tailwind.utilities);\n```\n\n```ts { resource=\"src/main.ts\" }\nimport { registerPlugins } from '@/plugins'\nimport App from './App.vue'\nimport { createApp } from 'vue'\n\nimport 'unfonts.css'\nimport './styles/tailwind.css' // <-- include new file\n\nconst app = createApp(App)\nregisterPlugins(app)\napp.mount('#app')\n```\n\n```ts { resource=\"vite.config.mts\" }\nimport tailwindcss from '@tailwindcss/vite'\n// ...\n\nexport default defineConfig({\n plugins: [\n tailwindcss(), // <-- register the plugin\n // ...\n ],\n```\n\nIn order for Vuetify transitions to work properly, we have to ensure `tailwind.*` layers are placed before `vuetify-final`. Go ahead and add a new file called `layers.scss`:\n\n```css { resource=\"src/styles/layers.scss\" }\n@layer vuetify-core;\n@layer vuetify-components;\n@layer vuetify-overrides;\n@layer vuetify-utilities;\n\n@layer tailwind; /* <-- our new utilities */\n\n@layer vuetify-final;\n```\n\nThen reference it from `vuetify.ts` before importing `vuetify/styles`.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\n// Styles\nimport '../styles/layers.css'\nimport '@mdi/font/css/materialdesignicons.css'\nimport 'vuetify/styles'\n\n// followed by createVuetify({ ... })\n```\n\n![CSS Layers preview in browser DevTools](https://cdn.vuetifyjs.com/docs/images/blog/building-with-vite-and-tailwindcss/vuetify-tailwindcss-layers.png)\n\n### Disable Vuetify utilities\n\nLet's adjust `src/styles/settings.scss`:\n\n```scss { resource=\"src/styles/settings.scss\" }\n@use 'vuetify/settings' with (\n $color-pack: false,\n $utilities: false,\n);\n```\n\nIf you run the build again, you should observe that the CSS bundle shrinks noticeably:\n\n```md\nbefore: 658.40 kB │ gzip: 141.74 kB\nafter: 481.24 kB │ gzip: 115.70 kB\n```\n\nThe expected difference is substantial, but we still pay the tax of using the full MDI icon font. Switching to SVG icons (`@mdi/js`) is not a big deal, but we will keep this guide focused on integrating TailwindCSS. If you need to optimize the bundle size further, Vuetify documentation already covers [how to switch to SVG icon set](/features/icon-fonts/#mdi-js-svg).\n\n### Migrate HelloWorld.vue and AppFooter.vue { #migrate-helloworldvue-and-appfootervue }\n\nWith utilities disabled, some classes used in the scaffolded template will stop working. Here are the replacements:\n\n* replace `fill-height` with `h-full`\n* replace `d-flex` with `flex`\n* replace `align-center` with `items-center`\n* replace `font-weight-*` with `font-*`\n* replace `mb-n1` with `-mb-1`\n* replace typography `text-*` classes with native TailwindCSS utilities to achieve similar font size and weight\n * `text-body-2` » `text-sm`\n * `text-h2` » `text-7xl`\n\nVRow/VCol can also be replaced with `grid md:grid-cols-2 gap-3` and `md:col-span-2` for the first VCard. However, you might be surprised to learn that Vuetify's grid engine got a major overhaul in v4.0.0 and is much leaner and more flexible than ever.\n\n## Restore classes for rounded corners\n\nSomething that is not really noticeable at first glance is the card rounding. Vuetify's `rounded` prop values (`rounded=\"lg\"`, etc.) emit classes like `.rounded-lg` that collide with Tailwind's naming but use different values.\n\nTailwindCSS lets us define rounding using CSS variables that are later applied by the specific CSS classes.\n\n```css\n.rounded-lg {\n border-radius: var(--radius-lg);\n}\n```\n\nLooking at the default TailwindCSS configuration side-by-side with the default Vuetify classes generated from Sass, it is clear that those are not compatible and we will need some stitching.\n\n```css\n@theme {\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --radius-4xl: 2rem;\n}\n\n/* default output from Vuetify, we disabled those with $utilities: false */\n.rounded-0 { border-radius: 0 }\n.rounded-sm { border-radius: 2px }\n.rounded { border-radius: 4px }\n.rounded-lg { border-radius: 8px }\n.rounded-xl { border-radius: 24px }\n.rounded-pill { border-radius: 9999px }\n.rounded-circle { border-radius: 50% }\n.rounded-shaped { border-radius: 24px 0 }\n```\n\nIn order to resolve this, we need to use `blocklist` and suppress certain utilities from TailwindCSS. Create a config file `tailwind.config.ts`:\n\n```ts { resource=\"tailwind.config.ts\" }\nimport type { Config } from 'tailwindcss'\n\nmodule.exports = {\n blocklist: [\n 'rounded-xs',\n 'rounded-md',\n 'rounded-2xl',\n 'rounded-3xl',\n 'rounded-4xl',\n 'rounded-full',\n ],\n} satisfies Config\n```\n\nThe new file has to be linked from `tailwind.css`. We also override the radius variables and register custom utilities for the values that don't exist in Tailwind out-of-the-box:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@import \"tailwindcss/theme\" layer(theme);\n/* @import \"tailwindcss/preflight.css\" layer(reset); */\n@import \"tailwindcss/utilities\" layer(utilities);\n\n@config \"../../tailwind.config.ts\";\n\n@theme {\n --radius-sm: 2px;\n --radius-lg: 8px;\n --radius-xl: 24px;\n}\n\n@utility rounded-0 { border-radius: 0 }\n@utility rounded-pill { border-radius: 9999px }\n@utility rounded-shaped { border-radius: 24px 0 }\n\n@source inline('rounded-0');\n@source inline('rounded-sm');\n@source inline('rounded'); /* leaving .25rem */\n@source inline('rounded-lg');\n@source inline('rounded-xl');\n@source inline('rounded-pill');\n@source inline('rounded-circle');\n@source inline('rounded-shaped');\n```\n\nIf you'd rather use the original TailwindCSS `rounded-*` utilities, it is recommended to disallow use of Vuetify's rounded classes, which can be enforced by patching `eslint-plugin-vuetify`. The actual process of patching is specific to the package manager of your choice, so we will skip it for now. If you are stuck, feel free to reach out on [Discord](https://community.vuetifyjs.com).\n\n---\n\n## Customize fonts\n\nThe `create-vuetify` utility we used at the beginning to scaffold the project uses `unplugin-fonts` to load Roboto. Let's update the configuration to make sure the target fonts are available.\n\n```ts { resource=\"vite.config.mts\" }\n Fonts({\n fontsource: {\n families: [\n {\n name: 'Bricolage Grotesque',\n weights: [300, 400, 500, 700],\n },\n {\n name: 'Sen',\n weights: [400, 500, 700],\n },\n {\n name: 'Sometype Mono',\n weights: [400, 700],\n },\n ],\n },\n }),\n```\n\nNext step is to add them as dependencies:\n\n::: tabs\n\n```bash [pnpm]\npnpm i @fontsource/bricolage-grotesque @fontsource/sen @fontsource/sometype-mono\n```\n\n```bash [yarn]\nyarn add @fontsource/bricolage-grotesque @fontsource/sen @fontsource/sometype-mono\n```\n\n```bash [npm]\nnpm i @fontsource/bricolage-grotesque @fontsource/sen @fontsource/sometype-mono\n```\n\n```bash [bun]\nbun add @fontsource/bricolage-grotesque @fontsource/sen @fontsource/sometype-mono\n```\n\n:::\n\nNow we can configure TailwindCSS theme variables. These will generate utility classes like `font-heading`, `font-body` and `font-mono`:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@theme {\n --font-heading: \"Bricolage Grotesque\", sans-serif;\n --font-body: Sen, sans-serif;\n --font-mono: \"Sometype Mono\", monospace;\n\n /* ...breakpoints, radius, colors... */\n}\n\n/* ensure the variables are not skipped */\n@source inline('font-body');\n@source inline('font-heading');\n@source inline('font-mono');\n```\n\nThen we pass them to Vuetify through Sass variables so component typography picks them up too:\n\n```diff { resource=\"src/styles/settings.scss\" }\n@use 'vuetify/settings' with (\n $color-pack: false,\n $utilities: false,\n+ $heading-font-family: var(--font-heading),\n+ $body-font-family: var(--font-body),\n);\n```\n\nAt this point, I usually like to cover components that need a monospace font. We can also create `/styles/main.scss` to set it globally. It is not strictly necessary, but apps usually need some custom global styles anyway.\n\n```scss { resource=\"src/styles/main.scss\" }\n@layer vuetify-overrides {\n code, pre, .v-code {\n font-family: var(--font-mono);\n }\n}\n```\n\nNew file has to be imported in `main.ts` alongside the Tailwind stylesheet.\n\n---\n\n## Avoid conflicting color utilities\n\n`bg-*` classes generated by Vuetify carry over a foreground color that is calculated to ensure text and icons have a sufficient contrast ratio. This makes them superior to regular TailwindCSS utilities, but also incompatible with variants (`hover:`, `sm:*`, `md:*`, etc).\n\n```css\n.bg-primary {\n --v-theme-overlay-multiplier: var(--v-theme-primary-overlay-multiplier);\n background-color: rgb(var(--v-theme-primary));\n color: rgb(var(--v-theme-on-primary));\n}\n```\n\nWhen working with TailwindCSS, it is normal to split background and text colors into separate classes, and the responsibility of ensuring readability is on the developer writing the code.\n\nIn order to avoid the mental overhead of remembering where each `bg-*` is coming from, let's instruct Vuetify theme to generate only CSS variables and skip the classes:\n\n```diff { resource=\"src/plugins/vuetify.ts\" }\nexport default createVuetify({\n theme: {\n defaultTheme: 'system',\n+ utilities: false,\n },\n})\n```\n\nNext, we can pass those theme colors to TailwindCSS. Since the values are raw comma-separated RGB channels (translated from hex on the fly by Vuetify), we need to wrap them in `rgb()` when registering them in Tailwind's `@theme`:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@theme {\n --color-background: rgb(var(--v-theme-background));\n --color-primary: rgb(var(--v-theme-primary));\n --color-surface: rgb(var(--v-theme-surface));\n --color-success: rgb(var(--v-theme-success));\n --color-error: rgb(var(--v-theme-error));\n /* and the rest of colors you intend to use */\n}\n\n/* safelist common colors to be used with color=\"...\" attribute */\n@source inline('bg-primary');\n@source inline('text-primary');\n@source inline('bg-success');\n@source inline('text-success');\n@source inline('bg-error');\n@source inline('text-error');\n```\n\nNow you can use `bg-primary`, `text-success`, `hover:bg-error` and similar classes, all driven by Vuetify's theme definition.\n\n---\n\n## Configure class-based light/dark variants { #configure-class-based-lightdark-variants }\n\nLet's add some color-dependent classes and try using the `dark:*` prefix to see what happens. By default, Tailwind's `dark:` variant targets `@media (prefers-color-scheme: dark)` or a `.dark` class. Vuetify uses `.v-theme--dark` instead, so the generated selectors won't match.\n\nTo align Tailwind with Vuetify, we need to redeclare theming variants:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@custom-variant light (&:where(.v-theme--light, .v-theme--light *));\n@custom-variant dark (&:where(.v-theme--dark, .v-theme--dark *));\n```\n\nYou can verify it by toggling themes. Simply add a quick button somewhere (e.g. in `App.vue`):\n\n```html\n\n```\n\nNow classes like `dark:bg-primary` and `light:text-error` should react correctly to Vuetify's theme toggle.\n\n---\n\n## Breakpoints\n\nDefault breakpoints provided by TailwindCSS are not compatible with Vuetify. This mismatch can lead to unexpected layout issues when `sm:` in Tailwind kicks in at a different width than `sm` in VCol. Let's align them.\n\nUnlike the UnoCSS setup from the previous article, where we could define breakpoints in a shared `.ts` file and feed them into both tools, TailwindCSS v4 expects breakpoints as pure CSS variables under `@theme`. This means we inevitably end up with the same values in three places. It's a minor inconvenience, but easy to manage with a comment pointing to the other two.\n\nFirst, clear out the Tailwind defaults and set our own in `tailwind.css`:\n\n```css { resource=\"src/styles/tailwind.css\" }\n@theme {\n --breakpoint-*: initial;\n /* repeated in vuetify.ts and settings.scss */\n --breakpoint-xs: 0px;\n --breakpoint-sm: 400px;\n --breakpoint-md: 840px;\n --breakpoint-lg: 1145px;\n --breakpoint-xl: 1545px;\n --breakpoint-xxl: 2138px;\n\n /* ... fonts, radius, colors ... */\n}\n```\n\n`--breakpoint-*: initial` resets all built-in Tailwind breakpoints (`2xl`, `3xl`, etc.) so they don't interfere or confuse your teammates.\n\nNext, set Vuetify's `display.thresholds` in the plugin setup. This controls `useDisplay()` and `$vuetify.display.*`.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nexport default createVuetify({\n theme: { ... },\n display: {\n mobileBreakpoint: 'md',\n thresholds: {\n // repeated in tailwind.css and settings.scss\n xs: 0,\n sm: 400,\n md: 840,\n lg: 1145,\n xl: 1545,\n xxl: 2138,\n },\n },\n})\n```\n\nFinally, update the SCSS variables. `$grid-breakpoints` drives VCol's responsive columns, and `$container-max-widths` sets the maximum width of VContainer at each breakpoint.\n\n```scss { resource=\"src/styles/settings.scss\" }\n@use 'vuetify/settings' with (\n $color-pack: false,\n $utilities: false,\n $heading-font-family: var(--font-heading),\n $body-font-family: var(--font-body),\n $grid-breakpoints: (\n // repeated in tailwind.css and vuetify.ts\n 'xs': 0,\n 'sm': 400px,\n 'md': 840px,\n 'lg': 1145px,\n 'xl': 1545px,\n 'xxl': 2138px,\n ),\n $container-max-widths: (\n // optional, computed from breakpoints\n 'md': 700px,\n 'lg': 1000px,\n 'xl': 1400px,\n 'xxl': 2000px,\n ),\n);\n```\n\nThe `$container-max-widths` values are manually rounded to keep VContainer sizing clean and predictable.\n\nAt this point, a class like `sm:text-lg` in Tailwind and `sm=\"6\"` on VCol will both trigger at exactly `400px`.\n\n---\n\n## Summary\n\nCompared to the UnoCSS path, most of the setup lands in `tailwind.css` instead of `nuxt.config.ts`. We used custom directives like `@theme` and `@custom-variant`, but had to drop back to importing JS-based config to blacklist some styles provided by Tailwind. I hope it was an interesting journey and you can feel comfortable building upon this setup. Here are the key takeaways:\n\n* **Utilities**: we disabled Vuetify's built-in utilities to replace them with TailwindCSS utilities while keeping an eye on the correct order of CSS layers\n* **Rounded classes**: Vuetify's `rounded` prop and Tailwind's `rounded-*` utilities use the same class names with different values. It was a challenge, but we were able to bridge the gap\n* **Theme colors**: Vuetify theme can also be configured to skip utility classes and generate only CSS properties. We have passed them inside the `@theme` directive and \"safelisted\" global colors we intend to use with the `color` prop on cards, buttons and icons\n* **Dark mode**: Tailwind is flexible enough to accept Vuetify theme classes\n* **Typography**: `text-*` classes were skipped for simplicity - you can introduce your own classes with the `@utility` directive if needed\n* **Breakpoints**: we aligned configuration across three definitions (SCSS, Vuetify config, Tailwind `@theme`) to prevent layout bugs\n\nReference repository with final state: [J-Sek/vuetify-vite-and-tailwind](https://github.com/J-Sek/vuetify-vite-and-tailwind). If you find it useful, give it a ⭐.\n\nCheers!\n","frontmatter":{"layout":"blog","meta":{"title":"Build with Vite and TailwindCSS v4","description":"Learn how to integrate Vuetify v4 with TailwindCSS v4 in a Vite project, covering theme colors, dark mode, fonts, breakpoints and CSS layers.","keywords":"TailwindCSS v4, Vuetify v4, Vite, Theme, CSS Layers"}},"isInternal":false,"tokens":4875,"sizeBytes":18579},{"name":"december-2025-update.md","path":"packages/docs/src/pages/en/blog/december-2025-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/december-2025-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: December 2025 Update\n description: December shipped Vuetify 4.0.0-alpha.0 with CSS layers, five v3.11.x patches, the Vuetify CLI public release, ecosystem-wide PWA rollout, and v0 progress.\n keywords: Vuetify December 2025, v4.0.0-alpha.0, Vuetify CLI, PWA, CSS layers, Vuetify0, MCP\n---\n\n\n\n# December 2025 Update\n\nWelcome to the December 2025 Vuetify update! The year closes with a bang—**v4.0.0-alpha.0** marks the beginning of Vuetify 4's public development, while five v3.11.x patch releases keep the stable branch polished. The **Vuetify CLI** shipped its first public release, PWA support rolled out across all ecosystem products, and Vuetify0 continued its rapid evolution with 6 releases.\n\n![Hero image for December update](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/december-hero.png \"December hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 January 12th, 2026\n\n\n\n---\n\n## Closing the Year Strong\n\nDecember was our most productive month of 2025. With **522 commits** across 16 active repositories and **82 merged PRs**, the team shipped at an incredible pace. The release of v4.0.0-alpha.0 represents months of architectural planning finally landing for public testing—CSS layers, reduced breakpoints, and theme system improvements that set the stage for Vuetify 4.0 stable. Meanwhile, [J-Sek](https://github.com/J-Sek) continued his remarkable contribution streak with 16 PRs to the main framework, and [ikushum](https://github.com/ikushum) delivered 9 PRs across components. The CLI reached public release status just in time for the new year, and every ecosystem product now supports PWA installation.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Vuetify 4 Alpha](#vuetify-4-alpha)\n* [Ecosystem Spotlight: Vuetify CLI](#ecosystem-spotlight-vuetify-cli)\n * [create-vuetify Updates](#create-vuetify-updates)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Accessibility & Compatibility](#accessibility-compatibility)\n* [Product Updates](#product-updates)\n * [Vuetify Bin](#vuetify-bin)\n * [Vuetify Play](#vuetify-play)\n * [Vuetify Issues Reporter](#vuetify-issues)\n * [Other Products](#other-products)\n* [Vuetify MCP: Rate Limiting & CLI Support](#vuetify-mcp-rate-limiting-cli-support)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [December 2025 Changelog](#december-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nDecember delivered six Vuetify releases—five v3.11.x patches maintaining stability and the landmark **v4.0.0-alpha.0** kicking off the next major version. The v3.x branch continues receiving attention with accessibility improvements, bug fixes, and new props across multiple components.\n\n![December Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/releases.png \"December Releases Banner\")\n\n### Key Improvements\n\n* **[VWindow](/components/windows/)** keyboard controls for accessible navigation\n* **[VList](/components/lists/)** `navigation-strategy` prop to control focused item behavior\n* **[VImg](/components/images/)** attribute passthrough to underlying `` element\n* **[VOtpInput](/components/otp-input/)** `density` prop for compact layouts\n* **[VColorInput](/components/color-input/)/[VDateInput](/components/date-input/)** `picker-props` for customizing picker appearance\n* **[VDataIterator](/components/data-iterators/)** `items-length` prop for virtual scrolling support\n* **[VDatePicker](/components/date-pickers/)** custom `control-height` support\n* **[nested](/components/treeview/)** `branch` select strategy for hierarchical selection\n\nView the complete list of changes in the [Full Changelog](#december-2025-changelog)\n\n**Details:**\n\n* [v3.11.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.2)\n* [v3.11.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.3)\n* [v3.11.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.4)\n* [v3.11.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.5)\n* [v3.11.6](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.6)\n* [v4.0.0-alpha.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0-alpha.0)\n\n---\n\n## Vuetify 4 Alpha\n\nThe first alpha of **Vuetify 4.0** landed on December 30th, marking the start of public development for our next major version. This release contains significant architectural changes that improve performance, reduce bundle size, and modernize the CSS architecture.\n\n![Vuetify 4 Alpha](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/v4-alpha.png \"Vuetify 4 Alpha\")\n\n### What's New in v4.0.0-alpha.0\n\n**CSS Layers**: Vuetify 4 uses CSS layers throughout, flattening layer names and replacing `!important` declarations with proper cascade management. This makes customization cleaner and reduces specificity conflicts.\n\n**Theme System**: The default theme changes from `light` to `system`, respecting user preferences. Transparent color support enables more sophisticated design patterns. The `unimportant` option has been removed in favor of layers.\n\n**Reduced Breakpoints**: Default breakpoint sizes have been adjusted for modern viewport distributions.\n\n**Style Architecture**:\n\n* Separate entry points allow opting out of misc styles\n* CSS reset has been streamlined (removed overflow-y)\n* [VRow](/api/v-row/)/[VCol](/api/v-col/) styles can be skipped when only using [VContainer](/api/v-container/) or [VSpacer](/api/v-spacer/)\n\n**Component Updates**:\n\n* **[VBtn](/components/buttons/)**: Default text transform removed, display converted from grid to flex\n* **[VField](/api/v-field/)**: Display converted from grid to flex, append/prepend fills height\n* **[VSnackbar](/components/snackbars/)**: `multi-line` prop removed in favor of CSS\n* **[VSelect](/components/selects/)/[VAutocomplete](/components/autocompletes/)/[VCombobox](/components/combobox/)**: `item` renamed to `internalItem` for clarity\n* **[VNumberInput](/components/number-inputs/)**: No longer clamps value on mount\n* **[VDatePicker](/components/date-pickers/)**: Only emits start and end range values\n* **[VForm](/components/forms/)**: Unref values in slot props\n* **[VInput](/api/v-input/)**: New `indent-details` prop\n* **[VListItem](/api/v-list-item/)**: Exposes `isDisabled` in slot props\n* **[VCounter](/api/v-counter/)**: Inherits color (aligns with [VMessages](/api/v-messages/))\n\n::: info\n\nv4.0.0-alpha.0 is for testing and feedback only. Production applications should continue using v3.11.x until v4 reaches stable release.\n\n:::\n\n**Details:**\n\n* [v4.0.0-alpha.0 Release Notes](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0-alpha.0)\n* [Migration Guide](https://next.vuetifyjs.com/getting-started/upgrade-guide/)\n* [Remaining Issues](https://github.com/vuetifyjs/vuetify/milestone/62)\n\n---\n\n## Ecosystem Spotlight: Vuetify CLI { #ecosystem-spotlight-vuetify-cli }\n\n\n\n
\n\nThe **Vuetify CLI** reached its first public release in December with **25 commits** across versions v0.0.5 through v0.0.7. This new tooling ecosystem streamlines project scaffolding and integrates with the broader Vuetify ecosystem.\n\n![Vuetify CLI](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/cli.png \"Vuetify CLI\")\n\n### CLI Ecosystem Overview\n\nThe Vuetify CLI ecosystem consists of three packages that share logic via `@vuetify/cli-shared`:\n\n**create-vuetify0** (`npm create vuetify0`) — Scaffolds new Vuetify0 projects with support for [Vue](https://vuejs.org/) or [Nuxt](https://nuxt.com/) platforms. Includes feature selection for router, pinia, and eslint. TypeScript by default.\n\n**@vuetify/cli** (`vuetify` command) — The main CLI with multiple commands:\n\n* `vuetify init` — Same as create-vuetify, scaffolds new projects (supports `--type vuetify0`)\n* `vuetify add eslint` — Adds ESLint + [eslint-config-vuetify](https://github.com/vuetifyjs/eslint-config-vuetify) to existing projects\n* `vuetify add mcp` — Adds [Vuetify MCP](https://github.com/vuetifyjs/mcp) server config for [Cursor](https://cursor.sh/)/[VS Code](https://code.visualstudio.com/)\n* `vuetify update` — Smart updates Vuetify + related packages\n* `vuetify docs` — Opens vuetifyjs.com (version-aware)\n* `vuetify upgrade` — Self-upgrades the CLI\n\n::: tabs\n\n```bash [pnpm]\n# Install the CLI globally\npnpm add -g @vuetify/cli\n\n# Initialize a new project\nvuetify init my-app\n\n# Or create a v0 project directly\npnpm create vuetify0@latest\n\n# Add ESLint to an existing project\nvuetify add eslint\n\n# Add MCP server configuration\nvuetify add mcp\n\n# Update Vuetify packages\nvuetify update\n```\n\n```bash [yarn]\n# Install the CLI globally\nyarn global add @vuetify/cli\n\n# Initialize a new project\nvuetify init my-app\n\n# Or create a v0 project directly\nyarn create vuetify0\n\n# Add ESLint to an existing project\nvuetify add eslint\n\n# Add MCP server configuration\nvuetify add mcp\n\n# Update Vuetify packages\nvuetify update\n```\n\n```bash [npm]\n# Install the CLI globally\nnpm install -g @vuetify/cli\n\n# Initialize a new project\nvuetify init my-app\n\n# Or create a v0 project directly\nnpm create vuetify0@latest\n\n# Add ESLint to an existing project\nvuetify add eslint\n\n# Add MCP server configuration\nvuetify add mcp\n\n# Update Vuetify packages\nvuetify update\n```\n\n```bash [bun]\n# Install the CLI globally\nbun add -g @vuetify/cli\n\n# Initialize a new project\nvuetify init my-app\n\n# Or create a v0 project directly\nbun create vuetify0\n\n# Add ESLint to an existing project\nvuetify add eslint\n\n# Add MCP server configuration\nvuetify add mcp\n\n# Update Vuetify packages\nvuetify update\n```\n\n:::\n\n### create-vuetify Updates\n\nThe **create-vuetify** scaffolding tool received **12 commits** and 4 releases in December:\n\n**v2.8.0-beta.1** (December 30th):\n\n* **Vuetify 4 Alpha Support**: Templates now support bootstrapping projects with Vuetify 4.0.0-alpha.0\n* **Dynamic Version Replacement**: Vuetify version is now dynamically replaced in templates, making it easier to stay current\n\n**v2.7.3** (December 20th):\n\n* **[Volar](https://volarjs.dev/) Rich Hover Hints**: Enabled by default for better IDE experience with component prop documentation\n\n**v2.7.1-v2.7.2** (December 16th):\n\n* **Nuxt Styles Fix**: Corrected styles loading when not using the Nuxt module\n* Various maintenance updates\n\n**Details:**\n\n* [Vuetify CLI GitHub Repository](https://github.com/vuetifyjs/cli)\n* [create-vuetify Releases](https://github.com/vuetifyjs/create-vuetify/releases)\n* [v2.8.0-beta.1 Release Notes](https://github.com/vuetifyjs/create-vuetify/releases/tag/v2.8.0-beta.1)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nDecember's framework work balanced new features with stability improvements. The team merged 49 PRs addressing everything from keyboard accessibility to field validation.\n\n### New Features\n\n**[VWindow](/components/windows/) Keyboard Controls**\n\nThe [VWindow](/components/windows/) component now supports keyboard navigation, enabling users to move between slides with arrow keys—essential for accessibility and power users.\n\n**[VList](/components/lists/) Navigation Strategy**\n\nA new `navigation-strategy` prop gives fine-grained control over which items receive focus during keyboard navigation. This is particularly useful for complex lists with nested content.\n\n**[VImg](/components/images/) Attribute Passthrough**\n\nAttributes passed to [VImg](/components/images/) now flow through to the underlying `` element, enabling native image attributes like `loading=\"lazy\"` and custom data attributes.\n\n**[VOtpInput](/components/otp-input/) Density**\n\nThe [OTP input](/components/otp-input/) component now supports the `density` prop for compact layouts, and the `rounded` prop is properly applied to inner fields.\n\n**Details:**\n\n* [VWindow keyboard controls PR#22430](https://github.com/vuetifyjs/vuetify/pull/22430)\n* [VList navigation-strategy PR#22328](https://github.com/vuetifyjs/vuetify/pull/22328)\n* [VImg attribute passthrough PR#22439](https://github.com/vuetifyjs/vuetify/pull/22439)\n* [VOtpInput density PR#22401](https://github.com/vuetifyjs/vuetify/pull/22401)\n\n### Accessibility & Compatibility { #accessibility-compatibility }\n\n**Forced Colors Mode**\n\n[VColorPicker](/components/color-pickers/) now renders inner outlines correctly in Windows High Contrast Mode and other forced-colors environments, ensuring usability for users with visual impairments.\n\n**Screen Reader Improvements**\n\n[VTextArea](/components/textareas/) and [VSelect](/components/selects/) received accessibility improvements for better screen reader announcements, including proper ARIA attributes and field label reading.\n\n**[VSlider](/components/sliders/) ARIA Attributes**\n\nSlider components now correctly pass `aria-` attributes to the thumb element for assistive technology support.\n\n**[VTooltip](/components/tooltips/) Dismissable by Default**\n\nTooltips are now dismissable by default, improving keyboard accessibility and touch device support.\n\n**Fields ARIA Cleanup**\n\nAll field components received ARIA attribute cleanup for better screen reader compatibility.\n\n**Details:**\n\n* [VColorPicker forced-colors PR#22317](https://github.com/vuetifyjs/vuetify/pull/22317)\n* [VTextArea/VSelect screen reader PR#20339](https://github.com/vuetifyjs/vuetify/pull/20339)\n* [VSlider ARIA PR#22444](https://github.com/vuetifyjs/vuetify/pull/22444)\n* [VTooltip dismissable PR#22419](https://github.com/vuetifyjs/vuetify/pull/22419)\n* [Fields ARIA cleanup PR#22418](https://github.com/vuetifyjs/vuetify/pull/22418)\n\n---\n\n## Product Updates\n\nDecember saw significant updates across all Vuetify ecosystem products, with **PWA support** rolling out universally and major feature additions to [Bin](https://bin.vuetifyjs.com/) and [Play](https://play.vuetifyjs.com/).\n\n### Vuetify Bin\n\n\n\n
\n\n**41 commits** made December [Bin](https://bin.vuetifyjs.com/)'s most active month:\n\n* **Embeddable Bins**: New feature in testing for embedding bins in external documentation and blogs using [Shiki](https://shiki.style/) for lighter bundles. Available to Vuetify One subscribers.\n\n![Embeddable Bins](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/embeddable-bins.png \"Bin embedded in documentation\")\n\n* **18 Language Support**: Expanded language support with auto-detection for pasted code\n* **Public/Private Visibility**: Users can now control bin visibility with proper 403 error pages for private bins\n* **Live Share Restrictions**: Limited to public bins with dashboard action\n* **Accessibility Audit**: Comprehensive a11y review completed\n* **PWA Support**: Install Bin as a standalone app\n* **Editor Improvements**: Line wrapping enabled by default, grouped secondary AppBar actions\n\n### Vuetify Play\n\n\n\n
\n\n**23 commits** delivered key improvements to [Play](https://play.vuetifyjs.com/):\n\n* **Multiple Templates**: Switch between project templates without losing work, with proper preservation of changes to system files\n\n![Play Template Switcher](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/play-templates.png \"Template selection in Vuetify Play\")\n\n* **Editor Settings**: Customizable editor preferences\n* **Visibility Toggle**: Public/private playground support\n* **Version Selector**: Now includes prerelease versions for Vue and Vuetify\n* **v0 Template**: Updated to presetWind4\n* **PWA Support**: Install Play as a standalone app\n\n### Vuetify Issues\n\n\n\n
\n\nThe **Vuetify Issues** reporter received **31 commits** with significant improvements to the issue creation workflow:\n\n![Issues Form](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/vissues-form.png \"Improved issue creation form\")\n\n**Ecosystem Projects Support**:\n\n* Now supports non-library repositories (create-vuetify, admin, etc.)\n* Repo and type query parameters for direct linking\n* Project name displayed in title for ecosystem issues\n* Reproduction step hidden for ecosystem projects (not applicable)\n* Shows repo name instead of versions for ecosystem review\n\n**Form Validation Improvements**:\n\n* Required expected/actual behavior fields before save\n* Steps require content before adding new ones\n* New step auto-focus for better UX\n\n**Other Updates**:\n\n* **PWA Support**: Install as standalone app\n* **\"Used to work\" Switch**: Available for all repos, not just Vuetify\n* **New Favicon**: Fresh vissues branding\n* **UI Polish**: Fixed button spacing and v-confirm-edit actions\n\n**Details:**\n\n* [Vuetify Issues](https://issues.vuetifyjs.com/)\n\n### Other Products\n\n* **[Vuetify Snips](https://snips.vuetifyjs.com/)**: New button and pagination snippets in review, improved a11y for radio groups, PWA support added\n* **[Vuetify Studio](https://studio.vuetifyjs.com/)**: PWA support added, playground link generation updated\n* **[Vuetify Link](https://link.vuetifyjs.com/)**: Route handling refactored to use definePage, PWA support added\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n* [Vuetify Play](https://play.vuetifyjs.com/)\n* [Vuetify Snips](https://snips.vuetifyjs.com/)\n* [Vuetify Issues](https://issues.vuetifyjs.com/)\n\n---\n\n## Vuetify MCP: Rate Limiting & CLI Support { #vuetify-mcp-rate-limiting-cli-support }\n\n\n\n
\n\nDecember brought four releases to the Vuetify MCP server (v0.2.4 through v0.4.1), adding important infrastructure improvements and new capabilities.\n\n### What's New\n\n**Rate Limiter**: The MCP server now includes rate limiting to ensure fair usage and stability across all consumers.\n\n**[Claude Code](https://docs.anthropic.com/en/docs/claude-code) CLI Support**: Native integration with Claude Code for seamless AI-assisted development workflows.\n\n**update_vuetify_bin Tool**: A new tool for updating existing Vuetify bins programmatically.\n\n**HTTP Transport Improvements**: Stateless mode improvements and auth propagation fixes.\n\n### Getting Started\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\nOr run locally:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@vuetify/mcp\"]\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [Model Context Protocol Documentation](https://modelcontextprotocol.io/)\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\n
\n\nDecember was another strong month for Vuetify0, with **322 commits** and 6 releases (v0.0.15–v0.0.18, v0.0.20–v0.0.21). The headless meta-framework gained five new composables—including virtual scrolling and pagination primitives—along with accessibility improvements, observer enhancements, and significant documentation updates.\n\n![Vuetify0 Progress](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/v0.png \"Vuetify0 Progress\")\n\nWith these additions, v0 now provides production-ready primitives for building accessible, high-performance UI components without the styling opinions of a traditional component library.\n\n### New Composables\n\nDecember added five composables covering pagination, virtualization, and UI utilities:\n\n**[usePagination](https://0.vuetifyjs.com/composables/utilities/use-pagination/)** — Full-featured pagination logic with first/prev/next/last navigation, ellipsis support for large page ranges, and computed `pageStart`/`pageStop` for efficient data slicing. Supports locale-aware formatting and customizable page sizes.\n\n**[useVirtual](https://0.vuetifyjs.com/composables/utilities/use-virtual/)** — High-performance virtual scrolling that renders only visible items plus an overscan buffer. Supports dynamic or fixed item heights, bidirectional scrolling (useful for chat interfaces), scroll anchoring to maintain position across data changes, and iOS momentum scrolling. Handles 100k+ items efficiently.\n\n**[useOverflow](https://0.vuetifyjs.com/composables/utilities/use-overflow/)** — Computes how many items fit in a container based on available width. Two modes: variable-width (measures each item individually, ideal for breadcrumbs) and uniform-width (samples one item, ideal for pagination buttons). Tracks container width via ResizeObserver and supports reserved space for navigation controls.\n\n**[useClickOutside](https://0.vuetifyjs.com/composables/system/use-click-outside/)** — Click outside detection for closing menus, dialogs, and popovers. Handles edge cases like portaled content and nested overlays.\n\n**[useToggleScope](https://0.vuetifyjs.com/composables/system/use-toggle-scope/)** — Manages Vue effect scopes based on a reactive boolean. Automatically cleans up effects when the condition becomes false—useful for conditional side effects and feature flags.\n\n### New Components\n\n**[PaginationStatus](https://0.vuetifyjs.com/components/semantic/pagination/)** — An accessibility-focused component that provides `aria-live` announcements when pagination state changes. Screen readers automatically announce the current page, helping users who rely on assistive technology stay oriented. Style it with `sr-only` CSS to keep it visually hidden while remaining accessible.\n\n### Observer Improvements\n\nAll three observer composables—[useResizeObserver](https://0.vuetifyjs.com/composables/system/use-resize-observer/), [useMutationObserver](https://0.vuetifyjs.com/composables/system/use-mutation-observer/), and [useIntersectionObserver](https://0.vuetifyjs.com/composables/system/use-intersection-observer/)—received enhancements:\n\n| Feature | Description |\n|---------|-------------|\n| `once` option | Automatically stops observing after first callback execution |\n| `isActive` return | Exposes whether the observer is currently monitoring |\n| Broader targets | [useIntersectionObserver](https://0.vuetifyjs.com/composables/system/use-intersection-observer/) accepts additional target types |\n\nThe `once` option is particularly useful for lazy-loading images or triggering one-time animations when elements enter the viewport.\n\n### Registry Enhancements\n\n[createRegistry](https://0.vuetifyjs.com/composables/registration/create-registry/) powers component coordination patterns like tabs, accordions, and steppers. December brought performance improvements for complex component trees:\n\n| Feature | Description |\n|---------|-------------|\n| `batch()` method | Bulk register/unregister operations in a single call, reducing reindexing overhead |\n| `ReadonlyMap` collection | Type changed from `Map` to `ReadonlyMap` to prevent accidental mutations |\n| Deferred reindexing | Unregister operations now batch index recalculations for better performance |\n\nThese changes particularly benefit applications with deeply nested or dynamically generated component hierarchies.\n\n### Documentation Updates\n\nThe [0.vuetifyjs.com](https://0.vuetifyjs.com/) documentation site received substantial improvements:\n\n**AI Q&A** — An intelligent search feature that answers questions about v0 composables, patterns, and usage. Ask natural language questions like \"How do I implement infinite scroll?\" and get contextual answers with code examples.\n\n![v0 AI Q&A](https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/v0-ai-qa.png \"AI-powered Q&A in Vuetify0 docs\")\n\n* **PWA support** — Install the documentation as a standalone app for offline access. Useful when working in environments with limited connectivity.\n* **Mobile improvements** — Redesigned navigation for smaller screens with proper iOS safe area support, making it easier to browse documentation on mobile devices.\n* **Code blocks** — Fence titles now display file paths above code examples, and syntax highlighting was improved across all supported languages.\n\n::: info\n\nThe v0 documentation at [0.vuetifyjs.com](https://0.vuetifyjs.com/) now includes AI-powered Q&A for finding information quickly.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [useVirtual](https://0.vuetifyjs.com/composables/use-virtual/)\n* [usePagination](https://0.vuetifyjs.com/composables/use-pagination/)\n* [useOverflow](https://0.vuetifyjs.com/composables/use-overflow/)\n* [useClickOutside](https://0.vuetifyjs.com/composables/use-click-outside/)\n* [v0.0.15](https://github.com/vuetifyjs/0/releases/tag/v0.0.15)–[v0.0.18](https://github.com/vuetifyjs/0/releases/tag/v0.0.18), [v0.0.20](https://github.com/vuetifyjs/0/releases/tag/v0.0.20)–[v0.0.21](https://github.com/vuetifyjs/0/releases/tag/v0.0.21)\n\n---\n\n## December 2025 Changelog\n\nThe following section provides an overview of the changes made in December 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* CSS layers architecture in v4 for cleaner customization\n* [VWindow](/components/windows/) keyboard controls for accessible slide navigation\n* [VList](/components/lists/) navigation-strategy prop for focus management\n* [VColorPicker](/components/color-pickers/) forced-colors mode compatibility\n* [VTreeview](/components/treeview/) selection state fixes with disabled items\n* [VSlider](/components/sliders/) ARIA attribute corrections\n* Strict TypeScript template support\n\n**Expand** this section to see the detailed changelog for December 2025:\n\n
\n\n### v3.11.2\n\n**:wrench: Bug Fixes**\n\n* **VDataTable:** hide checkbox for `mobile` without `show-select` ([d297f3f](https://github.com/vuetifyjs/vuetify/commit/d297f3f)), closes [#22375](https://github.com/vuetifyjs/vuetify/issues/22375)\n* **VDataTable:** hover icon should match `initial-sort-order` ([7a1ae83](https://github.com/vuetifyjs/vuetify/commit/7a1ae83))\n* **VDatePicker:** correctly render month when using Luxon adapter ([f98d9db](https://github.com/vuetifyjs/vuetify/commit/f98d9db)), closes [#22388](https://github.com/vuetifyjs/vuetify/issues/22388)\n* **VHotkey:** correct sass variables import order ([216b872](https://github.com/vuetifyjs/vuetify/commit/216b872)), closes [#22372](https://github.com/vuetifyjs/vuetify/issues/22372)\n* **VNumberInput:** avoid error state when using comma separator ([513e153](https://github.com/vuetifyjs/vuetify/commit/513e153)), closes [#22371](https://github.com/vuetifyjs/vuetify/issues/22371)\n* **VSlideGroup:** provide a way to never show arrows ([b76ffd5](https://github.com/vuetifyjs/vuetify/commit/b76ffd5))\n* **VTabs:** consistent padding for `inset` ([893eb71](https://github.com/vuetifyjs/vuetify/commit/893eb71))\n* **VTabs:** keep slider narrow when used without inset ([eb9477c](https://github.com/vuetifyjs/vuetify/commit/eb9477c)), closes [#22363](https://github.com/vuetifyjs/vuetify/issues/22363)\n* **VTextField:** check autofocus intersection on input wrapper element ([0409cde](https://github.com/vuetifyjs/vuetify/commit/0409cde)), closes [#22373](https://github.com/vuetifyjs/vuetify/issues/22373)\n\n**:test_tube: Labs**\n\n* **VStepperVertical:** avoid semi-transparent items with `non-linear` ([99a68e5](https://github.com/vuetifyjs/vuetify/commit/99a68e5)), closes [#22369](https://github.com/vuetifyjs/vuetify/issues/22369)\n\n---\n\n### v3.11.3\n\n**:wrench: Bug Fixes**\n\n* **fields:** clean up aria attributes ([#22418](https://github.com/vuetifyjs/vuetify/issues/22418)) ([054dbf4](https://github.com/vuetifyjs/vuetify/commit/054dbf4))\n* **types:** support strict TS checks in templates ([#22395](https://github.com/vuetifyjs/vuetify/issues/22395)) ([02710a6](https://github.com/vuetifyjs/vuetify/commit/02710a6))\n* **v-ripple:** remove mousedown and keydown listeners on unmount ([278a7e9](https://github.com/vuetifyjs/vuetify/commit/278a7e9))\n* **VAppBar:** prevent navbar pop-up when reaching page bottom ([#22224](https://github.com/vuetifyjs/vuetify/issues/22224)) ([8da1495](https://github.com/vuetifyjs/vuetify/commit/8da1495)), closes [#20352](https://github.com/vuetifyjs/vuetify/issues/20352)\n* **VAutocomplete, VCombobox:** skip subheader for `auto-select-first` ([#22402](https://github.com/vuetifyjs/vuetify/issues/22402)) ([9edd98c](https://github.com/vuetifyjs/vuetify/commit/9edd98c)), closes [#22398](https://github.com/vuetifyjs/vuetify/issues/22398)\n* **VBtn:** keep all styles within CSS layer ([c794da1](https://github.com/vuetifyjs/vuetify/commit/c794da1))\n* **VColorPicker:** render inner outlines in forced-colors mode ([#22317](https://github.com/vuetifyjs/vuetify/issues/22317)) ([c61c0d3](https://github.com/vuetifyjs/vuetify/commit/c61c0d3))\n* **VDataTable:** selecting group should respect selectable prop ([#22410](https://github.com/vuetifyjs/vuetify/issues/22410)) ([e295fa6](https://github.com/vuetifyjs/vuetify/commit/e295fa6)), closes [#22409](https://github.com/vuetifyjs/vuetify/issues/22409)\n* **VDataTable:** typo in header field `intent` » `indent` ([f44b2fd](https://github.com/vuetifyjs/vuetify/commit/f44b2fd))\n* **VDataTableFooter:** correct placement of aria label ([#22359](https://github.com/vuetifyjs/vuetify/issues/22359)) ([137cb95](https://github.com/vuetifyjs/vuetify/commit/137cb95)), closes [#20896](https://github.com/vuetifyjs/vuetify/issues/20896)\n* **VDatePicker:** correct year and month for jalali ([41067af](https://github.com/vuetifyjs/vuetify/commit/41067af)), closes [#22417](https://github.com/vuetifyjs/vuetify/issues/22417)\n* **VDatePicker:** correct next year button disabled condition ([04a4608](https://github.com/vuetifyjs/vuetify/commit/04a4608)), closes [#22408](https://github.com/vuetifyjs/vuetify/issues/22408)\n* **VHotkey:** avoid build errors when customizing VKbd sass variables ([fa1fb4f](https://github.com/vuetifyjs/vuetify/commit/fa1fb4f)), closes [#22372](https://github.com/vuetifyjs/vuetify/issues/22372)\n* **VInput:** prioritize slots over prepend/append icons ([#22406](https://github.com/vuetifyjs/vuetify/issues/22406)) ([2a998ee](https://github.com/vuetifyjs/vuetify/commit/2a998ee)), closes [#22332](https://github.com/vuetifyjs/vuetify/issues/22332)\n* **VNumberInput:** clean up listeners on unmount ([045bbaf](https://github.com/vuetifyjs/vuetify/commit/045bbaf))\n* **VOtpInput:** apply rounded prop to inner fields ([#21499](https://github.com/vuetifyjs/vuetify/issues/21499)) ([f49803a](https://github.com/vuetifyjs/vuetify/commit/f49803a)), closes [#20286](https://github.com/vuetifyjs/vuetify/issues/20286)\n* **VOverlay:** clean up focus trap listeners and data on unmount ([497ae4b](https://github.com/vuetifyjs/vuetify/commit/497ae4b)), closes [#22397](https://github.com/vuetifyjs/vuetify/issues/22397)\n* **VSelect:** don't skip continuing keyboard lookup match ([f1f3c45](https://github.com/vuetifyjs/vuetify/commit/f1f3c45)), closes [#22423](https://github.com/vuetifyjs/vuetify/issues/22423)\n* **VSelects:** no closable chips when `readonly` or `disabled` ([#22368](https://github.com/vuetifyjs/vuetify/issues/22368)) ([21c85eb](https://github.com/vuetifyjs/vuetify/commit/21c85eb)), closes [#22349](https://github.com/vuetifyjs/vuetify/issues/22349)\n* **VSlider:** clean up listeners on unmount ([f2621a3](https://github.com/vuetifyjs/vuetify/commit/f2621a3))\n* **VTextarea:** avoid placeholder obstructing the label ([27e854f](https://github.com/vuetifyjs/vuetify/commit/27e854f)), closes [#22416](https://github.com/vuetifyjs/vuetify/issues/22416)\n* **VTextArea/VSelects:** help screen readers read field labels ([#20339](https://github.com/vuetifyjs/vuetify/issues/20339)) ([04b6725](https://github.com/vuetifyjs/vuetify/commit/04b6725)), closes [#19155](https://github.com/vuetifyjs/vuetify/issues/19155) [#19156](https://github.com/vuetifyjs/vuetify/issues/19156)\n* **VTimePicker:** don't inherit defaults from VTextField ([3ffa749](https://github.com/vuetifyjs/vuetify/commit/3ffa749)), closes [#22407](https://github.com/vuetifyjs/vuetify/issues/22407)\n* **VTimePicker:** clean up listeners on unmount ([60183d7](https://github.com/vuetifyjs/vuetify/commit/60183d7))\n* **VTooltip:** should be dismissable by default ([#22419](https://github.com/vuetifyjs/vuetify/issues/22419)) ([c5ae129](https://github.com/vuetifyjs/vuetify/commit/c5ae129)), closes [#21501](https://github.com/vuetifyjs/vuetify/issues/21501)\n* **VVirtualScroll:** show more than 1 element when min height is 0 ([#22420](https://github.com/vuetifyjs/vuetify/issues/22420)) ([08550fd](https://github.com/vuetifyjs/vuetify/commit/08550fd))\n* **VWindow:** set transition-duration css variable ([4676b6d](https://github.com/vuetifyjs/vuetify/commit/4676b6d))\n\n**:test_tube: Labs**\n\n* **VVideo:** clean up listeners on unmount ([0d37af0](https://github.com/vuetifyjs/vuetify/commit/0d37af0))\n\n---\n\n### v3.11.4\n\n**:wrench: Bug Fixes**\n\n* **fields:** keep `inert` on root element ([8dea3bc](https://github.com/vuetifyjs/vuetify/commit/8dea3bc))\n* **VSelect:** clear on backspace ([#22435](https://github.com/vuetifyjs/vuetify/issues/22435)) ([f90f8ab](https://github.com/vuetifyjs/vuetify/commit/f90f8ab)), closes [#22422](https://github.com/vuetifyjs/vuetify/issues/22422)\n* **VSelects:** restore `appendInnerIcon` rendering ([#22431](https://github.com/vuetifyjs/vuetify/issues/22431)) ([5e9fa29](https://github.com/vuetifyjs/vuetify/commit/5e9fa29)), closes [#22429](https://github.com/vuetifyjs/vuetify/issues/22429)\n* **VSlider:** pass `aria-` attributes to thumb element ([#22444](https://github.com/vuetifyjs/vuetify/issues/22444)) ([83b55f5](https://github.com/vuetifyjs/vuetify/commit/83b55f5)), closes [#22432](https://github.com/vuetifyjs/vuetify/issues/22432)\n\n**:microscope: Code Refactoring**\n\n* **styles:** replace `if()` with `@if` ([5391930](https://github.com/vuetifyjs/vuetify/commit/5391930)), closes [#22421](https://github.com/vuetifyjs/vuetify/issues/22421)\n\n**:test_tube: Labs**\n\n* **VColorInput, VDateInput:** add `picker-props` ([#22437](https://github.com/vuetifyjs/vuetify/issues/22437)) ([ea6d861](https://github.com/vuetifyjs/vuetify/commit/ea6d861)), closes [#22436](https://github.com/vuetifyjs/vuetify/issues/22436)\n* **VDateInput,VMaskInput:** add specific classes ([#22447](https://github.com/vuetifyjs/vuetify/issues/22447)) ([f539630](https://github.com/vuetifyjs/vuetify/commit/f539630)), closes [#22334](https://github.com/vuetifyjs/vuetify/issues/22334)\n* **VDateInput:** make `prepend-icon` unfocusable ([#22445](https://github.com/vuetifyjs/vuetify/issues/22445)) ([c917533](https://github.com/vuetifyjs/vuetify/commit/c917533)), closes [#22333](https://github.com/vuetifyjs/vuetify/issues/22333)\n\n---\n\n### v3.11.5\n\n**:wrench: Bug Fixes**\n\n* **VDataTableVirtual:** show index from virtualized items ([#22324](https://github.com/vuetifyjs/vuetify/issues/22324)) ([29e3f09](https://github.com/vuetifyjs/vuetify/commit/29e3f09)), closes [#19108](https://github.com/vuetifyjs/vuetify/issues/19108)\n* **VList, VTreeview:** item should be selectable when `disabled` changes ([#22464](https://github.com/vuetifyjs/vuetify/issues/22464)) ([d6ca166](https://github.com/vuetifyjs/vuetify/commit/d6ca166)), closes [#22366](https://github.com/vuetifyjs/vuetify/issues/22366)\n* **VNumberInput:** respect `error` prop ([69862ea](https://github.com/vuetifyjs/vuetify/commit/69862ea)), closes [#22451](https://github.com/vuetifyjs/vuetify/issues/22451)\n* **VOtpInput:** hide placeholder on focus ([0852c8c](https://github.com/vuetifyjs/vuetify/commit/0852c8c))\n* **VTreeview:** bypass disabled when loading selection state ([#22465](https://github.com/vuetifyjs/vuetify/issues/22465)) ([70dd313](https://github.com/vuetifyjs/vuetify/commit/70dd313)), closes [#22353](https://github.com/vuetifyjs/vuetify/issues/22353)\n* **VTreeview:** prevent selection of disabled nodes ([0de4599](https://github.com/vuetifyjs/vuetify/commit/0de4599)), closes [#22352](https://github.com/vuetifyjs/vuetify/issues/22352)\n\n**:test_tube: Labs**\n\n* **VDateInput:** keep focus on input when opened with year view ([b58e361](https://github.com/vuetifyjs/vuetify/commit/b58e361)), closes [#22323](https://github.com/vuetifyjs/vuetify/issues/22323)\n* **VDateInput:** hide empty prepend slot ([28fe71e](https://github.com/vuetifyjs/vuetify/commit/28fe71e)), closes [#22456](https://github.com/vuetifyjs/vuetify/issues/22456)\n* **VDateInput:** clickable prepend icon when handler exists ([776a462](https://github.com/vuetifyjs/vuetify/commit/776a462))\n* **VStepperVertical:** restore default opacity of item title ([f30a081](https://github.com/vuetifyjs/vuetify/commit/f30a081)), closes [#22467](https://github.com/vuetifyjs/vuetify/issues/22467)\n\n---\n\n### v3.11.6\n\n**:wrench: Bug Fixes**\n\n* **VCalendar:** wrap unclamped timeToY ([3b4b5e6](https://github.com/vuetifyjs/vuetify/commit/3b4b5e6)), closes [#22413](https://github.com/vuetifyjs/vuetify/issues/22413)\n* **VCalendar:** extend start of event on following day ([4f7cc6a](https://github.com/vuetifyjs/vuetify/commit/4f7cc6a)), closes [#22480](https://github.com/vuetifyjs/vuetify/issues/22480)\n* **VColorPicker:** disable swatches ([#22472](https://github.com/vuetifyjs/vuetify/issues/22472)) ([8dbacad](https://github.com/vuetifyjs/vuetify/commit/8dbacad)), closes [#22471](https://github.com/vuetifyjs/vuetify/issues/22471)\n* **VDatePicker:** accept custom `control-height` ([#22479](https://github.com/vuetifyjs/vuetify/issues/22479)) ([b47a4ce](https://github.com/vuetifyjs/vuetify/commit/b47a4ce)), closes [#22478](https://github.com/vuetifyjs/vuetify/issues/22478)\n\n---\n\n### v4.0.0-alpha.0\n\n**:rocket: Features**\n\n* **display:** reduce default breakpoint sizes ([#19759](https://github.com/vuetifyjs/vuetify/issues/19759)) ([853ce33](https://github.com/vuetifyjs/vuetify/commit/853ce33))\n* **nested:** add branch select strategy ([4fcb72c](https://github.com/vuetifyjs/vuetify/commit/4fcb72c)), closes [#22404](https://github.com/vuetifyjs/vuetify/issues/22404)\n* **styles:** always use css layers ([f7123c6](https://github.com/vuetifyjs/vuetify/commit/f7123c6)), closes [#3400](https://github.com/vuetifyjs/vuetify/issues/3400) [#20232](https://github.com/vuetifyjs/vuetify/issues/20232)\n* **styles:** flatten layer names ([#22460](https://github.com/vuetifyjs/vuetify/issues/22460)) ([47bc400](https://github.com/vuetifyjs/vuetify/commit/47bc400)), closes [#22443](https://github.com/vuetifyjs/vuetify/issues/22443)\n* **styles:** possibility to opt-out from misc styles ([#22405](https://github.com/vuetifyjs/vuetify/issues/22405)) ([77d02f3](https://github.com/vuetifyjs/vuetify/commit/77d02f3))\n* **styles:** add separate entry points ([#22396](https://github.com/vuetifyjs/vuetify/issues/22396)) ([f00902c](https://github.com/vuetifyjs/vuetify/commit/f00902c)), closes [#20100](https://github.com/vuetifyjs/vuetify/issues/20100)\n* **styles:** cut down CSS reset ([#20960](https://github.com/vuetifyjs/vuetify/issues/20960)) ([ae3e8c9](https://github.com/vuetifyjs/vuetify/commit/ae3e8c9)), closes [#17633](https://github.com/vuetifyjs/vuetify/issues/17633)\n* **styles:** remove overflow-y from reset ([27868d5](https://github.com/vuetifyjs/vuetify/commit/27868d5)), closes [#1197](https://github.com/vuetifyjs/vuetify/issues/1197)\n* **theme:** change default theme to 'system' ([9c8506c](https://github.com/vuetifyjs/vuetify/commit/9c8506c))\n* **theme:** support transparent colors ([bb49662](https://github.com/vuetifyjs/vuetify/commit/bb49662)), closes [#10299](https://github.com/vuetifyjs/vuetify/issues/10299)\n* **theme:** remove unimportant option ([e8845ff](https://github.com/vuetifyjs/vuetify/commit/e8845ff))\n* **VDataIterator:** add `items-length` prop ([#22360](https://github.com/vuetifyjs/vuetify/issues/22360)) ([290836c](https://github.com/vuetifyjs/vuetify/commit/290836c)), closes [#19486](https://github.com/vuetifyjs/vuetify/issues/19486)\n* **VDatePicker:** only emit start and end range values ([#20621](https://github.com/vuetifyjs/vuetify/issues/20621)) ([eef80ad](https://github.com/vuetifyjs/vuetify/commit/eef80ad)), closes [#9098](https://github.com/vuetifyjs/vuetify/issues/9098) [#18701](https://github.com/vuetifyjs/vuetify/issues/18701) [#20599](https://github.com/vuetifyjs/vuetify/issues/20599)\n* **VForm:** unref values in slot props ([f92ae7a](https://github.com/vuetifyjs/vuetify/commit/f92ae7a)), closes [#18355](https://github.com/vuetifyjs/vuetify/issues/18355)\n* **VImg:** pass attributes to the underlying `` ([#22439](https://github.com/vuetifyjs/vuetify/issues/22439)) ([71e01aa](https://github.com/vuetifyjs/vuetify/commit/71e01aa)), closes [#18860](https://github.com/vuetifyjs/vuetify/issues/18860) [#18907](https://github.com/vuetifyjs/vuetify/issues/18907)\n* **VInput:** add `indent-details` prop ([#21265](https://github.com/vuetifyjs/vuetify/issues/21265)) ([f483092](https://github.com/vuetifyjs/vuetify/commit/f483092)), closes [#16679](https://github.com/vuetifyjs/vuetify/issues/16679)\n* **VList:** add `navigation-strategy` to control focused item ([#22328](https://github.com/vuetifyjs/vuetify/issues/22328)) ([3815eee](https://github.com/vuetifyjs/vuetify/commit/3815eee))\n* **VListItem:** expose `isDisabled` in slot props ([9d92638](https://github.com/vuetifyjs/vuetify/commit/9d92638))\n* **VNumberInput:** do not clamp value on mounted ([#21826](https://github.com/vuetifyjs/vuetify/issues/21826)) ([4b4bfa5](https://github.com/vuetifyjs/vuetify/commit/4b4bfa5))\n* **VOtpInput:** add `density` prop ([#22401](https://github.com/vuetifyjs/vuetify/issues/22401)) ([aca7d30](https://github.com/vuetifyjs/vuetify/commit/aca7d30))\n* **VSelect/Autocomplete/Combobox:** rename item to internalItem ([2c1ac25](https://github.com/vuetifyjs/vuetify/commit/2c1ac25)), closes [#18354](https://github.com/vuetifyjs/vuetify/issues/18354)\n* **VSnackbar:** remove `multi-line` prop ([#22212](https://github.com/vuetifyjs/vuetify/issues/22212)) ([1371aba](https://github.com/vuetifyjs/vuetify/commit/1371aba)), closes [#15996](https://github.com/vuetifyjs/vuetify/issues/15996)\n* **VWindow:** add support for keyboard controls ([#22430](https://github.com/vuetifyjs/vuetify/issues/22430)) ([ab5b671](https://github.com/vuetifyjs/vuetify/commit/ab5b671)), closes [#11544](https://github.com/vuetifyjs/vuetify/issues/11544)\n\n**:wrench: Bug Fixes**\n\n* **styles:** skip VRow/VCol styles when using only VContainer or VSpacer ([f899803](https://github.com/vuetifyjs/vuetify/commit/f899803))\n* **theme:** re-merge default variables when themes is set ([a14c763](https://github.com/vuetifyjs/vuetify/commit/a14c763))\n* **theme:** helpers should override theme base ([2690877](https://github.com/vuetifyjs/vuetify/commit/2690877))\n* **theme:** override automatic text color with classes ([#22475](https://github.com/vuetifyjs/vuetify/issues/22475)) ([59b11d5](https://github.com/vuetifyjs/vuetify/commit/59b11d5))\n* **theme:** .text- classes always override color from .bg- ([7edf33a](https://github.com/vuetifyjs/vuetify/commit/7edf33a)), closes [#21787](https://github.com/vuetifyjs/vuetify/issues/21787)\n* **VContainer:** drop dependency on utility class ([47ca5c8](https://github.com/vuetifyjs/vuetify/commit/47ca5c8))\n* **VCounter:** inherit color (aligns with VMessages) ([#22424](https://github.com/vuetifyjs/vuetify/issues/22424)) ([ecd07b9](https://github.com/vuetifyjs/vuetify/commit/ecd07b9))\n* **VField:** append/prepend should fill height ([add5d2d](https://github.com/vuetifyjs/vuetify/commit/add5d2d))\n* **VOverlay:** apply scrollbar offset to body and VNavigationDrawer ([ec926d7](https://github.com/vuetifyjs/vuetify/commit/ec926d7))\n\n**:microscope: Code Refactoring**\n\n* **styles:** replace !important with layers ([7484c81](https://github.com/vuetifyjs/vuetify/commit/7484c81))\n* **VBtn:** remove default text transform ([#21079](https://github.com/vuetifyjs/vuetify/issues/21079)) ([712bdd6](https://github.com/vuetifyjs/vuetify/commit/712bdd6))\n* **VBtn:** convert display from grid to flex ([41b7768](https://github.com/vuetifyjs/vuetify/commit/41b7768))\n* **VField:** convert display from grid to flex ([#21035](https://github.com/vuetifyjs/vuetify/issues/21035)) ([b213e3b](https://github.com/vuetifyjs/vuetify/commit/b213e3b))\n\n
\n\n## What's Next{ #whats-next .mt-4 }\n\nJanuary kicks off with continued development on Vuetify 4, incorporating feedback from the alpha release. We're targeting additional alpha releases throughout Q1 2026 as we refine the CSS layers architecture and modernize remaining components.\n\nThe v3.11.x branch will continue receiving maintenance releases with bug fixes and minor improvements. VCommandPalette is nearing [labs](/labs/introduction/) release, and we're expanding [v0](https://0.vuetifyjs.com/) with additional headless primitives for forms and data display.\n\nThe [CLI](https://github.com/vuetifyjs/cli) will gain additional commands for component generation and project management, while the [MCP server](https://github.com/vuetifyjs/mcp) continues to evolve with new tools for AI-assisted development.\n\nThank you for being part of the Vuetify community. Here's to an incredible 2026!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","frontmatter":{"layout":"blog","meta":{"title":"December 2025 Update","description":"December shipped Vuetify 4.0.0-alpha.0 with CSS layers, five v3.11.x patches, the Vuetify CLI public release, ecosystem-wide PWA rollout, and v0 progress.","keywords":"Vuetify December 2025, v4.0.0-alpha.0, Vuetify CLI, PWA, CSS layers, Vuetify0, MCP"}},"isInternal":false,"tokens":13093,"sizeBytes":47126},{"name":"february-2026-update.md","path":"packages/docs/src/pages/en/blog/february-2026-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/february-2026-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: February 2026 Update\n description: February ships stable Vuetify 4.0.0 — CSS layers, MD3, and unstyled foundations — plus CLI v1.0.0, VAvatarGroup, and new Vuetify0 composables.\n keywords: Vuetify February 2026, Vuetify 4.0.0 Revisionist, v4 stable, VAvatarGroup, CLI v1.0.0, Vuetify0, createDataTable\n---\n\n\n\n# February 2026 Update\n\n**Vuetify 4 is here.** After four beta releases and months of community testing, **v4.0.0 (Revisionist)** shipped on February 23rd—bringing CSS layers, MD3 typography and elevation, and the architectural foundation for unstyled components. The **Vuetify CLI** also reached its **v1.0.0** milestone, and Vuetify0 continues building its headless composable layer with createDataTable, createNested, and Breadcrumbs.\n\n![Hero image for February update](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/february-hero.png \"February hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 March 9th, 2026\n\n\n\n---\n\n## The big one\n\nThis is the release we've been building toward since the [2024 State of the Union](https://vuetifyjs.com/blog/state-of-the-union-2024/). **390 commits** across 15 active repositories, **68 merged PRs**, and 21 releases across the ecosystem—all driven by a month laser-focused on getting v4 stable. [J-Sek](https://github.com/J-Sek) delivered another prolific month with 20+ merged framework PRs including VAvatarGroup and new transitions, while [Andrei Elkin](https://github.com/AndreyYolkin) drove the [CLI](https://github.com/vuetifyjs/cli) to its first stable release with the Tailwind preset and project scaffolding presets.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Vuetify 4.0.0 Stable](#vuetify-400-stable)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Ecosystem Spotlight: Vuetify CLI v1.0.0](#ecosystem-spotlight-vuetify-cli-v100)\n* [Vuetify MCP: V4 Migration & Developer Tools](#vuetify-mcp-v4-migration-developer-tools)\n* [Product Updates](#product-updates)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [February 2026 Changelog](#february-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nFebruary was Vuetify's biggest release month ever. Four v4 betas culminated in the **stable v4.0.0 (Revisionist) release**, while v3.11.9, v3.12.0, and v3.12.1 maintained the v3 line. The CLI shipped nine releases reaching v1.0.0, Vuetify0 released v0.1.3, and the UnoCSS preset hit v0.2.0.\n\n![February Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/releases.png \"February Releases Banner\")\n\n### Key Improvements\n\n* **[Vuetify 4.0.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0)** stable release with CSS layers, MD3 design system, and unstyled foundations\n* **[VAvatarGroup](https://vuetifyjs.com/components/avatar-groups/)** new component for stacked avatar displays\n* **[VSelect/VAutocomplete/VCombobox](https://vuetifyjs.com/components/selects/)** `menu-header` and `menu-footer` slots\n* **[VSnackbarQueue](https://vuetifyjs.com/components/snackbar-queue/)** show multiple snackbars simultaneously\n* **[v-expand-both-transition](https://vuetifyjs.com/styles/transitions/)** new bidirectional expand transition\n* **[mdi-unocss](https://vuetifyjs.com/features/icon-fonts/)** icon set for UnoCSS integration\n\nView the complete list of changes in the [Full Changelog](#february-2026-changelog).\n\n**Details:**\n\n* [v4.0.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0)\n* [v3.12.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.0)\n* [v3.12.1](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.1)\n* [v3.11.9](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.9)\n\n---\n\n## Vuetify 4.0.0 Stable { #vuetify-400-stable }\n\nThe stable release of **Vuetify 4.0.0 (Revisionist)** landed on February 23rd after four beta releases (beta.0 through beta.3). This is a pivotal release for the Vuetify ecosystem—not just for the features it ships, but for the architecture it establishes.\n\n\n![Vuetify 4 Launch](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/v4-launch.png \"Vuetify 4.0.0 Stable Release\")\n\n### What's in v4\n\n* **CSS Layers** — Vuetify's styles are now organized in CSS `@layer` blocks, making it trivial to override styles and coexist with utility frameworks like TailwindCSS and UnoCSS\n* **MD3 Typography & Elevation** — Full Material Design 3 type scale and shadow system\n* **Grid System Overhaul** — Modernized responsive grid with improved flexbox, RTL support, and cleaner CSS output\n* **Unstyled Foundations** — The internal architecture that makes true unstyled components possible in future releases\n\n### Migration\n\nThe upgrade path from v3 to v4 is intentionally minimal. The [upgrade guide](https://vuetifyjs.com/getting-started/upgrade-guide/) covers the handful of breaking changes, and the [Vuetify MCP server](#vuetify-mcp-v4-migration-developer-tools) provides AI-assisted migration tooling.\n\nEvery breaking change in v4 can be reverted with a drop-in snippet — upgrade now, migrate visuals at your own pace:\n\n* **[Grid System](https://vuetifyjs.com/getting-started/grid-legacy-mode/)** — CSS snippet restores v3 negative-margin grid behavior using `@layer vuetify-overrides`\n* **[Typography](https://vuetifyjs.com/getting-started/typography-migration/)** — Sass config restores full MD2 type scale with component-specific variable mappings\n* **[Elevation](https://vuetifyjs.com/getting-started/elevation-migration/)** — CSS file restores all 25 MD2 elevation levels (v4 ships MD3's 6-level system)\n* **[CSS Reset](https://vuetifyjs.com/getting-started/upgrade-guide/)** — Minimal or full reset snippets using `@layer vuetify-core.reset`\n* **[Breakpoints](https://vuetifyjs.com/getting-started/upgrade-guide/)** — JS or Sass config to restore v3 thresholds (960/1280/1920/2560)\n* **[Button text-transform](https://vuetifyjs.com/getting-started/upgrade-guide/)** — Sass variable, global default, or utility class to restore uppercase\n\nThe [vuetify-codemods](https://www.npmjs.com/package/vuetify-codemods) package automates class and attribute renames.\n\n::: tip\n\nUse the Vuetify MCP server to analyze your project: *\"Scan my project for Vuetify 3 patterns that need updating for v4.\"*\n\n:::\n\nAcross the ecosystem, v4 adoption started immediately—[Vuetify One](https://one.vuetifyjs.com/) upgraded to v4 the same week, and the CLI updated all project templates.\n\n**Details:**\n\n* [v4.0.0 Release Notes](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0)\n* [Upgrade Guide](https://vuetifyjs.com/getting-started/upgrade-guide/)\n* [Vuetify 3 Documentation](https://v3.vuetifyjs.com/)\n* [Building with Vite and TailwindCSS](https://vuetifyjs.com/blog/building-with-vite-and-tailwindcss/)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nFebruary's 39 merged PRs delivered new components, significant feature additions, and targeted bug fixes across both the v3 and v4 branches.\n\n### New Features\n\n**[VAvatarGroup](https://vuetifyjs.com/components/avatar-groups/)**\n\nA new component for displaying stacked avatar collections with overlap, max count, and a \"+N\" indicator for overflow. Pairs with the new `badge` prop on VAvatar for status indicators.\n\n\n![VAvatarGroup](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/avatar-group.png \"VAvatarGroup Component\")\n\n**[VSnackbarQueue](https://vuetifyjs.com/components/snackbar-queue/)** — Show multiple snackbars simultaneously instead of replacing one at a time ([#22605](https://github.com/vuetifyjs/vuetify/pull/22605))\n\n**[VToolbar](https://vuetifyjs.com/components/toolbars/)** — New `location` prop for bottom-positioned toolbars ([#22608](https://github.com/vuetifyjs/vuetify/pull/22608))\n\n**[VImg](https://vuetifyjs.com/components/images/)** — `image-class` prop for styling the inner `` element, plus `width=\"fit-content\"` support ([#22622](https://github.com/vuetifyjs/vuetify/pull/22622), [#21414](https://github.com/vuetifyjs/vuetify/pull/21414))\n\n**[VDataTable](https://vuetifyjs.com/components/data-tables/)** — `page-by` prop for page size control ([#22580](https://github.com/vuetifyjs/vuetify/pull/22580))\n\n**[VSelect/VAutocomplete/VCombobox](https://vuetifyjs.com/components/selects/)** — `menu-header` and `menu-footer` slots for custom dropdown content ([#22414](https://github.com/vuetifyjs/vuetify/pull/22414))\n\n**[VSlider](https://vuetifyjs.com/components/sliders/)** — Show thumb value on hover ([#22412](https://github.com/vuetifyjs/vuetify/pull/22412))\n\n**[VOtpInput](https://vuetifyjs.com/components/otp-input/)** — `masked` prop to hide or show entered text ([#20950](https://github.com/vuetifyjs/vuetify/pull/20950))\n\n**[VProgressCircular](https://vuetifyjs.com/components/progress-circular/)** — `reveal` prop for animated entry ([#22502](https://github.com/vuetifyjs/vuetify/pull/22502))\n\n**[VRow](https://vuetifyjs.com/api/v-row/)** — Smaller density steps for finer layout control ([#22574](https://github.com/vuetifyjs/vuetify/pull/22574))\n\n**v-expand-both-transition** — New transition that expands in both width and height ([#22570](https://github.com/vuetifyjs/vuetify/pull/22570))\n\n**color utilities** — Strip `text-*` and `bg-*` prefixes for dynamic utility class support ([#17569](https://github.com/vuetifyjs/vuetify/pull/17569))\n\n**mdi-unocss icon set** — Native UnoCSS icon support ([#22117](https://github.com/vuetifyjs/vuetify/pull/22117))\n\n**Details:**\n\n* [VAvatarGroup PR#22495](https://github.com/vuetifyjs/vuetify/pull/22495)\n* [VAvatar badge PR#22496](https://github.com/vuetifyjs/vuetify/pull/22496)\n* [VSnackbarQueue PR#22605](https://github.com/vuetifyjs/vuetify/pull/22605)\n* [VToolbar location PR#22608](https://github.com/vuetifyjs/vuetify/pull/22608)\n* [VImg image-class PR#22622](https://github.com/vuetifyjs/vuetify/pull/22622)\n\n### Bug Fixes\n\n**VSnackbar** — Opaque background for transparent variants ([#22646](https://github.com/vuetifyjs/vuetify/pull/22646))\n\n**VTab** — Correct text colors with `inset` without `slider-color` ([#22614](https://github.com/vuetifyjs/vuetify/pull/22614))\n\n**VDateInput** — Prevent page scroll when opening years view ([#22613](https://github.com/vuetifyjs/vuetify/pull/22613))\n\n**VTimePicker** — Enforce allowed values and range in inputs ([#22578](https://github.com/vuetifyjs/vuetify/pull/22578))\n\n**VColorPicker** — Avoid undefined alpha in RGB/HSL output ([#22582](https://github.com/vuetifyjs/vuetify/pull/22582))\n\n**VSelect** — Fix screenreader navigation to select options ([#22602](https://github.com/vuetifyjs/vuetify/pull/22602))\n\n**VTreeview** — Indent lines with `prepend-gap`, correct ARIA roles and attributes ([#22589](https://github.com/vuetifyjs/vuetify/pull/22589), [#22577](https://github.com/vuetifyjs/vuetify/pull/22577))\n\n**VCard** — Accept height when used within a dialog ([#22594](https://github.com/vuetifyjs/vuetify/pull/22594))\n\n**VDataTable** — Sort icon persists after removing sort ([#22595](https://github.com/vuetifyjs/vuetify/pull/22595))\n\n**router** — Ensure reactivity for `to` attribute in useLink ([#20994](https://github.com/vuetifyjs/vuetify/pull/20994))\n\n**styles** — Utilities override responsive typography correctly ([#22573](https://github.com/vuetifyjs/vuetify/pull/22573))\n\n**Details:**\n\n* [VSelect a11y PR#22602](https://github.com/vuetifyjs/vuetify/pull/22602)\n* [VTreeview ARIA PR#22577](https://github.com/vuetifyjs/vuetify/pull/22577)\n* [VTreeview indent PR#22589](https://github.com/vuetifyjs/vuetify/pull/22589)\n\n### In Development\n\nSeveral features opened in February are expected in upcoming releases:\n\n#### VMorphingIcon\n\nA new component for animated icon transitions—morphing between two icons using SVG path animation for polished state changes.\n\n#### Theme Page Transitions\n\nOptional built-in page transitions that leverage the View Transitions API, bringing smooth animated route changes without custom code.\n\n#### Hover Elevation\n\nA new `hover-elevation` prop and CSS utilities for elevation changes on hover—a common Material Design pattern now built in.\n\n**Details:**\n\n* [VMorphingIcon PR#22639](https://github.com/vuetifyjs/vuetify/pull/22639)\n* [Theme transitions PR#22623](https://github.com/vuetifyjs/vuetify/pull/22623)\n* [Hover elevation PR#22621](https://github.com/vuetifyjs/vuetify/pull/22621)\n\n---\n\n## Ecosystem Spotlight: Vuetify CLI v1.0.0 { #ecosystem-spotlight-vuetify-cli-v100 }\n\n\n\n
\n\nThe Vuetify CLI reached its **first stable release** on February 23rd—shipping alongside Vuetify 4. With **42 commits** and 9 releases (v0.0.14 through v1.0.3), [Andrei Elkin](https://github.com/AndreyYolkin) transformed the CLI from an early beta into a production-ready tool.\n\n### What's New in v1.0.0\n\n**Project Presets** — Create projects with predefined configurations. The first preset is **TailwindCSS**—scaffolding a complete Vuetify 4 + Tailwind project with CSS layers configured correctly out of the box.\n\n**Vuetify 4 Templates** — All project templates updated for v4, with version selection removed now that v4 is stable.\n\n**i18n Support** — CLI prompts now support fallback locales for internationalized project scaffolding.\n\n### Getting Started\n\n::: tabs\n\n```bash [pnpm]\npnpm add -g @vuetify/cli\n```\n\n```bash [npm]\nnpm install -g @vuetify/cli\n```\n\n```bash [yarn]\nyarn global add @vuetify/cli\n```\n\n```bash [bun]\nbun add -g @vuetify/cli\n```\n\n:::\n\n**Details:**\n\n* [Vuetify CLI GitHub Repository](https://github.com/vuetifyjs/cli)\n* [v1.0.0 Release](https://github.com/vuetifyjs/cli/releases/tag/v1.0.0)\n\n---\n\n## Vuetify MCP: V4 Migration & Developer Tools { #vuetify-mcp-v4-migration-developer-tools }\n\n\n\n
\n\nThe MCP server received 9 commits in February, adding new developer tooling and improving v0 integration.\n\n### What's New\n\n**V4 Migration Tools** — Two tools launched alongside the v4 beta cycle provide AI-assisted upgrade guidance:\n\n* **`get_upgrade_guide`** — Fetches the full v3 → v4 upgrade guide with step-by-step migration instructions and revert snippets\n* **`get_v4_breaking_changes`** — Returns detailed migration guidance for all 13 categories of breaking changes (styles, grid, typography, elevation, theme, display, v-btn, v-snackbar, v-select, v-date-picker, v-form, v-img, nested), with optional category filtering\n\n**`create_bug_report` Tool** — Generate a pre-filled link to the Vuetify issue tracker with the correct repository and label pre-selected.\n\n**`get_vuetify0_skill` Tool** — Provides AI assistants with v0 composable documentation and usage patterns, enabling better code generation for headless components.\n\n**v0 Fixes** — Corrected composable names and missing exports in the v0 documentation, and fixed GitHub URL branch references.\n\n**CLI Integration** — [Andrei Elkin](https://github.com/AndreyYolkin) opened a PR for detecting running IDE instances and supporting multi-selection during MCP setup.\n\n### Setup\n\nInstall with the Vuetify CLI:\n\n::: tabs\n\n```bash [pnpm]\npnpm dlx @vuetify/cli add mcp\n```\n\n```bash [npm]\nnpx @vuetify/cli add mcp\n```\n\n```bash [yarn]\nyarn dlx @vuetify/cli add mcp\n```\n\n```bash [bun]\nbunx @vuetify/cli add mcp\n```\n\n:::\n\nOr configure manually:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [create_bug_report commit](https://github.com/vuetifyjs/mcp/commit/47d4dafc4fc6fb13dad705d32f802beec92ffefd)\n* [get_vuetify0_skill commit](https://github.com/vuetifyjs/mcp/commit/d58a7abbcdb73a087e982ce8a8d3d27331064e52)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\nVuetify One completed a **monorepo conversion**, extracting `@vuetify/auth` as a standalone package with 7 iterative releases (v0.1.1 through v0.1.8). The app upgraded to **Vuetify 4** on release day, and a new [v3.vuetifyjs.com](https://v3.vuetifyjs.com/) site identifier was added for versioned documentation hosting.\n\n**Details:**\n\n* [Vuetify One](https://one.vuetifyjs.com/)\n* [v3.0.2 Release](https://github.com/vuetifyjs/one/releases/tag/v3.0.2)\n* [@vuetify/auth@0.1.8](https://github.com/vuetifyjs/one/releases/tag/%40vuetify/auth%400.1.8)\n\n### Vuetify Bin\n\n[Henry Aviles](https://github.com/Haviles04) shipped the **team dashboard** feature across 5 merged PRs—enabling team bin management, role-based permissions, and team switching.\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n\n### Vuetify Snips\n\n[Kael](https://github.com/KaelWD) set up **visual regression testing** for Snips, and [J-Sek](https://github.com/J-Sek) fixed import and TypeScript issues for Vuetify Play compatibility.\n\n### UnoCSS Preset\n\nThe [unocss-preset-vuetify](https://github.com/vuetifyjs/unocss-preset-vuetify) reached **v0.2.0** with theme variants, built-in MD2/MD3 elevation presets, and separated base typography layers.\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\n
\n\nFebruary was Vuetify0's highest-commit month with **152 commits** and **10 merged PRs**, releasing **v0.1.3**. The focus shifted toward data-heavy composables and overlay management, building the foundation for reconstructing Vuetify's internals on v0's headless layer.\n\n\n![Vuetify0 Progress](https://cdn.vuetifyjs.com/docs/images/blog/february-2026-update/v0.png \"Vuetify0 February Progress\")\n\n### New Composables & Components\n\n* **[createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table/)** — Headless data table composable with sorting, filtering, pagination, and selection built in. The foundation for Vuetify's VDataTable refactor.\n\n* **[createNested](https://0.vuetifyjs.com/composables/selection/create-nested/)** — Gained active state management for hierarchical tree structures, enabling treeview, file browser, and nested navigation patterns with `activate()`, `deactivate()`, and `activeIds` tracking.\n\n* **[useStack](https://0.vuetifyjs.com/composables/plugins/use-stack/)** — Overlay z-index management plugin for coordinating dialogs, menus, and drawers. Ensures correct stacking order without manual z-index management.\n\n* **[Breadcrumbs](https://0.vuetifyjs.com/components/navigation/breadcrumbs/)** — Composable and component for accessible breadcrumb navigation with automatic ARIA attributes.\n\n### useDate Fixes\n\n[J-Sek](https://github.com/J-Sek) landed two important fixes—symmetrical date diffs and a corrected `getWeek` implementation ported from Vuetify core.\n\n### Coming Next\n\nDevelopment is accelerating with several new components and composables in active PRs:\n\n* **[Treeview](https://github.com/vuetifyjs/0/pull/144)** — Full tree component built on createNested\n* **[Slider](https://github.com/vuetifyjs/0/pull/143)** — New component and composable\n* **[Splitter](https://github.com/vuetifyjs/0/pull/145)** — Root, Panel, and Handle components for resizable pane layouts\n* **[useNotifications](https://github.com/vuetifyjs/0/pull/146)** — Notification lifecycle management with adapters\n* **[createModel](https://github.com/vuetifyjs/0/pull/148)** — Selection state layer between registry and selection\n* **[createRegistry](https://github.com/vuetifyjs/0/pull/149)** — `move()` method for reordering registered items\n* **[useRules](https://github.com/vuetifyjs/0/pull/140)** — Validation composable with Zod and Yup adapters\n\nThe [interactive playground](https://0.vuetifyjs.com/playground) is now live for experimenting with v0 composables.\n\n::: info\n\nWith v4 stable, the Vuetify → Vuetify0 refactor has begun. Core Vuetify components are being rebuilt on top of v0's headless composable layer—the path to Vuetify 5.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [createDataTable PR#138](https://github.com/vuetifyjs/0/pull/138)\n* [createNested PR#137](https://github.com/vuetifyjs/0/pull/137)\n* [Breadcrumbs PR#136](https://github.com/vuetifyjs/0/pull/136)\n* [createStack PR#129](https://github.com/vuetifyjs/0/pull/129)\n* [v0.1.3 Release Notes](https://github.com/vuetifyjs/0/releases/tag/v0.1.3)\n\n---\n\n## February 2026 Changelog\n\nThe following section provides an overview of the changes made in February 2026, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* New components: VAvatarGroup, v-expand-both-transition\n* Select components: menu-header/footer slots, screenreader fixes\n* VDataTable: page-by prop, sort icon persistence fix\n* VTreeview: ARIA roles, indent line improvements\n* Multiple VTimePicker, VDateInput, and VColorPicker fixes\n* Dynamic color utility class support\n\n**Expand** this section to see the detailed changelog for February 2026:\n\n
\nFebruary 2026 Full Changelog\n\n### v3.11.9\n\n**:wrench: Bug Fixes**\n\n* **VSnackbar:** opaque background for transparent variants ([#22646](https://github.com/vuetifyjs/vuetify/issues/22646)) ([Timur000101](https://github.com/Timur000101))\n* **VTab:** correct text colors when using inset without slider-color ([#22614](https://github.com/vuetifyjs/vuetify/issues/22614)) ([J-Sek](https://github.com/J-Sek))\n* **VDateInput:** don't scroll the page when opening years view ([#22613](https://github.com/vuetifyjs/vuetify/issues/22613)) ([Tzahile](https://github.com/Tzahile))\n* **VTimePicker:** enforce allowed values and range in inputs ([#22578](https://github.com/vuetifyjs/vuetify/issues/22578)) ([J-Sek](https://github.com/J-Sek))\n* **VColorPicker:** avoid undefined alpha in rgb/hsl output ([#22582](https://github.com/vuetifyjs/vuetify/issues/22582)) ([TheSanjBot](https://github.com/TheSanjBot))\n* **VTable:** apply $table-header-font-size to th elements ([#22598](https://github.com/vuetifyjs/vuetify/issues/22598)) ([nemanjamalesija](https://github.com/nemanjamalesija))\n* **VDataTable:** sort icon persists after removing sort via click ([#22595](https://github.com/vuetifyjs/vuetify/issues/22595)) ([nemanjamalesija](https://github.com/nemanjamalesija))\n* **VCard:** accept height when used within a dialog ([#22594](https://github.com/vuetifyjs/vuetify/issues/22594)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect:** pass listProps density to VCheckboxBtn in multiple ([#22512](https://github.com/vuetifyjs/vuetify/issues/22512)) ([johnleider](https://github.com/johnleider))\n* **VField:** fixed incorrect type define ([#22618](https://github.com/vuetifyjs/vuetify/issues/22618)) ([ZacharyBear](https://github.com/ZacharyBear))\n* **styles:** utilities should override responsive typography ([#22573](https://github.com/vuetifyjs/vuetify/issues/22573)) ([J-Sek](https://github.com/J-Sek))\n* **router:** ensure reactivity for 'to' attribute in useLink ([#20994](https://github.com/vuetifyjs/vuetify/issues/20994)) ([rbgmulmb](https://github.com/rbgmulmb))\n\n---\n\n### v3.12.0\n\n**:rocket: Features**\n\n* **VAvatarGroup:** add new component ([#22495](https://github.com/vuetifyjs/vuetify/issues/22495)) ([J-Sek](https://github.com/J-Sek))\n* **VAvatar:** add badge prop + dot-size for VBadge ([#22496](https://github.com/vuetifyjs/vuetify/issues/22496)) ([J-Sek](https://github.com/J-Sek))\n* **VSnackbarQueue:** show multiple snackbars ([#22605](https://github.com/vuetifyjs/vuetify/issues/22605)) ([J-Sek](https://github.com/J-Sek))\n* **VToolbar:** add location prop ([#22608](https://github.com/vuetifyjs/vuetify/issues/22608)) ([J-Sek](https://github.com/J-Sek))\n* **VImg:** add image-class prop ([#22622](https://github.com/vuetifyjs/vuetify/issues/22622)) ([J-Sek](https://github.com/J-Sek))\n* **VImg:** support width=\"fit-content\" ([#21414](https://github.com/vuetifyjs/vuetify/issues/21414)) ([eesayas](https://github.com/eesayas))\n* **VDataTable:** add page-by prop ([#22580](https://github.com/vuetifyjs/vuetify/issues/22580)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect/VAutocomplete/VCombobox:** add menu-header and menu-footer slots ([#22414](https://github.com/vuetifyjs/vuetify/issues/22414)) ([Haviles04](https://github.com/Haviles04))\n* **VSlider:** show thumb slider value on hover ([#22412](https://github.com/vuetifyjs/vuetify/issues/22412)) ([brandonpham13](https://github.com/brandonpham13))\n* **VOtpInput:** add masked prop ([#20950](https://github.com/vuetifyjs/vuetify/issues/20950)) ([ankusharoraa](https://github.com/ankusharoraa))\n* **VProgressCircular:** add reveal prop ([#22502](https://github.com/vuetifyjs/vuetify/issues/22502)) ([J-Sek](https://github.com/J-Sek))\n* **VRow:** smaller density steps ([#22574](https://github.com/vuetifyjs/vuetify/issues/22574)) ([J-Sek](https://github.com/J-Sek))\n* **VCol:** syntax for overriding row size ([#22572](https://github.com/vuetifyjs/vuetify/issues/22572)) ([J-Sek](https://github.com/J-Sek))\n* **transitions:** add v-expand-both-transition ([#22570](https://github.com/vuetifyjs/vuetify/issues/22570)) ([J-Sek](https://github.com/J-Sek))\n* **color:** strip text-*/bg-* for dynamic utility classes ([#17569](https://github.com/vuetifyjs/vuetify/issues/17569)) ([cgodo](https://github.com/cgodo))\n* **icon-set:** add mdi-unocss icon set ([#22117](https://github.com/vuetifyjs/vuetify/issues/22117)) ([userquin](https://github.com/userquin))\n* **VProgressLinear:** split buffer and indeterminate ([#22663](https://github.com/vuetifyjs/vuetify/issues/22663)) ([J-Sek](https://github.com/J-Sek))\n\n**:wrench: Bug Fixes**\n\n* **VSelect:** fix screenreader navigation to select options ([#22602](https://github.com/vuetifyjs/vuetify/issues/22602)) ([ikushum](https://github.com/ikushum))\n* **VTreeview:** indent lines with prepend-gap ([#22589](https://github.com/vuetifyjs/vuetify/issues/22589)) ([J-Sek](https://github.com/J-Sek))\n* **VTreeview:** add correct roles and aria attributes ([#22577](https://github.com/vuetifyjs/vuetify/issues/22577)) ([mjung2605](https://github.com/mjung2605))\n\n---\n\n### v3.12.1\n\n**:wrench: Bug Fixes**\n\n* **docs:** add overflow-hidden to FAQ expansion panels ([#22660](https://github.com/vuetifyjs/vuetify/issues/22660)) ([Haviles04](https://github.com/Haviles04))\n\n---\n\n### v4.0.0\n\n**:rocket: Features**\n\n* All features from v3.12.0 included in the v4 stable release\n* **CSS Layers:** styles organized in `@layer` blocks for clean utility framework coexistence\n* **MD3 Typography:** Material Design 3 type scale from v4.0.0-beta.0\n* **MD3 Elevation:** updated elevation levels matching MD3 specifications from v4.0.0-beta.0\n* **Grid System Overhaul:** modernized responsive grid from v4.0.0-beta.0\n\n
\n\n---\n\n## What's Next{ #whats-next .mt-4 }\n\nWith v4 stable, the focus shifts to two fronts. First, **v4.1** will land the features currently in development—VMorphingIcon, theme page transitions, and hover elevation. VFileUpload's VInput integration and VCommandPalette's `closeOnSelect` and `before-select` events have already landed, along with Nuxt and UnoCSS presets for the CLI.\n\nSecond, the **Vuetify → Vuetify0 refactor** is now [underway](https://github.com/vuetifyjs/vuetify/pull/22672). Core Vuetify components are being rebuilt on v0's headless composable layer—starting with data table, tree, and form primitives. This is the path to **Vuetify 5**, where the full component library and the headless meta-framework share one unified architecture.\n\nVuetify is and always will be free and open source. If your team relies on the framework, consider supporting continued development through [Vuetify One](https://one.vuetifyjs.com/) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution helps us ship features like v4, the CLI, and Vuetify0 faster.\n\nThank you for being part of the Vuetify community. See you in March!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","frontmatter":{"layout":"blog","meta":{"title":"February 2026 Update","description":"February ships stable Vuetify 4.0.0 — CSS layers, MD3, and unstyled foundations — plus CLI v1.0.0, VAvatarGroup, and new Vuetify0 composables.","keywords":"Vuetify February 2026, Vuetify 4.0.0 Revisionist, v4 stable, VAvatarGroup, CLI v1.0.0, Vuetify0, createDataTable"}},"isInternal":false,"tokens":8654,"sizeBytes":31132},{"name":"index.md","path":"packages/docs/src/pages/en/blog/index.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/index.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: Blog\n description: The Vuetify blog shares the latest news, updates, and stories — stay up to date with developments across the Vuetify ecosystem.\n keywords: vuetify, blog, news, updates, stories, ecosystem\n---\n\n
\n\n# From the blog\n\nLatest news, updates, and stories about Vuetify.\n\n\n\n---\n\n
\n\n## Announcing Vuetify v4.3\n\n🖊️ John Leider • 📅 October 20th, 2026\n\nVuetify v4.3 \"Paladin\" adds more control over filtering and selection in data tables and forms, a batch of new labs components, right-click menus for VMenu, and opt-in Material Design Expressive styles for 7 components. It also includes new options for carousels and slide groups, and a more stable layout for SSR apps. { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify-4.3/) { .text-end }\n\n## September 2026 Update\n\n🖊️ Jacek Czarniecki • 📅 October 7th, 2026\n\nVuetify 4.2 got three patches while dev branch marches up for 4.3: VInfiniteCarousel, MD3 tabs alignment, modal rail drawers and localized VDateInput hints for typing. Vuetify's RTL, locale and observer composables now run on @vuetify/v0, and moving display onto it surfaced two fixes in Vuetify0 1.2.3. { .text-medium-emphasis }\n\n[Read More](/blog/september-2026-update/) { .text-end }\n\n## August 2026 Update\n\n🖊️ Jacek Czarniecki • 📅 September 14th, 2026\n\nVuetify 4.2 went into beta on August 27 and stable on September 2. It makes @vuetify/v0 the framework's first (and only) runtime dependency. Release included some cleanup and fixes that were too risky for patch releases so you might want to read this post closely. The team improved VDateInput, selection dropdowns, and many improvements landed in v0 for headless DataTable, DataGrid and Alert... { .text-medium-emphasis }\n\n[Read More](/blog/august-2026-update/) { .text-end }\n\n## July 2026 Update\n\n🖊️ John Leider • 📅 August 11th, 2026\n\nVuetify0 reached 1.0 on July 22, shipping stable as @vuetify/v0 after 214 merged PRs and a thirteen-component stable spine. Five days later v3.13.0 shipped as the final Vuetify 3 minor and moved the line into long-term support through July 2027, on a window now shortened from eighteen months to twelve. The v4.1 patch line shipped five releases underneath both, fixing focus resolution in Shadow DOM, two defaults-inheritance leaks, and a run of select-family reports... { .text-medium-emphasis }\n\n[Read More](/blog/july-2026-update/) { .text-end }\n\n## Announcing Vuetify0 1.0\n\n🖊️ John Leider • 📅 July 22nd, 2026\n\nVuetify0 is 1.0. The release candidate held — the frozen surface shipped through the validation window without a breaking change — and the package is now `@vuetify/v0`, no tag required. For a headless meta-framework, 1.0 is a promise about the foundation: nineteen composables, seventeen utilities, and a thirteen-component spine locked under semver for the whole 1.x line, enforced by CI, with the rest of the components promoting onto it individually. It ships 40 components, 71 composables, and 24 utilities — the logic layer a decade of Vuetify was built on, extracted, hardened, and frozen so you can build on it directly... { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify0-v1/) { .text-end }\n\n## June 2026 Update\n\n🖊️ Jacek Czarniecki • 📅 July 8th, 2026\n\nThis was a stabilization month. v4.1.0 shipped on June 2, followed by two patch releases. Most of that work went into the updated VOverlay, fixing placement and sizing bugs. Lot's of great new features were released to the users. Meanwhile Vuetify0 spent its first month in beta with the public API frozen, refining what shipped on the road to v1.0 in July... { .text-medium-emphasis }\n\n[Read More](/blog/june-2026-update/) { .text-end }\n\n## Announcing the Vuetify0 Release Candidate\n\n🖊️ John Leider • 📅 July 2nd, 2026\n\nVuetify0 has reached release candidate. The API freeze held through six beta releases — nothing renamed, nothing removed — across 184 commits with 60 fixes and 5 performance rewrites. The RC promotes the v1 stable set — the selection family, createRegistry, and the core plugins — and the surface stands at 50 components, 71 composables, and 24 utilities, every component shipping a built-in English aria label (WCAG 4.1.2). From here to v1.0 the work is final testing and documentation — no new features... { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify0-rc/) { .text-end }\n\n## May 2026 Update\n\n🖊️ Jacek Czarniecki • 📅 June 16th, 2026\n\nMay was a full-throttle feature sprint for Vuetify 4.1, the first minor since 4.0.0. The core team pushed hard to clear the backlog and land everything queued for the release: seven components promoted out of labs (VFileUpload, VDateInput, VColorInput, VIconBtn, VPicker, VStepperVertical, VPullToRefresh), four new ones (VHeatmap, VHighlight, VMonthPicker, VDateRangePicker), a full data-table accessibility pass, and a wave of fixes across 89 commits and 4 releases. Vuetify0 ran in parallel, landing its headless drag-and-drop family (useDragDrop, createSortable, createKanban) on the road to its June beta... { .text-medium-emphasis }\n\n[Read More](/blog/may-2026-update/) { .text-end }\n\n## Announcing the Vuetify0 Beta\n\n🖊️ John Leider • 📅 June 2nd, 2026\n\nVuetify0 has reached beta, freezing the public API: the existing composables and components keep their names and signatures through v1. Since the alpha, the totals went to 49 components and 68 composables, no composables remain in draft, and a headless drag-and-drop family (useDragDrop, createSortable, createKanban) was added along with createOtp, useDelay, and the Overflow component. The release also covers the testing and stability work — 5,700+ unit tests, 98.7% coverage — ahead of v1... { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify0-beta/) { .text-end }\n\n## April 2026 Update\n\n🖊️ John Leider • 📅 May 4th, 2026\n\nApril delivered the Vuetify0 v1.0.0 public alpha — 46 components and 63 composables of headless Vue primitives — alongside three Vuetify framework patch releases, MCP v0.7.0 with playground and link CRUD tools, and four ESLint Config releases including ESLint 10 support. Six new v0 components (Carousel, Image, NumberField, Progress, Toggle, Overflow) merged in April, the display composable became the first Vuetify internal to migrate to v0, and useTheme/useLocale/useFeatures became reactive-by-default across 847 total commits... { .text-medium-emphasis }\n\n[Read More](/blog/april-2026-update/) { .text-end }\n\n## March 2026 Update\n\n🖊️ John Leider • 📅 April 16th, 2026\n\nMarch delivered 7 Vuetify patch releases stabilizing v4, while Vuetify0 exploded with 427 commits reaching v0.2.0 with 7 new headless components including Switch, Slider, Treeview, and Combobox. The Nuxt Module hit v1.0.0-beta, the CLI shipped 10 releases with Vite 8 and Vue Router 5 support, and the ESLint plugin gained automated v4 migration rules across 720 total commits... { .text-medium-emphasis }\n\n[Read More](/blog/march-2026-update/) { .text-end }\n\n## Announcing the Vuetify0 Alpha\n\n🖊️ John Leider • 📅 April 7th, 2026\n\nThe Vuetify0 alpha is here — a headless meta-framework for Vue 3 with 46 components, 63 composables, first-class AI integration, and an adapter-based plugin system. 100% TypeScript, zero styles. Includes a full tutorial building DevKey, a developer API dashboard, from scratch. { .text-medium-emphasis }\n\n[Read More](/blog/announcing-vuetify0-alpha/) { .text-end }\n\n## February 2026 Update\n\n🖊️ John Leider • 📅 March 9th, 2026\n\nFebruary marks Vuetify's most significant milestone—the stable release of **Vuetify 4.0.0** with CSS layers, MD3 design system, and unstyled component foundations. The Vuetify CLI hit v1.0.0, VAvatarGroup shipped as a new component, and Vuetify0 gained createDataTable and Breadcrumbs composables across 390 commits and 68 merged PRs... { .text-medium-emphasis }\n\n[Read More](/blog/february-2026-update/) { .text-end }\n\n## Vuetify Project baseline with Vite and TailwindCSS\n\n🖊️ Jacek Czarniecki • 📅 February 16th, 2026\n\nEver wondered what does it really take to make Vuetify project play in harmony with TailwindCSS? This article is about to lay it out in a consise step-by-step guide. With CSS layers enabled by default in Vuetify v4, the two frameworks coexist smoothly while sharing aligned breakpoints, theme colors, and custom fonts. We cover disabling Vuetify's built-in utilities in favor of Tailwind's, resolving conflicting classes and more. { .text-medium-emphasis }\n\n[Read More](/blog/building-with-vite-and-tailwindcss/) { .text-end }\n\n## January 2026 Update\n\n🖊️ John Leider • 📅 February 11th, 2026\n\nJanuary delivered Vuetify 4.0.0-beta.0 with MD3 typography and elevation systems, VCommandPalette in labs, grid system overhaul, and the Vuetify CLI reaching 100 commits with analyze command and tab completion. Vuetify0 hit v0.1.0 with Tabs, Radio, and Checkbox components, while Snips gained 11 new snippets from J-Sek... { .text-medium-emphasis }\n\n[Read More](/blog/january-2026-update/) { .text-end }\n\n## December 2025 Update\n\n🖊️ John Leider • 📅 January 12th, 2026\n\nDecember was our most productive month of 2025 with 522 commits across 16 repositories. The month delivered Vuetify 4.0.0-alpha.0 with CSS layers, six v3.11.x patches, the Vuetify CLI public release, Google OAuth for Vuetify One, PWA support across all ecosystem products, and 6 Vuetify0 releases with new composables including usePagination, useClickOutside, and useVirtual... { .text-medium-emphasis }\n\n[Read More](/blog/december-2025-update/) { .text-end }\n\n## Vuetify Project baseline with Nuxt and UnoCSS\n\n🖊️ Jacek Czarniecki • 📅 December 22th, 2025\n\nLet's explore a lean, production‑ready setup for Nuxt application that combines Vuetify 3 with UnoCSS. By disabling Vuetify’s default CSS bundles (basic colors and utility classes) and generating only the styles actually used, the resulting CSS footprint shrinks dramatically. We will ensure the project foundation works with themes, typography, and breakpoints without compromises. { .text-medium-emphasis }\n\n[Read More](/blog/building-with-nuxt-and-unocss/) { .text-end }\n\n## November 2025 Update\n\n🖊️ John Leider • 📅 December 10th, 2025\n\nNovember delivered Vuetify v3.11.0 (Harbinger) with VCalendar and VHotkey promoted from labs, new VTimePicker input variant, VDatePicker MD3 improvements, and significant CLI progress. J-Sek contributed an impressive 14 PRs while the v0 project hit 109 commits across 5 releases... { .text-medium-emphasis }\n\n[Read More](/blog/november-2025-update/) { .text-end }\n\n## October 2025 Update\n\n🖊️ John Leider • 📅 November 11th, 2025\n\nOctober focused on refinement and reliability, delivering critical accessibility improvements with enhanced focus trap functionality, optimized VDataTable performance for large datasets, and refined components across the board. The month also saw the launch of Vuetify Link, our new URL shortening service, and significant updates to the Vuetify MCP server with HTTP transport support. We made substantial progress on v0 composables, laying the groundwork for Vuetify 4.0... { .text-medium-emphasis }\n\n[Read More](/blog/october-2025-update/) { .text-end }\n\n## September 2025 Update\n\n🖊️ John Leider • 📅 October 12th, 2025\n\nSeptember 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. This update includes the release of v3.10.0 (Argo), updated Figma UI Kit, new Vuetify0 composables, and over 60 bug fixes and features... { .text-medium-emphasis }\n\n[Read More](/blog/september-2025-update/) { .text-end }\n\n## August 2025 Update\n\n🖊️ John Leider • 📅 September 9th, 2025\n\nAugust marks a pivotal moment in Vuetify's evolution as we prepare to release the pre-alpha of Vuetify0 (v0), launch our redesigned issues page, and continue delivering powerful components and improvements. This month brings exciting developments including the \"Mastering Vuetify Theming\" webinar recap, VEditor final testing phase, free premium themes for personal use, and significant framework updates with 87 merged pull requests... { .text-medium-emphasis }\n\n[Read More](/blog/august-2025-update/) { .text-end }\n\n## July 2025 Update\n\n🖊️ John Leider • 📅 August 6th, 2025\n\nJuly was a month of significant advancements in the Vuetify ecosystem, highlighted by the release of v3.9.0 (Zealot) and the promotion of VTreeview and VTimePicker from labs to core components. This update also includes a focus on component stability, bug fixes, and developer experience improvements, with subsequent patches up to v3.9.3... { .text-medium-emphasis }\n\n[Read More](/blog/july-2025-update/) { .text-end }\n\n## June 2025 Update\n\n🖊️ John Leider • 📅 July 7th, 2025\n\nJune delivered substantial progress on VHotkey component, VCommandPalette development, component stability improvements, and developer experience enhancements across the Vuetify ecosystem. Discover the completion of VHotkey and useHotkey composable, new components in development like VMaskInput and VEditor, and exciting ecosystem updates including documentation improvements and Vuetify Studio enhancements... { .text-medium-emphasis }\n\n[Read More](/blog/june-2025-update/) { .text-end }\n\n---\n\n## May 2025 Update\n\n🖊️ John Leider • 📅 June 6th, 2025\n\nThis month brings exciting advancements across the Vuetify ecosystem, with major strides in AI integration, component refinements, and developer experience. Discover the official release of @vuetify/mcp (Model Context Protocol), substantial improvements to VDateInput and VNumberInput components, and the introduction of the new VColorInput Labs component... { .text-medium-emphasis }\n\n[Read More](/blog/may-2025-update/) { .text-end }\n\n---\n\n## April 2025 Update\n\n🖊️ John Leider • 📅 May 1st, 2025\n\nApril delivered tangible progress on MCP, the new theming engine, component refinements, docs, ESLint v4, and tooling across the Vuetify ecosystem. Discover how these updates enhance your development experience and prepare Vuetify for the future... { .text-medium-emphasis }\n\n[Read More](/blog/april-2025-update/) { .text-end }\n\n---\n\n## Announcing Vuetify v3.8\n\n🖊️ John Leider • 📅 April 8th, 2025\n\nVuetify v3.8 is here! Discover the latest features, improvements, and bug fixes in this minor release, including new components and form input enhancements. This release is packed with new features, improvements, and bug fixes, and contains no breaking changes... { .text-medium-emphasis }\n\n---\n\n[Read More](/blog/announcing-vuetify-3.8/) { .text-end }\n\n## Vuetify HeroDevs Partnership\n\n🖊️ Taylor Corbett • 📅 March 28th, 2025\n\nVuetify is excited to announce a partnership with HeroDevs to provide extended long-term support for Vuetify 2 users through Vue 2 NES + Essentials. For teams that haven't yet migrated to Vuetify 3, this solution is designed to keep applications secure and up to date without requiring an immediate migration, addressing security vulnerabilities, compliance issues, and compatibility challenges... { .text-medium-emphasis }\n\n[Read More](/blog/vuetify-herodevs-partnership/) { .text-end }\n\n---\n\n## State of the Union 2024 - Post Mortem\n\n🖊️ John Leider • 📅 March 19th, 2025\n\nA lot has changed since the 2024 State of the Union. In this post, I want to share the journey we've been on, the challenges we've faced, and the incredible team that's come together to shape Vuetify's future. From nearly losing it all to finding renewed purpose and energy, this is a story of resilience, community, and a shared vision for what Vuetify can become... { .text-medium-emphasis }\n\n[Read More](/blog/state-of-the-union-2024-post-mortem/) { .text-end }\n\n---\n\n## Building a Basic Nuxt Application with Vuetify\n\n🖊️ Eric Sarrion • 📅 February 21st, 2025\n\nDiscover how to craft a polished Nuxt application with Vuetify in this detailed guide. Leverage Vue.js and Nuxt’s streamlined framework to build a basic app featuring a toolbar, navigation menu, and multiple pages. Ideal for developers of all levels looking to simplify their workflow with automatic imports and reusable components... { .text-medium-emphasis }\n\n[Read More](/blog/building-a-basic-nuxt-application-with-vuetify/) { .text-end }\n\n---\n\n## State of the Union 2024\n\n🖊️ John Leider • 📅 September 8th, 2024\n\nIt's been a long road to get where we are today, and looking back, I can’t help but feel proud of how far Vuetify has come. From humble beginnings to now surpassing Vuetify 2’s usage, the journey has been anything but easy, but we’ve always had our community to lean on. Today, I want to take some time to reflect on our past, acknowledge our wins and challenges, and share where we're headed... { .text-medium-emphasis }\n\n[Read More](/blog/state-of-the-union-2024/) { .text-end }\n\n---\n","frontmatter":{"layout":"blog","meta":{"title":"Blog","description":"The Vuetify blog shares the latest news, updates, and stories — stay up to date with developments across the Vuetify ecosystem.","keywords":"vuetify, blog, news, updates, stories, ecosystem"}},"isInternal":false,"tokens":4456,"sizeBytes":17203},{"name":"january-2026-update.md","path":"packages/docs/src/pages/en/blog/january-2026-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/january-2026-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: January 2026 Update\n description: January shipped Vuetify 4.0.0-beta.0, MD3 typography and elevation, the VCommandPalette labs release, a grid overhaul, and Vuetify0 v0.1.0.\n keywords: Vuetify January 2026, v4.0.0-beta.0, VCommandPalette, MD3 typography, grid system, Vuetify0, CLI\n---\n\n\n\n# January 2026 Update\n\nWelcome to the January 2026 Vuetify update! The new year kicks off with **Vuetify 4.0.0-beta.0**—the first beta of our next major version featuring MD3 typography, elevation levels, and a complete grid system overhaul. **VCommandPalette** lands in labs, and **Vuetify0** hits the v0.1.0 milestone with new Tabs, Radio, and Checkbox components.\n\n![Hero image for January update](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/january-hero.png \"January hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 February 11th, 2026\n\n\n\n---\n\n## A Strong Start to 2026\n\nJanuary delivered steady progress across all Vuetify projects. With **661 commits** across 12 active repositories and **49 merged PRs**, the team maintained momentum from December's productive close. The release of v4.0.0-beta.0 brings MD3 typography and elevation system migrations, preparing Vuetify 4 for stable release. [J-Sek](https://github.com/J-Sek) continued his exceptional contribution streak with 5 merged PRs to the main framework plus 11 to Snips, while [Andrei Elkin](https://github.com/AndreyYolkin) drove the grid system overhaul and led CLI development with 75 commits.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Vuetify 4 Beta](#vuetify-4-beta)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Ecosystem Spotlight: Vuetify Snips](#ecosystem-spotlight-vuetify-snips)\n* [Vuetify CLI: Rapid Development](#vuetify-cli-rapid-development)\n* [Vuetify MCP: V4 Migration Tools](#vuetify-mcp-v4-migration-tools)\n* [Product Updates](#product-updates)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [January 2026 Changelog](#january-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nJanuary delivered three Vuetify releases—two v3.11.x patches maintaining stability and the landmark **v4.0.0-beta.0** advancing the next major version. The MCP server shipped five releases (v0.4.4 through v0.5.0) with v4 migration tooling, and Vuetify One saw eight releases with Open Collective integration.\n\n![January Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/releases.png \"January Releases Banner\")\n\n### Key Improvements\n\n* **[VCommandPalette](https://next.vuetifyjs.com/components/command-palettes/)** new labs component for command-driven navigation\n* **[VDataTable](/components/data-tables/)** `sort-icon` prop for custom sort indicators\n* **MD3 Typography** migration to Material Design 3 type system\n* **MD3 Elevation** updated elevation levels matching MD3 specifications\n* **Grid System Overhaul** modernized responsive grid implementation\n* **[v-intersect](/directives/intersect/)** re-mount on prop updates for dynamic behavior\n\nView the complete list of changes in the [Full Changelog](#january-2026-changelog)\n\n**Details:**\n\n* [v3.11.7](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.7)\n* [v3.11.8](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.8)\n* [v4.0.0-beta.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0-beta.0)\n\n---\n\n## Vuetify 4 Beta\n\nThe first beta of **Vuetify 4.0** landed on January 30th, building on December's alpha with significant style system migrations. This release brings Material Design 3 alignment for typography and elevation, plus a modernized grid system.\n\n![Vuetify 4 Beta](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/releases-beta.png \"Vuetify 4 Beta\")\n\n### What's New in v4.0.0-beta.0\n\n* **MD3 Typography** — Migrates to Material Design 3's type scale while preserving Sass customization. Updated font sizes and line heights for better hierarchy and readability.\n* **MD3 Elevation** — Elevation levels now match MD3 specifications with smoother shadow progressions and better depth perception across light and dark themes.\n* **Grid System Overhaul** — The responsive grid has been completely modernized with improved flexbox implementation, better RTL support, and cleaner CSS output. [VCol](/api/v-col/) gains syntax for overriding row size.\n\n**Component Updates**:\n\n* **[VDataTable](/components/data-tables/)**: New `sort-icon` prop allows custom sort indicators\n* **[v-intersect](/directives/intersect/)**: Now re-mounts when props update for dynamic threshold changes\n* **nested**: Mark individual nodes as detached for independent selection behavior\n\n::: info\n\nv4.0.0-beta.0 is for testing and feedback only. Production applications should continue using v3.11.x until v4 reaches stable release.\n\n:::\n\n**Details:**\n\n* [v4.0.0-beta.0 Release Notes](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.0-beta.0)\n* [Migration Guide](https://next.vuetifyjs.com/getting-started/upgrade-guide/)\n* [Remaining Issues](https://github.com/vuetifyjs/vuetify/milestone/62)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nJanuary's framework work balanced v4 development with v3 maintenance. The team merged 14 PRs addressing new features, accessibility, and bug fixes.\n\n### New Features\n\n**[VCommandPalette](/labs/command-palette/)**\n\nThe highly anticipated command palette component lands in labs! VCommandPalette provides a keyboard-driven interface for searching commands, navigation, and actions. It's built on the same patterns used by VS Code, Figma, and other modern applications.\n\n\n\n**[VDataTable](/components/data-tables/) Sort Icon**\n\nA new `sort-icon` prop allows customizing the sort indicator in table headers, enabling consistent iconography with your design system.\n\n**[VField](/api/v-field/) Label Improvements**\n\nVField now ensures only one label element renders at a time, fixing edge cases with floating labels and improving screen reader compatibility.\n\n**Details:**\n\n* [VCommandPalette PR#22403](https://github.com/vuetifyjs/vuetify/pull/22403)\n* [VDataTable sort-icon PR#22521](https://github.com/vuetifyjs/vuetify/pull/22521)\n* [VField label PR#22542](https://github.com/vuetifyjs/vuetify/pull/22542)\n\n### Bug Fixes\n\n**[VAutocomplete](/components/autocompletes/)** Avoid no-items being selectable\n\n**[VInput](/api/v-input/)** Use direction prop only where needed\n\n**[VNumberInput](/components/number-inputs/)** Prevent stepper hover overflow when rounded\n\n**Details:**\n\n* [VAutocomplete PR#22509](https://github.com/vuetifyjs/vuetify/pull/22509)\n* [VInput direction PR#22519](https://github.com/vuetifyjs/vuetify/pull/22519)\n* [VNumberInput PR#22492](https://github.com/vuetifyjs/vuetify/pull/22492)\n\n### In Development\n\nSeveral exciting features are in active development and expected in upcoming releases:\n\n#### VHeatmap\n\nA new visualization component for displaying data density and patterns. Ideal for activity calendars, contribution graphs, and heat distribution displays.\n\n![VHeatmap Preview](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/heatmap-preview.png \"VHeatmap Preview\")\n\n#### VMonthPicker\n\nA dedicated month selection component complementing VDatePicker for use cases requiring only month/year selection.\n\n#### VMaskInput Multiple Masks\n\nEnhanced mask input supporting multiple and dynamic mask resolution for complex input patterns like phone numbers with variable country codes.\n\n**Details:**\n\n* [VHeatmap PR#22535](https://github.com/vuetifyjs/vuetify/pull/22535)\n* [VMonthPicker PR#22534](https://github.com/vuetifyjs/vuetify/pull/22534)\n* [VMaskInput PR#22501](https://github.com/vuetifyjs/vuetify/pull/22501)\n\n---\n\n## Ecosystem Spotlight: Vuetify Snips { #ecosystem-spotlight-vuetify-snips }\n\n\n\n
\n\n[Vuetify Snips](https://snips.vuetifyjs.com/) had an exceptional January with **11 merged PRs**—all from [J-Sek](https://github.com/J-Sek)—adding new snippet categories and improving existing templates.\n\n### New Snippets\n\n![Vuetify Snips Pickers](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/snips-pickers.png \"Vuetify Snips Pickers\")\n\n**Pickers**: 6 new picker snippets covering date ranges, time selection, and combined datetime patterns\n\n**Pagination**: New pagination templates demonstrating various layouts and styles\n\n**Buttons**: Additional button variations and loading state patterns\n\n**Charts**: New visualization snippets using Vuetify's chart components\n\n### Improvements\n\n* Improved accessibility for radio group snippets\n* Fixed TypeScript compatibility for Chat snippets in Vuetify Play\n* Updated Vuetify version across all snippets\n\n**Details:**\n\n* [Vuetify Snips](https://snips.vuetifyjs.com/)\n* [Pickers PR#70](https://github.com/vuetifyjs/snips/pull/70)\n* [Pagination PR#83](https://github.com/vuetifyjs/snips/pull/83)\n* [Charts PR#63](https://github.com/vuetifyjs/snips/pull/63)\n\n---\n\n## Vuetify CLI: Rapid Development { #vuetify-cli-rapid-development }\n\n\n\n
\n\nThe Vuetify CLI saw intensive development in January with **97 commits** and 31 releases (v0.0.8 through v0.0.13-beta.9), bringing major new capabilities for project management and development workflows. [Andrei Elkin](https://github.com/AndreyYolkin) drove the majority of CLI development with 75 commits.\n\n### New Features{ #new-cli-features }\n\n**Analyze Command**: `vuetify analyze` detects Vuetify usage patterns in your project, helping identify optimization opportunities and migration paths.\n\n\n\n**MCP Integration**: Built-in MCP server configuration with `vuetify add mcp` now supports ruler configuration for AI-assisted development.\n\n**Tab Completion**: Shell tab completion for commands and project arguments, powered by @bomb.sh/tab.\n\n**Localization**: Internationalized prompts for version selection during project scaffolding.\n\n### Getting Started\n\n::: tabs\n\n```bash [pnpm]\npnpm add -g @vuetify/cli\n```\n\n```bash [npm]\nnpm install -g @vuetify/cli\n```\n\n```bash [yarn]\nyarn global add @vuetify/cli\n```\n\n```bash [bun]\nbun add -g @vuetify/cli\n```\n\n:::\n\n**Details:**\n\n* [Vuetify CLI GitHub Repository](https://github.com/vuetifyjs/cli)\n* [v0.0.13 Release](https://github.com/vuetifyjs/cli/releases/tag/v0.0.13)\n\n---\n\n## Vuetify MCP: V4 Migration Tools { #vuetify-mcp-v4-migration-tools }\n\n\n\n
\n\nThe Vuetify MCP server shipped four releases in January (v0.4.4 through v0.5.0), with the headline feature being **V4 migration tooling**.\n\n### What's New\n\n![Vuetify MCP Migration](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/mcp-migration.png \"Vuetify MCP Migration Workflow\")\n\n**V3 to V4 Upgrade Guide**: New tool providing comprehensive migration guidance for upgrading from Vuetify 3 to Vuetify 4.\n\n**Breaking Changes Reference**: Detailed documentation of all v4 breaking changes with migration examples.\n\n**Vuetify0 Sync**: Updated composable and component documentation synchronized with the v0 repository.\n\n::: tip AI Migration Prompt\n\nTry asking your AI assistant: *\"Use the Vuetify MCP server to analyze my project and generate a migration plan from Vuetify 3 to Vuetify 4.\"*\n\n:::\n\n### Getting Started{ #getting-started-cli }\n\nInstall with the Vuetify CLI:\n\n::: tabs\n\n```bash [pnpm]\npnpm dlx @vuetify/cli add mcp\n```\n\n```bash [npm]\nnpx @vuetify/cli add mcp\n```\n\n```bash [yarn]\nyarn dlx @vuetify/cli add mcp\n```\n\n```bash [bun]\nbunx @vuetify/cli add mcp\n```\n\n:::\n\nOr configure manually:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [v0.5.0 Release Notes](https://github.com/vuetifyjs/mcp/releases/tag/v0.5.0)\n* [Model Context Protocol Documentation](https://modelcontextprotocol.io/)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\nVuetify One shipped **8 releases** in January (v2.11.0 through v2.13.2), with the highlight being **Open Collective integration**—backers on OpenCollective now receive Vuetify One benefits automatically. Other improvements include banner priority sorting, store function additions, and ecosystem link fixes.\n\n**Details:**\n\n* [Vuetify One](https://one.vuetifyjs.com/)\n\n### Other Products\n\n**Vuetify Play** received 6 commits with quality-of-life improvements. **Vuetify Bin** and **Vuetify Link** each saw minor updates, and **Vuetify Issues Reporter** gained 5 commits improving triage workflows.\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\n
\n\nJanuary marked a significant milestone for Vuetify0 with the **v0.1.0 release**—the first minor version signaling API stability. With **464 commits**, **21 merged PRs**, and 7 releases (v0.0.22 through v0.1.2), the headless meta-framework gained three new components and substantial internal improvements.\n\n![Vuetify0 Progress](https://cdn.vuetifyjs.com/docs/images/blog/january-2026-update/v0.png \"Vuetify0 Progress\")\n\n### New Components\n\n**[Tabs](https://0.vuetifyjs.com/components/disclosure/tabs/)** — A fully accessible tab interface with keyboard navigation, ARIA attributes, and flexible styling. Supports both horizontal and vertical orientations with lazy rendering options.\n\n```html\n\n\n\n```\n\n**[Radio](https://0.vuetifyjs.com/components/forms/radio/)** — Accessible radio button groups with proper fieldset/legend semantics, keyboard navigation, and focus management.\n\n```html\n\n\n\n```\n\n**[Checkbox](https://0.vuetifyjs.com/components/forms/checkbox/)** — Standalone checkbox with indeterminate state support, proper labeling, and native form integration.\n\n```html\n\n\n\n```\n\n### New Composables\n\n**[useLazy](https://0.vuetifyjs.com/composables/system/use-lazy/)** — Deferred rendering based on visibility. Content renders only when its container enters the viewport, ideal for performance optimization in long pages.\n\n**[useDate](https://0.vuetifyjs.com/composables/plugins/use-date/)** — Date manipulation utilities with locale support, formatting, and comparison functions.\n\n**[useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey/)** — Keyboard shortcut management ported from Vuetify 3, enabling consistent hotkey handling across applications.\n\n**[createNested](https://0.vuetifyjs.com/composables/selection/create-nested/)** — Hierarchical tree management for building treeview, file browser, and nested list components.\n\n### Internal Improvements\n\n**useFeatures Adapters**: New adapter system allows customizing feature behavior without modifying core composables.\n\n**Theme Style Injection**: Migrated to adoptedStyleSheets for better performance and Shadow DOM support.\n\n**Web Types Generation**: Automatic generation of web-types for IDE support with prop documentation and type hints.\n\n::: info\n\nVuetify0 v0.1.x signals API stability for existing composables. Breaking changes will follow semver conventions going forward.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [Vuetify0 Roadmap](https://0.vuetifyjs.com/roadmap)\n* [Tabs Component](https://0.vuetifyjs.com/components/disclosure/tabs/)\n* [Radio Component](https://0.vuetifyjs.com/components/forms/radio/)\n* [Checkbox Component](https://0.vuetifyjs.com/components/forms/checkbox/)\n* [v0.1.0 Release Notes](https://0.vuetifyjs.com/releases/?version=v0.1.0)\n\n---\n\n## January 2026 Changelog\n\nThe following section provides an overview of the changes made in January 2026, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* MD3 typography and elevation system migrations\n* VCommandPalette labs component\n* Grid system modernization\n* VDataTable sort-icon customization\n* v-intersect dynamic prop updates\n* Numerous accessibility and form fixes\n\n**Expand** this section to see the detailed changelog for January 2026:\n\n
\n\n### v3.11.7\n\n**:wrench: Bug Fixes**\n\n* **VAutocomplete:** avoid no-items being selectable ([#22509](https://github.com/vuetifyjs/vuetify/issues/22509)) ([36f679c](https://github.com/vuetifyjs/vuetify/commit/36f679ccef))\n* **VInput:** Use direction prop only where needed ([#22519](https://github.com/vuetifyjs/vuetify/issues/22519)) ([1eca6f8](https://github.com/vuetifyjs/vuetify/commit/1eca6f8fad))\n* **VNumberInput:** prevent inner button overflow when rounded ([#22492](https://github.com/vuetifyjs/vuetify/issues/22492)) ([942ddcc](https://github.com/vuetifyjs/vuetify/commit/942ddcccc8))\n* **VBreadcrumbs:** drop redundant `item-props` prop ([901061b](https://github.com/vuetifyjs/vuetify/commit/901061b7fb))\n* **VTabs:** correct slider width with inset and vertical ([0201b64](https://github.com/vuetifyjs/vuetify/commit/0201b641c4))\n\n---\n\n### v3.11.8\n\n**:wrench: Bug Fixes**\n\n* **VColorPicker:** prevent glitch hiding canvas on resize ([f4e3172](https://github.com/vuetifyjs/vuetify/commit/f4e31724e3))\n* **VListItem:** avoid overlay blinking when deactivating ([d11c6a6](https://github.com/vuetifyjs/vuetify/commit/d11c6a69ec))\n* **VField:** Use only one for label at a time ([#22542](https://github.com/vuetifyjs/vuetify/issues/22542)) ([4c0c9fc](https://github.com/vuetifyjs/vuetify/commit/4c0c9fc08a))\n\n---\n\n### v4.0.0-beta.0\n\n**:rocket: Features**\n\n* **typography:** migrate to MD3 typography ([#22557](https://github.com/vuetifyjs/vuetify/issues/22557)) ([311daf4](https://github.com/vuetifyjs/vuetify/commit/311daf433a))\n* **elevation:** MD3 elevation levels ([#22461](https://github.com/vuetifyjs/vuetify/issues/22461)) ([dfce695](https://github.com/vuetifyjs/vuetify/commit/dfce695f8e))\n* **VCol/VRow:** grid system overhaul ([#21500](https://github.com/vuetifyjs/vuetify/issues/21500)) ([f6d24a9](https://github.com/vuetifyjs/vuetify/commit/f6d24a9234))\n* **VDataTable:** add `sort-icon` prop ([#22521](https://github.com/vuetifyjs/vuetify/issues/22521)) ([3bdf0ea](https://github.com/vuetifyjs/vuetify/commit/3bdf0ead33))\n* **v-intersect:** re-mount on prop updates ([#22556](https://github.com/vuetifyjs/vuetify/issues/22556)) ([6262290](https://github.com/vuetifyjs/vuetify/commit/6262290d24))\n\n**:test_tube: Labs**\n\n* **VCommandPalette:** add new command palette component ([#22403](https://github.com/vuetifyjs/vuetify/issues/22403)) ([2d4d0df](https://github.com/vuetifyjs/vuetify/commit/2d4d0df64f))\n\n
\n\n---\n\n## What's Next{ #whats-next .mt-4 }\n\n**Vuetify 4.0 launches February 23rd.** The final beta releases are landing now, incorporating community feedback on the new typography, elevation, and grid systems. This is a pivotal Vuetify release—bringing CSS layers, a DX overhaul, and minimal migration effort. The [v3 → v4 MCP migration tools](#vuetify-mcp-v4-migration-tools) make an already straightforward upgrade even easier. Importantly, v4 includes the infrastructure changes that make **unstyled components possible**—the foundation for true styling freedom in future releases.\n\nThe tailwind/unocss support landing in v4 is exciting, but it's a stepping stone. The real transformation comes next: **full unstyled capability** where you control every aspect of styling while keeping Vuetify's component logic and accessibility. V4's architecture—combined with the work happening in [Vuetify0](https://0.vuetifyjs.com/roadmap)—sets the stage for this future.\n\nVCommandPalette will receive refinements based on labs feedback, and we're expanding the component's integration patterns for common use cases. VHeatmap and VMonthPicker are on track for labs release.\n\nStarting February 24th, we begin the **Vuetify → Vuetify0 refactor**—rebuilding Vuetify's internals on top of v0's headless composable layer. This is the path to **Vuetify 5**, where the full component library and the headless meta-framework become one unified architecture, unlocking complete styling control without sacrificing the features you rely on.\n\nThank you for being part of the Vuetify community. See you in February!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","frontmatter":{"layout":"blog","meta":{"title":"January 2026 Update","description":"January shipped Vuetify 4.0.0-beta.0, MD3 typography and elevation, the VCommandPalette labs release, a grid overhaul, and Vuetify0 v0.1.0.","keywords":"Vuetify January 2026, v4.0.0-beta.0, VCommandPalette, MD3 typography, grid system, Vuetify0, CLI"}},"isInternal":false,"tokens":6225,"sizeBytes":23492},{"name":"july-2025-update.md","path":"packages/docs/src/pages/en/blog/july-2025-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/july-2025-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: July 2025 Update\n description: July delivered progress on collaborative development, component enhancements, developer-experience improvements, and ecosystem tools across Vuetify.\n keywords: Vuetify July 2025, Vuetify Migrations Webinar, Vuetify0, VCommandPalette, VEditor, Framework Czar, Vuetify Bin\n---\n\n\n\n# July 2025 Update\n\nThis month showcases the power of collaborative development as our team and community work together to enhance Vuetify's ecosystem.\n\n![Hero image for July release notes](https://cdn.vuetifyjs.com/docs/images/blog/july-2025-update/july-hero.png \"July release notes hero image\"){ height=112 }\n\n---\n\n🖊️ John Leider • 📅 August 6th, 2025\n\n\n\n---\n\n## New Beginnings\n\nJuly 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.\n\n::: success\n\nCool example of the month: [VChatList](https://play.vuetifyjs.com/playgrounds/spDtrg) by [Ishan](https://github.com/ikushum)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n* [The future of Vuetify](#the-future-of-vuetify)\n* [\"Decoding Vuetify Migrations\" Webinar Recap](#webinar-recap)\n* [Ecosystem Spotlight: Vuetify Bin](#ecosystem-spotlight-vuetify-bin)\n* [Framework Updates](#framework-updates)\n* [July 2025 Changelog](#july-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nJuly featured the release of [v3.9.0 (Zealot)](/getting-started/release-notes/?version=v3.9.0) on July 8th, promoting [VTreeview](/components/treeview/) and [VTimePicker](/components/time-pickers/) 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](#july-2025-changelog).\n\n**Details:**\n\n* [v3.9.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.0)\n* [v3.9.1](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.1)\n* [v3.9.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.2)\n* [v3.9.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.3)\n\n## The future of Vuetify\n\nOver 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](https://github.com/vuetifyjs/vuetify/issues/2240), 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!\n\nWe went through some [organizational](https://vuetifyjs.com/blog/state-of-the-union-2024-post-mortem/) changes earlier this year after facing funding [challenges](https://vuetifyjs.com/blog/state-of-the-union-2024/) 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.\n\nLast [month](https://vuetifyjs.com/blog/june-2025-update/), I revealed some information regarding a new project I've been working on called [Vuetify0](https://github.com/vuetifyjs/0). 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.\n\n![Image of Vuetify composition progress](https://cdn.vuetifyjs.com/docs/images/blog/july-2025-update/evolution.png \"Vuetify composition progress\"){ height=588 }\n\n* **Vuetify0**: Meta framework for building framework agnostic UI libraries\n* **Vuetify Paper**: Styleless components that are prop configured—no CSS required\n* **Vuetify**: Marries Vuetify0, Vuetify Paper, and Vuetify's defaults system\n\nI plan to give my first public talk about it at **VueConf Toronto** later this year, and I'm excited to see what everyone thinks.\n\nIn 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](https://github.com/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.\n\nToday 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.\n\n
\n\n\n\n
\n\nJacek 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.\n\nThank 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](https://community.vuetifyjs.com/).\n\n---\n\n## \"Decoding Vuetify Migrations\" Webinar Recap{ #webinar-recap}\n\nLast 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.\n\nBelow are a few key points we noticed most users struggled with during the migration process:\n\n### ESLint Plugin\n\nThe [Vuetify ESLint plugin](https://github.com/vuetifyjs/eslint-plugin-vuetify) 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.\n\n```bash\npnpm install eslint-plugin-vuetify --save-dev\n```\n\n```js\n// eslint.config.js\nimport vue from 'eslint-plugin-vue'\nimport vuetify from 'eslint-plugin-vuetify'\n\nexport default [\n ...vue.configs['flat/base'],\n ...vuetify.configs['flat/base'],\n]\n```\n\nFor more information on how to set up and use this plugin, check out the [vuetifyjs/eslint-plugin-vuetify](https://github.com/vuetifyjs/eslint-plugin-vuetify) repository.\n\n### Theme Changes\n\nThe most common migration issue we see? **Theme configuration**. V3's theme system is more powerful but requires a different approach:\n\n```js\n// V2 Approach (Won't work in V3)\ntheme: {\n themes: {\n light: {\n primary: '#1976D2',\n },\n },\n}\n\n// V3 Approach (Correct)\ntheme: {\n themes: {\n light: {\n colors: { // Note the 'colors' wrapper!\n primary: '#1976D2',\n },\n },\n },\n}\n```\n\n---\n\nWe 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](https://community.vuetifyjs.com).\n\n## Ecosystem Spotlight: Vuetify Bin { #ecosystem-spotlight-vuetify-bin }\n\nEvery 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.\n\n### What is Vuetify Bin?\n\n[Vuetify Bin](https://bin.vuetifyjs.com/) 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*.\n\n![Image of Vuetify Bin](https://cdn.vuetifyjs.com/docs/images/blog/july-2025-update/vbin1234.png \"Vuetify Bin interface\"){ height=300 }\n\n::: info\nIf you're part of the **Vuetify One** subscription, you can save your snippets with a unique URL. [More Info](https://vuetifyjs.com/?one=subscribe)\n:::\n\n## Framework Updates\n\nWe'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:\n\n**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.\n\n\n\n**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.\n\n\n\n**VVideo** officially entered Labs with the release of [v3.9.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.3). This component provides a flexible and powerful way to embed videos in Vuetify applications, supporting various formats and configurations.\n\n\n\n**Details:**\n\n* [VCommandPalette PR#21534](https://github.com/vuetifyjs/vuetify/pull/21534)\n* [VEditor PR#21653](https://github.com/vuetifyjs/vuetify/pull/21653)\n* [VVideo PR#21460](https://github.com/vuetifyjs/vuetify/pull/21460)\n\n## July 2025 Changelog\n\nThe following section provides an overview of the changes made in July 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* **VProgressLinear** [#21744](https://github.com/vuetifyjs/vuetify/pull/21744): Added chunk separation capability for creating segmented progress indicators—perfect for multi-step forms and wizards *(Merged July 15)*\n* **VDatePicker** [#21760](https://github.com/vuetifyjs/vuetify/pull/21760): Restored the accidentally removed `first-day-of-year` prop after community feedback *(Draft as of July 24)*\n* **VMaskInput** [#21719](https://github.com/vuetifyjs/vuetify/pull/21719): Fixed validation value handling, ensuring masks work correctly with form validation\n* **VField** [#21706](https://github.com/vuetifyjs/vuetify/pull/21706): Enhanced label accessibility for improved screen reader support\n* **VDateInput** [#21684](https://github.com/vuetifyjs/vuetify/pull/21684): Added proper TypeScript definitions to the `displayFormat` function\n* **Input components** [#21703](https://github.com/vuetifyjs/vuetify/pull/21703): Fixed `aria-describedby` attributes when using `hide-details`\n\nExpand this section to see the detailed changelog for July 2025.\n\n
\n\n### 🏅 Component promotions\n\nThe following components have been promoted to the core framework from labs:\n\n* [VTreeview](https://vuetifyjs.com/components/treeview/)\n* [VTimePicker](https://vuetifyjs.com/components/time-pickers/)\n\n### :rocket: Features\n\n* **date:** add StringDateAdapter ([#21174](https://github.com/vuetifyjs/vuetify/issues/21174)) ([7fe9152](https://github.com/vuetifyjs/vuetify/commit/7fe91520fb9ab3ae58d4f7eeba6c0a7b431e6198)), closes [#20967](https://github.com/vuetifyjs/vuetify/issues/20967)\n* **date:** export VuetifyDateAdapter ([#21252](https://github.com/vuetifyjs/vuetify/issues/21252)) ([1a98d03](https://github.com/vuetifyjs/vuetify/commit/1a98d030a7b9547d519b1491e14e97f3e554ee6e)), closes [#19904](https://github.com/vuetifyjs/vuetify/issues/19904)\n* **ripple:** use key names instead of codes ([7ecec03](https://github.com/vuetifyjs/vuetify/commit/7ecec03fb50267507928c6de6751dee16540ea7f))\n* **theme:** add change, toggle, and cycle functions ([#21224](https://github.com/vuetifyjs/vuetify/issues/21224)) ([3570254](https://github.com/vuetifyjs/vuetify/commit/357025485c7e8ac8dbc254a9fb37a3360e8c8d79))\n* **theme:** add new option 'unimportant' to generate classes without `!important` ([3190331](https://github.com/vuetifyjs/vuetify/commit/3190331e70f42b7fdf4d7ee04f662b15eefde026))\n* **theme:** add new theme 'system' ([#21244](https://github.com/vuetifyjs/vuetify/issues/21244)) ([8393a41](https://github.com/vuetifyjs/vuetify/commit/8393a41287d34dba56cb2140bcc1aa44de62ffcb))\n* **transition:** expose create transition functions ([#21352](https://github.com/vuetifyjs/vuetify/issues/21352)) ([79f36aa](https://github.com/vuetifyjs/vuetify/commit/79f36aa042284471c7a7cb248721de884e4ef329)), closes [#16050](https://github.com/vuetifyjs/vuetify/issues/16050)\n* **types:** emit GlobalDirectives ([136dfdf](https://github.com/vuetifyjs/vuetify/commit/136dfdf99380063ed20ca8d0672e1e450faf5431)), closes [#21475](https://github.com/vuetifyjs/vuetify/issues/21475)\n* **useHotkey:** add new composable for making hotkey bindings ([#21598](https://github.com/vuetifyjs/vuetify/issues/21598)) ([99c721c](https://github.com/vuetifyjs/vuetify/commit/99c721c381e47b403429c7de194306013c0ec679))\n* **VAlert:** better aligment with prepend icon ([#20700](https://github.com/vuetifyjs/vuetify/issues/20700)) ([5231b95](https://github.com/vuetifyjs/vuetify/commit/5231b956c39477e913648dcbaef4030c284b1ece)), closes [#20636](https://github.com/vuetifyjs/vuetify/issues/20636)\n* **VBadge:** add width and height props ([#21509](https://github.com/vuetifyjs/vuetify/issues/21509)) ([b87f179](https://github.com/vuetifyjs/vuetify/commit/b87f17933b31cf63289ffccdd78eda3682decc07)), closes [#20837](https://github.com/vuetifyjs/vuetify/issues/20837)\n* **VBtnGroup:** add `direction=\"vertical\"` ([#17878](https://github.com/vuetifyjs/vuetify/issues/17878)) ([5f39b85](https://github.com/vuetifyjs/vuetify/commit/5f39b8586e99c4529da9ef71576c048e711757e8)), closes [#17492](https://github.com/vuetifyjs/vuetify/issues/17492)\n* **VCombobox:** scroll to first item on search result ([#21255](https://github.com/vuetifyjs/vuetify/issues/21255)) ([57bb5ad](https://github.com/vuetifyjs/vuetify/commit/57bb5adb426372ca6af48b961a5b3533efa7d703)), closes [#20572](https://github.com/vuetifyjs/vuetify/issues/#20572)\n* **VDataTable:** support `fixed: 'end'` in headers ([#21665](https://github.com/vuetifyjs/vuetify/issues/21665)) ([415c267](https://github.com/vuetifyjs/vuetify/commit/415c267d057ad49334d9801c4fdb0c6aa9dcdcd1)), closes [#20020](https://github.com/vuetifyjs/vuetify/issues/20020) [#21153](https://github.com/vuetifyjs/vuetify/issues/21153)\n* **VDatePicker:** add `weekday-format` prop ([#21290](https://github.com/vuetifyjs/vuetify/issues/21290)) ([b13b15c](https://github.com/vuetifyjs/vuetify/commit/b13b15c865252f43f09ef590feeaeaac6a49bc1b))\n* **VDatePicker:** expose slots from underlying components ([#21532](https://github.com/vuetifyjs/vuetify/issues/21532)) ([1e351a2](https://github.com/vuetifyjs/vuetify/commit/1e351a2015db61564c3432662e4fc7700dff3a84)), closes [#20236](https://github.com/vuetifyjs/vuetify/issues/20236)\n* **VInfiniteScroll:** add reset method ([#20637](https://github.com/vuetifyjs/vuetify/issues/20637)) ([2e5bc43](https://github.com/vuetifyjs/vuetify/commit/2e5bc4330bf7409870516b818dcdd8bb0f36d0d5)), closes [#20308](https://github.com/vuetifyjs/vuetify/issues/20308) [#19935](https://github.com/vuetifyjs/vuetify/issues/19935)\n* **VKbd:** update default styling, add configurable options ([8ea20d9](https://github.com/vuetifyjs/vuetify/commit/8ea20d9fccaca572465d31af780f460d03f489db))\n* **VNumberInput:** custom decimal separator ([#21489](https://github.com/vuetifyjs/vuetify/issues/21489)) ([534c1e7](https://github.com/vuetifyjs/vuetify/commit/534c1e72363dadfee213f0360272c29d308b28af)), closes [#20254](https://github.com/vuetifyjs/vuetify/issues/20254)\n* **VNumberInput:** more flexible precision display ([#21315](https://github.com/vuetifyjs/vuetify/issues/21315)) ([d5779cd](https://github.com/vuetifyjs/vuetify/commit/d5779cd8529c6589d215569453733700b095ffe9)), closes [#21306](https://github.com/vuetifyjs/vuetify/issues/21306)\n* **VOtpInput:** allow to keep focus on paste ([#21356](https://github.com/vuetifyjs/vuetify/issues/21356)) ([cb8015d](https://github.com/vuetifyjs/vuetify/commit/cb8015daad38b7d9c6853e1053d78ab148574804)), closes [#21275](https://github.com/vuetifyjs/vuetify/issues/21275)\n* **VOverlay:** align scrim color with MD3 ([#21219](https://github.com/vuetifyjs/vuetify/issues/21219)) ([29d22a6](https://github.com/vuetifyjs/vuetify/commit/29d22a6737fa7e68bdd49c522a5b36dca3cabe11)), closes [#20244](https://github.com/vuetifyjs/vuetify/issues/20244)\n* **VSelect/VAutoComplete/VCombobox:** add `item-type` prop ([eaa4d15](https://github.com/vuetifyjs/vuetify/commit/eaa4d15caac1b66868a6af42e52b22cf2279821b)), closes [#21666](https://github.com/vuetifyjs/vuetify/issues/21666)\n* **VSelect:** add `no-auto-scroll` prop ([#21254](https://github.com/vuetifyjs/vuetify/issues/21254)) ([1e0f1c1](https://github.com/vuetifyjs/vuetify/commit/1e0f1c1a527deb5256844e4663d6931840736968)), closes [#20237](https://github.com/vuetifyjs/vuetify/issues/20237)\n* **VSelect:** support divider and subheader in items ([#21348](https://github.com/vuetifyjs/vuetify/issues/21348)) ([0953ed2](https://github.com/vuetifyjs/vuetify/commit/0953ed22c81c1c8d51505a2e35e222af1880698a)), closes [#5014](https://github.com/vuetifyjs/vuetify/issues/5014) [#15721](https://github.com/vuetifyjs/vuetify/issues/15721)\n* **VSlideGroup:** add content class to VSlideGroup props ([#21431](https://github.com/vuetifyjs/vuetify/issues/21431)) ([935351c](https://github.com/vuetifyjs/vuetify/commit/935351cc0e80c2327701a071eeeff15f1a128310)), , closes [#20853](https://github.com/vuetifyjs/vuetify/issues/20853)\n* **VSlider:** expose focus method ([#21575](https://github.com/vuetifyjs/vuetify/issues/21575)) ([6790e1e](https://github.com/vuetifyjs/vuetify/commit/6790e1ebfa820506f92a68f4c9055a2a36413b4b)), closes [#17602](https://github.com/vuetifyjs/vuetify/issues/17602)\n* **VTable:** add striped prop ([#19735](https://github.com/vuetifyjs/vuetify/issues/19735)) ([35b3304](https://github.com/vuetifyjs/vuetify/commit/35b3304a18bdb39df3431b71eef52cdef11130c9)), closes [#17505](https://github.com/vuetifyjs/vuetify/issues/17505)\n* **VTextarea:** add update:rows event ([#21226](https://github.com/vuetifyjs/vuetify/issues/21226)) ([e72d4d3](https://github.com/vuetifyjs/vuetify/commit/e72d4d30088ef47d5abf2e4533cc62c8ee91f823)), closes [#21133](https://github.com/vuetifyjs/vuetify/issues/21133)\n* **VTimePicker:** promote from labs ([7ce2cd6](https://github.com/vuetifyjs/vuetify/commit/7ce2cd68cb40d8de9c2135bdf33c9be9140d22c3))\n* **VTimePicker:** remove ampmInTitle prop ([#21595](https://github.com/vuetifyjs/vuetify/issues/21595)) ([e32796a](https://github.com/vuetifyjs/vuetify/commit/e32796a114711f2b30d3401abea11bfd8b8c2460)), closes [#19637](https://github.com/vuetifyjs/vuetify/issues/19637) [#19957](https://github.com/vuetifyjs/vuetify/issues/19957)\n* **VToolbar:** allow for explicit `:extension=\"false\"` ([#21264](https://github.com/vuetifyjs/vuetify/issues/21264)) ([092e64a](https://github.com/vuetifyjs/vuetify/commit/092e64a10aa6e1b476e0e7fddaf01d1bb1df3793)), closes [#7317](https://github.com/vuetifyjs/vuetify/issues/7317)\n* **VTreeview:** add `indent-lines` prop ([#21675](https://github.com/vuetifyjs/vuetify/issues/21675)) ([501e016](https://github.com/vuetifyjs/vuetify/commit/501e01641f226b54d80176c9e5a20baa4dd7df43)), closes [#11506](https://github.com/vuetifyjs/vuetify/issues/11506)\n* **VTreeview:** expose depth, path, index in slots ([#19833](https://github.com/vuetifyjs/vuetify/issues/19833)) ([bd908af](https://github.com/vuetifyjs/vuetify/commit/bd908afc7e335904c2fb35aa73541d8c04a9fcfb)), closes [#13863](https://github.com/vuetifyjs/vuetify/issues/13863)\n* **VTreeview:** promote from labs ([b610813](https://github.com/vuetifyjs/vuetify/commit/b6108138fdbfb2cc157a29602817708676a23491))\n* **VTreeview:** support `item-type` ([#21709](https://github.com/vuetifyjs/vuetify/issues/21709)) ([877f323](https://github.com/vuetifyjs/vuetify/commit/877f3232698147dee01effc57b2a9770d2ed0e39))\n* **VVirtualScroll:** support fractional scroll index ([#20407](https://github.com/vuetifyjs/vuetify/issues/20407)) ([adad9e2](https://github.com/vuetifyjs/vuetify/commit/adad9e2629fffa52b0abbb7d18297a5c0078074f))\n* **VWindow:** add `vertical-arrows` prop ([#21587](https://github.com/vuetifyjs/vuetify/issues/21587)) ([663b9a8](https://github.com/vuetifyjs/vuetify/commit/663b9a83ee602200adae115500594d462ddfff16))\n\n### :wrench: Bug Fixes\n\n* **date:** align `fullDate` format with documentation and other adapters ([#21668](https://github.com/vuetifyjs/vuetify/issues/21668)) ([c856da3](https://github.com/vuetifyjs/vuetify/commit/c856da3c4d5b0ac6a8c2ac5f8312debc3009fae4)), closes [#21667](https://github.com/vuetifyjs/vuetify/issues/21667)\n* **input:** handle aria-describedby with hide-details ([#21703](https://github.com/vuetifyjs/vuetify/issues/21703)) ([543f932](https://github.com/vuetifyjs/vuetify/commit/543f932622f1de44a215c71fbe8d52af3edea1bd)), closes [#17012](https://github.com/vuetifyjs/vuetify/issues/17012) [#19794](https://github.com/vuetifyjs/vuetify/issues/19794)\n* **inputs:** expose missing validation methods ([be64296](https://github.com/vuetifyjs/vuetify/commit/be6429615af6e0e9e0aad7ef21bfe7a1403229ec)), closes [#19934](https://github.com/vuetifyjs/vuetify/issues/19934)\n* **theme:** ability to restore \"system\" ([#21821](https://github.com/vuetifyjs/vuetify/issues/21821)) ([45077be](https://github.com/vuetifyjs/vuetify/commit/45077be13c220a4abeac161d16f5f406d7e1fb2e)), closes [#21819](https://github.com/vuetifyjs/vuetify/issues/21819)\n* **types:** don't use primitive object wrappers ([32007ed](https://github.com/vuetifyjs/vuetify/commit/32007ed2d34f9a131eb73faeb7629c0ff515f7b2))\n* **virtual:** skip items update if height has not been checked ([#21442](https://github.com/vuetifyjs/vuetify/issues/21442)) ([2e55ed3](https://github.com/vuetifyjs/vuetify/commit/2e55ed3d30daf6ea19660fb8168ea45fca0e9b1d)), closes [#18806](https://github.com/vuetifyjs/vuetify/issues/18806)\n* **VAutocomplete, VCombobox:** space key should not select ([#21311](https://github.com/vuetifyjs/vuetify/issues/21311)) ([f9288ad](https://github.com/vuetifyjs/vuetify/commit/f9288ad7dbfb3547d36e036932e653270eb9ff08)), closes [#20728](https://github.com/vuetifyjs/vuetify/issues/20728)\n* **VChipGroup:** don't select items with a value by index ([#21742](https://github.com/vuetifyjs/vuetify/issues/21742)) ([72cd412](https://github.com/vuetifyjs/vuetify/commit/72cd412ac7a794cc7fbb18918928c4e819827449)), closes [#20129](https://github.com/vuetifyjs/vuetify/issues/20129)\n* **VColorPicker:** keep sliders visible when inputs are hidden ([#21803](https://github.com/vuetifyjs/vuetify/issues/21803)) ([215bfd8](https://github.com/vuetifyjs/vuetify/commit/215bfd866e8c6f606620d8f88c8b1fd4dfe7ab15)), closes [#21801](https://github.com/vuetifyjs/vuetify/issues/21801)\n* **VCombobox:** select all values from pasted text ([#21840](https://github.com/vuetifyjs/vuetify/issues/21840)) ([408a95d](https://github.com/vuetifyjs/vuetify/commit/408a95d7b4c39649546f8098af7a6afd663f777c)), closes [#21838](https://github.com/vuetifyjs/vuetify/issues/21838)\n* **VDataTable:** continue sorting if dates are identical ([a9d0c56](https://github.com/vuetifyjs/vuetify/commit/a9d0c560d77392c803fd0c27b4748b82591dd0e0)), closes [#21650](https://github.com/vuetifyjs/vuetify/issues/21650)\n* **VDataTable:** don't pass slots to VSelect in mobile view ([#21572](https://github.com/vuetifyjs/vuetify/issues/21572)) ([6e61468](https://github.com/vuetifyjs/vuetify/commit/6e6146814462ec56a40bd439b6641630f6e057a3)), closes [#19873](https://github.com/vuetifyjs/vuetify/issues/19873)\n* **VDataTable:** only tab focus sortable columns ([27aaaf4](https://github.com/vuetifyjs/vuetify/commit/27aaaf41246aaaf3bed977c74d0b962daf0a5662)), closes [#20899](https://github.com/vuetifyjs/vuetify/issues/20899)\n* **VDatePicker:** add aria-labels for improved accessibility ([#21635](https://github.com/vuetifyjs/vuetify/issues/21635)) ([5e3fc2b](https://github.com/vuetifyjs/vuetify/commit/5e3fc2b4baf9df2939bdaca84cec28f3bf41633b)), closes [#20696](https://github.com/vuetifyjs/vuetify/issues/20696)\n* **VDatePicker:** avoid infinite loop when first day is out of range ([#21649](https://github.com/vuetifyjs/vuetify/issues/21649)) ([a330d75](https://github.com/vuetifyjs/vuetify/commit/a330d75ef091046c96aae3451bed5f29a66b5d3b))\n* **VDatePicker:** correct week labels ([#21648](https://github.com/vuetifyjs/vuetify/issues/21648)) ([b46e60c](https://github.com/vuetifyjs/vuetify/commit/b46e60c5eba21438c4ecd412ec99f67ebbb24dac)), closes [#21645](https://github.com/vuetifyjs/vuetify/issues/21645) [#21332](https://github.com/vuetifyjs/vuetify/issues/21332)\n* **VDatePicker:** format month to always have 2 digits ([#21686](https://github.com/vuetifyjs/vuetify/issues/21686)) ([f529212](https://github.com/vuetifyjs/vuetify/commit/f529212faffbde85299023b1eb0f4fa344e87df7)), closes [#21681](https://github.com/vuetifyjs/vuetify/issues/21681)\n* **VDatePicker:** improved date comparison with `min` constraint ([#21398](https://github.com/vuetifyjs/vuetify/issues/21398)) ([421a6f6](https://github.com/vuetifyjs/vuetify/commit/421a6f68557e617e0e24b9e525a4cebd841c4f2c)), closes [#21380](https://github.com/vuetifyjs/vuetify/issues/21380)\n* **VDatePicker:** round font-size from 13.6 to 14px ([#21590](https://github.com/vuetifyjs/vuetify/issues/21590)) ([d81a4a0](https://github.com/vuetifyjs/vuetify/commit/d81a4a0cf81353c96f6c5557d8c9be77df7a5836))\n* **VField:** fix label accessibility ([#21706](https://github.com/vuetifyjs/vuetify/issues/21706)) ([85abd80](https://github.com/vuetifyjs/vuetify/commit/85abd8078a2cba159b1cc3caa323519b3b29dec6))\n* **VFileInput:** avoid text overflow with long file names ([#21748](https://github.com/vuetifyjs/vuetify/issues/21748)) ([389a260](https://github.com/vuetifyjs/vuetify/commit/389a260a334d2b9fa1cd717d04904c0b60abe755)), closes [#21707](https://github.com/vuetifyjs/vuetify/issues/21707)\n* **VFileUploadItem:** accept `title` slot ([#21769](https://github.com/vuetifyjs/vuetify/issues/21769)) ([fe85aa0](https://github.com/vuetifyjs/vuetify/commit/fe85aa0ecb4efa17f499beccea27710ad3bea164))\n* **VFileUploadItem:** apply classes, styles as props ([#21752](https://github.com/vuetifyjs/vuetify/issues/21752)) ([d6050f0](https://github.com/vuetifyjs/vuetify/commit/d6050f051ac36cadef5cb6ae1e8995875d2b4bfe)), closes [#21740](https://github.com/vuetifyjs/vuetify/issues/21740)\n* **VList:** ignore invalid itemType values ([4bae0bc](https://github.com/vuetifyjs/vuetify/commit/4bae0bcfba724d90eafda96801ed597558e30885)), closes [#21728](https://github.com/vuetifyjs/vuetify/issues/21728)\n* **VList:** merge classes from itemProps ([5423fbf](https://github.com/vuetifyjs/vuetify/commit/5423fbf18ca6d27ac560529cdd20310aee6d2d32))\n* **VListItem:** keyboard navigation when list contains checkboxes ([#21701](https://github.com/vuetifyjs/vuetify/issues/21701)) ([f500c5b](https://github.com/vuetifyjs/vuetify/commit/f500c5bad5d0da31d8ebec0447cd4b68f91bcbbd)), closes [#21516](https://github.com/vuetifyjs/vuetify/issues/21516)\n* **VMenu:** let persistent menus coexist with regular ones ([#21449](https://github.com/vuetifyjs/vuetify/issues/21449)) ([30ac0fc](https://github.com/vuetifyjs/vuetify/commit/30ac0fcdd491d0eba970d383023d183aafcef491)), closes [#20976](https://github.com/vuetifyjs/vuetify/issues/20976)\n* **VNumberInput:** keep cursor position when typing decimal values ([acc30fb](https://github.com/vuetifyjs/vuetify/commit/acc30fbfa5cd8295f341c545bd4adc5629b14bd6))\n* **VNumberInput:** only trim zeros from the end ([ab2d941](https://github.com/vuetifyjs/vuetify/commit/ab2d941c02a2b5f0c976269c277471a808f251ca)), closes [#21828](https://github.com/vuetifyjs/vuetify/issues/21828)\n* **VOtpInput:** only autofocus if autofocus prop is set ([79bcb27](https://github.com/vuetifyjs/vuetify/commit/79bcb27d8b6006ac9e50787b8e771f46b402e315))\n* **VOverlay:** properly detect location flipping loop ([07db6b2](https://github.com/vuetifyjs/vuetify/commit/07db6b2fdda106325fff514f603b861ae788fee4)), closes [#21564](https://github.com/vuetifyjs/vuetify/issues/21564) [#21551](https://github.com/vuetifyjs/vuetify/issues/21551)\n* **VOverlay:** trigger scrollStrategy when target is a point ([1146171](https://github.com/vuetifyjs/vuetify/commit/114617141a73271f07c108b91829186f3ec36291))\n* **VProgressLinear:** accept pointer events unless `clickable` is used ([#21691](https://github.com/vuetifyjs/vuetify/issues/21691)) ([a6b1136](https://github.com/vuetifyjs/vuetify/commit/a6b1136243f70bf868c438f8d9e6be9b18a492e3)), closes [#21690](https://github.com/vuetifyjs/vuetify/issues/21690)\n* **VRipple:** support touch simulators ([#20776](https://github.com/vuetifyjs/vuetify/issues/20776)) ([9fa2870](https://github.com/vuetifyjs/vuetify/commit/9fa2870eeaf073489f3de790defe3e94a3746788))\n* **VSelect:** don't open menu on its own when items change ([#21247](https://github.com/vuetifyjs/vuetify/issues/21247)) ([339bd45](https://github.com/vuetifyjs/vuetify/commit/339bd45a1fd75b8d51dafcc1d0b270f07c985ee0)), closes [#21205](https://github.com/vuetifyjs/vuetify/issues/21205)\n* **VSelectionControl:** correctly pass ripple options to directive ([#21713](https://github.com/vuetifyjs/vuetify/issues/21713)) ([87a8a3e](https://github.com/vuetifyjs/vuetify/commit/87a8a3ef0edb14d43179442c1727cf5b3d86edab)), closes [#21208](https://github.com/vuetifyjs/vuetify/issues/21208)\n* **VSelects:** avoid error with `null` items ([#21660](https://github.com/vuetifyjs/vuetify/issues/21660)) ([dd98067](https://github.com/vuetifyjs/vuetify/commit/dd98067d8fb2ac46c5cd7f23d630777b61129797))\n* **VSlider:** correctly apply `thumb-color` ([#21833](https://github.com/vuetifyjs/vuetify/issues/21833)) ([b207522](https://github.com/vuetifyjs/vuetify/commit/b207522f5767f11edf56d4c4f0fad0b8dd8fcbb7)), closes [#21832](https://github.com/vuetifyjs/vuetify/issues/21832)\n* **VTextField:** avoid infinite focus loop ([#21628](https://github.com/vuetifyjs/vuetify/issues/21628)) ([efaaa5d](https://github.com/vuetifyjs/vuetify/commit/efaaa5d4f02e886b3e0c46e1f9dd9eed1cdf2e88)), closes [#21626](https://github.com/vuetifyjs/vuetify/issues/21626)\n* **VTextField:** don't try to re-focus input on focus ([#21722](https://github.com/vuetifyjs/vuetify/issues/21722)) ([14c88df](https://github.com/vuetifyjs/vuetify/commit/14c88df44eff939e176f8c01cc4350d2be0d81c5)), closes [#21716](https://github.com/vuetifyjs/vuetify/issues/21716) [#21626](https://github.com/vuetifyjs/vuetify/issues/21626) [#21717](https://github.com/vuetifyjs/vuetify/issues/21717)\n* **VTimePicker:** auto width ([#21613](https://github.com/vuetifyjs/vuetify/issues/21613)) ([5d1ceab](https://github.com/vuetifyjs/vuetify/commit/5d1ceab3e519974cdde29f7e7610ffb5972ac6a7))\n* **VTreeview:** activatable implies openOnClick=false ([c0b7d7b](https://github.com/vuetifyjs/vuetify/commit/c0b7d7b518727f8d43e4463dd3e69edfa4c43d73))\n* **VTreeview:** don't display expanded items as activated ([683dc86](https://github.com/vuetifyjs/vuetify/commit/683dc863d1e8736ac8bda93f58f2b8cc8fa819b4)), closes [#21721](https://github.com/vuetifyjs/vuetify/issues/21721) [#21724](https://github.com/vuetifyjs/vuetify/issues/21724)\n* **VTreeview:** don't select disabled children with parent ([#20962](https://github.com/vuetifyjs/vuetify/issues/20962)) ([0772bc1](https://github.com/vuetifyjs/vuetify/commit/0772bc11c10cd55ca1dd186a64819337b38bc3fd)), closes [#20386](https://github.com/vuetifyjs/vuetify/issues/20386)\n* **VTreeview:** hide extended lines when fluid ([#21798](https://github.com/vuetifyjs/vuetify/issues/21798)) ([5728b2b](https://github.com/vuetifyjs/vuetify/commit/5728b2b2fc9a1e608bb395cc077f5640261a57ea)), closes [#21794](https://github.com/vuetifyjs/vuetify/issues/21794)\n* **VTreeview:** modelValue reactivity ([6daf53d](https://github.com/vuetifyjs/vuetify/commit/6daf53ddbd7f66155f1e1cce870968153fc2b1df))\n* **VTreeview:** prevent checkbox deselection when mandatory ([431af5f](https://github.com/vuetifyjs/vuetify/commit/431af5fa7df28d98d7bb76f88a1803ec98a62719)), closes [#21614](https://github.com/vuetifyjs/vuetify/issues/21614)\n* **VTreeview:** restore reactivity with computed items ([107dd0c](https://github.com/vuetifyjs/vuetify/commit/107dd0c6822a5f029e302627f040a43a82bebb58)), closes [#20900](https://github.com/vuetifyjs/vuetify/issues/20900)\n* **VTreeview:** select trunk nodes on click when openOnClick=false ([e6a1710](https://github.com/vuetifyjs/vuetify/commit/e6a1710296ea0cb67d6877a9c587766b5565f90d)), closes [#21599](https://github.com/vuetifyjs/vuetify/issues/21599)\n* **VTreeview:** set active state from router ([#21644](https://github.com/vuetifyjs/vuetify/issues/21644)) ([01c7a4f](https://github.com/vuetifyjs/vuetify/commit/01c7a4f8a0af4b62eda99bcd7eac56ef452e22d8))\n\n### :microscope: Code Refactoring\n\n* **layout:** consoleWarn instead of error for missing layout items ([34b53f1](https://github.com/vuetifyjs/vuetify/commit/34b53f10b5ae1b218721b32d51c757adecf343f7))\n* **theme:** add internal methods for testing tailwind integration ([abfdb77](https://github.com/vuetifyjs/vuetify/commit/abfdb777e0e00d4a1798f52d7e4c118e7409fcb9))\n\n### :test_tube: Labs\n\n* **VCalendar:** slot day-event not available ([#21558](https://github.com/vuetifyjs/vuetify/issues/21558)) ([d743051](https://github.com/vuetifyjs/vuetify/commit/d743051c3fc2ba99c77b49e2fa99f9925af50eb6)), closes [#21341](https://github.com/vuetifyjs/vuetify/issues/21341)\n* **VCalendar:** use adapter for day element key ([#21689](https://github.com/vuetifyjs/vuetify/issues/21689)) ([428f460](https://github.com/vuetifyjs/vuetify/commit/428f4602b54b6ecbfcc37cd2edf61703ae49712e)), closes [#21688](https://github.com/vuetifyjs/vuetify/issues/21688)\n* **VColorInput:** ensure cancel action closes menu ([#21664](https://github.com/vuetifyjs/vuetify/issues/21664)) ([7822179](https://github.com/vuetifyjs/vuetify/commit/7822179df9d61dec98179ddcb70346d949305412)), closes [#21655](https://github.com/vuetifyjs/vuetify/issues/21655)\n* **VDateInput:** align generic model type with VDatePicker ([#21764](https://github.com/vuetifyjs/vuetify/issues/21764)) ([0cfca46](https://github.com/vuetifyjs/vuetify/commit/0cfca46b2da04c9b98e7a56788f9e648f31b6c3e)), closes [#21751](https://github.com/vuetifyjs/vuetify/issues/21751) [#21753](https://github.com/vuetifyjs/vuetify/issues/21753)\n* **VDateInput:** assign type to displayFormat function ([#21684](https://github.com/vuetifyjs/vuetify/issues/21684)) ([4446ebf](https://github.com/vuetifyjs/vuetify/commit/4446ebff30e96f1d7629bafa0c8b8bad8f473307)), closes [#21683](https://github.com/vuetifyjs/vuetify/issues/21683)\n* **VDateInput:** avoid time values in the field ([#21694](https://github.com/vuetifyjs/vuetify/issues/21694)) ([d4efd48](https://github.com/vuetifyjs/vuetify/commit/d4efd487d384f94a263d2af9b8abc5dbb8381134))\n* **VHotkey:** add new component ([#21598](https://github.com/vuetifyjs/vuetify/issues/21598)) ([99c721c](https://github.com/vuetifyjs/vuetify/commit/99c721c381e47b403429c7de194306013c0ec679))\n* **VIconBtn:** add button type ([#21638](https://github.com/vuetifyjs/vuetify/issues/21638)) ([dd1db74](https://github.com/vuetifyjs/vuetify/commit/dd1db749edd8df351727c01eeca67a1bb7fb8fb6)), closes [#21634](https://github.com/vuetifyjs/vuetify/issues/21634)\n* **VMaskInput:** create new component ([#21519](https://github.com/vuetifyjs/vuetify/issues/21519)) ([117443a](https://github.com/vuetifyjs/vuetify/commit/117443afbe676d5d31ab20b4a549cb7405994493))\n* **VMaskInput:** send unmasked value to rules ([#21719](https://github.com/vuetifyjs/vuetify/issues/21719)) ([64943b3](https://github.com/vuetifyjs/vuetify/commit/64943b30c4a84ddfaa565f9b2d62285450aa128b))\n* **VPie:** create new component ([#21176](https://github.com/vuetifyjs/vuetify/issues/21176)) ([5f0ebca](https://github.com/vuetifyjs/vuetify/commit/5f0ebca99b830f2cdce234b5f45529a1553c66ef))\n* **VStepperVertical:** correct avatar alignment ([#21797](https://github.com/vuetifyjs/vuetify/issues/21797)) ([6292149](https://github.com/vuetifyjs/vuetify/commit/6292149811091210af7005bbaf7de37aea66b69a)), closes [#21792](https://github.com/vuetifyjs/vuetify/issues/21792)\n* **VStepperVertical:** fix next/prev-text props ([#21360](https://github.com/vuetifyjs/vuetify/issues/21360)) ([11986c6](https://github.com/vuetifyjs/vuetify/commit/11986c6e2ac351c38194cd3a8c74f6e03f58e3cf)), closes [#21358](https://github.com/vuetifyjs/vuetify/issues/21358)\n* **VVideo:** create new component ([#21460](https://github.com/vuetifyjs/vuetify/issues/21460)) ([936eba2](https://github.com/vuetifyjs/vuetify/commit/936eba2ef278137d650b00acf0425116ec8237eb)), closes [#5592](https://github.com/vuetifyjs/vuetify/issues/5592)\n\n
\n\n---\n\n## What's Next { #whats-next }\n\nNext month promises to be an exciting one as we continue building momentum from July's achievements. Here's what's on the horizon:\n\n### Community Roadmap Voting\n\nOver 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.\n\n### Vuetify0 Alpha Release\n\nWe're targeting **late August** for the first alpha release of Vuetify0. This milestone will include:\n\n* Core composable abstractions\n* Initial documentation and examples\n\n### Labs Component Stabilization\n\nAugust is dedicated to refining our Labs components based on community feedback:\n\n* **VCommandPalette**: Finalizing keyboard navigation patterns\n* **VEditor**: Completing table and list formatting features\n* **VCalendar**: Addressing performance optimizations and accessibility improvements\n* **VMaskInput**: Expanding validation integration\n\nThank you for your continued support, feedback, and contributions that make all of this possible! See you next month.\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/eXubxyJ), and upcoming webinar series announcements.*\n","frontmatter":{"layout":"blog","meta":{"title":"July 2025 Update","description":"July delivered progress on collaborative development, component enhancements, developer-experience improvements, and ecosystem tools across Vuetify.","keywords":"Vuetify July 2025, Vuetify Migrations Webinar, Vuetify0, VCommandPalette, VEditor, Framework Czar, Vuetify Bin"}},"isInternal":false,"tokens":12604,"sizeBytes":40357},{"name":"july-2026-update.md","path":"packages/docs/src/pages/en/blog/july-2026-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/july-2026-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: July 2026 Update\n description: July closed the Vuetify 3 line with v3.13.0 entering long-term support, shipped Vuetify0 1.0, and kept the v4.1 patch cadence running with five releases\n keywords: Vuetify July 2026, Vuetify 3.13 LTS, Vuetify0 1.0, Vuetify 4.1, Vuetify CLI, pkg-diff\n---\n\n\n\n# July 2026 Update\n\nWelcome to the July 2026 Vuetify update! This month closes out two long-running efforts at once — **Vuetify0 1.0** shipped stable on July 22 after 214 merged pull requests, and **v3.13.0** landed five days later as the final Vuetify 3 minor, moving the v3 line into [long-term support](/introduction/long-term-support/) through July 27th, 2027. Underneath both, the v4.1 patch line kept its weekly cadence with five releases.\n\n![Hero image for July update](https://cdn.vuetifyjs.com/docs/images/blog/july-2026-update/july-hero.png \"July hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 August 11th, 2026\n\n\n\n---\n\n## Stable ground\n\n**386 commits** across 11 active repositories and **264 merged PRs**, with two releases doing most of the work. v3.13.0 is the last minor Vuetify 3 will get — from here the line takes critical bug fixes and security patches only, for twelve months. Vuetify0 1.0 gives the framework's logic layer a semver-locked surface for the first time, which is what the theme, locale, and date migrations have been waiting on.\n\nThe numbers lean hard toward v0: 214 of the month's merged PRs landed in [vuetifyjs/0](https://github.com/vuetifyjs/0), where our team spent the month hardening the surface ahead of the release rather than adding to it. The framework side was quieter — 34 merged PRs, no labs promotions, no new components — but shipped nine releases across the v4 and v3 lines, and the accessibility pass across v0 accounted for a large share of the rest. We're grateful to everyone in the community who filed a fix this month.\n\n| Metric | Count |\n|-------------------------|---------------------------------------------------|\n| Total Commits | 386 |\n| Total PRs Merged | 264 |\n| Active Repositories | 11 |\n| Vuetify Releases | 9 (v4.1.3 → v4.1.7, v3.12.9 → v3.13.0) |\n| Components Promoted | 0 (framework) · 13 (Vuetify0 stable spine) |\n| Vuetify0 Releases | 11 tags, including **v1.0.0** |\n\nCounts cover July 1–31, 2026 (America/Chicago), by commit date and merge date. Cherry-picks and back-ports between the `master`, `dev`, and `v3-stable` branches are counted once, not once per branch.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Vuetify 3 Enters LTS](#vuetify-3-lts)\n* [Vuetify0 1.0](#vuetify0-1-0)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Tooling Updates](#ecosystem-tooling)\n* [July 2026 Changelog](#july-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\n**Nine framework releases** shipped in July across two lines. The v4 line ran weekly patches — [v4.1.3](/getting-started/release-notes/?version=v4.1.3) (July 2), [v4.1.4](/getting-started/release-notes/?version=v4.1.4) (July 7), [v4.1.5](/getting-started/release-notes/?version=v4.1.5) (July 13), [v4.1.6](/getting-started/release-notes/?version=v4.1.6) (July 23), and [v4.1.7](/getting-started/release-notes/?version=v4.1.7) (July 30), The v3 line took three patches and then [v3.13.0](/getting-started/release-notes/?version=v3.13.0) on July 27.\n\n\n\n### Key Improvements\n\n* **[Vuetify 3.13](/getting-started/release-notes/?version=v3.13.0)** — the final v3 minor; the line now sits in [LTS](/introduction/long-term-support/) until July 27th, 2027\n* **[VSelect / VAutocomplete / VCombobox](/components/selects/)** — new events for multi-selection in v3.13.0, plus a run of focus and native-form-submission fixes ([#23038](https://github.com/vuetifyjs/vuetify/pull/23038), [#23022](https://github.com/vuetifyjs/vuetify/pull/23022), [#23029](https://github.com/vuetifyjs/vuetify/pull/23029))\n* **[VSkeletonLoader](/components/skeleton-loaders/)** — a new `types` prop, a `chip-group` type, and `table-cell` reintroduced ([#23037](https://github.com/vuetifyjs/vuetify/pull/23037))\n* **[VBtnGroup](/components/button-groups/)** — a `size` prop matching standalone buttons ([`eada595`](https://github.com/vuetifyjs/vuetify/commit/eada595))\n* **Shadow DOM** — keyboard navigation and focus resolution work inside an open shadow root ([#23024](https://github.com/vuetifyjs/vuetify/pull/23024), [#23027](https://github.com/vuetifyjs/vuetify/pull/23027))\n* **Defaults** — nested root defaults survive a teleport reset, and parent config no longer leaks into menu and dialog content ([#23015](https://github.com/vuetifyjs/vuetify/pull/23015), [#23016](https://github.com/vuetifyjs/vuetify/pull/23016))\n\nView the complete list of changes in the [Full Changelog](#july-2026-changelog).\n\n**Details:**\n\n* [v4.1.7](/getting-started/release-notes/?version=v4.1.7) · [v4.1.6](/getting-started/release-notes/?version=v4.1.6) · [v4.1.5](/getting-started/release-notes/?version=v4.1.5) · [v4.1.4](/getting-started/release-notes/?version=v4.1.4) · [v4.1.3](/getting-started/release-notes/?version=v4.1.3)\n* [v3.13.0](/getting-started/release-notes/?version=v3.13.0) · [v3.12.11](/getting-started/release-notes/?version=v3.12.11) · [v3.12.10](/getting-started/release-notes/?version=v3.12.10) · [v3.12.9](/getting-started/release-notes/?version=v3.12.9)\n\n---\n\n## Vuetify 3 Enters LTS { #vuetify-3-lts }\n\n\n\n
\n\nVuetify 3 shipped on November 1st, 2022. Nearly four years and thirteen minors later, **[v3.13.0](/getting-started/release-notes/?version=v3.13.0) is the last one**. As of July 27th, 2026 the v3 line is in [long-term support](/introduction/long-term-support/) and will receive critical bug fixes and security patches — and nothing else — until **July 27th, 2027**.\n\n**The LTS window is twelve months, not eighteen.** The previous policy gave the outgoing major 18 months. That is now 12, and the [long-term support page](/introduction/long-term-support/) and [release cycle](/introduction/why-vuetify/) docs have been updated to match. Check your migration plan against the new number.\n\n**v3.13.0 also carries features.** It is the only place July's four new ones shipped — on the v4 line the same commits sit on `dev`, queued for [v4.2.0](https://github.com/vuetifyjs/vuetify/milestone/90) in September. They arrive alongside accessibility work back-ported from May:\n\n* **[VSelect / VAutocomplete / VCombobox](/components/selects/)** — new events for multi-selection ([#23038](https://github.com/vuetifyjs/vuetify/pull/23038))\n* **[VDataTable](/components/data-tables/basics/)** — a community-contributed `mobile.header` slot ([#21429](https://github.com/vuetifyjs/vuetify/pull/21429)), plus `aria-sort` on sortable headers and `aria-label`s on selection controls\n* **[VSkeletonLoader](/components/skeleton-loaders/)** — the `types` prop, `chip-group`, and `table-cell`\n* **[VBtnGroup](/components/button-groups/)** — the `size` prop\n\nThe v3 documentation stays at [v3.vuetifyjs.com](https://v3.vuetifyjs.com/), and the docs site trimmed its outdated cross-version content in the process ([`e3fb29d`](https://github.com/vuetifyjs/vuetify/commit/e3fb29d)). If you are still on v3, start with the [upgrade guide](/getting-started/upgrade-guide/). You have a year.\n\n**Details:**\n\n* [Long-term support](/introduction/long-term-support/)\n* [Roadmap](/introduction/roadmap/)\n* [v3.13.0 Release Notes](/getting-started/release-notes/?version=v3.13.0)\n\n---\n\n## Vuetify0 1.0 { #vuetify0-1-0 }\n\n\n\n
\n\n[Vuetify0 shipped 1.0](/blog/announcing-vuetify0-v1/) on **July 22nd**. The package is now plain `@vuetify/v0` — no `beta`, no `rc`, no tag required. The announcement post has the full surface; this is how July got there.\n\n\n\nThe month opened with the release candidate. [v1.0.0-rc.6](https://github.com/vuetifyjs/0/releases) landed July 2 alongside the promotion of **ten composables from preview to stable** — `createModel`, `createSelection`, `createSingle`, `createStep`, `createGroup`, `createNested`, `createRegistry`, `useTheme`, `useStorage`, and `useBreakpoints` ([#470](https://github.com/vuetifyjs/0/pull/470)). Three more RCs followed, and on July 20 the **1.0 component spine** — thirteen components: `Atom`, `AspectRatio`, `Theme`, `Group`, `Selection`, `Single`, `Step`, `Tabs`, `Toggle`, `Collapsible`, `Checkbox`, `Radio`, and `Switch` — was promoted to stable in one pass ([#655](https://github.com/vuetifyjs/0/pull/655)), taking the stable component count from zero to thirteen. Two days later, 1.0.0.\n\n**No new composables or components shipped in July.** The API had been frozen since the June beta, so the month went into hardening what already existed — accessibility, performance, and correctness.\n\n### Accessibility\n\nWe've added an [axe-core](https://github.com/dequelabs/axe-core) sweep that now runs against every component ([#736](https://github.com/vuetifyjs/0/pull/736)). The fixes that preceded it:\n\n* **Avatar, Scrim, Popover, Tooltip, Select, Toggle** — restored dropped alt text and completed missing ARIA wiring ([#618](https://github.com/vuetifyjs/0/pull/618))\n* **Switch, Form, Slider** — correct ARIA states for mixed, native-validation, and grouped controls ([#619](https://github.com/vuetifyjs/0/pull/619))\n* **Carousel** — autoplay pauses on keyboard focus, satisfying WCAG 2.2.2 ([#625](https://github.com/vuetifyjs/0/pull/625))\n* **Snackbar** — an `urgent` prop that switches the live region to `role=\"alert\"` ([#624](https://github.com/vuetifyjs/0/pull/624))\n* **Breadcrumbs** — collapsed-item count and `aria-expanded` on the expander ([#634](https://github.com/vuetifyjs/0/pull/634))\n* **Button, Toggle, Pagination** — Enter/Space activation on non-native `as` elements ([#645](https://github.com/vuetifyjs/0/pull/645))\n* **Treeview** — `aria-current` on the active item ([#626](https://github.com/vuetifyjs/0/pull/626)); **Splitter** — a localized handle label ([#627](https://github.com/vuetifyjs/0/pull/627))\n\n### Performance\n\n`createRegistry` sits underneath most of v0, so it got the attention. Reactive `keys`/`values`/`entries` are memoized behind a version signal ([#540](https://github.com/vuetifyjs/0/pull/540)), field-only upserts skip version notification ([#542](https://github.com/vuetifyjs/0/pull/542)), and the hot paths dropped `indexOf` and a `values()` copy ([#531](https://github.com/vuetifyjs/0/pull/531)). `createDataGrid` skips the row reorder on sort when no manual order is in effect ([#555](https://github.com/vuetifyjs/0/pull/555)), and baseline benchmarks landed on `createGroup`, `createSingle`, and `createStep` so future regressions show up ([#604](https://github.com/vuetifyjs/0/pull/604)), alongside a bundle-size gate on the key exports ([#605](https://github.com/vuetifyjs/0/pull/605)) and an SSR hydration smoke-test harness ([#607](https://github.com/vuetifyjs/0/pull/607)).\n\n### Correctness\n\nFour fixes to know about if you were running an RC:\n\n* `useResizeObserver` was silently ignoring border-box measurements ([#725](https://github.com/vuetifyjs/0/pull/725))\n* `isArray` and `isObject` now narrow correctly against element types, tuples, and `readonly` ([#745](https://github.com/vuetifyjs/0/pull/745), [#746](https://github.com/vuetifyjs/0/pull/746))\n* `useStack` leaked its singleton across SSR requests ([#569](https://github.com/vuetifyjs/0/pull/569))\n* A security review produced a guard sweep against prototype pollution and CSS injection ([#489](https://github.com/vuetifyjs/0/pull/489))\n\nTwo structural changes landed alongside. **`@vuetify/paper` came out of the publish path** ([#671](https://github.com/vuetifyjs/0/pull/671)) and out of the consumer-facing docs ([#672](https://github.com/vuetifyjs/0/pull/672)). And the release pipeline now blocks prereleases from claiming the `latest` dist-tag ([#665](https://github.com/vuetifyjs/0/pull/665)) and makes publishes idempotent ([#696](https://github.com/vuetifyjs/0/pull/696)) — both fallout from the tagging problems earlier in the year.\n\nTwo patches followed: **v1.0.1** (July 24) and **v1.0.2** (July 29).\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n**Details:**\n\n* [Announcing Vuetify0 1.0](/blog/announcing-vuetify0-v1/)\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v0play](https://v0play.vuetifyjs.com)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nNothing was promoted out of labs in July and no new components were added — the last promotions were the seven that landed in May. Our team spent the month on correctness instead, concentrated in three areas: **Shadow DOM**, **defaults inheritance**, and the **select family**.\n\n### New Features\n\nFour features landed on July 27, and all of them **shipped in v3.13.0, not on the v4 line**. On v4 the same commits are merged to `dev` and arrive with [v4.2.0](https://github.com/vuetifyjs/vuetify/milestone/90):\n\n* **[VSelect / VAutocomplete / VCombobox](/components/selects/)** — new events for multi-selection ([#23038](https://github.com/vuetifyjs/vuetify/pull/23038))\n* **[VSkeletonLoader](/components/skeleton-loaders/)** — a `types` prop, and `table-cell` reintroduced ([#23037](https://github.com/vuetifyjs/vuetify/pull/23037)); separately, a `chip-group` type ([`06cbc10`](https://github.com/vuetifyjs/vuetify/commit/06cbc10))\n* **[VBtnGroup](/components/button-groups/)** — a `size` prop aligned with standalone buttons ([`9b46baa`](https://github.com/vuetifyjs/vuetify/commit/9b46baa))\n\n### Bug Fixes\n\n**Shadow DOM.** Components mounted inside an open shadow root resolved focus against the wrong root, breaking keyboard navigation in lists and stealing focus in dialogs. Three fixes closed it ([#23024](https://github.com/vuetifyjs/vuetify/pull/23024), [#23027](https://github.com/vuetifyjs/vuetify/pull/23027), [`8908e7e`](https://github.com/vuetifyjs/vuetify/commit/8908e7e)).\n\n**Defaults.** Two leaks. Parent component config bled into teleported menu and dialog content ([#23016](https://github.com/vuetifyjs/vuetify/pull/23016)), and nested root defaults were dropped by the teleport reset ([#23015](https://github.com/vuetifyjs/vuetify/pull/23015)). Either one gives you a component that styles correctly in isolation and wrongly in place.\n\n**The select family.** Focus behavior, native form submission, and list reliability all got passes. Most of these were long-standing reports rather than v4.1 regressions.\n\n| Component | Fix | Version | PR / commit |\n|------------------------------------|-----------------------------------------------------------|---------|---------------------------------------------------------------------|\n| **locale** | Correctly resolve Kurdish locale to RTL | v4.1.3 | [`4782312`](https://github.com/vuetifyjs/vuetify/commit/4782312) |\n| **VBtn** | No letter-spacing for RTL locales | v4.2.0 | [`3956c08`](https://github.com/vuetifyjs/vuetify/commit/3956c08) |\n| **VOtpInput** | Move focus correctly in RTL mode | v4.1.3 | [`f0145aa`](https://github.com/vuetifyjs/vuetify/commit/f0145aa) |\n| **VSelect/VAutocomplete/VCombobox**| Respect `no-auto-scroll` | v4.1.3 | [`adb2597`](https://github.com/vuetifyjs/vuetify/commit/adb2597) |\n| **VDataTable** | Apply `text-align` to columns with align `start` | v4.1.3 | [`02f5f81`](https://github.com/vuetifyjs/vuetify/commit/02f5f81) |\n| **VDateInput** | Do not fill range on blur | v4.1.4 | [`b7569fe`](https://github.com/vuetifyjs/vuetify/commit/b7569fe) |\n| **rounded** | Translate `2xl`, `3xl`, etc. to classes | v4.1.3 | [`0ea03f4`](https://github.com/vuetifyjs/vuetify/commit/0ea03f4) |\n| **VDateInput** | Derive display format from the date adapter locale | v4.1.3 | [#22976](https://github.com/vuetifyjs/vuetify/pull/22976) |\n| **theme** | `provideTheme` current should use `computedThemes` | v4.1.4 | [#22987](https://github.com/vuetifyjs/vuetify/pull/22987) |\n| **VMenu** | Correct close cascade for nested menus | v4.1.4 | [`5902e09`](https://github.com/vuetifyjs/vuetify/commit/5902e09) |\n| **VMenu** | Correct click-outside detection when content resizes | v4.1.4 | [`007f546`](https://github.com/vuetifyjs/vuetify/commit/007f546) |\n| **VNumberInput** | Accept a non-ASCII minus sign | v4.1.4 | [`6063d7a`](https://github.com/vuetifyjs/vuetify/commit/6063d7a) |\n| **VNumberInput** | Keep all decimals when `precision` is null | v4.1.4 | [`87b0e57`](https://github.com/vuetifyjs/vuetify/commit/87b0e57) |\n| **date** | Correct locale on `StringDateAdapter` | v4.1.4 | [`83ed8d4`](https://github.com/vuetifyjs/vuetify/commit/83ed8d4) |\n| **VOverlay** | Skip click-outside DOM scan for inactive overlays | v4.1.5 | [`74e297f`](https://github.com/vuetifyjs/vuetify/commit/74e297f) |\n| **VTreeview** | More aria attributes and correct keyboard navigation | v4.2.0 | [#22903](https://github.com/vuetifyjs/vuetify/pull/22903) |\n| **VDataTable** | Hide empty header cell in mobile view | v4.1.5 | [`a759055`](https://github.com/vuetifyjs/vuetify/commit/a759055) |\n| **VCalendar** | Prevent next-day hours when customizing intervals | v4.1.5 | [`4e36892`](https://github.com/vuetifyjs/vuetify/commit/4e36892) |\n| **VSwitch** | Resolve inset thumb scale ratios in Sass | v4.1.5 | [`86fcfaa`](https://github.com/vuetifyjs/vuetify/commit/86fcfaa) |\n| **types** | Preserve `RouteLocationRaw` in emitted declarations | v4.1.5 | [`d4d7b4b`](https://github.com/vuetifyjs/vuetify/commit/d4d7b4b) |\n| **VMaskInput** | Preserve value when pasting over a selection | v4.1.5 | [#23003](https://github.com/vuetifyjs/vuetify/pull/23003) |\n| **VImg** | Handle image ref deferred by a Nuxt page transition | v4.1.6 | [`0f72baf`](https://github.com/vuetifyjs/vuetify/commit/0f72baf) |\n| **VList** | Keyboard navigation inside an open Shadow DOM | v4.1.6 | [#23024](https://github.com/vuetifyjs/vuetify/pull/23024) |\n| **VDialog/VField** | Correct focus resolution in Shadow DOM | v4.1.6 | [#23027](https://github.com/vuetifyjs/vuetify/pull/23027) |\n| **VDialog** | Defer auto-focus until the inner field is focusable | v4.1.6 | [`8908e7e`](https://github.com/vuetifyjs/vuetify/commit/8908e7e) |\n| **VSelect** | Only focus the first item when opened with the keyboard | v4.1.6 | [`4bb9151`](https://github.com/vuetifyjs/vuetify/commit/4bb9151) |\n| **VSelect** | Release focus on the first click outside | v4.1.6 | [`ff966d2`](https://github.com/vuetifyjs/vuetify/commit/ff966d2) |\n| **defaults** | Keep nested root defaults through teleport reset | v4.1.6 | [#23015](https://github.com/vuetifyjs/vuetify/pull/23015) |\n| **VDataTableVirtual** | Avoid scroll glitches with expanded rows | v4.1.6 | [#23014](https://github.com/vuetifyjs/vuetify/pull/23014) |\n| **VVirtualScroll** | Trim leading items when appending to the bottom | v4.1.6 | [`1ac7cb7`](https://github.com/vuetifyjs/vuetify/commit/1ac7cb7) |\n| **VVirtualScroll** | Call `calculateVisibleItems` after `updateOffsets` | v4.1.6 | [#22938](https://github.com/vuetifyjs/vuetify/pull/22938) |\n| **VOverlay** | Handle `transition` prop correctly for target assignment | v4.1.6 | [#22190](https://github.com/vuetifyjs/vuetify/pull/22190) |\n| **defaults** | Avoid parent config leaking into menu and dialog content | v4.2.0 | [#23016](https://github.com/vuetifyjs/vuetify/pull/23016) |\n| **VStepperWindow/VTouch** | Only remove touch handlers when not null | v4.1.7 | [#23030](https://github.com/vuetifyjs/vuetify/pull/23030) |\n| **VStepperVerticalItem** | Unnecessary error color on step content | v4.1.7 | [`fce4eaa`](https://github.com/vuetifyjs/vuetify/commit/fce4eaa) |\n| **v-touch** | React to binding value changes | v4.2.0 | [`937a471`](https://github.com/vuetifyjs/vuetify/commit/937a471) |\n| **v-tooltip** | Correctly handle `true` and `undefined` | v4.2.0 | [`cef88bf`](https://github.com/vuetifyjs/vuetify/commit/cef88bf) |\n| **VAutocomplete/VCombobox** | Camelize item props for prepend icon and avatar | v4.1.7 | [`8a20623`](https://github.com/vuetifyjs/vuetify/commit/8a20623) |\n| **elevation** | `hover-elevation` should not require `elevation` | v4.1.7 | [`378f593`](https://github.com/vuetifyjs/vuetify/commit/378f593) |\n| **VProgressLinear/VIconBtn** | Avoid Vite v8 dropping transition timing | v4.1.7 | [`f23af8a`](https://github.com/vuetifyjs/vuetify/commit/f23af8a) |\n| **VTextField** | Respect `hide-details=\"auto\"` with a counter | v4.1.7 | [#22620](https://github.com/vuetifyjs/vuetify/pull/22620) |\n\nRows marked **v4.2.0** are merged to `dev` and had not shipped on the v4 line by the end of July. One further fix — `VNumberInput` stripping the grouping separator before parsing ([`94e94a9`](https://github.com/vuetifyjs/vuetify/commit/94e94a9)) — landed on July 31 but had not been released when the month closed.\n\n### In Development\n\nThe [v4.2.0 milestone](https://github.com/vuetifyjs/vuetify/milestone/90) is targeting **September 1st** and carries the feature work that slipped past v4.1. The queue is largely unchanged since June, now with a date attached:\n\n* **[VSlider](/components/sliders/)** — a `pill` variant to match MD3 ([#22699](https://github.com/vuetifyjs/vuetify/pull/22699))\n* **[VMaskInput](/components/mask-inputs/)** — multiple and dynamic mask resolution ([#22501](https://github.com/vuetifyjs/vuetify/pull/22501))\n* **[VTimePicker](/components/time-pickers/)** — keyboard controls ([#22604](https://github.com/vuetifyjs/vuetify/pull/22604))\n* **[VBtn / VIconBtn](/components/buttons/)** — sizes, spacing, and focus aligned with MD3 ([#21831](https://github.com/vuetifyjs/vuetify/pull/21831))\n* **[VDatePicker](/components/date-pickers/)** — week selection ([#20867](https://github.com/vuetifyjs/vuetify/pull/20867))\n* **[VField](/components/text-fields/)** — a `border` prop ([#19819](https://github.com/vuetifyjs/vuetify/pull/19819))\n\nOpened in July and still open at the end of it: persistent menus for the select family ([#23008](https://github.com/vuetifyjs/vuetify/pull/23008)) and a `close-on-input-click` prop for VAutocomplete and VCombobox ([#23023](https://github.com/vuetifyjs/vuetify/pull/23023)).\n\n---\n\n## Tooling Updates { #ecosystem-tooling }\n\n### Vuetify CLI\n\n\n\n
\n\nThe [CLI](https://github.com/vuetifyjs/cli) shipped four releases in July and gained a command. **`vuetify release-notes`** ([#23](https://github.com/vuetifyjs/cli/pull/23)) prints release notes for Vuetify or Vuetify0 from the terminal:\n\n```bash\nnpx vuetify release-notes # latest Vuetify release\nnpx vuetify release-notes v0 # latest Vuetify0 release\nnpx vuetify release-notes --version v4.1.7\n```\n\nIt reads the GitHub Releases API directly — no new dependencies — and links to both the docs release-notes page and the GitHub release. It shipped in **v1.2.0-beta.3** and went stable in **v1.2.0** on July 15.\n\n`vuetify analyze` got a correctness fix ([#26](https://github.com/vuetifyjs/cli/pull/26)). Lowercase `create*` factories such as `createSelection` and `createRegistry` were classified as utilities rather than composables, because the shipped import map has no `composables` key — roughly thirty core v0 composables were mislabeled. The Nuxt templates now set `prefixComposables` to avoid a naming collision introduced upstream ([#25](https://github.com/vuetifyjs/cli/issues/25)), and feature application was fixed when converting a project to JavaScript ([#19](https://github.com/vuetifyjs/cli/pull/19)).\n\n**Releases:** v1.2.0-beta.2 (July 1) · v1.2.0-beta.3 (July 15) · **v1.2.0** (July 15) · v1.2.1 (July 22)\n\n### pkg-diff\n\n[pkg-diff](https://github.com/vuetifyjs/pkg-diff), the in-browser NPM package diffing tool that came out of June's security work, **went live** in July at [pkg-diff.vuetifyjs.com](https://pkg-diff.vuetifyjs.com/). All fifteen of the month's commits went into it: the Coolify deploy, accessible themes, a version dropdown grouped by dist-tag, an `av=prev` URL parameter, and **a CLI**, so an agent can diff two package versions without a browser. A matching link from the Vuetify CLI's `release-notes` output was merged on July 25, after v1.2.1, so it was still unreleased when the month closed.\n\n### Vuetify MCP\n\nThe [MCP server](https://github.com/vuetifyjs/mcp) shipped **v0.8.0** on July 22, resyncing its published composable and component inventory against v0 1.0 ([#26](https://github.com/vuetifyjs/mcp/pull/26), [#27](https://github.com/vuetifyjs/mcp/pull/27)). Upgrade if you use it for v0 lookups — anything before 0.8.0 predates the 1.0 surface.\n\n### Nuxt Module\n\nThe [Nuxt module](https://github.com/vuetifyjs/nuxt-module) reached **v1.0.0-rc.3** on July 20, adding **selective imports and prefixing for composables** — which you want when Vuetify's composable names collide with your own auto-imports. rc.2 shipped earlier in the month.\n\n### Backend Fixes\n\nNot user-facing, but worth recording. **Every non-happy-path OAuth callback was returning a 500.** The first fix swapped a throwing `schema.parse()` for `safeParse` ([#103](https://github.com/vuetifyjs/api/pull/103)), which was not the cause. The cause was a custom Hono `compose()` that never assigned a handler's returned `Response` to the context, so every early return was discarded ([#104](https://github.com/vuetifyjs/api/pull/104)). The docs AI assistant now escalates to the full documentation index instead of refusing off an index-only view ([#105](https://github.com/vuetifyjs/api/pull/105)). And the [issues app](https://issues.vuetifyjs.com/) verifies your Vuetify One session on boot, so a valid login stops showing as logged-out ([#79](https://github.com/vuetifyjs/issues/pull/79)).\n\n---\n\n## July 2026 Changelog\n\nThe following section provides an overview of the changes made in July 2026 across the Vuetify framework.\n\n**Key Improvements:**\n\n* **Shadow DOM**: keyboard navigation and focus resolution corrected for lists, dialogs, and fields\n* **Defaults**: two inheritance leaks closed around teleported menu and dialog content\n* **Select family**: multi-selection events, focus behavior, and native form submission\n* **Virtual scrolling**: item trimming, visible-item recalculation, and expanded-row scroll glitches\n* **RTL and locale**: Kurdish RTL resolution, VBtn letter-spacing, VOtpInput focus direction\n* **Accessibility**: VTreeview aria attributes and keyboard navigation; VDataTable `aria-sort` and selection labels on v3\n\n**Expand** this section to see the detailed changelog for July 2026:\n\n
\n\n### :rocket: Features\n\nAll four component features below shipped in **v3.13.0**; the v4 equivalents are merged to `dev` for v4.2.0.\n\n* **VSelect/VAutocomplete/VCombobox:** new events for multi-selection ([#23038](https://github.com/vuetifyjs/vuetify/pull/23038)) ([45079af](https://github.com/vuetifyjs/vuetify/commit/45079af))\n* **VSkeletonLoader:** add `types` prop & reintroduce `table-cell` ([#23037](https://github.com/vuetifyjs/vuetify/pull/23037)) ([b5d380b](https://github.com/vuetifyjs/vuetify/commit/b5d380b))\n* **VSkeletonLoader:** add `chip-group` type ([06cbc10](https://github.com/vuetifyjs/vuetify/commit/06cbc10))\n* **VBtnGroup:** add `size` prop to align with standalone buttons ([9b46baa](https://github.com/vuetifyjs/vuetify/commit/9b46baa))\n* **VDataTable:** add mobile header slot — v3.13.0 ([#21429](https://github.com/vuetifyjs/vuetify/pull/21429))\n* **VDataTable:** add `aria-sort` to sortable headers — v3.13.0 ([25c0f0f](https://github.com/vuetifyjs/vuetify/commit/25c0f0f))\n* **VDataTable:** add aria-labels for selection controls — v3.13.0 ([db186fc](https://github.com/vuetifyjs/vuetify/commit/db186fc))\n\n### :wrench: Bug Fixes\n\n* **VNumberInput:** strip grouping separator before parsing number ([94e94a9](https://github.com/vuetifyjs/vuetify/commit/94e94a9))\n* **VProgressLinear,VIconBtn:** avoid Vite v8 dropping transition timing ([f23af8a](https://github.com/vuetifyjs/vuetify/commit/f23af8a))\n* **VTextField:** respect `hide-details=\"auto\"` with counter ([#22620](https://github.com/vuetifyjs/vuetify/pull/22620))\n* **elevation:** `hover-elevation` prop should not require `elevation` ([378f593](https://github.com/vuetifyjs/vuetify/commit/378f593))\n* **VAutocomplete,VCombobox:** camelize item props for prepend icon and avatar ([8a20623](https://github.com/vuetifyjs/vuetify/commit/8a20623))\n* **v-tooltip:** correctly handle `true` and `undefined` ([cef88bf](https://github.com/vuetifyjs/vuetify/commit/cef88bf))\n* **defaults:** avoid parent config leaking into menu and dialog content ([#23016](https://github.com/vuetifyjs/vuetify/pull/23016))\n* **VStepperWindow/VTouch:** only remove touchHandlers when not null ([#23030](https://github.com/vuetifyjs/vuetify/pull/23030))\n* **VStepperVerticalItem:** unnecessary error color to step content ([fce4eaa](https://github.com/vuetifyjs/vuetify/commit/fce4eaa))\n* **v-touch:** react to binding value changes ([937a471](https://github.com/vuetifyjs/vuetify/commit/937a471))\n* **VSelect/VAutocomplete/VCombobox:** reliable list with selection ([#23029](https://github.com/vuetifyjs/vuetify/pull/23029))\n* **VListItem/VChip/VDatePickerHeader:** only attach click when interactive ([#23028](https://github.com/vuetifyjs/vuetify/pull/23028))\n* **VDialog/VField:** correct focus resolution in Shadow DOM ([#23027](https://github.com/vuetifyjs/vuetify/pull/23027))\n* **VDialog:** defer auto-focus until the inner field is focusable ([8908e7e](https://github.com/vuetifyjs/vuetify/commit/8908e7e))\n* **VList:** resolve keyboard navigation inside an open Shadow DOM ([#23024](https://github.com/vuetifyjs/vuetify/pull/23024))\n* **VAutocomplete,VCombobox,VSelect:** improvements for native form submissions ([#23022](https://github.com/vuetifyjs/vuetify/pull/23022))\n* **VSelect:** release focus on first click outside ([ff966d2](https://github.com/vuetifyjs/vuetify/commit/ff966d2))\n* **VSelect:** only focus first item when menu is opened with keyboard ([4bb9151](https://github.com/vuetifyjs/vuetify/commit/4bb9151))\n* **defaults:** keep nested root defaults through teleport reset ([#23015](https://github.com/vuetifyjs/vuetify/pull/23015))\n* **VDataTableVirtual:** avoid scroll glitches with expanded rows ([#23014](https://github.com/vuetifyjs/vuetify/pull/23014))\n* **VVirtualScroll:** trim leading items when appending to bottom ([1ac7cb7](https://github.com/vuetifyjs/vuetify/commit/1ac7cb7))\n* **VVirtualScroll:** call calculateVisibleItems after updateOffsets ([#22938](https://github.com/vuetifyjs/vuetify/pull/22938))\n* **VOverlay:** handle transition prop correctly for target assignment ([#22190](https://github.com/vuetifyjs/vuetify/pull/22190))\n* **VImg:** handle image ref deferred by Nuxt page transition ([0f72baf](https://github.com/vuetifyjs/vuetify/commit/0f72baf))\n* **VMaskInput:** preserve value when pasting over a selection ([#23003](https://github.com/vuetifyjs/vuetify/pull/23003))\n* **VCalendar:** add missing interval props ([#23000](https://github.com/vuetifyjs/vuetify/pull/23000))\n* **VCalendar:** prevent next day hours when customizing intervals ([4e36892](https://github.com/vuetifyjs/vuetify/commit/4e36892))\n* **VTreeview:** make sure toRaw is used on children ([#22640](https://github.com/vuetifyjs/vuetify/pull/22640))\n* **VTreeview:** more aria attributes and correct keyboard navigation ([#22903](https://github.com/vuetifyjs/vuetify/pull/22903))\n* **types:** preserve RouteLocationRaw in emitted declarations ([d4d7b4b](https://github.com/vuetifyjs/vuetify/commit/d4d7b4b))\n* **VSwitch:** resolve inset thumb scale ratios in Sass ([86fcfaa](https://github.com/vuetifyjs/vuetify/commit/86fcfaa))\n* **VDataTable:** hide empty header cell in mobile view ([a759055](https://github.com/vuetifyjs/vuetify/commit/a759055))\n* **VOverlay:** skip click-outside DOM scan for inactive overlays ([74e297f](https://github.com/vuetifyjs/vuetify/commit/74e297f))\n* **VMenu:** correct close cascade for nested menus ([5902e09](https://github.com/vuetifyjs/vuetify/commit/5902e09))\n* **VMenu:** correct click-outside detection when content resizes ([007f546](https://github.com/vuetifyjs/vuetify/commit/007f546))\n* **VNumberInput:** accept non-ASCII minus sign ([6063d7a](https://github.com/vuetifyjs/vuetify/commit/6063d7a))\n* **VNumberInput:** keep all decimals when precision is null ([87b0e57](https://github.com/vuetifyjs/vuetify/commit/87b0e57))\n* **date:** correct locale on StringDateAdapter ([83ed8d4](https://github.com/vuetifyjs/vuetify/commit/83ed8d4))\n* **theme:** provideTheme current should use computedThemes ([#22987](https://github.com/vuetifyjs/vuetify/pull/22987))\n* **VDateInput:** derive display format from date adapter locale ([#22976](https://github.com/vuetifyjs/vuetify/pull/22976))\n* **VDateInput:** do not fill range on blur ([b7569fe](https://github.com/vuetifyjs/vuetify/commit/b7569fe))\n* **VAutocomplete:** don't trigger keydown listener during IME composition ([#22974](https://github.com/vuetifyjs/vuetify/pull/22974))\n* **VDataTable:** keep rows visible after hiding a column with a custom filter ([#22971](https://github.com/vuetifyjs/vuetify/pull/22971))\n* **VSelect/VAutocomplete/VCombobox:** respect `no-auto-scroll` ([adb2597](https://github.com/vuetifyjs/vuetify/commit/adb2597))\n* **rounded:** translate `2xl`, `3xl`, etc. to classes ([0ea03f4](https://github.com/vuetifyjs/vuetify/commit/0ea03f4))\n* **VOtpInput:** move focus correctly in RTL mode ([f0145aa](https://github.com/vuetifyjs/vuetify/commit/f0145aa))\n* **VDataTable:** apply text-align to columns with align 'start' ([02f5f81](https://github.com/vuetifyjs/vuetify/commit/02f5f81))\n* **locale:** correctly resolve Kurdish locale to RTL ([4782312](https://github.com/vuetifyjs/vuetify/commit/4782312))\n* **VBtn:** no letter-spacing for RTL locales ([3956c08](https://github.com/vuetifyjs/vuetify/commit/3956c08))\n\n### :books: Documentation\n\n* Add the [Vuetify0 1.0 announcement](/blog/announcing-vuetify0-v1/) ([#23025](https://github.com/vuetifyjs/vuetify/pull/23025)) and the [RC announcement](/blog/announcing-vuetify0-rc/) ([#22981](https://github.com/vuetifyjs/vuetify/pull/22981))\n* Update the roadmap and announce v3.13.0 as LTS ([8306637](https://github.com/vuetifyjs/vuetify/commit/8306637))\n* Trim outdated content and redirect LTS to the root domain ([e3fb29d](https://github.com/vuetifyjs/vuetify/commit/e3fb29d))\n* Add `/.well-known/security.txt` ([#23010](https://github.com/vuetifyjs/vuetify/pull/23010))\n* New VMenu examples ([#19710](https://github.com/vuetifyjs/vuetify/pull/19710)), VTreeview footer slot example, VDataTable fixed-footer example\n* Add a new 'silver' sponsor tier\n\n
\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nAugust turns back to features. The [v4.2.0 milestone](https://github.com/vuetifyjs/vuetify/milestone/90) is dated **September 1st** — the MD3 button alignment, VSlider's `pill` variant, VTimePicker keyboard controls, and VMaskInput's dynamic masks are all queued against it. Expect the v4.1 patch line to keep running underneath it.\n\nWith Vuetify0 1.0 out and its API locked under semver for the whole 1.x line, the framework's **theme**, **locale**, and **date** migrations onto v0 have a target that will not move. Those branches have been waiting since spring. They now have something stable to land against.\n\n* [Vuetify 3.13](/getting-started/release-notes/?version=v3.13.0) is the last v3 minor — if you are still on v3, the [LTS clock](/introduction/long-term-support/) runs to July 27th, 2027\n* [Vuetify0 1.0](/blog/announcing-vuetify0-v1/) is stable and untagged — `pnpm add @vuetify/v0`\n* [pkg-diff](https://pkg-diff.vuetifyjs.com/) is live, with a CLI if you drive it from an agent\n\n::: warning\n\n**Vuetify needs your support.** Every contribution funds ongoing work on the framework and the ecosystem tools around it. If your team relies on Vuetify, point your organization at [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider).\n\n:::\n\nVuetify is and always will be free and open source. If your team builds on the framework, Vuetify0, the MCP server, the CLI, the Nuxt module, or the design systems coming behind them, [Vuetify One](https://one.vuetifyjs.com/) and [GitHub Sponsors](https://github.com/sponsors/johnleider) are the most direct ways to help.\n\nNearly four years of Vuetify 3 ended this month, and a lot of you have been here for all of it. Thank you to everyone who filed an issue, opened a PR, or tested a release candidate in July.\n\nSee you in August!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://community.vuetifyjs.com), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","frontmatter":{"layout":"blog","meta":{"title":"July 2026 Update","description":"July closed the Vuetify 3 line with v3.13.0 entering long-term support, shipped Vuetify0 1.0, and kept the v4.1 patch cadence running with five releases","keywords":"Vuetify July 2026, Vuetify 3.13 LTS, Vuetify0 1.0, Vuetify 4.1, Vuetify CLI, pkg-diff"}},"isInternal":false,"tokens":11636,"sizeBytes":40604},{"name":"june-2025-update.md","path":"packages/docs/src/pages/en/blog/june-2025-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/june-2025-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: June 2025 Update\n description: June delivered progress on the VHotkey component, VCommandPalette development, component stability, and developer-experience improvements across Vuetify.\n keywords: Vuetify June 2025, VHotkey, VCommandPalette, Vuetify 0, component stability, developer experience\n---\n\n\n\n# June 2025 Update\n\nThis month is packed full of exciting updates and progress across the Vuetify ecosystem.\n\n---\n\n🖊️ John Leider • 📅 July 7th, 2025\n\n\n\n---\n\n## Powering Forward\n\nJune delivered substantial progress on developer experience enhancements, component stability improvements, and platform ecosystem expansion. Our team focused on shipping major new composables, refining core components, and strengthening the development workflow with significant updates to hotkey management, command palette functionality, and comprehensive bug fixes across the framework.\n\nWe also hosted an engaging Q&A session with [me](https://github.com/johnleider/), where our community shared their questions and valuable insights. We were thrilled to connect directly with our users and gather feedback that will help shape the future direction of the framework. Don't worry if you missed this session, we have exciting webinars planned for the coming months as well!\n\n::: success\n\nCool example of the month: [VBites](https://play.vuetifyjs.com/playgrounds/7Ksitg) by [Jacek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n* [Spotlight: Vuetify Studio](#spotlight-vuetify-studio)\n* [Framework](#framework)\n * [VHotkey Component and useHotkey Composable](#vhotkey-component-and-usehotkey-composable)\n * [New Component Development](#new-component-development)\n* [Ecosystem Updates](#ecosystem-updates)\n * [Vuetify Documentation](#vuetify-documentation)\n * [Vuetify One](#vuetify-one)\n * [Vuetify Bin](#vuetify-bin)\n* [Q&A and Upcoming Webinars](#qa-and-upcoming-webinars)\n* [Sneak Peek: Vuetify 0](#sneak-peek-vuetify-0)\n* [June 2025 Changelog](#june-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nJune continued our steady release cadence with several updates addressing bugs and introducing enhancements. These releases focused on component stability and developer experience improvements. View the complete list of changes in the [Full Changelog](#june-2025-changelog).\n\n![Hero image for June release notes](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/june-2025-hero-asdfasdf.png \"June release notes hero image\"){ height=200 }\n\n**Details:**\n\n* [v3.8.8](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.8.8)\n* [v3.8.9](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.8.9)\n* [v3.8.10](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.8.10)\n* [v3.8.11](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.8.11)\n* [v3.9.0-beta.0](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.9.0-beta.0)\n* [v3.9.0-beta.1](https://vuetifyjs.com/en/getting-started/release-notes/?version=3.9.0-beta.1)\n\n---\n\n## Spotlight: Vuetify Studio { #spotlight-vuetify-studio }\n\n**Did you know?** [Vuetify Studio](https://studio.vuetifyjs.com/) is our comprehensive development platform that often goes unnoticed by the broader community. Studio provides a complete ecosystem for Vuetify development, including:\n\n* **Interactive Component Playground**: Test and experiment with components in real-time\n* **Code Generation Tools**: Quickly prototype layouts and component configurations\n* **Collaborative Development**: Share and iterate on designs with team members\n* **Integration Testing**: Validate component behavior across different scenarios\n\n\n\nWe're continuously expanding Studio's capabilities to support modern development workflows, and we encourage the community to explore how Studio can accelerate your Vuetify development process.\n\n**Details:**\n\n* [Vuetify Studio](https://studio.vuetifyjs.com/)\n\n## Framework\n\nThere are multiple new components in development with some of that functionality reaching Labs this month. Below are some of the highlights.\n\n### VHotkey Component and useHotkey Composable\n\nThis month marked a significant milestone with the completion and pre-release of our [VHotkey component](https://vuetifyjs.com/en/components/hotkeys/) and `useHotkey` composable system. After extensive development and iteration, these tools are now available in Labs for testing and feedback as we work toward their stable release.\n\n**VHotkey Component Features:**\n\n* **Inline Mode**: Use the component inline with text and it automatically inherits font size and baseline styling\n* **New Variants**: Introduction of the Combined Variant that displays hotkeys in a Chip with Label format\n* **Consolidated Parser**: VHotkey and useHotkey now share the same parsing logic and key alias mapping for consistent behavior\n* **Platform Awareness**: New `platform` prop allows forcing the component to display Mac vs PC hotkey conventions\n* **Enhanced Customization**: Added `prefix` and `postfix` props for better integration flexibility\n\n![Hero image for VHotkey component](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/hotkeys.png \"VHotkey component hero image\"){ height=220 }\n\n**useHotkey Composable Features:**\n\n* **Dynamic Options**: Options accept `maybeRefs`, enabling dynamic hotkey configuration changes\n* **Shared Logic**: Unified codebase with VHotkey component ensures consistency\n* **Comprehensive Documentation**: Detailed examples and usage patterns available\n\nThis functionality serves as a critical building block for the upcoming VCommandPalette component, providing developers with robust keyboard shortcut management that works seamlessly across different platforms and use cases. While currently in Labs, we encourage the community to test these components and provide feedback as we work toward their stable release.\n\n**Details:**\n\n* [VHotkey Component Documentation](https://vuetifyjs.com/en/components/hotkeys/)\n* [useHotkey Composable Documentation](https://vuetifyjs.com/en/features/hotkey/)\n\n### New Component Development\n\nWe have several new components in development that we are confident will enhance the Vuetify ecosystem and provide additional functionality for developers.\n\n**VMaskInput**: After vanishing in v2, masking is back in the library with enhanced input capabilities and new features.\n\n![Hero gif for VMaskInput component](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/vmaskinput.gif \"VMaskInput component hero gif\"){ height=280 }\n\n**VEditor**: Early development phase for a new editor component, expanding Vuetify's content creation capabilities.\n\n![Hero image for VEditor component](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/veditor.png \"VEditor component hero image\"){ height=220 }\n\n**VVideo**: Documentation improvements, Sass variable extraction, and volume component refinement.\n\n\n\n**VCommandPalette**: Ongoing development for a powerful command palette component, designed to enhance user interaction and streamline application workflows.{ height=150 }\n\n![Hero image for VCommandPalette component](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/vcommandpalette.png \"VCommandPalette component hero image\"){ height=370 }\n\n**Details:**\n\n* [VMaskInput P.R.](https://github.com/vuetifyjs/vuetify/pull/21519)\n* [VEditor P.R.](https://vuetifyjs.com/en/components/editor/)\n* [VVideo P.R.](https://github.com/vuetifyjs/vuetify/pull/21460)\n\n## Ecosystem Updates\n\nMultiple advancements were made across the Vuetify ecosystem to improve developer experience and platform capabilities.\n\n### Vuetify Documentation\n\n[Vuetify One subscribers](https://vuetifyjs.com/en/?one=subscribe) can now copy documentation pages as Markdown. This feature allows you to easily extract and reuse documentation content in your projects, enhancing collaboration and knowledge sharing within teams.\n\n![Vuetify documentation copy page as markdown](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/copy-page-as-markdown.png \"Vuetify documentation copy page as markdown\"){ height=220 }\n\nAll users can now save favorite search results in the Vuetify documentation. Just press `ctrl+k` or `cmd+k` to open the search bar, type your query, and click the star icon next to the search result you want to save. This feature allows you to quickly access frequently used documentation pages, improving your workflow and efficiency.\n\n![Vuetify documentation search favorites](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/docs-favorites.png \"Vuetify documentation search favorites\"){ height=300 }\n\n**Details:**\n\n* [Copy as Markdown Commit](https://github.com/vuetifyjs/vuetify/commit/dfd8eea1ebd28e6fde702c19b15a33af3620daa4)\n* [Save Search Favorites Commit](https://github.com/vuetifyjs/vuetify/commit/14d5e63f2760db84257f324cfa298a8ce9905903)\n\n### Vuetify One\n\nUpdated default interface to include links to various Vuetify ecosystem sites, making it easier for users to navigate and access resources.\n\n![Vuetify One Platform interface](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/one-quicklinks.png \"Vuetify One Platform interface\"){ height=300 }\n\n### Vuetify Bin\n\nBins now support **locking**. This new functionality prevents unwanted changes to shared code examples, ensuring that your collaborative work remains intact and consistent.\n\n![Vuetify Bin locking functionality](https://cdn.vuetifyjs.com/docs/images/blog/june-2025-update/lock-bin.png \"Vuetify Bin locking functionality\"){ height=250 }\n\nThis feature will soon propagate to the [Vuetify Playground](https://play.vuetifyjs.com/) as well as [Vuetify Studio](https://studio.vuetifyjs.com/).\n\nIt's also now possible to access Bins saved while having an active Vuetify One subscription.\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n\n## Q&A and Upcoming Webinars { #qa-and-upcoming-webinars }\n\nJune featured successful community Q&A sessions that provided direct interaction between our core team and the developer community. The feedback and engagement we received were invaluable in shaping our development priorities and understanding real-world usage patterns.\n\n**Missed the Q&A Sessions?** Don't worry! We're planning a comprehensive webinar series launching in July. If you have valuable feedback, suggestions, or questions you'd like to see addressed, keep an eye out for our upcoming webinar announcements. These sessions will provide deep dives into Vuetify best practices, new feature demonstrations, and direct access to core team expertise.\n\nWe encourage community members to [share their input](https://community.vuetifyjs.com/) and help us make these educational sessions as valuable as possible for everyone.\n\n## Sneak Peek: Vuetify 0 { #sneak-peek-vuetify-0 }\n\n\n\nWe're excited to share an early glimpse into **Vuetify 0** (internally known as v0), our upcoming entry into the unstyled component and composable ecosystem. Building on our experience with Vuetify's component library, we're developing a new approach that delivers the same functionality and developer experience without built-in styling.\n\n**What This Means**: While unstyled components are certainly part of this initiative, Vuetify 0 represents something much more significant - we're publicly releasing our internal composables and framework building tooling. This includes the foundational utilities, patterns, and architectural components that power Vuetify itself, giving developers access to the same building blocks we use internally to create robust UI frameworks:\n\n```ts\nimport { useGroup } from '@vuetify/0'\nimport type { GroupItem, GroupTicket, GroupContext, GroupOptions } from '@vuetify/0'\n\ninterface StepItem extends GroupItem {\n title: string\n description?: string\n}\n\ninterface StepTicket extends GroupTicket {\n step: number\n}\n\ninterface StepOptions extends Omit {}\n\ninterface StepContext extends GroupContext {\n first: () => void\n last: () => void\n next: () => void\n prev: () => void\n step: (count: number) => void\n}\n\nconst options: StepOptions = {\n itemKey: 'step',\n itemValue: 'value',\n}\n\nexport function useStep (\n namespace: string,\n options?: StepOptions,\n) {\n const [\n useGroupContext,\n provideGroupContext,\n group,\n ] = useGroup(namespace, options)\n\n function first () { ... }\n function last () { ... }\n function next () { ... }\n function prev () { ... }\n function step (count: number) { ... }\n\n const context = {\n ...group,\n first,\n last,\n next\n prev,\n step,\n } as T\n\n return [\n useGroupContext,\n provideGroupContext,\n context,\n ]\n}\n```\n\nThis project is in early development as we explore the best path forward for providing developers with powerful, accessible, and feature-complete building blocks for custom implementations. We're taking time to ensure we deliver genuine value while maintaining the quality standards you expect from Vuetify.\n\nWe'll share more details as development progresses and look forward to community feedback on this new direction.\n\n## June 2025 Changelog\n\nExpand this section to see the detailed changelog for June 2025, including bug fixes and enhancements.\n\n
\n\n### :rocket: Features\n\n* **VDatePicker:** Disable months and years if not allowed ([#21466](https://github.com/vuetifyjs/vuetify/issues/21466))\n\n### :wrench: Bug Fixes\n\n* **date:** Keep `createDateRange` internal ([#21531](https://github.com/vuetifyjs/vuetify/issues/21531))\n* **date:** Week number for DST ([#21378](https://github.com/vuetifyjs/vuetify/issues/21378))\n* **icons:** Add missing aliases in presets ([#21521](https://github.com/vuetifyjs/vuetify/issues/21521))\n* **VBtn:** Allow text values for letter-spacing Sass variable ([#21602](https://github.com/vuetifyjs/vuetify/issues/21602))\n* **VBtn:** Correct letter-spacing compensation for RTL ([#21574](https://github.com/vuetifyjs/vuetify/issues/21574))\n* **VBtnToggle:** Buttons should be accessible despite overflow ([#21577](https://github.com/vuetifyjs/vuetify/issues/21577))\n* **VCarousel:** Avoid missing progress bar ([#21586](https://github.com/vuetifyjs/vuetify/issues/21586))\n* **VChip:** Disable close button of disabled chip ([#21512](https://github.com/vuetifyjs/vuetify/issues/21512))\n* **VDataTable:** Add missing ARIA label on footer text ([#21508](https://github.com/vuetifyjs/vuetify/issues/21508))\n* **VDataTable:** Columns are not keyboard-accessible ([#20939](https://github.com/vuetifyjs/vuetify/issues/20939))\n* **VDataTableColumn:** On tab focus also show sortable icon ([#21540](https://github.com/vuetifyjs/vuetify/issues/21540))\n* **VDatePicker:** Completely hide days not in weekdays array ([#21624](https://github.com/vuetifyjs/vuetify/issues/21624))\n* **VDatePicker:** Fix autoscroll ([#21556](https://github.com/vuetifyjs/vuetify/issues/21556))\n* **VDatePicker:** Reactive month and year ([#21563](https://github.com/vuetifyjs/vuetify/issues/21563))\n* **VFileInput, VFileUpload:** Handle folders drop ([#21495](https://github.com/vuetifyjs/vuetify/issues/21495))\n* **VList:** Set item value to item if primitive ([#21596](https://github.com/vuetifyjs/vuetify/issues/21596))\n* **VListGroup:** Use item value in ID with return-object ([#20595](https://github.com/vuetifyjs/vuetify/issues/20595))\n* **VNumberInput:** Fix endless increment ([#21610](https://github.com/vuetifyjs/vuetify/issues/21610))\n* **VNumberInput:** Focus after click handler executed ([#21217](https://github.com/vuetifyjs/vuetify/issues/21217))\n* **VOtpInput:** Autofocus on intersect ([#21582](https://github.com/vuetifyjs/vuetify/issues/21582))\n* **VOtpInput:** Trim clipboard text and update focus on finish ([#21342](https://github.com/vuetifyjs/vuetify/issues/21342))\n* **VSelect, VAutocomplete, VCombobox:** Open menu on icon click ([#21617](https://github.com/vuetifyjs/vuetify/issues/21617))\n* **VSelect:** Camelize props only for custom use ([#21544](https://github.com/vuetifyjs/vuetify/issues/21544))\n* **VSelect:** Convert all `itemProps` keys to camelCase ([#21518](https://github.com/vuetifyjs/vuetify/issues/21518))\n* **VSelect:** Reuse compact chip label style ([#21517](https://github.com/vuetifyjs/vuetify/issues/21517))\n* **VSlider:** Apply color to slider label ([#21538](https://github.com/vuetifyjs/vuetify/issues/21538))\n* **VSlider:** Correct step rounding for max value ([#21434](https://github.com/vuetifyjs/vuetify/issues/21434))\n* **VSpeedDial:** Avoid position glitch when reopening menu ([#21451](https://github.com/vuetifyjs/vuetify/issues/21451))\n* **VTabs:** Deselect tab when route is no longer active ([#21569](https://github.com/vuetifyjs/vuetify/issues/21569))\n* **VTextField:** Change order of events for checking input focus state ([#21136](https://github.com/vuetifyjs/vuetify/issues/21136))\n* **VWindow, VTabs:** Don't override cursor in VWindowItem ([#21138](https://github.com/vuetifyjs/vuetify/issues/21138))\n\n### :microscope: Code Refactoring\n\n* **VNumberInput:** Replace touch-action with pointercancel ([#21436](https://github.com/vuetifyjs/vuetify/issues/21436))\n\n### :test_tube: Labs\n\n* **VDateInput:** Use common date range parser ([#21450](https://github.com/vuetifyjs/vuetify/issues/21450))\n* **VFileUpload:** File name not passed correctly ([#21541](https://github.com/vuetifyjs/vuetify/issues/21541))\n* **VTimePicker:** Value not changing on wheel ([#21549](https://github.com/vuetifyjs/vuetify/issues/21549))\n* **VTreeview:** Avoid inaccessible items when overflow ([#21443](https://github.com/vuetifyjs/vuetify/issues/21443))\n* **VTreeview:** Stop click bubbling up on expand icon ([#21083](https://github.com/vuetifyjs/vuetify/issues/21083))\n\n
\n\n---\n\n## What's Next { #whats-next }\n\nJuly will focus on finalizing the `VCommandPalette` Labs release, expanding `VMaskInput` and `VEditor` component development, and continuing our documentation excellence initiative. We're also actively working on enhanced MCP integration features that allow you to create and access existing Vuetify Bin, Playground, Studio files; in addition to new Studio platform capabilities.\n\nThe team remains committed to delivering stable, performant components while expanding Vuetify's ecosystem to support modern development patterns. Our focus on developer experience, community feedback integration, and systematic improvement processes continues to drive meaningful progress each month.\n\nWe appreciate the community's continued engagement, feedback, and contributions that make these improvements possible. Keep building amazing applications with Vuetify, and don't forget to explore [Vuetify Studio](https://studio.vuetifyjs.com/) for an enhanced development experience.\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/eXubxyJ), and upcoming webinar series announcements.*\n","frontmatter":{"layout":"blog","meta":{"title":"June 2025 Update","description":"June delivered progress on the VHotkey component, VCommandPalette development, component stability, and developer-experience improvements across Vuetify.","keywords":"Vuetify June 2025, VHotkey, VCommandPalette, Vuetify 0, component stability, developer experience"}},"isInternal":false,"tokens":4784,"sizeBytes":19709},{"name":"june-2026-update.md","path":"packages/docs/src/pages/en/blog/june-2026-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/june-2026-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: June 2026 Update\n description: June started with Vuetify 4.1 stable release, followed by a bunch of regression fixes across two patch releases\n keywords: Vuetify June 2026, Vuetify 4.1 stable, VOverlay, Vuetify0 beta\n---\n\n\n\n# June 2026 Update\n\n**June was a stabilization month.** [v4.1.0](/getting-started/release-notes/?version=v4.1.0) shipped on June 2, with two patch releases after that. Most of the work went into the new overlay location strategy, fixing the placement bugs that only turned up once people were using VDialog in fullscreen mode. June was also when a security incident cost us our Discord server. No package, release, or user data was touched, but the community lost its home for a couple of weeks, and getting it back was a big part of the month. One small thing did come out of the drama — [pkg-diff](https://github.com/vuetifyjs/pkg-diff), a fast in-browser tool for diffing NPM packages (more on that [below](#security-focus)).\n\n![Hero image for June update](https://cdn.vuetifyjs.com/docs/images/blog/june-2026-update/june-hero.png \"June hero image\"){ height=112 }\n\n🖊️ Jacek Czarniecki • 📅 July 8th, 2026\n\n\n\n---\n\n## A month of settling in\n\nWhere May was a feature sprint, June was about making that work solid. **52 commits**, **two dozen fixes**, and **four releases**, with the stable [v4.1.0](/getting-started/release-notes/?version=v4.1.0) at the center. The new viewport/static location strategy that shipped with the minor turned out to be the month's main character — real-world usage surfaced a string of placement edge cases (iOS keyboards, `calc()` sizes, percentage boundaries, closing animations), and the two follow-up patches worked through them one by one. Meanwhile [Vuetify0](https://0.vuetifyjs.com/) settled into the [beta announced June 2](/blog/announcing-vuetify0-beta/), with its public API frozen and the road to v1 opening up.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Spotlight: Vuetify 4.1 Goes Stable](#vuetify-4-1)\n* [Framework Updates](#framework-updates)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [A side-effect of security focus](#security-focus)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [Product Updates](#product-updates)\n* [What's Next](#whats-next)\n * [Looking Further Ahead](#looking-ahead)\n\n---\n\n## Releases\n\nWe shipped **four framework releases**. [v4.0.9](/getting-started/release-notes/?version=v4.0.9) (June 2) was a small patch on the stable v4.0 line — an SSR fix for `VProgressLinear`, a `VNumberInput` control-state fix, and a focus-trap scroll fix. The same day, [v4.1.0](/getting-started/release-notes/?version=v4.1.0) went stable, finalizing the VSwitch MD3 work and folding in the late-May fixes. From there the month was patches: [v4.1.1](/getting-started/release-notes/?version=v4.1.1) (June 8) and [v4.1.2](/getting-started/release-notes/?version=v4.1.2) (June 16), each a round of fixes led by the overlay location strategy.\n\n\n\n### Key Improvements\n\n* **[Vuetify 4.1](/getting-started/release-notes/?version=v4.1.0)** — the first minor of the v4 line went stable on June 2\n* **[VSwitch](/components/switches/)** — MD3 alignment, a long awaited `size` prop, and a `square` nobody asked for, 😂 LOL, quite a mix\n* **[VCalendar](/components/calendars/)** — new `interval-highlight` for subtle row tint on mouse hover ([#22885](https://github.com/vuetifyjs/vuetify/pull/22885))\n* **[VExpansionPanels](/components/expansion-panels/)** — improved focus styles and a `hover` prop to opt-out of the hover effect ([#22827](https://github.com/vuetifyjs/vuetify/pull/22827))\n* **[VOverlay](/components/overlays/)** — a handful of location fixes after introducing edge snapping ([#22921](https://github.com/vuetifyjs/vuetify/pull/22921)), iOS keyboard attachment ([#22923](https://github.com/vuetifyjs/vuetify/pull/22923)), finished by restoring `calc()`/`min()`/`vw` support for sizing\n* **Forced-colors mode** — `VHeatmap` and `VHighlight` now render correctly for people relying on forced high-contrast override\n\nView the complete list of changes in the [Full Changelog](/getting-started/release-notes/).\n\n**Details:**\n\n* [v4.1.2](https://vuetifyjs.com/getting-started/release-notes/?version=v4.1.2)\n* [v4.1.1](https://vuetifyjs.com/getting-started/release-notes/?version=v4.1.1)\n* [v4.1.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.1.0)\n* [v4.0.9](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.9)\n\n---\n\n## Spotlight: Vuetify 4.1.0 release { #vuetify-4-1 }\n\n\n\n
\n\nMay opened [v4.1.0](/getting-started/release-notes/?version=v4.1.0) in beta; **on June 2 it went stable**. The release brought us four new components (`VHeatmap`, `VHighlight`, `VMonthPicker`, `VDateRangePicker`), already covered in [the previous blog post](/blog/may-2026-update/) and a broad wave of feature props across data tables, pickers, and overlays.\n\n**Details:**\n\n* [v4.1 Release Notes](/getting-started/release-notes/?version=v4.1.0)\n* [Roadmap](/introduction/roadmap/)\n\n---\n\n## Framework Updates\n\nThis month was deliberately feature-light — the team waited for feedback from users adopting latest version for new features and improvements.\n\n### Bug Fixes\n\nThe overlay location strategy introduced in v4.1 was the month's dominant fix theme. It's a powerful feature, and putting it in front of real layouts surfaced the placement edge cases you'd expect — most of them now closed.\n\n| Component | Fix | Version | PR / commit |\n|---------------------|-------------------------------------------------|---------|-----------------------------------------------------------|\n| **VProgressLinear** | Avoid `opacity:NaN` when rendering with SSR | v4.0.9 | [#22880](https://github.com/vuetifyjs/vuetify/pull/22880) |\n| **VNumberInput** | Keep both controls enabled when empty | v4.0.9 | [e0133c2](https://github.com/vuetifyjs/vuetify/commit/e0133c2) |\n| **focusTrap** | Prevent page scroll when capturing focus | v4.0.9 | [451e7c3](https://github.com/vuetifyjs/vuetify/commit/451e7c3) |\n| **VSelect** | Close menu when click lands inside host overlay | v4.1.1 | [7ed9a54](https://github.com/vuetifyjs/vuetify/commit/7ed9a54) |\n| **VSnackbar** | More reliable progress bar | v4.1.1 | [5e6fe60](https://github.com/vuetifyjs/vuetify/commit/5e6fe60) |\n| **VNumberInput** | Emit `change` when using controls and arrows | v4.1.1 | [2ab2509](https://github.com/vuetifyjs/vuetify/commit/2ab2509) |\n| **VTooltip** | Avoid stealing focus | v4.1.1 | [77d1a8a](https://github.com/vuetifyjs/vuetify/commit/77d1a8a) |\n| **VTable** | Apply background and border for `fixed-footer` | v4.1.1 | [ecabcc5](https://github.com/vuetifyjs/vuetify/commit/ecabcc5) |\n| **VMenu** | Prevent focus change during IME input | v4.1.1 | [#21008](https://github.com/vuetifyjs/vuetify/pull/21008) |\n| **VHeatmap** | Keep legend bar visible in forced-colors mode | v4.1.1 | [58e3e7d](https://github.com/vuetifyjs/vuetify/commit/58e3e7d) |\n| **VHighlight** | Support forced-colors mode | v4.1.1 | [067228c](https://github.com/vuetifyjs/vuetify/commit/067228c) |\n| **VOverlay** | Static location should snap to edges using CSS | v4.1.2 | [#22921](https://github.com/vuetifyjs/vuetify/pull/22921) |\n| **VOverlay** | Keep overlay attached with iOS keyboard open | v4.1.2 | [#22923](https://github.com/vuetifyjs/vuetify/pull/22923) |\n| **VOverlay** | Resolve `calc`/`min`/`vw` sizes to pixels | v4.1.2 | [bf105bf](https://github.com/vuetifyjs/vuetify/commit/bf105bf) |\n| **VDialog** | Clear inline styles when enabling fullscreen | v4.1.2 | [ea29378](https://github.com/vuetifyjs/vuetify/commit/ea29378) |\n| **VTreeview** | Apply `hide-actions` to group nodes | v4.1.2 | [e5555ae](https://github.com/vuetifyjs/vuetify/commit/e5555ae) |\n| **VPagination** | Predictable length behavior in flex container | v4.1.2 | [#22912](https://github.com/vuetifyjs/vuetify/pull/22912) |\n| **theme** | Async transition should return a Promise | v4.1.2 | [904f949](https://github.com/vuetifyjs/vuetify/commit/904f949) |\n\n### In Development\n\n**Deferred to v4.2** — keeping v4.1 tight meant several in-flight initiatives slipped past the minor and now sit against the [v4.2.0 milestone](https://github.com/vuetifyjs/vuetify/milestone/90). Most are feature PRs that were already open before v4.1 went stable:\n\n* **[VTreeview](/components/treeview/)** — a set of accessibility improvements: more aria attributes and correct keyboard navigation\n* **[VSlider](/components/sliders/)** — a `pill` variant to match MD3 ([#22699](https://github.com/vuetifyjs/vuetify/pull/22699))\n* **[VBreadcrumbs](/components/breadcrumbs/)** — improved accessibility and a collapse menu ([#22358](https://github.com/vuetifyjs/vuetify/pull/22358))\n* **[VMaskInput](/components/mask-inputs/)** — multiple and dynamic mask resolution ([#22501](https://github.com/vuetifyjs/vuetify/pull/22501))\n\n---\n\n## A side-effect of security focus { #security-focus }\n\nIf you somehow missed the [deep dive into the incident](/about/incidents/2026-06-nyven-infostealer/), a long story short is that Discord failed us by shipping insecure client (2FA is a joke) and having no backup, no \"security cooldown\" nor tools to recover the server after the takeover. After a shaky two weeks, we had set up a new one and get things back on track. All community members are welcome to re-join.\n\n**No Vuetify package, source, release, CI pipeline, or user data was affected.** But the team still took the opportunity to rotate the security tokens and strenghten the internal policies. One interesting side-effect of \"what if\" planning was a new project [pkg-diff](https://github.com/vuetifyjs/pkg-diff). It appears despite constant problems around NPM packages security, we had not found even one decent tool to diff packages - some were slow, other limited, so we created our own and since it is computing everything in-browser - arguably better than what NPMX shipped lately, everyone is free to use it :)\n\n![pkg-diff screenshot](https://cdn.vuetifyjs.com/docs/images/blog/june-2026-update/pkg-diff-screenshot.png)\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\nJune was Vuetify0's first month in beta. The [beta was announced on June 2](/blog/announcing-vuetify0-beta/) with the public API frozen, so the work shifted from adding primitives to refining the ones that shipped — edge cases, documentation, and the road to **v1.0 in July**. With a frozen target now in place, the **theme**, **locale**, and **date** v0 migrations inside the framework have something stable to build against.\n\n\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n**Details:**\n\n* [Announcing the Vuetify0 Beta](/blog/announcing-vuetify0-beta/)\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v0play](https://v0play.vuetifyjs.com)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\n\n\n
\n\nThe docs picked up a round of housekeeping in June — SEO length limits enforced on page meta titles and descriptions, unified CDN links, and a corrected MD2 typography snippet in the upgrade guide. The Discord invite link across the docs was updated to point at the new community server.\n\n### Nuxt Module\n\nThe [Nuxt Module](https://github.com/vuetifyjs/nuxt-module) continued its march toward a stable v1, with [Andrei Elkin](https://github.com/AndreyYolkin) keeping up the package-resolution and reliability work carried over from May.\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nJuly finishes the year's first arc. **Vuetify0** reaches **v1.0**, ending the beta and giving the framework a stable foundation to migrate onto. **Vuetify 4.1** continues its patch cadence, with the `rules` promotion and more overlay and treeview polish already queued. And with a v0 v1 in hand, the **theme**, **locale**, and **date** migrations move from planning to real work.\n\n* [Vuetify 4.1](/getting-started/release-notes/?version=v4.1.0) is stable — try the new components and labs promotions in your project today\n* The [Vuetify0 beta](/blog/announcing-vuetify0-beta/) has frozen its public API ahead of v1 — try it via [v0play](https://v0play.vuetifyjs.com)\n* Join the rebuilt community server at [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n### Looking Further Ahead { #looking-ahead }\n\nThe theme for the rest of the year hasn't changed: **finishing what we started**.\n\n**A clean finish for labs**: our roadmap commitments for the remainder of 2026 stay narrowed to one outcome — **by November 1st, 2026, labs will be drained**. Every component still incubating will either graduate into core or be retired; nothing will be left in an \"unfinished\" state. June's `rules` promotion is one more step down that list.\n\n**A community-driven issue board**: we're building a curated view into the issue board where the community can surface and vote on what matters most, opening a direct line into what we tackle next. More as it takes shape.\n\n**A modernized docs experience (later this year)**: we're planning a significant UX upgrade to the Vuetify docs, porting over features introduced first to the [Vuetify0 documentation](https://0.vuetifyjs.com/). For a preview of where we're headed, spend some time in the [v0 docs](https://0.vuetifyjs.com/) — the navigation, search, and interactive code samples are an early taste of what's coming.\n\n::: warning\n\n**Vuetify needs your support.** OpenCollective trend slowly picks up and we appreciate every contribution and support for ongoing work on the framework and ecosystem tools. If your team relies on Vuetify, please educate your boss about importance of sponsoring OSS projects like Vuetify. You can point them to [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution keeps Vuetify afloat.\n\n:::\n\nVuetify is and always will be free and open source. If your team builds on the framework, the v0 beta, the MCP, the CLI, the Nuxt module, the ESLint plugin, or any of the design systems coming behind them, your support directly funds continued development. [Vuetify One](https://one.vuetifyjs.com/) and [GitHub Sponsors](https://github.com/sponsors/johnleider) are the most direct ways to help.\n\nTo everyone who checked in, shared the verified invite, and helped us rebuild the community server after this month's incident — thank you. It meant a lot.\n\nThank you for being part of the Vuetify community. See you in July!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://community.vuetifyjs.com), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","frontmatter":{"layout":"blog","meta":{"title":"June 2026 Update","description":"June started with Vuetify 4.1 stable release, followed by a bunch of regression fixes across two patch releases","keywords":"Vuetify June 2026, Vuetify 4.1 stable, VOverlay, Vuetify0 beta"}},"isInternal":false,"tokens":4609,"sizeBytes":16848},{"name":"march-2026-update.md","path":"packages/docs/src/pages/en/blog/march-2026-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/march-2026-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: March 2026 Update\n description: March shipped 7 Vuetify patches while Vuetify0 reached v0.2.0 with 7 new headless components, the Nuxt Module beta, 10 CLI releases, and ESLint v4 rules.\n keywords: Vuetify March 2026, Vuetify0 v0.2.0, VCommandPalette, VProgress, Nuxt Module beta, Vuetify CLI, ESLint v4 migration\n---\n\n\n\n# March 2026 Update\n\n**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.\n\n![Hero image for March update](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/march-hero.png \"March hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 April 16th, 2026\n\n\n\n---\n\n## Acceleration\n\n**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](https://github.com/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](https://github.com/AndreyYolkin) completely overhauled the Nuxt module and pushed the CLI through 10 releases. And the Vuetify → Vuetify0 refactor that [began last month](https://vuetifyjs.com/blog/february-2026-update/) is now actively migrating core composables—observer, display, theme, and locale.\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Ecosystem Spotlight: Nuxt Module v1.0.0 Beta](#nuxt-module-beta)\n* [Framework Updates](#framework-updates)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n * [In Development](#in-development)\n* [Tooling and Migration](#tooling-migration)\n* [Vuetify MCP v0.6.0 and Playground Tools](#vuetify-mcp)\n* [Product Updates](#product-updates)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [March 2026 Changelog](#march-2026-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nMarch 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.\n\n![March Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/releases.png \"March Releases Banner\")\n\n### Key Improvements\n\n* **[CSS font variables](/styles/text-and-typography/)** — CSS custom properties for font customization (v4.0.1)\n* **[Icon sets](/features/icon-fonts/)** — More UnoCSS-based iconsets + Material Symbols iconset (v4.0.1, v4.0.2)\n* **[VDataTable](/components/data-tables/)** — Expose `prevPage`, `nextPage`, `setPage` in bottom slot (v4.0.2)\n* **[VCommandPalette](/components/command-palettes/)** — `closeOnSelect` prop and `before-select` event (v4.0.2 Labs)\n* **[VProgress](/components/progress/)** — New progress component (v4.0.3 Labs)\n* **[VVideo](/components/videos/)** — `src-object` prop for WebRTC and `hide-progress-bar` prop (v4.0.3 Labs)\n* **[VFileUpload](/components/file-uploads/)** — Integrated with VInput and split internal logic (v3.12.2/v4.0.1 Labs)\n* **[VMaskInput](/components/masked-inputs/)** — Accept escaped characters in mask patterns (v4.0.3 Labs)\n\nView the complete list of changes in the [Full Changelog](#march-2026-changelog).\n\n**Details:**\n\n* [v4.0.4](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.4)\n* [v4.0.3](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.3)\n* [v4.0.2](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.2)\n* [v4.0.1](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.1)\n* [v3.12.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.4)\n* [v3.12.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.3)\n* [v3.12.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.12.2)\n\n---\n\n## Ecosystem Spotlight: Nuxt Module v1.0.0 Beta { #nuxt-module-beta }\n\nThe 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](https://github.com/AndreyYolkin). This is the module's biggest change since its initial release.\n\n### What's New { #nuxt-whats-new }\n\n**Monorepo Conversion** — The module was restructured as a monorepo, with cleaner package boundaries and improved maintainability.\n\n**Vuetify 4 Support** — Full compatibility with v4's CSS layers and SASS integration. The `disableVuetifyStyles` option was removed in favor of `styles: 'none'`.\n\n**Experimental SASS Caching** — In-memory caching for SASS compilation reduces cold-start times in development.\n\n**Revamped Documentation** — Documentation was completely overhauled alongside the structural changes.\n\n**Beta Stability** — With alpha.2 through beta.2 all landing in March, the module is on track for a stable v1.0.0 release.\n\n[userquin](https://github.com/userquin) contributed configuration and documentation improvements.\n\n**Details:**\n\n* [Nuxt Module GitHub Repository](https://github.com/vuetifyjs/nuxt-module)\n* [Major overhaul PR#353](https://github.com/vuetifyjs/nuxt-module/pull/353)\n* [v1.0.0-beta.2](https://github.com/vuetifyjs/nuxt-module/releases/tag/v1.0.0-beta.2)\n\n---\n\n## Framework Updates\n\n\n\n
\n\nMarch's 31 merged PRs focused on new features for the v4 branch, targeted bug fixes, and the beginning of the Vuetify → v0 migration.\n\n### New Features\n\n**[CSS font variables](/styles/text-and-typography/)** — CSS custom properties for font-family, font-size, and font-weight, enabling runtime font customization without SASS (v4.0.1, [#22666](https://github.com/vuetifyjs/vuetify/pull/22666))\n\n![CSS font variables](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/css-font-variables.png \"CSS custom properties for runtime font customization\")\n\n**[Icon sets](/features/icon-fonts/)** — Additional UnoCSS-based iconsets shipped in v4.0.1 ([#22668](https://github.com/vuetifyjs/vuetify/pull/22668)), followed by Material Symbols via UnoCSS in v4.0.2 ([#22680](https://github.com/vuetifyjs/vuetify/pull/22680))\n\n**[VDataTable](/components/data-tables/)** — `prevPage`, `nextPage`, and `setPage` exposed in the bottom slot for custom pagination controls (v4.0.2, [#22681](https://github.com/vuetifyjs/vuetify/pull/22681))\n\n**[VCommandPalette](/components/command-palettes/)** — `closeOnSelect` prop and `before-select` event for fine-grained selection control, plus a name fix for the inner component (v4.0.2 Labs, [#22634](https://github.com/vuetifyjs/vuetify/pull/22634))\n\n![VCommandPalette](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/command-palette.png \"VCommandPalette with search and command list\")\n\n**[VFileUpload](/components/file-uploads/)** — Integrated with VInput and split internal logic for better composability and form integration (v3.12.2/v4.0.1 Labs, [#22637](https://github.com/vuetifyjs/vuetify/pull/22637))\n\n**[VProgress](/components/progress/)** — New progress component added to Labs (v4.0.3, [#22682](https://github.com/vuetifyjs/vuetify/pull/22682))\n\n**[VVideo](/components/videos/)** — `src-object` prop for MediaStream/WebRTC playback and `hide-progress-bar` prop for cleaner embeds (v4.0.3 Labs, [#22670](https://github.com/vuetifyjs/vuetify/pull/22670), [#22636](https://github.com/vuetifyjs/vuetify/pull/22636))\n\n**Details:**\n\n* [CSS font variables PR#22666](https://github.com/vuetifyjs/vuetify/pull/22666)\n* [VCommandPalette closeOnSelect PR#22634](https://github.com/vuetifyjs/vuetify/pull/22634)\n* [VDataTable pagination slot PR#22681](https://github.com/vuetifyjs/vuetify/pull/22681)\n* [VProgress PR#22682](https://github.com/vuetifyjs/vuetify/pull/22682)\n* [VVideo src-object PR#22670](https://github.com/vuetifyjs/vuetify/pull/22670)\n\n### Bug Fixes\n\n| Component | Fix | Version | PR |\n|-----------|-----|---------|----|\n| **VSelect** | Fix screenreader navigation to select options | v3.12.2 / v4.0.1 | [#22602](https://github.com/vuetifyjs/vuetify/pull/22602) |\n| **VOtpInput** | Handle deletion via `onBeforeinput` for mobile compatibility | v4.0.1 | [#22657](https://github.com/vuetifyjs/vuetify/pull/22657) |\n| **VSnackbar** | Opaque background for transparent variants | v4.0.1 | [#22646](https://github.com/vuetifyjs/vuetify/pull/22646) |\n| **hotkey** | Delimiter alias fixes without ambiguity | v3.12.3 / v4.0.2 | [#22635](https://github.com/vuetifyjs/vuetify/pull/22635) |\n| **VNumberInput** | Prevent input changes when readonly | v3.12.3 / v4.0.2 | [#22692](https://github.com/vuetifyjs/vuetify/pull/22692) |\n| **VDataTable** | Respect `disableSort` prop for sortable headers | v4.0.2 | [#22684](https://github.com/vuetifyjs/vuetify/pull/22684) |\n| **rounded** | Add missing `md` size | v4.0.2 | [#22679](https://github.com/vuetifyjs/vuetify/pull/22679) |\n| **router** | Replace deprecated `next()` for Vue Router v5 compatibility | v3.12.3 / v4.0.2 | [#22643](https://github.com/vuetifyjs/vuetify/pull/22643) |\n| **VTimePicker** | Keep hour value when changing AM/PM | v3.12.3 / v4.0.2 | — |\n| **hotkey** | Resilient sequence parsing | v4.0.3 | [#22704](https://github.com/vuetifyjs/vuetify/pull/22704) |\n| **VExpansionPanels** | Apply `rounded` only to first and last panel when closed | v4.0.3 | — |\n| **VTooltip** | Correct selector for non-interactive tooltips | v4.0.3 | — |\n| **VMaskInput** | Accept escaped characters in mask patterns | v4.0.3 Labs | [#22727](https://github.com/vuetifyjs/vuetify/pull/22727) |\n| **VFileUpload** | Fix adding/replacing files with dropzone click | v3.12.4 / v4.0.4 Labs | [#22741](https://github.com/vuetifyjs/vuetify/pull/22741) |\n| **rules** | Fix type resolution for custom validation rules | v4.0.4 Labs | [#22701](https://github.com/vuetifyjs/vuetify/pull/22701) |\n| **VSelect** | Prevent brief error state when clicking a menu item | v4.0.4 | — |\n| **VField** | Label transition on pages with CSS zoom | v3.12.4 / v4.0.4 | — |\n\n**Details:**\n\n* [VSelect a11y PR#22602](https://github.com/vuetifyjs/vuetify/pull/22602)\n* [hotkey aliases PR#22635](https://github.com/vuetifyjs/vuetify/pull/22635)\n* [hotkey resilient PR#22704](https://github.com/vuetifyjs/vuetify/pull/22704)\n* [VMaskInput PR#22727](https://github.com/vuetifyjs/vuetify/pull/22727)\n\n### In Development\n\nSeveral PRs merged in March are pending their first release, alongside features still in active development:\n\n#### Merged, Pending Release { #merged-pending-release }\n\n* **rounded: arbitrary values** — Accept any valid CSS border-radius value beyond predefined presets ([#22721](https://github.com/vuetifyjs/vuetify/pull/22721))\n* **VProgressLinear split variant** — MD3-aligned split variant for buffer/indeterminate states ([#22662](https://github.com/vuetifyjs/vuetify/pull/22662))\n* **VOverlay** — `location` and `origin` props reworked to be actually useful ([#22720](https://github.com/vuetifyjs/vuetify/pull/22720))\n* **VCommandPalette viewport strategy** — Full-viewport location strategy for command palettes ([#22698](https://github.com/vuetifyjs/vuetify/pull/22698))\n* **SSR** — Avoid errors when rendering with latest Vue ([#22764](https://github.com/vuetifyjs/vuetify/pull/22764))\n* **CSS zoom** — Coordinate mismatch fix for VColorPicker, ripple, and VCalendar ([#22774](https://github.com/vuetifyjs/vuetify/pull/22774))\n\n#### VSparkline Markers and Tooltips\n\nInteractive markers and hover tooltips for data visualization.\n\n#### VSlider Pill Variant\n\nA new `pill` variant for VSlider aligned with Material Design 3's rounded slider track design.\n\n#### VMorphingIcon\n\nAnimated icon transitions using SVG path morphing—carrying over from February, now nearing completion.\n\n#### V0 Migration Core Composables\n\nThe Vuetify → Vuetify0 refactor is now migrating core systems. Open PRs cover:\n\n* **Theme** — Migrate the entire theme system to v0 ([#22765](https://github.com/vuetifyjs/vuetify/pull/22765))\n* **Locale/RTL** — Delegate locale and RTL management to v0 ([#22753](https://github.com/vuetifyjs/vuetify/pull/22753))\n* **Display** — Migrate breakpoints to v0's `createBreakpoints` ([#22710](https://github.com/vuetifyjs/vuetify/pull/22710))\n* **Date** — Delegate to v0's `createDate` runtime ([#22768](https://github.com/vuetifyjs/vuetify/pull/22768))\n\nObserver composables were already [migrated in March](https://github.com/vuetifyjs/vuetify/pull/22672).\n\n**Details:**\n\n* [rounded arbitrary PR#22721](https://github.com/vuetifyjs/vuetify/pull/22721)\n* [VProgressLinear split PR#22662](https://github.com/vuetifyjs/vuetify/pull/22662)\n* [VSparkline PR#22748](https://github.com/vuetifyjs/vuetify/pull/22748)\n* [VSlider pill PR#22699](https://github.com/vuetifyjs/vuetify/pull/22699)\n* [VMorphingIcon PR#22639](https://github.com/vuetifyjs/vuetify/pull/22639)\n* [Theme migration PR#22765](https://github.com/vuetifyjs/vuetify/pull/22765)\n* [Locale/RTL migration PR#22753](https://github.com/vuetifyjs/vuetify/pull/22753)\n\n---\n\n## Tooling and Migration { #tooling-migration }\n\n### Vuetify CLI\n\n\n\n
\n\nThe 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](https://github.com/AndreyYolkin) with template contributions from [J-Sek](https://github.com/J-Sek).\n\n**Vite 8 Support** — Templates updated for Vite 8 compatibility.\n\n**Vue Router 5 Migration** — Templates migrated from unplugin-vue-router to Vue Router 5.\n\n**MCP CLI Integration** — A standalone MCP CLI command for setting up the Vuetify MCP server directly from the CLI.\n\n**Preset System** — Enhanced user presets with improved UX, plus new Nuxt and UnoCSS presets alongside the existing TailwindCSS preset.\n\n**TypeScript 6.0** — Template fixes to avoid typechecking errors with TS 6.0.\n\n**Dynamic Project Docs** — `create` now generates project-specific documentation.\n\n**Details:**\n\n* [Vuetify CLI GitHub Repository](https://github.com/vuetifyjs/cli)\n* [v1.2.0-beta.1](https://github.com/vuetifyjs/cli/releases/tag/v1.2.0-beta.1)\n* [TS 6.0 fix PR#11](https://github.com/vuetifyjs/cli/pull/11)\n* [Nuxt/UnoCSS presets PR#7](https://github.com/vuetifyjs/cli/pull/7)\n\n### ESLint Plugin for Vuetify\n\n\n\n
\n\n[J-Sek](https://github.com/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.\n\n**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](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/125)).\n\n**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](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/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.\n\n**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 `` to `
`), replacement props, or custom messages ([#127](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/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.\n\n**ESLint 10 Support** — Compatibility with the latest ESLint major version, contributed by [jssuttles](https://github.com/jssuttles) ([#124](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/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](https://github.com/vuetifyjs/eslint-plugin-vuetify/pull/119)).\n\n**Details:**\n\n* [ESLint Plugin GitHub Repository](https://github.com/vuetifyjs/eslint-plugin-vuetify)\n* [v2.7.2](https://github.com/vuetifyjs/eslint-plugin-vuetify/releases/tag/v2.7.2)\n* [v2.7.0](https://github.com/vuetifyjs/eslint-plugin-vuetify/releases/tag/v2.7.0)\n* [v2.6.0](https://github.com/vuetifyjs/eslint-plugin-vuetify/releases/tag/v2.6.0)\n\n### ESLint Config\n\n\n\n
\n\nThe 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.\n\n**`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](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.3.5)).\n\n**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.\n\n**Details:**\n\n* [ESLint Config GitHub Repository](https://github.com/vuetifyjs/eslint-config-vuetify)\n* [v4.4.0](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.4.0)\n* [v4.3.5](https://github.com/vuetifyjs/eslint-config-vuetify/releases/tag/v4.3.5)\n\n---\n\n## Vuetify MCP v0.6.0 and Playground Tools { #vuetify-mcp }\n\n\n\n
\n\nThe 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.\n\n### v0.6.0 { #mcp-v060 }\n\n**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.)\n\n**Bug Fixes** — Corrected composable names and missing exports in v0 documentation; fixed GitHub URL branch references from `main` to `master`.\n\n### Playground CRUD (Pending Release) { #mcp-playground-crud }\n\n[PR#19](https://github.com/vuetifyjs/mcp/pull/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.\n\n### Setup\n\nInstall with the Vuetify CLI:\n\n::: tabs\n\n```bash [pnpm]\npnpm dlx @vuetify/cli add mcp\n```\n\n```bash [npm]\nnpx @vuetify/cli add mcp\n```\n\n```bash [yarn]\nyarn dlx @vuetify/cli add mcp\n```\n\n```bash [bun]\nbunx @vuetify/cli add mcp\n```\n\n:::\n\nOr configure manually:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [v0.6.0 Release](https://github.com/vuetifyjs/mcp/releases/tag/v0.6.0)\n* [Playground CRUD PR#19](https://github.com/vuetifyjs/mcp/pull/19)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\n\n\n
\n\n[Henry Aviles](https://github.com/Haviles04) shipped a **new dashboard** for Vuetify One, releasing v0.1.0, v3.1.0, and v3.1.1 in March.\n\n![Vuetify One](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/vuetify-one.png \"Vuetify One — Power the Future of Vuetify\")\n\n**Details:**\n\n* [Vuetify One](/one/)\n* [Vuetify One Dashboard](https://one.vuetifyjs.com/)\n* [New dashboard PR#49](https://github.com/vuetifyjs/one/pull/49)\n\n### Vuetify Bin\n\n\n\n
\n\n[Henry Aviles](https://github.com/Haviles04) added **markdown preview** support—bins can now render markdown content alongside code. The update also includes cursor tracking.\n\n![Vuetify Bin Markdown Preview](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/bin-markdown-preview.png \"Vuetify Bin rendering markdown content\")\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n* [Markdown preview PR#142](https://github.com/vuetifyjs/bin/pull/142)\n* [Cursor tracking PR#140](https://github.com/vuetifyjs/bin/pull/140)\n\n### Vuetify Play\n\n\n\n
\n\n[J-Sek](https://github.com/J-Sek) fixed a cursor positioning bug that caused edits to jump while typing ([#51](https://github.com/vuetifyjs/play/pull/51)), and [Henry Aviles](https://github.com/Haviles04) updated the default visibility behavior.\n\n![Vuetify Play](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/vuetify-play.png \"Vuetify Play — online playground with live preview\")\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\nMarch 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.\n\n![Vuetify0 Progress](https://cdn.vuetifyjs.com/docs/images/blog/march-2026-update/v0.png \"Vuetify0 March Progress\")\n\n### New Components\n\nSeven headless components shipped in March, each with a composable layer and compound component pattern:\n\n* **[Switch](https://0.vuetifyjs.com/components/forms/switch/)** — Toggle switch with Root, Track, and Thumb compound components ([#142](https://github.com/vuetifyjs/0/pull/142))\n* **[Slider](https://0.vuetifyjs.com/components/forms/slider/)** — Range slider with Track, Range, and Thumb parts, backed by a dedicated composable ([#143](https://github.com/vuetifyjs/0/pull/143))\n* **[Treeview](https://0.vuetifyjs.com/components/disclosure/treeview/)** — Hierarchical tree built on createNested with expand, select, and activate ([#144](https://github.com/vuetifyjs/0/pull/144))\n* **[Splitter](https://0.vuetifyjs.com/components/semantic/splitter/)** — Resizable pane layouts with Root, Panel, and Handle components ([#145](https://github.com/vuetifyjs/0/pull/145))\n* **[Input](https://0.vuetifyjs.com/components/forms/input/)** — Headless form input with validation integration ([#162](https://github.com/vuetifyjs/0/pull/162))\n* **[Button](https://0.vuetifyjs.com/components/actions/button/)** — Headless button with disabled, loading, readonly, and passive states, plus Button.Group for toggle selection ([#166](https://github.com/vuetifyjs/0/pull/166))\n* **[Combobox](https://0.vuetifyjs.com/components/forms/combobox/)** — Autocomplete-style input with createCombobox composable for filtering and selection ([#172](https://github.com/vuetifyjs/0/pull/172))\n\n### New Composables\n\n* **[useNotifications](https://0.vuetifyjs.com/composables/plugins/use-notifications/)** — Full notification lifecycle management with registry/queue architecture, read/archive/snooze states, and Novu/Knock adapters ([#146](https://github.com/vuetifyjs/0/pull/146))\n* **[useRules](https://0.vuetifyjs.com/composables/plugins/use-rules/)** — Validation composable with alias-based rules and adapters for Zod and Yup ([#140](https://github.com/vuetifyjs/0/pull/140))\n* **[useRaf](https://0.vuetifyjs.com/composables/system/use-raf/)** — Scope-safe `requestAnimationFrame` composable with automatic cleanup ([#165](https://github.com/vuetifyjs/0/pull/165))\n* **[createModel](https://0.vuetifyjs.com/composables/selection/create-model/)** — Shared selection state foundation bridging createRegistry, createSelection, and createSlider ([#148](https://github.com/vuetifyjs/0/pull/148))\n\n### Other Improvements\n\n* **createRegistry** — `move()` method for reordering registered items ([#149](https://github.com/vuetifyjs/0/pull/149))\n* **useHotkey** — Symbol aliases and AST-based hotkey string parser for more reliable parsing ([#150](https://github.com/vuetifyjs/0/pull/150), [#155](https://github.com/vuetifyjs/0/pull/155))\n* **MaybeRef** — Accept getters alongside refs for more flexible API signatures ([#141](https://github.com/vuetifyjs/0/pull/141))\n* **toReactive** — Performance refactor for proxy creation ([#170](https://github.com/vuetifyjs/0/pull/170))\n* **Playground** — Version selector and settings modal for easier experimentation ([#163](https://github.com/vuetifyjs/0/pull/163))\n\n### Coming Next\n\n* **[createDataGrid](https://github.com/vuetifyjs/0/pull/174)** — Data grid composable for advanced table layouts\n* **[Paper Design System](https://github.com/vuetifyjs/0/pull/167)** — The Emerald design system foundation for v0's visual layer\n* **[v0play](https://v0play.vuetifyjs.com)** — Expanding the editor and tutorial system with more examples and guided lessons\n\n::: info\n\nThe 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.\n\n:::\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v0.2.0 Release Notes](https://github.com/vuetifyjs/0/releases/tag/v0.2.0)\n* [Combobox PR#172](https://github.com/vuetifyjs/0/pull/172)\n* [Button PR#166](https://github.com/vuetifyjs/0/pull/166)\n* [Input PR#162](https://github.com/vuetifyjs/0/pull/162)\n\n---\n\n## March 2026 Changelog\n\nThe following section provides an overview of the changes made in March 2026, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* v4.0.1: CSS font variables, additional UnoCSS iconsets, VSnackbar and VSelect a11y fixes\n* v4.0.2: Material Symbols iconset, VDataTable pagination slot, VCommandPalette Labs improvements\n* v4.0.3: VProgress and VVideo Labs components, VMaskInput escaped characters, hotkey and VExpansionPanels fixes\n* v4.0.4: VFileUpload dropzone fix, rules type resolution, VSelect brief error state fix\n* v3.x: bugfix-only releases mirroring the v4 fixes above\n\n**Expand** this section to see the detailed changelog for March 2026:\n\n
\nMarch 2026 Full Changelog\n\n### v3.12.2 (2026-03-04)\n\n**:wrench: Bug Fixes**\n\n* **VDataTable:** improvements for sorting in mobile mode ([c3b3278](https://github.com/vuetifyjs/vuetify/commit/c3b3278))\n* **VDataTable:** keep fixed cells opaque when loading ([35e1e2c](https://github.com/vuetifyjs/vuetify/commit/35e1e2c))\n* **VSelect:** fix screenreader navigation to select options ([#22602](https://github.com/vuetifyjs/vuetify/issues/22602)) ([f906336](https://github.com/vuetifyjs/vuetify/commit/f906336))\n* **VTimeline:** keep dot border when using numeric dot size ([9511bc3](https://github.com/vuetifyjs/vuetify/commit/9511bc3))\n\n**:test_tube: Labs**\n\n* **VFileUpload:** `hide-browse` should hide divider as well\n* **VFileUpload:** expose `controlRef` for internal ``\n* **VFileUpload:** append instead of replacing files when `multiple`\n* **VFileUpload:** integrate VInput & split internal logic ([#22637](https://github.com/vuetifyjs/vuetify/issues/22637)) ([251adb0](https://github.com/vuetifyjs/vuetify/commit/251adb0))\n\n---\n\n### v4.0.1 (2026-03-04)\n\n**:rocket: Features**\n\n* **icons:** add more iconsets based on UnoCSS ([#22668](https://github.com/vuetifyjs/vuetify/issues/22668)) ([6c8bea5](https://github.com/vuetifyjs/vuetify/commit/6c8bea5))\n* **styles:** CSS variables for fonts ([#22666](https://github.com/vuetifyjs/vuetify/issues/22666)) ([84495a3](https://github.com/vuetifyjs/vuetify/commit/84495a3))\n\n**:wrench: Bug Fixes**\n\n* **theme:** put theme stylesheet in body when loaded with unhead ([2475a28](https://github.com/vuetifyjs/vuetify/commit/2475a28))\n* **VBadge:** correct props.dotSize fallback ([a71f396](https://github.com/vuetifyjs/vuetify/commit/a71f396))\n* **VColorPicker:** align sliders with controls ([0d1ce90](https://github.com/vuetifyjs/vuetify/commit/0d1ce90))\n* **VDataTable:** improvements for sorting in mobile mode ([54affe1](https://github.com/vuetifyjs/vuetify/commit/54affe1))\n* **VDataTable:** keep fixed cells opaque when loading ([ddca6ca](https://github.com/vuetifyjs/vuetify/commit/ddca6ca))\n* **VGrid:** correct mapping for grid gap x/y ([65b4278](https://github.com/vuetifyjs/vuetify/commit/65b4278))\n* **VOtpInput:** handle deletion via onBeforeinput for mobile compatibility ([#22657](https://github.com/vuetifyjs/vuetify/issues/22657)) ([2f8a4f9](https://github.com/vuetifyjs/vuetify/commit/2f8a4f9))\n* **VPagination:** suppress browser spacing ([a6b7b93](https://github.com/vuetifyjs/vuetify/commit/a6b7b93))\n* **VSelect:** fix screenreader navigation to select options ([#22602](https://github.com/vuetifyjs/vuetify/issues/22602)) ([6c962b7](https://github.com/vuetifyjs/vuetify/commit/6c962b7))\n* **VSlideGroup:** don't read dom attributes in computed() ([a51b313](https://github.com/vuetifyjs/vuetify/commit/a51b313))\n* **VSlider:** reduce affix margins ([18af2d2](https://github.com/vuetifyjs/vuetify/commit/18af2d2))\n* **VSnackbar:** opaque background for transparent variants ([#22646](https://github.com/vuetifyjs/vuetify/issues/22646)) ([e83fa88](https://github.com/vuetifyjs/vuetify/commit/e83fa88))\n* **VTimeline:** keep dot border when using numeric dot size ([6764c95](https://github.com/vuetifyjs/vuetify/commit/6764c95))\n\n**:test_tube: Labs**\n\n* **VFileUpload:** `hide-browse` should hide divider as well\n* **VFileUpload:** expose `controlRef` for internal ``\n* **VFileUpload:** append instead of replacing files when `multiple`\n* **VFileUpload:** integrate VInput & split internal logic ([#22637](https://github.com/vuetifyjs/vuetify/issues/22637)) ([027ab86](https://github.com/vuetifyjs/vuetify/commit/027ab86))\n\n---\n\n### v3.12.3 (2026-03-12)\n\n**:wrench: Bug Fixes**\n\n* **hotkey:** add delimiter aliases without delimiter ambiguity ([#22635](https://github.com/vuetifyjs/vuetify/issues/22635)) ([0e6a9c6](https://github.com/vuetifyjs/vuetify/commit/0e6a9c6))\n* **router:** replace `next()` deprecated in Vue Router v5 ([#22643](https://github.com/vuetifyjs/vuetify/issues/22643)) ([4e93846](https://github.com/vuetifyjs/vuetify/commit/4e93846))\n* **VNavigationDrawer:** fully clip list item text in rail mode ([ab42b13](https://github.com/vuetifyjs/vuetify/commit/ab42b13))\n* **VNumberInput:** prevent input changes when readonly ([#22692](https://github.com/vuetifyjs/vuetify/issues/22692)) ([995989c](https://github.com/vuetifyjs/vuetify/commit/995989c))\n* **VSelect/VAutocomplete/VCombobox:** let focus leave to other fields ([3d33e2f](https://github.com/vuetifyjs/vuetify/commit/3d33e2f))\n* **VTimePicker:** keep hour value when changing AM/PM ([2c9cb0a](https://github.com/vuetifyjs/vuetify/commit/2c9cb0a))\n\n**:test_tube: Labs**\n\n* **VAvatarGroup:** ❗ change the `limit` behavior to cover overflow item ([5aefdac](https://github.com/vuetifyjs/vuetify/commit/5aefdac))\n\n---\n\n### v4.0.2 (2026-03-12)\n\n**:rocket: Features**\n\n* **icons:** add Material Symbols iconset via UnoCSS ([#22680](https://github.com/vuetifyjs/vuetify/issues/22680)) ([6c463c1](https://github.com/vuetifyjs/vuetify/commit/6c463c1))\n* **VDataTable:** expose prevPage, nextPage, setPage in bottom slot ([#22681](https://github.com/vuetifyjs/vuetify/issues/22681)) ([4d1aa79](https://github.com/vuetifyjs/vuetify/commit/4d1aa79))\n\n**:wrench: Bug Fixes**\n\n* **hotkey:** add delimiter aliases without delimiter ambiguity ([#22635](https://github.com/vuetifyjs/vuetify/issues/22635)) ([a639698](https://github.com/vuetifyjs/vuetify/commit/a639698))\n* **rounded:** add missing \"md\" size ([#22679](https://github.com/vuetifyjs/vuetify/issues/22679)) ([47cffdd](https://github.com/vuetifyjs/vuetify/commit/47cffdd))\n* **router:** replace `next()` deprecated in Vue Router v5 ([#22643](https://github.com/vuetifyjs/vuetify/issues/22643)) ([87c4129](https://github.com/vuetifyjs/vuetify/commit/87c4129))\n* **VDataTable:** respect disableSort prop for sortable header ([#22684](https://github.com/vuetifyjs/vuetify/issues/22684)) ([767b0e8](https://github.com/vuetifyjs/vuetify/commit/767b0e8))\n* **VFileInput:** correct VField ref type ([41a6063](https://github.com/vuetifyjs/vuetify/commit/41a6063))\n* **VGrid:** avoid warning about no-gutters being deprecated ([5d8ec63](https://github.com/vuetifyjs/vuetify/commit/5d8ec63))\n* **VNavigationDrawer:** fully clip list item text in rail mode ([6b448cd](https://github.com/vuetifyjs/vuetify/commit/6b448cd))\n* **VNumberInput:** prevent input changes when readonly ([#22692](https://github.com/vuetifyjs/vuetify/issues/22692)) ([2b1ed0d](https://github.com/vuetifyjs/vuetify/commit/2b1ed0d))\n* **VSelect/VAutocomplete/VCombobox:** let focus leave to other fields ([51196cf](https://github.com/vuetifyjs/vuetify/commit/51196cf))\n* **VTextarea:** correct VField ref type ([0d689aa](https://github.com/vuetifyjs/vuetify/commit/0d689aa))\n* **VTimePicker:** keep hour value when changing AM/PM ([b030df8](https://github.com/vuetifyjs/vuetify/commit/b030df8))\n\n**:test_tube: Labs**\n\n* **VAvatarGroup:** change the `limit` behavior to cover overflow item ([e580ebc](https://github.com/vuetifyjs/vuetify/commit/e580ebc))\n* **VCommandPalette:** add closeOnSelect prop and before-select event ([#22634](https://github.com/vuetifyjs/vuetify/issues/22634)) ([d534f79](https://github.com/vuetifyjs/vuetify/commit/d534f79))\n* **VCommandPalette:** correct name of the inner component ([bfed30c](https://github.com/vuetifyjs/vuetify/commit/bfed30c))\n\n---\n\n### v4.0.3 (2026-03-19)\n\n**:wrench: Bug Fixes**\n\n* **hotkey:** resilient sequence parsing ([#22704](https://github.com/vuetifyjs/vuetify/issues/22704)) ([cae1cea](https://github.com/vuetifyjs/vuetify/commit/cae1cea))\n* **md2:** restore correct global rounding ([6d1ef04](https://github.com/vuetifyjs/vuetify/commit/6d1ef04))\n* **VDataTable:** reactive items from `expanded` with `return-object` ([5d7af2c](https://github.com/vuetifyjs/vuetify/commit/5d7af2c))\n* **VExpansionPanels:** apply `rounded` only to the first and last panel when closed ([dbc7421](https://github.com/vuetifyjs/vuetify/commit/dbc7421))\n* **VGrid:** restore `no-gutters` instead of mapping to \"compact\" ([947d7d5](https://github.com/vuetifyjs/vuetify/commit/947d7d5))\n* **VSkeletonLoader:** less jitter when scrolling on slow device ([468ba314](https://github.com/vuetifyjs/vuetify/commit/468ba314))\n* **VTooltip:** correct selector for non-interactive tooltips ([15b3cbd](https://github.com/vuetifyjs/vuetify/commit/15b3cbd))\n\n**:test_tube: Labs**\n\n* **VMaskInput:** accept escaped characters in mask ([#22727](https://github.com/vuetifyjs/vuetify/issues/22727)) ([a5d1116](https://github.com/vuetifyjs/vuetify/commit/a5d1116))\n* **VProgress:** create new component ([#22682](https://github.com/vuetifyjs/vuetify/issues/22682)) ([122cdeb](https://github.com/vuetifyjs/vuetify/commit/122cdeb))\n* **VVideo:** add `hide-progress-bar` prop ([#22636](https://github.com/vuetifyjs/vuetify/issues/22636)) ([0e5a2cb](https://github.com/vuetifyjs/vuetify/commit/0e5a2cb))\n* **VVideo:** add `src-object` prop for MediaStream/WebRTC ([#22670](https://github.com/vuetifyjs/vuetify/issues/22670)) ([575e7c5](https://github.com/vuetifyjs/vuetify/commit/575e7c5))\n\n---\n\n### v3.12.4 (2026-03-25)\n\n**:wrench: Bug Fixes**\n\n* **VField:** label transition on page with zoom ([6246a96](https://github.com/vuetifyjs/vuetify/commit/6246a96))\n* **VTimePicker:** avoid loading all CSS utilities ([884e5dc](https://github.com/vuetifyjs/vuetify/commit/884e5dc))\n\n**:test_tube: Labs**\n\n* **VFileUpload:** adding/replacing files with dropzone click ([#22741](https://github.com/vuetifyjs/vuetify/issues/22741)) ([86f3568](https://github.com/vuetifyjs/vuetify/commit/86f3568))\n\n---\n\n### v4.0.4 (2026-03-25)\n\n**:wrench: Bug Fixes**\n\n* **VCol:** correct types for `offset-*` props ([1cdd9c4](https://github.com/vuetifyjs/vuetify/commit/1cdd9c4))\n* **VField:** label transition on page with zoom ([1fcad6b](https://github.com/vuetifyjs/vuetify/commit/1fcad6b))\n* **VSelect:** prevent brief error state when clicking a menu item ([7fec2d4](https://github.com/vuetifyjs/vuetify/commit/7fec2d4))\n* **VTimePicker:** avoid loading all CSS utilities ([015da52](https://github.com/vuetifyjs/vuetify/commit/015da52))\n\n**:test_tube: Labs**\n\n* **rules:** type resolution for custom rules ([#22701](https://github.com/vuetifyjs/vuetify/issues/22701)) ([053b605](https://github.com/vuetifyjs/vuetify/commit/053b605))\n* **VFileUpload:** adding/replacing files with dropzone click ([#22741](https://github.com/vuetifyjs/vuetify/issues/22741)) ([eb95c9e](https://github.com/vuetifyjs/vuetify/commit/eb95c9e))\n\n
\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nApril 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.\n\nOn 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.\n\n* The [Vuetify MCP server](https://github.com/vuetifyjs/mcp) now supports playground management—try creating a playground from your editor\n* [J-Sek's TailwindCSS guide](https://vuetifyjs.com/blog/building-with-vite-and-tailwindcss/) covers the recommended v4 + Tailwind setup\n\nVuetify is and always will be free and open source. If your team relies on the framework, consider supporting continued development through [Vuetify One](https://one.vuetifyjs.com/) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution helps us ship features like v0, the Nuxt Module, and migration tooling faster.\n\nThank you for being part of the Vuetify community. See you in April!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","frontmatter":{"layout":"blog","meta":{"title":"March 2026 Update","description":"March shipped 7 Vuetify patches while Vuetify0 reached v0.2.0 with 7 new headless components, the Nuxt Module beta, 10 CLI releases, and ESLint v4 rules.","keywords":"Vuetify March 2026, Vuetify0 v0.2.0, VCommandPalette, VProgress, Nuxt Module beta, Vuetify CLI, ESLint v4 migration"}},"isInternal":false,"tokens":12272,"sizeBytes":41924},{"name":"may-2025-update.md","path":"packages/docs/src/pages/en/blog/may-2025-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/may-2025-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: May 2025 Update\n description: May delivered significant progress on MCP, VDateInput enhancements, VNumberInput improvements, and ecosystem-wide improvements across Vuetify.\n keywords: Vuetify May 2025, Model Context Protocol, VDateInput, VNumberInput, Vuetify ecosystem\n---\n\n\n\n# May 2025 Update\n\nThis month brings exciting advancements across the Vuetify ecosystem, with major strides in AI integration, component refinements, and developer experience.\n\n---\n\n🖊️ John Leider • 📅 June 6th, 2025\n\n\n\n---\n\n## Expanding Horizons\n\nMay 2025 has been a month of significant progress for Vuetify, with key developments that enhance the framework's capabilities and developer experience. From the official release of [Vuetify MCP](https://github.com/vuetifyjs/mcp) (Model Context Protocol) to substantial improvements in core components like [VDateInput](https://vuetifyjs.com/components/date-inputs/); this month has set the stage for exciting future innovations.\n\n::: success\n\nCool example of the month: [VTreeview File structure](https://play.vuetifyjs.com/playgrounds/AbH9-w) by [Jacek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n- [Releases](#releases)\n- [Official @vuetify/mcp Release](#official-vuetifymcp-release)\n - [MCP Vuetify API Keys](#mcp-vuetify-api-keys)\n- [Framework](#framework)\n - [VDateInput Enhancements](#vdateinput-enhancements)\n - [VNumberInput](#vnumberinput)\n - [New Labs Component: VColorInput](#new-labs-component-vcolorinput)\n- [Ecosystem updates](#ecosystem-updates)\n \n - [Vuetify Bin](#vuetify-bin)\n - [Vuetify Issues Next in Testing](#vuetify-issues-next-in-testing)\n - [Vuetify Play Enhancements](#vuetify-play-enhancements)\n - [Vuetify ESLint Config](#vuetify-eslint-config)\n- [May 2025 Changelog](#may-2025-changelog)\n- [What's Next](#whats-next)\n\n---\n\n## Releases\n\nMay continued our steady release cadence with several patch updates addressing bugs and introducing minor enhancements. These releases focused on stability and performance improvements, ensuring that Vuetify remains a reliable foundation for your applications.\n\n![Hero image for latest release notes](https://cdn.vuetifyjs.com/docs/images/blog/may-2025-update/may-2025-release-note.png \"Latest release notes hero image\")\n\n**Details:**\n\n- [v3.8.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.4)\n- [v3.8.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.5)\n- [v3.8.6](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.6)\n- [v3.8.7](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.7)\n\n## Official @vuetify/mcp Release { #official-vuetifymcp-release }\n\nAfter months of development and anticipation, we're excited to announce that **@vuetify/mcp** is officially publicly available!\n\n\n\nThis implementation of the [Model Context Protocol](https://modelcontextprotocol.io/introduction) represents a fundamental shift in how developers can interact with Vuetify through AI-powered tools. Now you can provide up-to-date context for features, components, and best practices directly to AI applications, enhancing the accuracy and relevance of AI-generated code.\n\nThe Model Context Protocol (MCP) standardizes how applications provide context to LLMs, functioning like a \"USB-C port for AI applications.\"\n\nSetting up MCP is as simple as running the following in your terminal:\n\n```bash\nnpx -y @vuetify/mcp config\n```\n\nThis single command configures MCP for your development environment, giving AI tools instant access to up-to-date Vuetify context.\n\nOur implementation ensures that AI tools have access to the most up-to-date Vuetify documentation, components, and best practices, eliminating the frustration of outdated or incorrect AI-generated code.\n\nRecent additions to @vuetify/mcp include:\n\n- Improved installation process (one command installation) using `npx -y @vuetify/mcp config`\n- New tools for accessing release notes, directives, frequently asked questions, and more\n- Up next: Application upgrade between major versions\n\n\n\nThis release marks just the beginning of our MCP journey. We're actively working on expanding its capabilities and integrations, with a focus on making Vuetify development more intuitive and efficient than ever before.\n\n### MCP Vuetify API Keys\n\nLater in June, we'll be introducing a new API key system for MCP managed through Vuetify One. We will be rolling out special **primer** prompts that super charge how agents interact with Vuetify MCP for our Vuetify One subscribers.\n\n**Details:**\n\n- [@vuetify/mcp GitHub repository](https://github.com/vuetifyjs/mcp)\n- [Model Context Protocol documentation](https://modelcontextprotocol.io/introduction)\n\n## Framework\n\nWe continue to make improvements to the core framework, focusing on resolving bugs, iterating on Labs components, and preparing for the next minor release, v3.9.0, which is scheduled for June 2025. Here are a few highlights:\n\n### VDateInput Enhancements\n\nMay brought substantial improvements to several core components, with VDateInput receiving particular attention. The component now features enhanced parsing capabilities, improved validation, and more flexible configuration options. The spotlight for this month is on the [VDateInput](https://vuetifyjs.com/components/date-inputs/).\n\n\n\nFor details on other changes, please check the [May 2025 Changelog](#may-2025-changelog).\n\n**Details:**\n\n- [VDateInput input-format PR #21221](https://github.com/vuetifyjs/vuetify/pull/21221)\n- [VDateInput menu v-model PR #21298](https://github.com/vuetifyjs/vuetify/pull/21298)\n- [VDateInput validationValue PR #21408](https://github.com/vuetifyjs/vuetify/pull/21408)\n- [VDateInput common parser PR #21450](https://github.com/vuetifyjs/vuetify/pull/21450)\n- [VDateInput disable months/years PR #21466](https://github.com/vuetifyjs/vuetify/pull/21466)\n\n### VNumberInput\n\nThis month also saw multiple updates to the [VNumberInput](https://vuetifyjs.com/components/number-inputs/) component, including:\n\n- Improved append inner icon alignment\n- Enhanced touch pointer capture on controls\n- Better extraction of numbers from pasted text\n\n\n\n**Details:**\n\n- [VNumberInput inner spacing PR #21389](https://github.com/vuetifyjs/vuetify/pull/21389)\n- [VNumberInput touch pointer capture PR #21436](https://github.com/vuetifyjs/vuetify/pull/21436)\n- [VNumberInput paste text extraction PR #21263](https://github.com/vuetifyjs/vuetify/pull/21263)\n\n### New Labs Component: VColorInput { #new-labs-component-vcolorinput }\n\nThis month also saw the introduction of a new [VColorInput](https://vuetifyjs.com/components/color-inputs/) component in the Labs section. This component provides an intuitive interface for color selection and input, featuring integration with color pickers and text-based hex input. As a Labs component, VColorInput is available for testing and feedback as we refine its API and functionality.\n\nBasic usage is simple:\n\n```html\n\n\n\n```\n\n\n\nThe component supports both picker and text input modes, making it flexible for different use cases.\n\n**Details:**\n\n- [VColorInput introduction PR #20623](https://github.com/vuetifyjs/vuetify/pull/20623)\n\n## Ecosystem updates\n\nThe broader Vuetify ecosystem saw significant advancements in May, with improvements in developer tooling and infrastructure. These updates collectively enhance the developer experience and set the stage for future innovations.\n\n\n\n### Vuetify Bin\n\nYou can now choose a language for your code snippets in Vuetify Bin, improving syntax highlighting and code organization. This enhancement makes it easier to share and collaborate on code examples with proper language-specific formatting.\n\n\n\n### Vuetify Play Enhancements\n\nVuetify Play continues to evolve with new features and improvements that make it an even more powerful tool for exploring and experimenting with Vuetify components.\n\n\n\nKey enhancements to Vuetify Play include:\n\n- Added New File Explorer\n- Added Export-to-Vite functionality\n\nThese improvements make Vuetify Play more versatile and user-friendly, enabling developers to more effectively explore, test, and share Vuetify components and configurations.\n\n**Details:** [Vuetify Play](https://play.vuetifyjs.com/)\n\n### Vuetify Issues Next in Testing\n\nWe've published the new issue generator for testing, providing a new interface for creating and managing GitHub issues. Please drop us a line in [Discord](https://community.vuetifyjs.com/) if you have any feedback or suggestions.\n\n**Details:** [Issues-next deployment](https://issues-next.vuetifyjs.com/)\n\n### Vuetify ESLint Config\n\nv4.0.0 of the Vuetify ESLint config is now available, providing updated linting rules and configurations that align with the latest Vuetify standards and best practices. This major version includes improved TypeScript support and enhanced component-specific rules. The config is automatically included when [Creating a new project](https://vuetify.new/) and is recommended for all Vuetify projects.\n\n**Key improvements:**\n\n- Enhanced TypeScript integration\n- Updated component-specific linting rules\n- Better compatibility with modern JavaScript standards\n- Improved accessibility checks\n\n## May 2025 Changelog\n\nExpand this section to see the detailed changelog for May 2025, including bug fixes and enhancements.\n\n
\n\n### 🛠️ Bug Fixes\n\n- **VAutocomplete:** Re-evaluate dirty on external change [#21344](https://github.com/vuetifyjs/vuetify/issues/21344)\n- **VBottomNavigation:** Set inline margin to auto [#21357](https://github.com/vuetifyjs/vuetify/issues/21357)\n- **VDataTable:** Shift-click toggles only selectable rows [#21334](https://github.com/vuetifyjs/vuetify/issues/21334)\n- **VDataTableServer/Virtual:** Add generic headers type [#21327](https://github.com/vuetifyjs/vuetify/issues/21327)\n- **VDialog:** Focus on open only with scrim or retainFocus [#21343](https://github.com/vuetifyjs/vuetify/issues/21343)\n- **VField:** Prevent tab focus on clear icon [#19528](https://github.com/vuetifyjs/vuetify/issues/19528)\n- **VFileInput/VFileUpload:** Fix drop not calling change function [#21182](https://github.com/vuetifyjs/vuetify/issues/21182)\n- **VMenu:** Position relative to `visualViewport` when not zoomed [#21462](https://github.com/vuetifyjs/vuetify/issues/21462)\n- **VNumberInput:** Adjust inner spacing [#21389](https://github.com/vuetifyjs/vuetify/issues/21389)\n- **VNumberInput:** Capture touch pointer on controls [#21436](https://github.com/vuetifyjs/vuetify/issues/21436)\n- **VNumberInput:** Extract number from pasted text [#21263](https://github.com/vuetifyjs/vuetify/issues/21263)\n- **VOverlay:** Validate target positioning [#21350](https://github.com/vuetifyjs/vuetify/issues/21350)\n- **VPagination:** Adapt button width for large values [#21139](https://github.com/vuetifyjs/vuetify/issues/21139)\n- **VSelect:** Keyboard match multiple items with same prefix [#21419](https://github.com/vuetifyjs/vuetify/issues/21419)\n- **VSelect:** Prevent selection on lookup in multiple mode [#21418](https://github.com/vuetifyjs/vuetify/issues/21418)\n- **VSnackbarQueue:** Prevent infinite recursion in message type [#21410](https://github.com/vuetifyjs/vuetify/issues/21410)\n- **VTable:** Remove border radius with top/bottom [#21320](https://github.com/vuetifyjs/vuetify/issues/21320) [#21321](https://github.com/vuetifyjs/vuetify/issues/21321)\n- **VTextField:** Reset field on clear [#21310](https://github.com/vuetifyjs/vuetify/issues/21310)\n- **VTooltip:** Disable transition when set to false [#21268](https://github.com/vuetifyjs/vuetify/issues/21268)\n\n### 🧪 Labs\n\n- **validation:** Resolve global rules [#21267](https://github.com/vuetifyjs/vuetify/issues/21267)\n- **VColorInput:** Introduced new component [#20623](https://github.com/vuetifyjs/vuetify/issues/20623)\n- **VDateInput:** Accept value on hidden picker [#21273](https://github.com/vuetifyjs/vuetify/issues/21273)\n- **VDateInput:** Add `input-format` prop [#21221](https://github.com/vuetifyjs/vuetify/issues/21221)\n- **VDateInput:** Add `update-on` prop [#21249](https://github.com/vuetifyjs/vuetify/issues/21249)\n- **VDateInput:** Expose menu as `v-model` [#21298](https://github.com/vuetifyjs/vuetify/issues/21298)\n- **VDateInput:** Reset model to \\[] when multiple [#21299](https://github.com/vuetifyjs/vuetify/issues/21299)\n- **VDateInput:** Sync placeholder and locale [#21409](https://github.com/vuetifyjs/vuetify/issues/21409)\n- **VDateInput:** Validation sync with `modelValue` [#21408](https://github.com/vuetifyjs/vuetify/issues/21408)\n- **VTimePicker:** Fix SSR hydration mismatch [#21355](https://github.com/vuetifyjs/vuetify/issues/21355)\n\n### 🔄 Reverts\n\n- Revert fix for **VAutocomplete** dirty state change [#21392](https://github.com/vuetifyjs/vuetify/issues/21392)\n\n### 🧩 Code Refactoring\n\n- Resolve directives directly [#21413](https://github.com/vuetifyjs/vuetify/issues/21413)\n- Use `clamp()` utility function [commit](https://github.com/vuetifyjs/vuetify/commit/6784ba7aae029c3e25dd92197c5b5d19feb43430)\n\n
\n\n---\n\n## What's Next { #whats-next }\n\nJune is all about shipping. MCP gets API keys and primer prompts, v3.9.0 lands with the features we've been building, and we'll start showing off more of the new theming work in the release blog post coming next week. VDateInput will likely graduate from Labs soon, and we've got some performance improvements in the pipeline that I'm excited about.\n\nUntil next month!\n","frontmatter":{"layout":"blog","meta":{"title":"May 2025 Update","description":"May delivered significant progress on MCP, VDateInput enhancements, VNumberInput improvements, and ecosystem-wide improvements across Vuetify.","keywords":"Vuetify May 2025, Model Context Protocol, VDateInput, VNumberInput, Vuetify ecosystem"}},"isInternal":false,"tokens":3988,"sizeBytes":15761},{"name":"may-2026-update.md","path":"packages/docs/src/pages/en/blog/may-2026-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/may-2026-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: May 2026 Update\n description: May shipped Vuetify 4.1 — seven labs promotions, four new components, and a wave of fixes across four releases, with Vuetify0 racing toward its own beta.\n keywords: Vuetify May 2026, Vuetify 4.1 Ascendant, labs promotion, VHeatmap, VHighlight, VMonthPicker, VDateRangePicker, Vuetify0 drag and drop, createSortable, createKanban\n---\n\n\n\n# May 2026 Update\n\n**May was a feature-focused sprint.** With Vuetify 4 stable since February, we spent the month building out the first minor — and on May 21 that work opened [v4.1.0](/getting-started/release-notes/?version=v4.1.0). The whole month ran at full throttle, working through a long backlog of features and fixes we had lined up for v4.1: **seven components promoted out of labs**, four brand-new ones, and a broad sweep of new props and bug fixes across the framework. Four releases shipped over the month, while Vuetify0 ran in parallel toward its own beta.\n\n![Hero image for May update](https://cdn.vuetifyjs.com/docs/images/blog/may-2026-update/may-hero.png \"May hero image\"){ height=112 }\n\n🖊️ Jacek Czarniecki • 📅 June 5th, 2026\n\n\n\n---\n\n## A release chock-full of goodies\n\nMay was our busiest framework month of the year so far, and nearly all of it pointed at one goal: shipping v4.1. **89 commits**, **34 features**, **19 fixes**, and **4 releases**, with [v4.1.0](/getting-started/release-notes/?version=v4.1.0) at the center. Rather than spreading ourselves across the ecosystem, we put the energy into clearing the framework backlog — graduating labs components that had earned their place, finishing half-built features, and dealing with the fixes that had to land before the minor. The effort shows up in the numbers: open issues dropped from 436 at the start of May to 386 by the 31st — and zooming out, the backlog is down 22% over the last three months. Meanwhile [Vuetify0](https://0.vuetifyjs.com/) wrapped up its alpha work with a headless drag-and-drop family and a testing push that set up the [beta announced June 2](/blog/announcing-vuetify0-beta/).\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Spotlight: Vuetify 4.1](#vuetify-4-1)\n* [Framework Updates](#framework-updates)\n * [New Components](#new-components)\n * [Out of Labs](#out-of-labs)\n * [New Features](#new-features)\n * [Bug Fixes](#bug-fixes)\n* [Vuetify0 Progress Update](#vuetify0-progress)\n* [Product Updates](#product-updates)\n* [May 2026 Changelog](#may-2026-changelog)\n* [What's Next](#whats-next)\n * [Looking Further Ahead](#looking-ahead)\n\n---\n\n## Releases\n\nMay shipped **four framework releases**. [v4.0.7](/getting-started/release-notes/?version=v4.0.7) (May 8) was a patch with seven bug fixes. The feature work then opened the [v4.1.0](/getting-started/release-notes/?version=v4.1.0) minor — a first drop on May 21 carried the labs promotions and new components, and a May 28 follow-up focused on data table accessibility. A [v4.0.8](/getting-started/release-notes/?version=v4.0.8) patch (May 29) shipped a round of fixes on the stable v4.0 line — the same fixes that merge forward into v4.1.\n\n\n\n### Key Improvements\n\n* **[Vuetify 4.1](/getting-started/release-notes/?version=v4.1.0)** — first minor since 4.0.0, with seven labs promotions and four new components\n* **[VHeatmap](/components/heatmaps/)** — new component for calendar/grid heatmaps (v4.1)\n* **[VHighlight](/components/highlights/)** — new component for highlighting matched text (v4.1)\n* **[VMonthPicker](/components/month-pickers/) / [VDateRangePicker](/components/date-pickers/)** — new date components (v4.1)\n* **[VFileUpload](/components/file-upload/), [VDateInput](/components/date-inputs/), [VColorInput](/components/color-inputs/), [VIconBtn](/components/icon-buttons/), [VPicker](/components/pickers/), [VStepperVertical](/components/vertical-steppers/), [VPullToRefresh](/components/pull-to-refresh/)** — promoted from labs to core\n* **[VSparkline](/components/sparklines/)** — interactive markers, a vertical guideline, and hover tooltips (v4.1)\n* **[VOtpInput](/components/otp-input/)** — field grouping, a11y improvements, and emoji support (v4.1)\n* **[VOverlay](/components/overlays/) / [VCommandPalette](/components/command-palette/)** — viewport location strategy for precise placement (v4.1)\n\nView the complete list of changes in the [Full Changelog](#may-2026-changelog).\n\n**Details:**\n\n* [v4.1.0](https://vuetifyjs.com/getting-started/release-notes/?version=v4.1.0)\n* [v4.0.8](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.8)\n* [v4.0.7](https://vuetifyjs.com/getting-started/release-notes/?version=v4.0.7)\n\n---\n\n## Spotlight: Vuetify 4.1 (Ascendant) { #vuetify-4-1 }\n\n\n\n
\n\nAfter February's stable [Vuetify 4.0.0](/blog/february-2026-update/) and a string of patches, **May opened the first minor of the v4 line**. [v4.1.0](/getting-started/release-notes/?version=v4.1.0) is a feature release rather than a fix release — its theme is graduating components that proved themselves in labs, adding new ones, and expanding data table and date picker functionality.\n\nThe headline is volume. **Seven components moved out of labs** into core in a single release, and **four entirely new components** joined the framework. Alongside them came a wave of feature props across data tables, pickers, overlays, and the theme system — the breadth you'd expect from a minor, not a patch.\n\nThe work shipped in two drops in May — May 21 and May 28 — with the later one dedicated almost entirely to data table and table accessibility.\n\n**Details:**\n\n* [v4.1 Release Notes](/getting-started/release-notes/?version=v4.1.0)\n* [Roadmap](/introduction/roadmap/)\n\n---\n\n## Framework Updates\n\n### New Components\n\nFour new components landed in v4.1:\n\n**[VHeatmap](/components/heatmaps/)** — A calendar/grid heatmap for visualizing values across a matrix of cells, with a configurable legend, group gaps, and rounded cells ([#22535](https://github.com/vuetifyjs/vuetify/pull/22535)).\n\n**[VHighlight](/components/highlights/)** — Highlights matched substrings within text — useful for search results, filtering, and command palettes. It pairs with the `toHighlight` transformer being added in v0 ([#22817](https://github.com/vuetifyjs/vuetify/pull/22817)).\n\n**[VMonthPicker](/components/month-pickers/)** — A dedicated month-and-year selection component, split out from the date picker family ([#22534](https://github.com/vuetifyjs/vuetify/pull/22534)).\n\n**[VDateRangePicker](/components/date-pickers/)** — Range selection as a first-class component, with MD3-aligned range styling and keyboard grid navigation ([#22860](https://github.com/vuetifyjs/vuetify/pull/22860)).\n\n### Out of Labs\n\nSeven components graduated from labs to core in v4.1. For most of them this is just a formality — they've been stable and largely untouched since 2025, so the promotion simply acknowledges APIs that had already settled. VFileUpload is the exception, picking up real additions on its way out:\n\n* **[VFileUpload](/components/file-upload/)** — also gained a `loading` prop and support for pasting files and folders\n* **[VDateInput](/components/date-inputs/)**\n* **[VColorInput](/components/color-inputs/)**\n* **[VIconBtn](/components/icon-buttons/)**\n* **[VPicker](/components/pickers/)**\n* **[VStepperVertical](/components/vertical-steppers/)**\n* **[VPullToRefresh](/components/pull-to-refresh/)**\n\n### New Features\n\n**[VDataTable](/components/data-tables/basics/)** — The data table received the most attention of any component this month. Some additions are quick to summarize: search-match highlighting ([#22852](https://github.com/vuetifyjs/vuetify/pull/22852)), a mobile header slot ([#21429](https://github.com/vuetifyjs/vuetify/pull/21429)), and full ARIA support — `aria-sort` on sortable headers and labels for selection controls. Others deserve a closer look:\n\n* The new **`expanded`** slot ([#22871](https://github.com/vuetifyjs/vuetify/pull/22871)) renders custom detail content with a built-in transition, and the accompanying **`expand-strategy`** prop makes the table behave like an accordion — set it to `\"single\"` and opening one row collapses the others, no extra state-juggling required (`expand-transition` can swap or disable the animation).\n* **`v-model:opened`** ([#22772](https://github.com/vuetifyjs/vuetify/pull/22772)) two-way binds which groups are open and adds an `open-all` prop and a custom `group-key`, which lets you drive group state from code — expand everything by default, or save and restore a user's open groups across sessions.\n* The **`loading`** prop now accepts a `{ side, color }` object ([#22872](https://github.com/vuetifyjs/vuetify/pull/22872)), which lets you place the progress bar on a chosen edge — for example, at the bottom to signal a load-more-on-scroll footer is fetching the next page.\n* Filtered **`itemsLength`** in slot props ([#22874](https://github.com/vuetifyjs/vuetify/pull/22874)) exposes the post-filter row count, which closes the last gap to fully replacing `VDataTableFooter` with your own — you can now render \"X results\" and wire pagination from the slot without reaching into the table's internals.\n\n**[VOtpInput](/components/otp-input/)** — Fields can now be grouped into segments, with accessibility improvements and emoji support, co-authored by [Yanis-Riani](https://github.com/Yanis-Riani) ([#22803](https://github.com/vuetifyjs/vuetify/pull/22803)).\n\n**[VSparkline](/components/sparklines/)** — gained `interactive` prop to show markers, a vertical guideline, and hover tooltips ([#22748](https://github.com/vuetifyjs/vuetify/pull/22748)).\n\n\n\n**[VOverlay](/components/overlays/) and [VCommandPalette](/components/command-palette/)** — A new viewport location strategy lets overlays enforce a specific on-screen placement ([#22698](https://github.com/vuetifyjs/vuetify/pull/22698)), and `location`/`origin` now behave the way you'd expect ([#22720](https://github.com/vuetifyjs/vuetify/pull/22720)).\n\n**[VTable](/components/tables/)** — Added a `caption` slot with pass-through of `aria-*` attributes and a `gridlines` prop ([#22873](https://github.com/vuetifyjs/vuetify/pull/22873)).\n\n**[VDatePicker](/components/date-pickers/)** — Keyboard-arrow navigation in the selection grid ([#22857](https://github.com/vuetifyjs/vuetify/pull/22857)) plus MD3-aligned range selection ([#22858](https://github.com/vuetifyjs/vuetify/pull/22858)).\n\n![Date Picker - new range selection](https://cdn.vuetifyjs.com/docs/images/blog/may-2026-update/date-picker.png)\n\n**[VNumberInput](/components/number-inputs/)** — The new `grouping` prop is a deep piece of work, not just a thousands-separator toggle ([#22134](https://github.com/vuetifyjs/vuetify/pull/22134)). It applies locale-aware grouping and decimal separators that hold together while you type, paste, cut, and delete — the separators reflow as you edit rather than only on blur — honors custom decimal and group separators.\n\n**[VProgressLinear](/components/progress-linear/)** — A new `split` variant aligns the bar with Material Design 3, drawing a gap between the filled portion and the remaining track instead of one continuous line ([#22662](https://github.com/vuetifyjs/vuetify/pull/22662)). It reworked how the bar's chunks are calculated and rendered to match the MD3 progress indicator.\n\n**Arbitrary `rounded` values** — The list is already long, but this one earns its spot ([#22721](https://github.com/vuetifyjs/vuetify/pull/22721)): `rounded` now accepts any value, finally letting you break out of the strict `sm`/`md`/`lg`/`xl` scale and dial in the exact corner radius your design calls for.\n\n\n\n**[VSwitch](/components/switches/)** — Late in the month, the switch was aligned with the MD3 spec ([#22879](https://github.com/vuetifyjs/vuetify/pull/22879)) and gained a `size` prop ([#22882](https://github.com/vuetifyjs/vuetify/pull/22882)) and a `square` inset variant ([#22881](https://github.com/vuetifyjs/vuetify/pull/22881)).\n\n\n\nRounding out the month, a handful of smaller additions: `VCalendar` gained 24-hour support ([#22853](https://github.com/vuetifyjs/vuetify/pull/22853)), the theme system picked up optional page transitions ([#22623](https://github.com/vuetifyjs/vuetify/pull/22623)), and a `hover-elevation` prop with matching CSS utilities ([#22621](https://github.com/vuetifyjs/vuetify/pull/22621)) and a long awaited `color` prop for `VTooltip` ([#19689](https://github.com/vuetifyjs/vuetify/pull/19689)).\n\n### Bug Fixes\n\n| Component | Fix | Version | PR |\n|-----------------------------------------|--------------------------------------------------|---------|-----------------------------------------------------------|\n| **VAlert** | Border opacity should win over theme variables | v4.0.7 | [#22832](https://github.com/vuetifyjs/vuetify/pull/22832) |\n| **VTreeview / VList** | Wire `value-comparator` into selection logic | v4.0.7 | [#22841](https://github.com/vuetifyjs/vuetify/pull/22841) |\n| **VField** | Correct baseline alignment | v4.0.7 | [#22812](https://github.com/vuetifyjs/vuetify/pull/22812) |\n| **VCheckbox** | Align indeterminate opacity and color with MD3 | v4.1.0 | [#22804](https://github.com/vuetifyjs/vuetify/pull/22804) |\n| **VSnackbarQueue** | Avoid stale z-index | v4.1.0 | [#22796](https://github.com/vuetifyjs/vuetify/pull/22796) |\n| **VProgressLinear** | Correct calculation for filled chunks | v4.0.7 | — |\n| **VBtnToggle** | Correct background when active | v4.0.7 | — |\n| **VHover** | Reconcile actual hover state when re-enabled | v4.1.0 | [#22845](https://github.com/vuetifyjs/vuetify/pull/22845) |\n| **VAutocomplete / VCombobox** | Click in empty space should not close menu | v4.0.8 | [#22754](https://github.com/vuetifyjs/vuetify/pull/22754) |\n| **VSelect / VAutocomplete / VCombobox** | Keep menu open when scrolling | v4.0.8 | [#22877](https://github.com/vuetifyjs/vuetify/pull/22877) |\n| **VOverlay** | Restore focus without preventing Enter keydown | v4.0.8 | [#22276](https://github.com/vuetifyjs/vuetify/pull/22276) |\n| **theme** | Support transparent hex color for CSS variables | v4.0.8 | [#22875](https://github.com/vuetifyjs/vuetify/pull/22875) |\n| **VForm** | Avoid eager `.value` reads in default slot props | v4.0.8 | [#22846](https://github.com/vuetifyjs/vuetify/pull/22846) |\n| **VProgressLinear** | Avoid `opacity:NaN` when rendering with SSR | v4.1.0 | [#22880](https://github.com/vuetifyjs/vuetify/pull/22880) |\n| **focusTrap** | Prevent page scroll when capturing focus | v4.1.0 | — |\n\n---\n\n## Vuetify0 Progress Update { #vuetify0-progress }\n\n\n\n
\n\nMay was Vuetify0's bridge from alpha to beta — **163 commits** across **three releases** ([v1.0.0-alpha.3](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.3) on May 5, [alpha.4](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.4) on May 12, [alpha.5](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.5) on May 19). The headline addition was a **headless drag-and-drop family** — three composables that handle state and behavior only, with no markup or styling — alongside a testing and hardening push that set up the [beta announced on June 2](/blog/announcing-vuetify0-beta/).\n\n\n\n### Drag and Drop\n\n* **[useDragDrop](https://0.vuetifyjs.com/composables/system/use-drag-drop)** ([#225](https://github.com/vuetifyjs/0/pull/225)) — the base primitive: a pointer and keyboard input adapter owning two registries (draggables and drop zones) plus the active-drag state.\n* **[createSortable](https://0.vuetifyjs.com/composables/data/create-sortable)** ([#231](https://github.com/vuetifyjs/0/pull/231)) — ordered-list state with `move`, `swap`, and `reorder` mutations and a typed `move:ticket` event. No DOM or input handling of its own, so it can be driven from buttons, gestures, or server updates.\n* **[createKanban](https://0.vuetifyjs.com/composables/data/create-kanban)** ([#234](https://github.com/vuetifyjs/0/pull/234)) — two levels of `createSortable` (columns and items) plus a `transfer` method for moving items between columns.\n\n### Other Additions\n\n* **[createOtp](https://0.vuetifyjs.com/composables/forms/create-otp)** ([#238](https://github.com/vuetifyjs/0/pull/238)) — state and focus management for one-time-code inputs.\n* **[Overflow](https://0.vuetifyjs.com/components/semantic/overflow)** ([#220](https://github.com/vuetifyjs/0/pull/220)) — a container that detects overflow and exposes scroll state to children.\n* **[toHighlight](https://0.vuetifyjs.com/composables/transformers/to-highlight)** ([#222](https://github.com/vuetifyjs/0/pull/222)) — a transformer that marks matched substrings, the companion to VHighlight.\n* **useDelay** ([#224](https://github.com/vuetifyjs/0/pull/224)) — debounce and delayed-execution timing.\n* **Avatar** ([#245](https://github.com/vuetifyjs/0/pull/245)) — added `Avatar.Group` and `Avatar.Indicator` compound parts.\n\n`createRegistry`, which the stateful composables build on, also gained a bulk `reorder` primitive and an `offboard` that returns removed entries — the latter is what `createKanban` uses to move items between columns.\n\n### Genesis Design System\n\nMay also brought the first design system built on Paper: **[@paper/genesis](https://github.com/vuetifyjs/0/pull/240)** — a minimal set of docs primitives extracted from the v0 documentation site. It's an early, working example of the Paper layer the rest of the ecosystem will build on.\n\n### Testing and Performance\n\nBy the end of the alpha cycle, v0 had **5,700+ unit tests** across 142 spec files, **98.7% average coverage** across 105 primitives, and 12 benchmark suites covering hot paths like `createDataTable`, `createFilter`, and the registry core. `createSortable`'s reorder was rewritten to use the registry's bulk operation instead of a per-item loop.\n\n::: success\n\n**Adopting Vuetify0 for your business?** Teams building production design systems, internal tooling, or product UI on top of v0 can [reach out](mailto:john@vuetifyjs.com) to talk through adoption, partnership, and roadmap input.\n\n:::\n\n**Details:**\n\n* [Announcing the Vuetify0 Beta](/blog/announcing-vuetify0-beta/)\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [v1.0.0-alpha.5 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.5)\n* [v1.0.0-alpha.4 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.4)\n* [v1.0.0-alpha.3 Release](https://0.vuetifyjs.com/releases/?version=v1.0.0-alpha.3)\n* [useDragDrop PR#225](https://github.com/vuetifyjs/0/pull/225)\n* [createSortable PR#231](https://github.com/vuetifyjs/0/pull/231)\n* [createKanban PR#234](https://github.com/vuetifyjs/0/pull/234)\n* [Genesis Design System PR#240](https://github.com/vuetifyjs/0/pull/240)\n\n---\n\n## Product Updates\n\n### Vuetify One\n\n\n\n
\n\nA new [enterprise sponsorship landing page](https://github.com/vuetifyjs/vuetify/pull/22813) was added for teams that want to support the framework at the organization level. The docs also picked up an upgrade-guide pass — a [CSS reset fallback for non-Sass setups](https://github.com/vuetifyjs/vuetify/pull/22821), a more conservative typography mapping, and codemod annotations — to smooth the v3 → v4 migration.\n\n### Nuxt Module\n\n[Andrei Elkin](https://github.com/AndreyYolkin) kept pushing the [Nuxt Module](https://github.com/vuetifyjs/nuxt-module) toward a stable v1, with `beta.3` (May 3) and `beta.4` (May 7) and a focus on more reliable package resolution. That work carried into June — we'll cover it in the next update, so stay tuned.\n\n---\n\n## May 2026 Changelog\n\nThe following section provides an overview of the changes made in May 2026 across the Vuetify framework.\n\n**Key Improvements:**\n\n* v4.0.7: bug-fix patch — VAlert border opacity, VTreeview/VList value-comparator, VField baseline, VProgressLinear chunks, VBtnToggle, VList focus, VSelects contentClass\n* v4.1.0: seven labs promotions, new VHeatmap/VHighlight/VMonthPicker/VDateRangePicker, VSparkline markers, VOtpInput groups, VOverlay viewport strategy, theme page transitions, VTooltip cursor target, VExpansionPanels customization, VNumberInput grouping, VPagination/VDataTableFooter hide-last-page, plus VDataTable/VTable accessibility (aria-sort, aria-labels, caption slot, gridlines)\n* v4.0.8: stable-line fixes — VSelect/VAutocomplete/VCombobox menu, VOverlay focus, theme transparent hex, VForm slot perf\n\n**Expand** this section to see the detailed changelog for May 2026:\n\n
\nMay 2026 Full Changelog\n\n### v4.0.7 (2026-05-08)\n\n**:wrench: Bug Fixes**\n\n* **VAlert:** border opacity should win over theme variables ([#22832](https://github.com/vuetifyjs/vuetify/issues/22832))\n* **VTreeview, VList:** wire `value-comparator` into selection logic ([#22841](https://github.com/vuetifyjs/vuetify/issues/22841))\n* **VField:** correct baseline alignment ([#22812](https://github.com/vuetifyjs/vuetify/issues/22812))\n* **VProgressLinear:** correct calculation for filled chunks\n* **VBtnToggle:** correct background when active\n* **VList:** invisibly focus first element after open\n* **VSelects:** merge `menuProps.contentClass`\n\n---\n\n### v4.1.0-beta.0 (2026-05-21)\n\n**:rocket: Features**\n\n* **VFileUpload:** promote from labs; add `loading` prop\n* **VFileInput, VFileUpload:** support pasting files and folders\n* **VIconBtn:** promote from labs\n* **VDateInput:** promote from labs\n* **VStepperVertical:** promote from labs\n* **VColorInput:** promote from labs\n* **VPicker:** promote from labs\n* **VPullToRefresh:** promote from labs\n* **VHeatmap:** add new component ([#22535](https://github.com/vuetifyjs/vuetify/issues/22535))\n* **VHighlight:** add new component ([#22817](https://github.com/vuetifyjs/vuetify/issues/22817))\n* **VMonthPicker:** add new component ([#22534](https://github.com/vuetifyjs/vuetify/issues/22534))\n* **VDateRangePicker:** add new component ([#22860](https://github.com/vuetifyjs/vuetify/issues/22860))\n* **VSparkline:** markers & tooltips ([#22748](https://github.com/vuetifyjs/vuetify/issues/22748))\n* **VOtpInput:** groups, a11y improvements, emoji ([#22803](https://github.com/vuetifyjs/vuetify/issues/22803))\n* **VDataTable:** highlight search matches ([#22852](https://github.com/vuetifyjs/vuetify/issues/22852)); add mobile header slot ([#21429](https://github.com/vuetifyjs/vuetify/issues/21429)); add `v-model:opened` for group-by ([#22772](https://github.com/vuetifyjs/vuetify/issues/22772))\n* **vCalendar:** 24hour support ([#22853](https://github.com/vuetifyjs/vuetify/issues/22853))\n* **VDatePicker:** keyboard arrows navigation in selection grid ([#22857](https://github.com/vuetifyjs/vuetify/issues/22857))\n* **theme:** add optional page transitions ([#22623](https://github.com/vuetifyjs/vuetify/issues/22623))\n* **elevation:** add `hover-elevation` prop and CSS utilities ([#22621](https://github.com/vuetifyjs/vuetify/issues/22621))\n* **rounded:** accept arbitrary values ([#22721](https://github.com/vuetifyjs/vuetify/issues/22721))\n* **VCommandPalette, VOverlay:** introduce viewport location strategy ([#22698](https://github.com/vuetifyjs/vuetify/issues/22698))\n* **VProgressLinear:** add `split` variant to align with MD3 ([#22662](https://github.com/vuetifyjs/vuetify/issues/22662))\n* **VTooltip:** add `color` prop ([#19689](https://github.com/vuetifyjs/vuetify/issues/19689)); `target=\"cursor\"` should work for hoverable tooltips ([#22728](https://github.com/vuetifyjs/vuetify/issues/22728))\n* **VExpansionPanels:** add more props for customization ([#22723](https://github.com/vuetifyjs/vuetify/issues/22723))\n* **VNumberInput:** add `grouping` prop ([#22134](https://github.com/vuetifyjs/vuetify/issues/22134))\n* **VPagination, VDataTableFooter:** ability to hide last page ([#22788](https://github.com/vuetifyjs/vuetify/issues/22788))\n* **VTreeview:** bind indentLines to item slot\n* **VColorPicker:** add `hide-input-labels` prop\n\n**:wrench: Bug Fixes**\n\n* **VHover:** reconcile actual hover state when re-enabled ([#22845](https://github.com/vuetifyjs/vuetify/issues/22845))\n* **VCheckbox:** align indeterminate opacity and color with MD3 ([#22804](https://github.com/vuetifyjs/vuetify/issues/22804))\n* **VSnackbarQueue:** avoid stale z-index ([#22796](https://github.com/vuetifyjs/vuetify/issues/22796))\n* **VDatePicker:** align range selection with MD3 ([#22858](https://github.com/vuetifyjs/vuetify/issues/22858))\n* **VOverlay:** make `location` and `origin` actually useful ([#22720](https://github.com/vuetifyjs/vuetify/issues/22720)); `contained` should opt-out from static strategy\n* **Dialog, VSnackbar:** correct position with static location strategy\n\n---\n\n### v4.1.0-beta.1 (2026-05-28)\n\n**:rocket: Features**\n\n* **VTable:** add `caption` slot and pass aria-* to `
`; add `gridlines` prop ([#22873](https://github.com/vuetifyjs/vuetify/issues/22873))\n* **VDataTable:** add aria-sort to sortable headers; add aria-labels for selection controls; `loading` prop to accept object with `side` ([#22872](https://github.com/vuetifyjs/vuetify/issues/22872)); add `expanded` slot with transition support ([#22871](https://github.com/vuetifyjs/vuetify/issues/22871)); add filtered `itemsLength` to slot props ([#22874](https://github.com/vuetifyjs/vuetify/issues/22874))\n* **VRating:** expose activeColor in item slot props ([#22814](https://github.com/vuetifyjs/vuetify/issues/22814))\n\n**:wrench: Bug Fixes**\n\n* **theme:** support transparent hex color for CSS variables ([#22875](https://github.com/vuetifyjs/vuetify/issues/22875))\n* **VForm:** avoid eager `.value` reads in default slot props ([#22846](https://github.com/vuetifyjs/vuetify/issues/22846))\n* **VBtnToggle:** restore active overlay when no color is set\n* **VOverlay:** pull focus to trap when it briefly escapes\n\n---\n\n### v4.0.8 (2026-05-29)\n\n**:wrench: Bug Fixes**\n\n* **VSelect/VAutocomplete/VCombobox:** keep menu open when scrolling ([#22877](https://github.com/vuetifyjs/vuetify/issues/22877))\n* **VAutocomplete/VCombobox:** click in empty space should not close menu ([#22754](https://github.com/vuetifyjs/vuetify/issues/22754))\n* **VOverlay:** restore focus without preventing Enter keydown ([#22276](https://github.com/vuetifyjs/vuetify/issues/22276))\n* **theme:** support transparent hex color for CSS variables ([#22875](https://github.com/vuetifyjs/vuetify/issues/22875))\n* **VForm:** avoid eager `.value` reads in default slot props ([#22846](https://github.com/vuetifyjs/vuetify/issues/22846))\n* **VSwitch:** suppress user-agent styles to avoid click dead-zone\n\n\n\n---\n\n## What's Next { #whats-next .mt-4 }\n\nJune stabilizes what May opened. **Vuetify 4.1** moves toward its stable release, with a final round of VSwitch MD3 work, VExpansionPanel focus polish, and the SSR and focus-trap fixes that landed late in the month. **Vuetify0** reached [beta on June 2](/blog/announcing-vuetify0-beta/) with its API frozen — from here the focus is edge cases, documentation, and the road to v1.0 in July. And the **theme**, **locale**, and **date** v0 migrations in the framework now have a frozen target to build against.\n\n* [Vuetify 4.1](/getting-started/release-notes/?version=v4.1.0) is live — try the new components and labs promotions in your project today\n* The [Vuetify0 beta](/blog/announcing-vuetify0-beta/) froze its public API ahead of v1 — try it via [v0play](https://v0play.vuetifyjs.com)\n\n### Looking Further Ahead { #looking-ahead }\n\nLooking past June, the theme for the rest of the year is a simple one: **finishing what we started**.\n\n**A focused roadmap, and a clean finish for labs**: We've deliberately narrowed our roadmap commitments for the remainder of 2026 to concentrate the team on one outcome — **by November 1st, 2026, labs will be drained**. Every component still incubating will either graduate into core or be retired; nothing will be left sitting in an \"unfinished\" state. This isn't just housekeeping — a stable framework API is the foundation for a smooth migration as Vuetify0 moves in underneath.\n\n**A community-driven issue board**: We're building a curated view into the issue board where the community can surface and vote on what matters most. Today, prioritization happens largely behind the scenes — this opens a direct line into what we tackle next, and gives us a far clearer read on where the framework's real pain points and most-wanted features actually are. We'll share more as it takes shape.\n\n**A modernized docs experience (later this year)**: We're planning a significant UX upgrade to Vuetify documentation pages, porting over many of the features introduced first to the [Vuetify0 documentation](https://0.vuetifyjs.com/). For a preview of where we're headed, you are more than welcome to spend some time in the [v0 docs](https://0.vuetifyjs.com/) — the navigation, search, and interactive code samples there are an early taste of what's coming.\n\n**Community snips**: [Vuetify Snips](https://snips.vuetifyjs.com/) has always been a hand-curated collection, but we know plenty of talented community members are sitting on gems worth sharing. Once [Vuetify Play](https://play.vuetifyjs.com) gets the stability overhaul it deserves, we'd like to open the door to community submissions — a curated set of community snips contributed by you. It's early days for this one, but it's something we're excited about.\n\n::: error\n\n**Vuetify needs your support.** OpenCollective funds are exhausted and we're currently unable to compensate contributors for ongoing work on the framework and ecosystem tools. If your team relies on Vuetify, please consider sponsoring us via [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider). Every contribution keeps Vuetify shipping.\n\n:::\n\nVuetify is and always will be free and open source. If your team builds on the framework, the v0 beta, the MCP, the CLI, the Nuxt module, the ESLint plugin, or any of the design systems coming behind them, your support directly funds continued development. [Vuetify One](https://one.vuetifyjs.com/) and [GitHub Sponsors](https://github.com/sponsors/johnleider) are the most direct ways to help.\n\nThanks also to the community members who sent patches this month — [mixelburg](https://github.com/mixelburg), [webdevnerdstuff](https://github.com/webdevnerdstuff), [VaishnaviD5900](https://github.com/VaishnaviD5900), [Spatlani](https://github.com/Spatlani), and [Haviles04](https://github.com/Haviles04) — for the fixes and additions that made it into this release.\n\nThank you for being part of the Vuetify community. See you in June!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","frontmatter":{"layout":"blog","meta":{"title":"May 2026 Update","description":"May shipped Vuetify 4.1 — seven labs promotions, four new components, and a wave of fixes across four releases, with Vuetify0 racing toward its own beta.","keywords":"Vuetify May 2026, Vuetify 4.1 Ascendant, labs promotion, VHeatmap, VHighlight, VMonthPicker, VDateRangePicker, Vuetify0 drag and drop, createSortable, createKanban"}},"isInternal":false,"tokens":9087,"sizeBytes":33747},{"name":"november-2025-update.md","path":"packages/docs/src/pages/en/blog/november-2025-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/november-2025-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: November 2025 Update\n description: November shipped Vuetify v3.11.0 with VCalendar and VHotkey promoted from labs, a new VTimePicker input variant, VDatePicker MD3 work, and CLI progress.\n keywords: Vuetify November 2025, v3.11.0 Harbinger, VCalendar, VHotkey, VTimePicker, VDatePicker MD3\n---\n\n\n\n# November 2025 Update\n\nWelcome to the November 2025 Vuetify update! This month marks a major milestone with the release of **v3.11.0 (Harbinger)**, promoting VCalendar and VHotkey from labs to core, introducing the new VTimePicker input variant, and aligning VDatePicker with Material Design 3 specifications.\n\n![Hero image for November update](https://cdn.vuetifyjs.com/docs/images/blog/november-2025-update/november-hero.png \"November hero image\")\n\n🖊️ John Leider • 📅 December 10th, 2025\n\n\n\n---\n\n## The Harbinger Arrives\n\nNovember was a landmark month for the framework. We shipped **v3.11.0 (Harbinger)** with two components graduating from labs—VCalendar and VHotkey—alongside significant enhancements to date and time pickers that bring them in line with Material Design 3. The **VTimePicker input variant** and **VDatePicker control alignment** represent months of refinement work finally landing in a stable release. Beyond the framework, we made substantial progress on the **Vuetify CLI** with 37 commits laying the groundwork for v0 tooling. J-Sek continued his incredible contribution streak, authoring 14 PRs to the main framework and adding 7+ new templates to Snips. The ecosystem is firing on all cylinders.\n\n::: success\n\nCool example of the month: [v0 Expansion Panel in VPlay](https://vtfy.link/i5LxmQ) by [johnleider](https://github.com/johnleider)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Ecosystem Spotlight: Vuetify CLI](#ecosystem-spotlight-vuetify-cli)\n* [Framework Updates](#framework-updates)\n * [Date & Time Picker Enhancements](#date-time-picker-enhancements)\n * [Component Refinements](#component-refinements)\n* [Vuetify MCP: Continued Evolution](#vuetify-mcp-continued-evolution)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [November 2025 Changelog](#november-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nNovember delivered seven releases culminating in **v3.11.0 (Harbinger)**, our most feature-rich release since v3.10. Two components graduated from labs to core, and we shipped significant enhancements across date/time pickers, tabs, and overlay components.\n\n![November Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/november-2025-update/releases.png \"November Releases Banner\")\n\n### Key Improvements\n\n* **VCalendar** and **VHotkey** promoted from labs to core components\n* New **VTimePicker input variant** for inline time entry without the dial interface\n* **VDatePicker MD3 alignment** with updated control variants matching Material Design 3 specifications\n* **VTabs inset prop** for subtle tab designs in dense layouts\n* **VTextarea max-height prop** for controlled textarea growth\n* **VSelect auto-select-first** for automatic first-item highlighting\n* Theme **layers option** for advanced CSS cascade control\n\nView the complete list of changes in the [Full Changelog](#november-2025-changelog)\n\n**Details:**\n\n* [v3.10.9](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.9)\n* [v3.10.10](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.10)\n* [v3.10.11](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.11)\n* [v3.10.12](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.12)\n* [v3.11.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.11.0)\n\n---\n\n## Ecosystem Spotlight: Vuetify CLI { #ecosystem-spotlight-vuetify-cli }\n\nNovember saw intensive development on the **Vuetify CLI**, with 37 commits laying the foundation for v0 tooling and developer workflows. While not yet released, this work represents a significant investment in the developer experience for Vuetify 4.0 and beyond.\n\nThe CLI will provide streamlined project scaffolding, component generation, and integration with the broader Vuetify ecosystem including v0 composables and the MCP server. More details coming as we approach the initial release.\n\n**Also this month:**\n\n* **Vuetify Bin** received real-time collaboration features\n* **Vuetify Snips** added 7+ new templates across pricing, buttons, feedback cards, and chat components\n* **Vuetify Play** and **Studio** improved user preference persistence\n\n**Details:**\n\n* [Vuetify Bin](https://bin.vuetifyjs.com/)\n* [Vuetify Snips](https://snips.vuetifyjs.com/)\n* [Vuetify Play](https://play.vuetifyjs.com/)\n\n---\n\n## Framework Updates\n\n\n\nNovember's framework work centered on date/time picker improvements and component polish. J-Sek delivered an outstanding 14 PRs, driving many of the enhancements below.\n\n### Date & Time Picker Enhancements { #date-time-picker-enhancements }\n\nThe date and time picker components received significant attention this month, bringing them closer to Material Design 3 specifications and adding long-requested features.\n\n**VTimePicker Input Variant**\n\nA new input variant allows users to type time values directly without using the dial interface—perfect for power users and keyboard-first workflows.\n\n![VTimePicker Input Variant](https://cdn.vuetifyjs.com/docs/images/blog/november-2025-update/vtimepicker-input.png \"VTimePicker Input Variant\")\n\n**VDatePicker MD3 Controls**\n\nControl variants have been aligned with Material Design 3, providing a more polished and consistent appearance.\n\n\n\n\n**Details:**\n\n* [VTimePicker input variant PR#21601](https://github.com/vuetifyjs/vuetify/pull/21601)\n* [VDatePicker MD3 alignment PR#21589](https://github.com/vuetifyjs/vuetify/pull/21589)\n* [VDatePicker landscape mode PR#22305](https://github.com/vuetifyjs/vuetify/pull/22305)\n* [VDateInput min/max fix PR#22295](https://github.com/vuetifyjs/vuetify/pull/22295)\n\n### Component Refinements\n\n**Navigation & Layout**\n\n* **VTabs**: New `inset` prop for subtle tab designs, plus slider transition improvements\n* **VOverlay**: Added `viewport-margin` prop for better positioning control\n* **VNavigationDrawer**: New `retain-focus` prop to control focus behavior\n\n\n\n\n**Form Components**\n\n* **VTextarea**: Added `max-height` prop for controlled growth\n* **VSelect**: New `auto-select-first` prop and improved chip itemProps handling\n* **VCombobox**: Create new items when pasting with line breaks\n\n**Data & Display**\n\n* **VTreeview**: Significant performance improvements for large trees\n* **VList**: New `prepend-gap` and `indent` props for flexible spacing\n* **VBreadcrumbs**: Props and width can now be passed to items\n\n**Theming**\n\n* New `layers` option for advanced CSS cascade control\n\n**Details:**\n\n* [VTabs inset PR#22221](https://github.com/vuetifyjs/vuetify/pull/22221)\n* [VTabs slider transition PR#19556](https://github.com/vuetifyjs/vuetify/pull/19556)\n* [VOverlay viewport-margin PR#22243](https://github.com/vuetifyjs/vuetify/pull/22243)\n* [VNavigationDrawer retain-focus PR#22106](https://github.com/vuetifyjs/vuetify/pull/22106)\n* [VTextarea max-height PR#22286](https://github.com/vuetifyjs/vuetify/pull/22286)\n* [VSelect auto-select-first PR#22312](https://github.com/vuetifyjs/vuetify/pull/22312)\n* [VCombobox line breaks PR#22304](https://github.com/vuetifyjs/vuetify/pull/22304)\n* [VTreeview performance PR#22255](https://github.com/vuetifyjs/vuetify/pull/22255)\n* [VList prepend-gap/indent PR#20616](https://github.com/vuetifyjs/vuetify/pull/20616)\n* [VBreadcrumbs props PR#22213](https://github.com/vuetifyjs/vuetify/pull/22213)\n* [Theme layers PR#22215](https://github.com/vuetifyjs/vuetify/pull/22215)\n\n---\n\n## Vuetify MCP: Continued Evolution { #vuetify-mcp-continued-evolution }\n\n\n\nNovember brought four releases to the Vuetify MCP server (v0.2.0 through v0.2.3), continuing to refine the AI-powered development experience.\n\n### What's New\n\n**Stability Improvements**: Multiple releases focused on reliability and edge case handling for the HTTP transport introduced in October.\n\n**Documentation Enhancements**: Improved tool descriptions and response formatting for better AI assistant integration.\n\n### Getting Started\n\nTo use the hosted MCP server with Claude Desktop or other MCP clients:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [Model Context Protocol Documentation](https://modelcontextprotocol.io/)\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\nNovember was our most active month yet for Vuetify0, with 109 commits and 5 releases (v0.0.10 through v0.0.14). The focus was on performance optimization and type safety improvements.\n\n![Vuetify0 Type Safety](https://cdn.vuetifyjs.com/docs/images/blog/november-2025-update/v0.png \"Vuetify0 Type Safety\")\n\n**Performance Optimizations**\n\nWe implemented deferred reindexing for registry unregister operations, significantly improving performance when components mount and unmount rapidly.\n\n**Type Safety Improvements**\n\nThe `RegistryTicket.value` is now generic, providing better type inference and IntelliSense support when working with registered items.\n\n```ts\nimport { useRegistry } from '@vuetify/v0'\nimport type { RegistryTicket } from '@vuetify/v0'\n\ninterface User {\n name: string\n email: string\n}\n\n// Value type flows through the registry\nconst registry = useRegistry>()\n\nconst ticket = registry.register({\n id: 'user-1',\n value: { name: 'John', email: 'john@vuetifyjs.com' }\n})\n\n// ticket.value is typed as User\nconsole.log(ticket.value.name) // ✓ TypeScript knows this is a string\n```\n\nDecember will focus on expanding the component library and preparing integration paths with the main Vuetify framework.\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [Performance optimization PR#48](https://github.com/vuetifyjs/0/pull/48)\n* [Type safety PR#53](https://github.com/vuetifyjs/0/pull/53)\n\n---\n\n## November 2025 Changelog\n\nThe following section provides an overview of the changes made in November 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* VCalendar and VHotkey promoted from labs to core\n* VTimePicker input variant for direct time entry\n* VDatePicker MD3 control alignment\n* VTabs inset prop and slider transitions\n* VTreeview performance optimizations for large trees\n* Theme layers option for CSS cascade control\n\n**Expand** this section to see the detailed changelog for November 2025:\n\n
\n\n### :rocket: Features\n\n* **flex:** add justify-items utilities ([#22346](https://github.com/vuetifyjs/vuetify/issues/22346)) ([pgalhardo](https://github.com/pgalhardo))\n* **VBreadcrumbs:** pass props and width to items ([#22213](https://github.com/vuetifyjs/vuetify/issues/22213)) ([J-Sek](https://github.com/J-Sek))\n* **VCombobox:** create new items when pasting with line breaks ([#22304](https://github.com/vuetifyjs/vuetify/issues/22304)) ([ikushum](https://github.com/ikushum))\n* **VDatePicker:** align control variants with MD3 ([#21589](https://github.com/vuetifyjs/vuetify/issues/21589)) ([J-Sek](https://github.com/J-Sek))\n* **VList:** add `prepend-gap` and `indent` props ([#20616](https://github.com/vuetifyjs/vuetify/issues/20616)) ([yuwu9145](https://github.com/yuwu9145))\n* **VNavigationDrawer, VOverlay:** add `retain-focus` prop ([#22106](https://github.com/vuetifyjs/vuetify/issues/22106)) ([J-Sek](https://github.com/J-Sek))\n* **VOverlay:** add `viewport-margin` prop ([#22243](https://github.com/vuetifyjs/vuetify/issues/22243)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect:** add `auto-select-first` prop ([#22312](https://github.com/vuetifyjs/vuetify/issues/22312)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect:** apply compatible itemProps to chips ([#22339](https://github.com/vuetifyjs/vuetify/issues/22339)) ([KaelWD](https://github.com/KaelWD))\n* **VStepper:** add new item-props prop ([#20651](https://github.com/vuetifyjs/vuetify/issues/20651)) ([johnleider](https://github.com/johnleider))\n* **VTabs:** add `inset` prop ([#22221](https://github.com/vuetifyjs/vuetify/issues/22221)) ([J-Sek](https://github.com/J-Sek))\n* **VTabs:** add new prop, slider transition ([#19556](https://github.com/vuetifyjs/vuetify/issues/19556)) ([johnleider](https://github.com/johnleider))\n* **VTextarea:** add `max-height` prop ([#22286](https://github.com/vuetifyjs/vuetify/issues/22286)) ([J-Sek](https://github.com/J-Sek))\n* **VTimePicker:** input variant ([#21601](https://github.com/vuetifyjs/vuetify/issues/21601)) ([J-Sek](https://github.com/J-Sek))\n* **theme:** add layers option ([#22215](https://github.com/vuetifyjs/vuetify/issues/22215)) ([Niki2k1](https://github.com/Niki2k1))\n* **typography:** add font-weight semibold helper class ([#20586](https://github.com/vuetifyjs/vuetify/issues/20586)) ([FraCata00](https://github.com/FraCata00))\n\n### :wrench: Bug Fixes\n\n* **v-tooltip:** prevent showing empty tooltip ([#22347](https://github.com/vuetifyjs/vuetify/issues/22347)) ([Haviles04](https://github.com/Haviles04))\n* **VAvatar:** update background variable to use RGB format ([#22310](https://github.com/vuetifyjs/vuetify/issues/22310)) ([juanjcardona13](https://github.com/juanjcardona13))\n* **VBtnToggle:** remove semicolon from Sass ([#22293](https://github.com/vuetifyjs/vuetify/issues/22293)) ([methompson](https://github.com/methompson))\n* **VBtnToggle:** render selected in forced-colors mode ([#22279](https://github.com/vuetifyjs/vuetify/issues/22279)) ([06b](https://github.com/06b))\n* **VCalendar:** calculate week numbers using current locale ([#22341](https://github.com/vuetifyjs/vuetify/issues/22341)) ([J-Sek](https://github.com/J-Sek))\n* **VCalendar:** correct interval and event offset with custom firstTime ([#22343](https://github.com/vuetifyjs/vuetify/issues/22343)) ([KaelWD](https://github.com/KaelWD))\n* **VCalendar:** day button font size and no active state ([#22336](https://github.com/vuetifyjs/vuetify/issues/22336)) ([J-Sek](https://github.com/J-Sek))\n* **VDateInput:** min/max with built-in adapter ([#22295](https://github.com/vuetifyjs/vuetify/issues/22295)) ([J-Sek](https://github.com/J-Sek))\n* **VDatePicker:** support landscape mode ([#22305](https://github.com/vuetifyjs/vuetify/issues/22305)) ([ikushum](https://github.com/ikushum))\n* **VField:** hide progress border in forced-colors mode ([#22316](https://github.com/vuetifyjs/vuetify/issues/22316)) ([06b](https://github.com/06b))\n* **VField:** remove details prop from makeVFieldProps ([#22268](https://github.com/vuetifyjs/vuetify/issues/22268)) ([pgalhardo](https://github.com/pgalhardo))\n* **VHotkey:** inline alignment, sizing consistency, slash separator ([#22321](https://github.com/vuetifyjs/vuetify/issues/22321)) ([J-Sek](https://github.com/J-Sek))\n* **VInfiniteScroll:** hide side element when empty ([#21749](https://github.com/vuetifyjs/vuetify/issues/21749)) ([J-Sek](https://github.com/J-Sek))\n* **VList:** correct styles for spacing with `nav` prop ([#22254](https://github.com/vuetifyjs/vuetify/issues/22254)) ([J-Sek](https://github.com/J-Sek))\n* **VMaskInput:** Fixes error when mask input is cleared ([#22176](https://github.com/vuetifyjs/vuetify/issues/22176)) ([ikushum](https://github.com/ikushum))\n* **VRating:** correct keyboard controls ([#22314](https://github.com/vuetifyjs/vuetify/issues/22314)) ([J-Sek](https://github.com/J-Sek))\n* **VSelect:** Use hidden select for native form submissions ([#22330](https://github.com/vuetifyjs/vuetify/issues/22330)) ([ikushum](https://github.com/ikushum))\n* **VTab:** render selected in forced-colors mode ([#22271](https://github.com/vuetifyjs/vuetify/issues/22271)) ([06b](https://github.com/06b))\n* **VTreeview:** faster interactions with large trees ([#22255](https://github.com/vuetifyjs/vuetify/issues/22255)) ([J-Sek](https://github.com/J-Sek))\n\n### :test_tube: Labs\n\n* **VCalendar:** promoted to core component\n* **VHotkey:** promoted to core component\n\n
\n\n## What's Next{ #whats-next .mt-4 }\n\nDecember will see continued refinement of v3.11.x as we stabilize the new features and address community feedback. Work on VCommandPalette progresses toward an initial labs release, and we're expanding the v0 library with additional headless primitives.\n\nThe Vuetify CLI is approaching its first public release, which will streamline project setup and component generation for both Vuetify 3 and the upcoming v0-based workflows. We're also planning end-of-year webinars covering the v3.11 release highlights and a preview of what's coming in 2026.\n\nThank you for being part of the Vuetify community. See you in December!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","frontmatter":{"layout":"blog","meta":{"title":"November 2025 Update","description":"November shipped Vuetify v3.11.0 with VCalendar and VHotkey promoted from labs, a new VTimePicker input variant, VDatePicker MD3 work, and CLI progress.","keywords":"Vuetify November 2025, v3.11.0 Harbinger, VCalendar, VHotkey, VTimePicker, VDatePicker MD3"}},"isInternal":false,"tokens":5019,"sizeBytes":18549},{"name":"october-2025-update.md","path":"packages/docs/src/pages/en/blog/october-2025-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/october-2025-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: October 2025 Update\n description: October focused on refinement, delivering focus trap improvements, component enhancements, and v0 composables progress for v3.11 and v4.0.\n keywords: Vuetify October 2025, v3.11 LTS, Focus trap, Component enhancements, v0 composables, v4.0\n---\n\n\n\n# October 2025 Update\n\nWelcome to the October 2025 Vuetify update! This month, our team focused on refinement and reliability, delivering significant **focus trap improvements** across multiple components and advancing key features in development.\n\n![Hero image for October update](https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/october-hero.png \"October hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 November 11th, 2025\n\n\n\n---\n\n## Moving along\n\nOctober's development cycle focused on polish and developer experience. We delivered critical accessibility improvements with enhanced focus trap functionality, optimized VDataTable performance for large datasets, and refined components across the board. The month also saw the launch of **Vuetify Link**, our new URL shortening service, and significant updates to the **Vuetify MCP server** with HTTP transport support, making it easier than ever to integrate Vuetify's documentation and API intelligence into AI-powered development workflows. We also made substantial progress on our **v0 composables**, laying the groundwork for the upcoming Vuetify 4.0 release.\n\n::: success\n\nCool example of the month: [VTreeview footer](https://play.vuetifyjs.com/playgrounds/foNl1A) by [J-Sek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Ecosystem Spotlight: Vuetify Link](#ecosystem-spotlight-vuetify-link)\n* [Framework Updates](#framework-updates)\n * [Focus Trap Enhancements](#focus-trap-enhancements)\n * [Component Refinements](#component-refinements)\n * [In Development](#in-development)\n* [Vuetify MCP: HTTP Transport Support](#vuetify-mcp-http-transport-support)\n* [Vuetify0: Progress Update](#vuetify0-progress-update)\n* [October 2025 Changelog](#october-2025-changelog)\n* [What's Next](#whats-next)\n\n---\n\n## Releases\n\nOctober delivered five releases focused on stability, performance, and accessibility. We merged numerous bug fixes across components, improved focus trap behavior, enhanced form field handling, and optimized performance for large data sets.\n\n![October Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/releases.png \"October Releases Banner\")\n\n### Key Improvements\n\n* Enhanced focus trap functionality across VDialog and VMenu with better invisible/inert element handling\n* Performance optimizations for VDataTable with select-all improvements and reduced lag in large datasets\n* Multiple VMenu fixes improving keyboard navigation, scroll behavior, and ARIA attributes\n* VCombobox and VAutocomplete refinements with consistent transitions and better open/close behavior\n* Accessibility improvements with forced-colors mode support for multiple components\n* Labs components updates including VCalendar, VDateInput, and VMaskInput enhancements\n\nView the complete list of changes in the [Full Changelog](#october-2025-changelog)\n\n**Details:**\n\n* [v3.10.4](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.4)\n* [v3.10.5](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.5)\n* [v3.10.6](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.6)\n* [v3.10.7](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.7)\n* [v3.10.8](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.8)\n\n---\n\n## Ecosystem Spotlight: Vuetify Link { #ecosystem-spotlight-vuetify-link }\n\n\n\nSharing code examples and playground demos is fundamental to how our community learns and collaborates. **Vuetify Link** is now live—a URL shortening service purpose-built for the Vuetify ecosystem. It makes sharing your playgrounds, reporting issues with reproducible examples, and showcasing your latest components effortless.\n\n\n\nCreating links is free for everyone. Vuetify One users get additional features such as redirect timer, password protection, and custom slug generation.\n\n**Details:**\n\n* [Vuetify Link](https://link.vuetifyjs.com/)\n\n---\n\n## Framework Updates\n\n\n\nOctober was all about refinement and reliability. Our team focused on enhancing existing components with new features and improving the overall developer experience across the framework.\n\n### Focus Trap Enhancements\n\nWe've made significant improvements to focus trap functionality across components, ensuring better keyboard navigation and accessibility compliance. These enhancements improve the experience for users relying on keyboard navigation and assistive technologies.\n\n**Details:**\n\n* [PR#22105](https://github.com/vuetifyjs/vuetify/pull/22105)\n* [PR#22044](https://github.com/vuetifyjs/vuetify/pull/22044)\n\n### Component Refinements\n\nThe team has been working diligently to enhance component reliability and functionality:\n\n**Navigation & Selection**\n\n* **VTreeview & VList**: Improved node selection reliability for more predictable behavior in complex tree structures\n* **VBreadcrumbs**: Added `item-props` support to enable text truncation for long breadcrumb items\n\n**Form Components**\n\n* **VAutocomplete & VCombobox**: Refined menu transitions and resolved edge-case issues\n* **VMenu**: Various fixes improving stability and user experience\n\n**Data & Display**\n\n* **VTreeview**: New footer slot plus minor bug fixes\n* **VDataTable**: Multi-sort enhancements for more powerful data manipulation\n\n**Details:**\n\n* [VTreeview PR#22130](https://github.com/vuetifyjs/vuetify/pull/22130)\n* [VBreadcrumbs PR#22213](https://github.com/vuetifyjs/vuetify/pull/22213)\n* [VAutocomplete/VCombobox PR#22144](https://github.com/vuetifyjs/vuetify/pull/22144)\n* [VMenu PR#22242](https://github.com/vuetifyjs/vuetify/pull/22242)\n* [VMenu PR#22240](https://github.com/vuetifyjs/vuetify/pull/22240)\n* [VDataTable PR#22133](https://github.com/vuetifyjs/vuetify/pull/22133)\n\n### In Development\n\nWe have multiple new features and components in active development that are continuing to make progress:\n\n#### VCommandPalette\n\n**VCommandPalette Development**: Work continues on scoping and developing this highly-requested component. Command-driven interfaces are perfect for power users and keyboard-first workflows, and we're excited to bring this pattern to Vuetify applications.\n\n![VCommandPalette Component](https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/vcommandpalette.png \"VCommandPalette Component\")\n\n#### VTabs Enhancements\n\nWe're working on a new **inset variant** for `VTabs`. This variant provides a more subtle tab design that works beautifully in dense layouts and secondary navigation contexts.\n\n\n\n**Details:**\n\n* [VCommandPalette PR#22217](https://github.com/vuetifyjs/vuetify/pull/22217)\n* [VList a11y PR#21444](https://github.com/vuetifyjs/vuetify/pull/21444)\n* [VTabs inset variant PR#22221](https://github.com/vuetifyjs/vuetify/pull/22221)\n\n---\n\n## Vuetify MCP: HTTP Transport Support { #vuetify-mcp-http-transport-support }\n\n\n\nOctober brought significant updates to the **Vuetify MCP (Model Context Protocol) server**, expanding how developers can integrate Vuetify's comprehensive documentation and API intelligence into AI-powered coding assistants like Claude Code, Cline, and other MCP-compatible tools.\n\n### What's New\n\n**HTTP Transport Support**: The Vuetify MCP server now supports HTTP transport in addition to the standard stdio transport. This makes it easier to deploy and connect to the server across different environments and use cases.\n\n**Official Hosted Server**: We've launched an official hosted MCP server at **[https://mcp.vuetifyjs.com](https://mcp.vuetifyjs.com)**, allowing you to access Vuetify's documentation, component APIs, installation guides, and feature documentation without running a local server.\n\n### Getting Started\n\nTo use the hosted MCP server with Claude Desktop or other MCP clients, add the following to your MCP configuration:\n\n```json\n{\n \"mcpServers\": {\n \"vuetify\": {\n \"url\": \"https://mcp.vuetifyjs.com/mcp\"\n }\n }\n}\n```\n\nThe Vuetify MCP server provides AI assistants with direct access to:\n\n* **Component APIs**: Detailed prop, slot, and event documentation for all Vuetify components\n* **Directive APIs**: Complete directive documentation including v-ripple, v-scroll, and more\n* **Installation Guides**: Platform-specific setup instructions for Vite, Nuxt, Laravel, and others\n* **Feature Guides**: In-depth documentation on theming, internationalization, accessibility, and more\n* **Release Notes**: Version-specific changelogs and migration information\n* **FAQ**: Frequently asked questions and common solutions\n\nThis integration enables your AI coding assistant to provide accurate, up-to-date Vuetify guidance directly within your development workflow.\n\n**Details:**\n\n* [Vuetify MCP GitHub Repository](https://github.com/vuetifyjs/mcp)\n* [HTTP Transport Commit](https://github.com/vuetifyjs/mcp/commit/66a3802951294f7610562d949dbdd51db879d50a)\n* [Model Context Protocol Documentation](https://modelcontextprotocol.io/)\n\n---\n\n## Vuetify0: Progress Update { #vuetify0-progress-update }\n\n\n\nOctober was all about testing and iteration and we covered a lot of ground. All composables received a tuning pass to improve type safety and Intellisense support:\n\n![TypeScript Intellisense](https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/v0.png \"Vuetify0 TypeScript Intellisense\")\n\nAll composables now follow consistent naming conventions and patterns and we are now beginning to iterate on the component variations of each composable (where applicable). These components will marry various composables together to provide full-featured UI elements built on the v0 foundation.\n\nWe've also started to add interactive examples to the documentation site to showcase usage patterns and best practices. One component that received a lot of work last month was the **ExpansionPanel** which is now available as of the [v0.0.10](https://github.com/vuetifyjs/0/releases/tag/v0.0.10) release.\n\n```html\n\n\n\n```\n\nNovember will focus on continuing to build out components based on the v0 composables, along with additional documentation and examples as we prepare for Vuetify integration.\n\n**Details:**\n\n* [Vuetify0 Documentation](https://0.vuetifyjs.com/)\n* [ExpansionPanel](https://0.vuetifyjs.com/components/expansion-panel/)\n\n---\n\n## October 2025 Changelog\n\nThe following section provides an overview of the changes made in October 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* Focus trap enhancements: Better keyboard navigation, invisible/inert element handling, and aria-owns support\n* Performance optimizations: Select-all optimization in VDataTable, reduced lag with large datasets\n* Form field reliability: Fixed duplicated emits, improved validation rules, better field control refs\n* Component polish: VMenu scroll/focus fixes, VCombobox/VAutocomplete transition improvements, VDatePicker range fixes\n* Accessibility: Forced-colors mode support for VBadge, VListItem, VSkeletonLoader, and VIconBtn\n* Labs updates: VCalendar scrolling fixes, VMaskInput inheritance, VDateInput min/max support\n\n**Expand** this section to see the detailed changelog for October 2025:\n\n
\n\n### :rocket: Features\n\n* **locationStrategies:** support CSS zoom ([#21878](https://github.com/vuetifyjs/vuetify/issues/21878)) ([32242a3](https://github.com/vuetifyjs/vuetify/commit/32242a353b1313b35f18bfc7c0ac7a72ed2196bb)), closes [#20719](https://github.com/vuetifyjs/vuetify/issues/20719)\n* **VCombobox:** add `always-filter` prop ([#22093](https://github.com/vuetifyjs/vuetify/issues/22093)) ([8853f4d](https://github.com/vuetifyjs/vuetify/commit/8853f4da7a6600af3587dcc54f18e5b06a2d1ff9)), closes [#22060](https://github.com/vuetifyjs/vuetify/issues/22060)\n\n### :wrench: Bug Fixes\n\n* catch querySelector errors in focusableChildren() ([ae2af38](https://github.com/vuetifyjs/vuetify/commit/ae2af38f982dc83c662bfa84ce7189c4c08ff16b)), closes [#22238](https://github.com/vuetifyjs/vuetify/issues/22238)\n* **group:** avoid errors when comparing recursive items ([#22246](https://github.com/vuetifyjs/vuetify/issues/22246)) ([8ac9c67](https://github.com/vuetifyjs/vuetify/commit/8ac9c67a50653147b9d1003546a45cfea206aab3)), closes [#19322](https://github.com/vuetifyjs/vuetify/issues/19322)\n* **nested:** avoid console warnings when updating items order ([#21987](https://github.com/vuetifyjs/vuetify/issues/21987)) ([1dac082](https://github.com/vuetifyjs/vuetify/commit/1dac0826eea90668bf760ea8c43a01a092c6f28e)), closes [#20934](https://github.com/vuetifyjs/vuetify/issues/20934)\n* **nested:** selection should react to items changes ([#22236](https://github.com/vuetifyjs/vuetify/issues/22236)) ([6bcdbea](https://github.com/vuetifyjs/vuetify/commit/6bcdbea3800c03bdf3ae736969c423bcd7e54672)), closes [#21733](https://github.com/vuetifyjs/vuetify/issues/21733)\n* **validation:** 'number' rule should accept 0 and empty string ([#22204](https://github.com/vuetifyjs/vuetify/issues/22204)) ([1b52724](https://github.com/vuetifyjs/vuetify/commit/1b52724dfeb17c6fb6dd6e50002dec33994ecd51)), closes [#22192](https://github.com/vuetifyjs/vuetify/issues/22192)\n* **validation:** correct translation template arguments ([#22146](https://github.com/vuetifyjs/vuetify/issues/22146)) ([a8e17c9](https://github.com/vuetifyjs/vuetify/commit/a8e17c9966c6333d30c092b3c931ab6afff2b03a))\n* **VBadge:** background highlight in forced-colors mode ([#22148](https://github.com/vuetifyjs/vuetify/issues/22148)) ([65f6bb7](https://github.com/vuetifyjs/vuetify/commit/65f6bb708b6cdc72c4a0e2828ef3d917f2a78559))\n* **VBtn:** set group state for non-router links ([4eeb514](https://github.com/vuetifyjs/vuetify/commit/4eeb514c675b2eeef16f994cac7d37fe1a516b65)), closes [#22085](https://github.com/vuetifyjs/vuetify/issues/22085)\n* **VChipGroup:** disable auto-scroll to the last selected ([360203a](https://github.com/vuetifyjs/vuetify/commit/360203aa3e97d84d2aea76f46a6a2062b7a7b879)), closes [#22223](https://github.com/vuetifyjs/vuetify/issues/22223)\n* **VChipGroup:** support `center-active` ([#22050](https://github.com/vuetifyjs/vuetify/issues/22050)) ([4a95697](https://github.com/vuetifyjs/vuetify/commit/4a95697c58665ed53b7c23ab6864318b59a371e9)), closes [#22046](https://github.com/vuetifyjs/vuetify/issues/22046)\n* **VCombobox:** open menu when `chips` and typing after clear ([d200f22](https://github.com/vuetifyjs/vuetify/commit/d200f227a12ba14aeb5b0a0ce0fd77ce95da52dc))\n* **VCombobox:** show full list on reopen unless `always-filter` is used ([83d0073](https://github.com/vuetifyjs/vuetify/commit/83d00737566fd1df7d043d97d6c93dde5237162e))\n* **VCombobox, VAutocomplete:** avoid glitches when opening with click ([9a1dd83](https://github.com/vuetifyjs/vuetify/commit/9a1dd8363ff59d91257236b126cb5d89c92ebb61)), closes [#22228](https://github.com/vuetifyjs/vuetify/issues/22228)\n* **VAutocomplete/VCombobox:** consistent open/close transition ([#22144](https://github.com/vuetifyjs/vuetify/issues/22144)) ([96f6479](https://github.com/vuetifyjs/vuetify/commit/96f6479d2aa82bcf8f75de51c9dce557fba981bd))\n* **VConfirmEdit:** deeply unwrap refs before cloning values ([a507171](https://github.com/vuetifyjs/vuetify/commit/a507171d25b0d41a4be0d74095ac69afbc413922)), closes [#22232](https://github.com/vuetifyjs/vuetify/issues/22232)\n* **VDataTable:** avoid lag when selecting rows in large tables ([#22163](https://github.com/vuetifyjs/vuetify/issues/22163)) ([92f8a3c](https://github.com/vuetifyjs/vuetify/commit/92f8a3c5c75e84ab79377e9c26a74576f36e6bbc)), closes [#21767](https://github.com/vuetifyjs/vuetify/issues/21767)\n* **VDataTable:** optimize select-all performance ([#22252](https://github.com/vuetifyjs/vuetify/issues/22252)) ([2ad1a38](https://github.com/vuetifyjs/vuetify/commit/2ad1a385a06d94405aa3497b079498f08c870e83)), closes [#19447](https://github.com/vuetifyjs/vuetify/issues/19447)\n* **VDatePicker:** correct range for `allowed-dates` ([#22167](https://github.com/vuetifyjs/vuetify/issues/22167)) ([e678f0e](https://github.com/vuetifyjs/vuetify/commit/e678f0e0d6c45018c611785d932c51db4068a8ef)), closes [#22160](https://github.com/vuetifyjs/vuetify/issues/22160)\n* **VDatePicker:** correct range selection for Luxon adapter ([20b2bf4](https://github.com/vuetifyjs/vuetify/commit/20b2bf425353f6a4d5edf6f1c63d5c35b0ecd165)), closes [#22262](https://github.com/vuetifyjs/vuetify/issues/22262)\n* **VDatePicker:** return correct range for DST ([#22187](https://github.com/vuetifyjs/vuetify/issues/22187)) ([a3ddcf1](https://github.com/vuetifyjs/vuetify/commit/a3ddcf16cca785abcfbc1a922c6e44f6e2acc576)), closes [#22186](https://github.com/vuetifyjs/vuetify/issues/22186)\n* **VDialog:** fix focus trap when tabbing forward ([#22101](https://github.com/vuetifyjs/vuetify/issues/22101)) ([50a150b](https://github.com/vuetifyjs/vuetify/commit/50a150bf0eb8abf6129958e6b11355a1315bfb5b)), closes [#21945](https://github.com/vuetifyjs/vuetify/issues/21945)\n* **VDialog:** focus trap should ignore invisible and inert elements ([#22105](https://github.com/vuetifyjs/vuetify/issues/22105)) ([adf3f91](https://github.com/vuetifyjs/vuetify/commit/adf3f919c6fa1efd6aacde0686a0fb5d5dc0e0bb)), closes [#18400](https://github.com/vuetifyjs/vuetify/issues/18400)\n* **VDivider:** inherit color in colored containers ([bb54a7d](https://github.com/vuetifyjs/vuetify/commit/bb54a7ded40156e24b670c83e826caca1740b74a))\n* **VField:** missing `controlRef` assignment ([#22171](https://github.com/vuetifyjs/vuetify/issues/22171)) ([b89f568](https://github.com/vuetifyjs/vuetify/commit/b89f56819302649463482ce2776557e371b9ec75)), closes [#22034](https://github.com/vuetifyjs/vuetify/issues/22034)\n* **VFileInput, VFileUpload:** avoid invalid `accept` when not defined ([e6c39bc](https://github.com/vuetifyjs/vuetify/commit/e6c39bcbeb750ce4b1a5da91edb4a940dcc4fd38)), closes [#22131](https://github.com/vuetifyjs/vuetify/issues/22131)\n* **VKbd:** use `$body-font-family` as default ([3f61102](https://github.com/vuetifyjs/vuetify/commit/3f6110237d3a0fb5e65dae6358dc4d04d11e7338))\n* **VListItem:** correct role when item is a link ([#22137](https://github.com/vuetifyjs/vuetify/issues/22137)) ([80e154b](https://github.com/vuetifyjs/vuetify/commit/80e154b8c295458b9ced262b3e20403fe07376c3)), closes [#22086](https://github.com/vuetifyjs/vuetify/issues/22086)\n* **VListItem:** respect link & canvas colors in forced-colors mode ([#22032](https://github.com/vuetifyjs/vuetify/issues/22032)) ([84a7bff](https://github.com/vuetifyjs/vuetify/commit/84a7bffc9d721c2bc2deca6b93c6d08e4e77f534))\n* **VMenu:** add aria-owns to activator ([#22240](https://github.com/vuetifyjs/vuetify/issues/22240)) ([975a18c](https://github.com/vuetifyjs/vuetify/commit/975a18cc2dd4ef197a6ab6ca49f81788f9b4f638)), closes [#22226](https://github.com/vuetifyjs/vuetify/issues/22226)\n* **VMenu:** avoid scrolling to the off-screen menu ([#22044](https://github.com/vuetifyjs/vuetify/issues/22044)) ([d1dafff](https://github.com/vuetifyjs/vuetify/commit/d1dafffd729590f1c873da20fb6b09f6d53c38e4)), closes [#21775](https://github.com/vuetifyjs/vuetify/issues/21775) [#20569](https://github.com/vuetifyjs/vuetify/issues/20569) [#21015](https://github.com/vuetifyjs/vuetify/issues/21015) [#16819](https://github.com/vuetifyjs/vuetify/issues/16819)\n* **VMenu:** ignore focus on root element ([fe1214f](https://github.com/vuetifyjs/vuetify/commit/fe1214fb1cbfe021b7db50e88ea091b4ef39e707)), closes [#22263](https://github.com/vuetifyjs/vuetify/issues/22263)\n* **VMenu:** keep open with keyboard and open-delay=\"0\" ([#22242](https://github.com/vuetifyjs/vuetify/issues/22242)) ([8e810e5](https://github.com/vuetifyjs/vuetify/commit/8e810e54b12c58a525bf2efb149f0f03a3769448)), closes [#21591](https://github.com/vuetifyjs/vuetify/issues/21591)\n* **VNumberInput:** align stacked controls in underlined variant ([#22185](https://github.com/vuetifyjs/vuetify/issues/22185)) ([e10ffea](https://github.com/vuetifyjs/vuetify/commit/e10ffea80e6cedbdfbf14912f7587aaabd221779)), closes [#22184](https://github.com/vuetifyjs/vuetify/issues/22184)\n* **VNumberInput:** allow typing negative decimal values with a comma separator ([#22199](https://github.com/vuetifyjs/vuetify/issues/22199)) ([f0fec8f](https://github.com/vuetifyjs/vuetify/commit/f0fec8fb39ec5bbc82bd02c70a17bdc1d1746995)), closes [#22183](https://github.com/vuetifyjs/vuetify/issues/22183)\n* **VNumberInput:** emit pasted value without waiting for blur ([6034a73](https://github.com/vuetifyjs/vuetify/commit/6034a73a09c649140af726dbd7dbc13a7871a245)), closes [#22182](https://github.com/vuetifyjs/vuetify/issues/22182)\n* **VOverlay:** `stick-to-target` content visible until target overflows ([#22233](https://github.com/vuetifyjs/vuetify/issues/22233)) ([0e1dff0](https://github.com/vuetifyjs/vuetify/commit/0e1dff0be1cbcc05985bd6f50c58e70ccc0ceea8)), closes [#22055](https://github.com/vuetifyjs/vuetify/issues/22055)\n* **VProgressCircular:** hide overflow to avoid height changes ([#22245](https://github.com/vuetifyjs/vuetify/issues/22245)) ([d5cfb7b](https://github.com/vuetifyjs/vuetify/commit/d5cfb7bf14cbafe57a4043a6427d21ab21d84a45)), closes [#22244](https://github.com/vuetifyjs/vuetify/issues/22244)\n* **VRangeSlider:** inherit readonly/disabled from form ([d071e24](https://github.com/vuetifyjs/vuetify/commit/d071e241c82fca7c65405174623014989f2d3985)), closes [#22054](https://github.com/vuetifyjs/vuetify/issues/22054)\n* **VSelect:** item checkbox gets out of sync ([#22181](https://github.com/vuetifyjs/vuetify/issues/22181)) ([f257802](https://github.com/vuetifyjs/vuetify/commit/f2578024e948ff24faea7275b3d0d808e0afa02e))\n* **VSkeletonLoader:** accept scoped styles ([#22201](https://github.com/vuetifyjs/vuetify/issues/22201)) ([c20031b](https://github.com/vuetifyjs/vuetify/commit/c20031be5347d17286acadf29d12d5edddc6bcb3)), closes [#22198](https://github.com/vuetifyjs/vuetify/issues/22198)\n* **VSkeletonLoader:** render background in forced-colors mode ([#22216](https://github.com/vuetifyjs/vuetify/issues/22216)) ([26e0b6d](https://github.com/vuetifyjs/vuetify/commit/26e0b6d623bcc154cc14db4958c2c3204c0dff0a))\n* **VSlider:** prevent thumb movement when disabled mid-interaction ([#22257](https://github.com/vuetifyjs/vuetify/issues/22257)) ([4506459](https://github.com/vuetifyjs/vuetify/commit/45064595260f6644e09fdfc9712547fc321e83e6)), closes [#22248](https://github.com/vuetifyjs/vuetify/issues/22248)\n* **VTabs:** correct link state in Nuxt app ([7068ce1](https://github.com/vuetifyjs/vuetify/commit/7068ce141ee11dc70d237960ea78480cf97922c6)), closes [#22188](https://github.com/vuetifyjs/vuetify/issues/22188)\n* **VTextarea:** mask should not clip scrollbar ([#22001](https://github.com/vuetifyjs/vuetify/issues/22001)) ([e8e7234](https://github.com/vuetifyjs/vuetify/commit/e8e72349a985d1ede8a4c8500114e237f1cd742d)), closes [#21283](https://github.com/vuetifyjs/vuetify/issues/21283)\n* **VTextField:** keep counter in one line ([78e053f](https://github.com/vuetifyjs/vuetify/commit/78e053f58375b07c1a636e70fdb733dda447a99e)), closes [#19620](https://github.com/vuetifyjs/vuetify/issues/19620)\n* **VTextField, VCombobox:** avoid duplicated emits on clear ([#22219](https://github.com/vuetifyjs/vuetify/issues/22219)) ([3e92de3](https://github.com/vuetifyjs/vuetify/commit/3e92de31a3d1df808710606c687f114e81df08cc)), closes [#21417](https://github.com/vuetifyjs/vuetify/issues/21417)\n* **VTreeview:** pass `indent-lines` to `header` slot ([8e964c7](https://github.com/vuetifyjs/vuetify/commit/8e964c72d00600f29202bee782eb11bb571627ad))\n* **VVirtualScroll:** scroll to last element ([#22166](https://github.com/vuetifyjs/vuetify/issues/22166)) ([1cc009f](https://github.com/vuetifyjs/vuetify/commit/1cc009f3f1387c2530d044c9bd3b6a12fdc18f1d)), closes [#20931](https://github.com/vuetifyjs/vuetify/issues/20931)\n* **VWindow:** fix exception due to missing scrollable parent in unit test ([7b122b7](https://github.com/vuetifyjs/vuetify/commit/7b122b735428e736808177cb84a39a5bb3f9b7f1))\n* **VWindow:** Maintain scroll position on window change ([#22191](https://github.com/vuetifyjs/vuetify/issues/22191)) ([fb7d36b](https://github.com/vuetifyjs/vuetify/commit/fb7d36bf66bfc67adb607c7ac0f222c9181251b8))\n\n### :arrows_counterclockwise: Reverts\n\n* Revert \"fix(VOverlay): ignore mouseenter events from touch devices\" ([d448e0e](https://github.com/vuetifyjs/vuetify/commit/d448e0eb4f958967cea632e6af2140a8847f860e)), closes [#17640](https://github.com/vuetifyjs/vuetify/issues/17640) [#22237](https://github.com/vuetifyjs/vuetify/issues/22237)\n\n### :test_tube: Labs\n\n* **VCalendar:** avoid selecting day button ([da4f99a](https://github.com/vuetifyjs/vuetify/commit/da4f99a5f35af7e664d7a5e0d100aeb43b07ddac)), closes [#22141](https://github.com/vuetifyjs/vuetify/issues/22141)\n* **VCalendar:** import directives ([1c7896d](https://github.com/vuetifyjs/vuetify/commit/1c7896dc96abbf45f58d819663fa87ec00ae7127)), closes [#22122](https://github.com/vuetifyjs/vuetify/issues/22122)\n* **VCalendar:** use scrollAreaRef from base ([#22253](https://github.com/vuetifyjs/vuetify/issues/22253)) ([16dc1d2](https://github.com/vuetifyjs/vuetify/commit/16dc1d290f5759bb1d5a6f495aae4641fc60d125)), closes [#22251](https://github.com/vuetifyjs/vuetify/issues/22251)\n* **VColorInput:** avoid VField, VInput props leaking to VPicker ([14b74d1](https://github.com/vuetifyjs/vuetify/commit/14b74d15557371baafefa8479a9ad77b00ada6af))\n* **VDateInput:** apply min/max to text input ([#22196](https://github.com/vuetifyjs/vuetify/issues/22196)) ([201e6d2](https://github.com/vuetifyjs/vuetify/commit/201e6d27f884ac6077bc8c2cef14eb12a1a28c45)), closes [#22179](https://github.com/vuetifyjs/vuetify/issues/22179)\n* **VDateInput:** avoid `color` prop leaking to VPicker ([6bddea1](https://github.com/vuetifyjs/vuetify/commit/6bddea14a7e22e6eea804a6cf8f0fb0dd807b793))\n* **VDateInput:** avoid VField, VInput props leaking to VPicker ([253e75e](https://github.com/vuetifyjs/vuetify/commit/253e75e4894fa40e069b4032dfe3bab22aa05d48))\n* **VIconBtn:** render interaction highlights in forced-colors mode ([#22211](https://github.com/vuetifyjs/vuetify/issues/22211)) ([37bd57d](https://github.com/vuetifyjs/vuetify/commit/37bd57d7400d716830ddbe0ced85754e2cd334f5))\n* **VMaskInput:** handle null value when clearing input ([#22175](https://github.com/vuetifyjs/vuetify/issues/22175)) ([46e3a84](https://github.com/vuetifyjs/vuetify/commit/46e3a84b582aa0c8f7e8aba4e00be3b1a6f7bddd)), closes [#22174](https://github.com/vuetifyjs/vuetify/issues/22174)\n* **VMaskInput:** inherit class and style ([#22247](https://github.com/vuetifyjs/vuetify/issues/22247)) ([01f5e6f](https://github.com/vuetifyjs/vuetify/commit/01f5e6f29d83d3e4c477eb1cfe92262b8186150e))\n* **VPie:** consistent avatar size in tooltip ([6cefd46](https://github.com/vuetifyjs/vuetify/commit/6cefd4663ba1c6dfee02eea3a35ae76e0793b44e))\n\n
\n\n## What's Next{ #whats-next .mt-4 }\n\nNovember brings us closer to the Vuetify v3.11 release as we continue stabilizing the framework and polishing components. Work continues on v0 composables with expanded documentation and integration testing, while in-development features like VCommandPalette and the VTabs inset variant move toward completion.\n\nThe Vuetify MCP server will continue evolving based on community feedback, and we're exploring additional AI-powered developer tools to streamline the Vuetify development experience. As always, your bug reports, feature requests, and community contributions drive our roadmap forward.\n\nThank you for being part of the Vuetify community. See you in November!\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://discord.gg/vuetify), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements. The best is yet to come!*\n","frontmatter":{"layout":"blog","meta":{"title":"October 2025 Update","description":"October focused on refinement, delivering focus trap improvements, component enhancements, and v0 composables progress for v3.11 and v4.0.","keywords":"Vuetify October 2025, v3.11 LTS, Focus trap, Component enhancements, v0 composables, v4.0"}},"isInternal":false,"tokens":8974,"sizeBytes":30176},{"name":"september-2025-update.md","path":"packages/docs/src/pages/en/blog/september-2025-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/september-2025-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"---\nlayout: blog\nmeta:\n title: September 2025 Update\n description: September assembles the building blocks for Vuetify's next phase — from the new Figma UI Kit and design-to-development workflows to foundational v0 composables.\n keywords: Vuetify September 2025, Figma UI Kit, Vuetify0\n---\n\n\n\n# September 2025 Update\n\nWelcome 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.\n\n![Hero image for September update](https://cdn.vuetifyjs.com/docs/images/blog/september-2025-update/september-hero.png \"September hero image\"){ height=112 }\n\n🖊️ John Leider • 📅 October 12th, 2025\n\n\n\n---\n\n## Assembling the Future\n\nI'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.\n\nHaving 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.\n\n::: success\n\nCool example of the month: [Gradient VProgressLinear](https://play.vuetifyjs.com/playgrounds/AIVKig) by [J-Sek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n* [Releases](#releases)\n * [Key Improvements](#key-improvements)\n* [Updated Official Figma UI Kit](#updated-official-figma-ui-kit)\n * [What's Included](#whats-included)\n * [Why This Matters](#why-this-matters)\n * [Pro Version Available](#pro-version-available)\n* [September Webinar Recap: Performance Crisis](#september-webinar-recap-performance-crisis)\n * [Next Event: v0 Live Coding with John](#next-event-v0-live-coding-with-john)\n* [Vuetify0: Composables Taking Shape](#vuetify0-composables-taking-shape)\n * [New Composables This Month](#new-composables-this-month)\n* [Framework & Security Updates](#framework-security-updates)\n * [Build System Modernization](#build-system-modernization)\n* [Ecosystem Spotlight: Vuetify Link](#ecosystem-spotlight-vuetify-link)\n * [Key Features](#key-features)\n* [September 2025 Changelog](#september-2025-changelog)\n* [The Pieces Come Together](#the-pieces-come-together)\n\n---\n\n## Releases\n\nSeptember focused on stabilization and quality improvements across the Vuetify 3 series, including iterating to the next minor version with [v3.10.0 (Argo)](/getting-started/release-notes/?version=v3.10.0). We've addressed numerous bugs, enhanced accessibility, and refined component behaviors to ensure a robust experience for developers and users alike.\n\n![September Releases Banner](https://cdn.vuetifyjs.com/docs/images/blog/september-2025-update/v310_release.png \"September Releases Banner\")\n\n### Key Improvements\n\n* A direct [VCalendar](/components/calendars) port from Vuetify 2, bringing back familiar calendar functionalities with modern enhancements.\n* Added support for `prefers-reduced-motion` to respect user accessibility settings\n* Added multiple new slots for [VTreeview](/components/treeview) and [VDataTable](/components/data-tables/introduction/) for greater customization\n\nView the complete list of changes in the [Full Changelog](#september-2025-changelog)\n\n**Details:**\n\n* [v3.9.7](https://vuetifyjs.com/getting-started/release-notes/?version=v3.9.7)\n* [v3.10.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.0)\n* [v3.10.1](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.1)\n* [v3.10.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.2)\n* [v3.10.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.10.3)\n\n## Updated Official Figma UI Kit\n\nWe're thrilled to announce the release of our **[updated Vuetify 3 UI Kit for Figma](https://store.vuetifyjs.com/products/vuetify-ui-kit-figma)**! This comprehensive design system brings Vuetify's Material Design implementation directly to your design workflow, completely free.\n\n![Vuetify Figma UI Kit Update](https://cdn.vuetifyjs.com/docs/images/blog/september-2025-update/figma.png \"Vuetify Figma UI Kit Update\")\n\n### What's Included { #whats-included }\n\n* **Complete Component Library**: Every Vuetify 3 component meticulously recreated in Figma\n* **Material Design 3 Foundation**: Built on the latest Material Design specifications\n* **Design Tokens**: Consistent spacing, typography, and color systems\n* **Responsive Variants**: Components optimized for all screen sizes\n* **Dark Mode Support**: Full theme switching capabilities\n* **Auto-Layout**: Modern Figma features for flexible, maintainable designs\n\n### Why This Matters\n\nThis 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.\n\n### Pro Version Available\n\nDesign 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.\n\n#### Why PRO\n\n* ✅ 150+ components with 1:1 names and structure with Vuetify\n* ✅ All variants (elevated, flat, tonal, outlined, text, plain…) and complete states\n* ✅ Advanced foundations: 7 color roles, densities, radius, borders (color/width/opacity)\n* ✅ +4 modes by variables to scale brands and themes\n* ✅ Updates synchronized with the library and direct support\n\n**Ideal for:**\n\n* Teams & Startups — Faster delivery, total consistency and less rework\n* Freelancers — Winning proposals and clean handoff with devs\n* Design Systems — Variables, tokens and real theme scalability\n* Dev Teams — 1:1 parity with Vuetify components to implement without friction.\n\n#### Comparison Table\n\n| Feature | PRO | FREE |\n|---------|-----|------|\n| **Foundations** | Includes complete **Material Design Colors** | Does not include MD color palette |\n| **Themes** | Light / Dark (+ extra modes by variables) | Light / Dark |\n| **Color Roles** | Default, Primary, Secondary, Custom, Error, Warning, Info, Success | Default, Primary, Secondary, Custom, Error, Warning, Info, Success |\n| **States** | Enabled, Disabled, Active/Focus, Hover | Enabled, Disabled |\n| **Sizes** | Default, Small, X/Small, Large, X/Large | Default, Small, Large |\n| **Density** | Default, Comfortable, Compact | Only Default |\n| **Border Color** | Current + Primary, Secondary, Error, Warning, Info, Success | Only Current |\n| **Border Width** | default, 0, xs (thin), sm, md, lg, xl | default, 0 |\n| **Border Opacity** | default, 0, 25, 50, 75, 100 | Not available |\n| **Border Radius** | default, square, xs, sm, md, lg, xl, pill, circle | default, square, pill, circle |\n| **Error State** | Full support | Basic inputs |\n| **Others** | Individual color control in `VField` | No individual control |\n| **Components** | All components | Missing components |\n| **Variants** | All variants | Only elevated • flat • outlined |\n| **Variants in Inputs** | All variants | Only filled • outlined |\n| **Updates & Support** | Synchronized with library + support | Not guaranteed • no support |\n| **Modes by variables** | 4+ modes | 4 or less |\n\n**Details:**\n\n* [Free Figma UI Kit](https://store.vuetifyjs.com/products/vuetify-ui-kit-figma)\n* [Go PRO](https://store.vuetifyjs.com/products/official-vuetify-3-ui-kit-for-figma)\n\n## September Webinar Recap: Performance Crisis { #september-webinar-recap-performance-crisis }\n\nThank 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:\n\n* Disable [unused CSS utilities](/features/sass-variables/#disabling-utility-classes) with SASS variables\n* Use [vite-plugin-vuetify](/features/treeshaking/) for automatic treeshaking and code splitting\n* Reduce page load time with [VLazy](/components/lazy/)\n* Use [VVirtualScroll](/components/virtual-scroll/) for expensive lists\n\nNever miss another event by joining our [Discord Community](https://community.vuetifyjs.com/) and following us on [X](https://x.com/vuetifyjs)!.\n\n### Next Event: v0 Live Coding with John { #next-event-v0-live-coding-with-john }\n\n**Wednesday, October 29th**: Join John for an exclusive live coding session where he'll build a complete application using Vuetify0 from scratch!\n\n#### What to Expect\n\n* **Real-time Development**: Watch as John tackles real-world challenges\n* **Composables in Action**: See how usePermissions, useFeatures, and other v0 composables work together\n* **Architecture Decisions**: Learn the reasoning behind v0's design patterns\n* **Live Q&A**: Get your questions answered as we code\n* **Early Access Insights**: First detailed look at v0's developer experience\n\nThis 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.\n\n**Details**:\n\n* Date: Wednesday, October 29th\n* Start Time: 9:00 AM CST\n* [See what Vuetify0 is all about](https://discord.gg/vuetify-340160225338195969?event=1426220686162268311)\n\n## Vuetify0: Composables Taking Shape { #vuetify0-composables-taking-shape }\n\n\n\nSeptember 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.\n\n### New Composables This Month\n\n* **usePermissions**: A composable for managing RBAC permissions:\n\n```ts { resource=\"src/main.ts\" }\nimport { createApp } from 'vue'\nimport { createPermissionsPlugin } from '@vuetify/0'\n\nconst app = createApp()\n\napp.use(\n createPermissionsPlugin({\n permissions: {\n super: [\n ['create', 'Post'],\n ['read', 'Post'],\n ['update', 'Post'],\n ['delete', 'Post'],\n ['use', 'Dev'],\n ],\n editor: [\n ['create', 'Post'],\n ['read', 'Post'],\n ['update', 'Post']\n ],\n },\n })\n)\n\napp.mount('#app')\n```\n\n```html { resource=\"src/components/SomeComponent.vue\" }\n\n\n\n```\n\n* **useFeatures**: A composable for managing available features and feature flags w/ variants support.\n\n```ts { resource=\"src/main.ts\" }\nimport { createApp } from 'vue'\nimport { createFeaturesPlugin } from '@vuetify/0'\n\nconst app = createApp()\n\napp.use(\n createFeaturesPlugin({\n features: {\n comments: true,\n dev: false,\n search: {\n $value: true,\n $variation: 'v2',\n $description: 'The new and improved search experience',\n },\n },\n })\n)\n\napp.mount('#app')\n```\n\n```html { resource=\"src/components/SomeComponent.vue\" }\n\n\n\n```\n\n* **useTimeline**: A composable for sequence management with undo/redo support.\n\n```html { resource=\"src/components/SomeComponent.vue\" }\n\n```\n\n::: info\n\nSee all available composables on the [Vuetify0 documentation site](https://0.vuetifyjs.com/composables/).\n\n:::\n\n**Details:**\n\n* [usePermissions Documentation](https://0.vuetifyjs.com/composables/plugins/use-permissions/)\n* [useFeatures Documentation](https://0.vuetifyjs.com/composables/plugins/use-features/)\n* [useTimeline Documentation](https://0.vuetifyjs.com/composables/registration/use-timeline/)\n\n## Framework & Security Updates { #framework-security-updates }\n\nWith 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.\n\n### Build System Modernization\n\nThis month brought significant improvements to our build infrastructure in Vuetify and across the ecosystem. Key updates include:\n\n* **Vite 7 Support**: Full migration completed with improved build performance\n* **Vue-TSC 3**: Updated TypeScript tooling for better type checking\n* **Trusted Publishing**: Enhanced security for all package releases with the pnpm's **minimumReleaseAge** setting\n* **TSGO:** Replaced our TSC usage with TSGO for faster builds and better DX\n\n**Details:**\n\n* [Commit: af9a9bf](https://github.com/vuetifyjs/vuetify/commit/af9a9bfc63fa44721f89076431fbe004e70d7c1c)\n* [Commit: c78f8aa](https://github.com/vuetifyjs/vuetify/commit/c78f8aa066164f6ee5f2e1f106ed121963faffe5)\n\n## Ecosystem Spotlight: Vuetify Link { #ecosystem-spotlight-vuetify-link }\n\n\n\nVuetify 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.\n\n### Key Features\n\n* **Custom Slugs**: Create memorable and branded short links\n* **Link Management**: Edit, delete, and track your links from a simple dashboard\n* **Analytics**: Monitor link performance with detailed statistics\n* **Free & Pro Plans**: Basic link shortening is free, with advanced features available for Vuetify One subscribers\n\n![Vuetify Link Landing Screenshot](https://cdn.vuetifyjs.com/docs/images/blog/september-2025-update/vlink_banner.png \"Vuetify Link Landing\")\n\nWe anticipate launching this new service **this month!** Stay tuned for the official release announcement with all the details.\n\n## September 2025 Changelog\n\nThe following section provides an overview of the changes made in September 2025, including new features, bug fixes, and enhancements across the Vuetify framework.\n\n**Key Improvements:**\n\n* Introduced `spaced` prop for VBtn to enhance button spacing options.\n* Added `truncate-length` prop to VFileInput for better filename management.\n* Implemented `stick-to-target` prop in VOverlay for improved overlay positioning.\n* Enhanced accessibility with `aria-controls` and `aria-expanded` in VSelects.\n* Re-converted `VCalendar` based off of Vuetify 2 implementation.\n\n**Expand** this section to see the detailed changelog for September 2025:\n\n
\n\n### :rocket: Features\n\n* **filter:** keep dividers and subheaders ([#21822](https://github.com/vuetifyjs/vuetify/issues/21822)) ([18ac731](https://github.com/vuetifyjs/vuetify/commit/18ac7319a04df9645861977b723173c376655c2f)), closes [#7424](https://github.com/vuetifyjs/vuetify/issues/7424)\n* **framework:** respect prefers-reduced-motion ([#21530](https://github.com/vuetifyjs/vuetify/issues/21530)) ([01c9e91](https://github.com/vuetifyjs/vuetify/commit/01c9e9115898118535865197660dd7399ae1626c)), closes [#19622](https://github.com/vuetifyjs/vuetify/issues/19622)\n* **VBtn:** add `spaced` prop ([#21663](https://github.com/vuetifyjs/vuetify/issues/21663)) ([819605c](https://github.com/vuetifyjs/vuetify/commit/819605c6b4606bf45d33ea9c431c4e97a1bbd3b7)), closes [#21652](https://github.com/vuetifyjs/vuetify/issues/21652)\n* **VCard:** allow semantic HTML tags for content parts ([#21943](https://github.com/vuetifyjs/vuetify/issues/21943)) ([5f8abb6](https://github.com/vuetifyjs/vuetify/commit/5f8abb6c5cece7fea660a7f4811e3c0108a4f402))\n* **VColorPicker:** add `hide-eye-dropper` prop ([be452a5](https://github.com/vuetifyjs/vuetify/commit/be452a547f7efeb773fa8173695c6463137281a0)), closes [#19154](https://github.com/vuetifyjs/vuetify/issues/19154) [#19150](https://github.com/vuetifyjs/vuetify/issues/19150)\n* **VColorPicker:** customizable eyeDropper icon ([#21656](https://github.com/vuetifyjs/vuetify/issues/21656)) ([71377a6](https://github.com/vuetifyjs/vuetify/commit/71377a69079ccdb258ead9dcee2bcd355d6ce6d3)), closes [#21406](https://github.com/vuetifyjs/vuetify/issues/21406)\n* **VDataIterator:** add filtered items count to slot data ([#18641](https://github.com/vuetifyjs/vuetify/issues/18641)) ([7d51302](https://github.com/vuetifyjs/vuetify/commit/7d51302c8e609b78854934586dafef41ba188428))\n* **VDataTable:** customizable expand/collapse icons ([#21698](https://github.com/vuetifyjs/vuetify/issues/21698)) ([1636f63](https://github.com/vuetifyjs/vuetify/commit/1636f632027255bdbc33a989ce667f9c9b352793))\n* **VDataTable:** re-introduce `group-summary` slot ([#21802](https://github.com/vuetifyjs/vuetify/issues/21802)) ([a19cd87](https://github.com/vuetifyjs/vuetify/commit/a19cd8778ac21e9c050649d570e726ac11fa0008)), closes [#21800](https://github.com/vuetifyjs/vuetify/issues/21800)\n* **VDatePicker:** re-introduce `first-day-of-year` prop ([#21760](https://github.com/vuetifyjs/vuetify/issues/21760)) ([af74f62](https://github.com/vuetifyjs/vuetify/commit/af74f62a1d57a63bcad835a4a2aded2ff03b419c)), closes [#20270](https://github.com/vuetifyjs/vuetify/issues/20270)\n* **VFileInput:** add `truncate-length` prop ([#17972](https://github.com/vuetifyjs/vuetify/issues/17972)) ([28ef26c](https://github.com/vuetifyjs/vuetify/commit/28ef26c59b5e1991c469adbd567f305d88bac904)), closes [#17635](https://github.com/vuetifyjs/vuetify/issues/17635)\n* **VFileUpload, VFileInput:** add `filter-by-type` prop ([#21576](https://github.com/vuetifyjs/vuetify/issues/21576)) ([1b78b06](https://github.com/vuetifyjs/vuetify/commit/1b78b06a40470186c83c88f95ec00ba71d36171d)), closes [#21150](https://github.com/vuetifyjs/vuetify/issues/21150)\n* **VOverlay:** add `stick-to-target` prop ([#21704](https://github.com/vuetifyjs/vuetify/issues/21704)) ([8552779](https://github.com/vuetifyjs/vuetify/commit/855277993131333d57359dadbf1511532a98cc68)), closes [#19856](https://github.com/vuetifyjs/vuetify/issues/19856) [#19732](https://github.com/vuetifyjs/vuetify/issues/19732) [#17125](https://github.com/vuetifyjs/vuetify/issues/17125)\n* **VProgressLinear:** ability to separate chunks ([#21744](https://github.com/vuetifyjs/vuetify/issues/21744)) ([4c66aa0](https://github.com/vuetifyjs/vuetify/commit/4c66aa0bda8763d31a5d61a1eff77e873cd4b4c1))\n* **VTextField, VTextarea:** add `autocomplete` prop ([#21359](https://github.com/vuetifyjs/vuetify/issues/21359)) ([d94c003](https://github.com/vuetifyjs/vuetify/commit/d94c00309e6e744e267275cc179bbdfc61fdd848)), closes [#21353](https://github.com/vuetifyjs/vuetify/issues/21353)\n* **VTimePicker:** add `period` prop ([#21823](https://github.com/vuetifyjs/vuetify/issues/21823)) ([8df7685](https://github.com/vuetifyjs/vuetify/commit/8df76851aff28dcfc8b73eee18d5613557aafce8)), closes [#15405](https://github.com/vuetifyjs/vuetify/issues/15405)\n* **VTreeview:** add `header` slot ([fc86d05](https://github.com/vuetifyjs/vuetify/commit/fc86d05d0b72fb27ebc6bd2017d8684a3aa148a9))\n* **VTreeview:** add `toggle` slot ([#21018](https://github.com/vuetifyjs/vuetify/issues/21018)) ([4ec13f2](https://github.com/vuetifyjs/vuetify/commit/4ec13f2841839d482ee38c9e7f0d72dc006d4090)), closes [#20307](https://github.com/vuetifyjs/vuetify/issues/20307)\n* **VWindow, VCarousel:** add `crossfade` and `transition-duration` ([#21850](https://github.com/vuetifyjs/vuetify/issues/21850)) ([15a5c96](https://github.com/vuetifyjs/vuetify/commit/15a5c96933db148d568a88855d6ba3df53815001))\n\n### :wrench: Bug Fixes\n\n* **framework:** don't use multi-line :not() ([a15edec](https://github.com/vuetifyjs/vuetify/commit/a15edecc8313d13158d62776d4532eb9cc2e583a)), closes [#21995](https://github.com/vuetifyjs/vuetify/issues/21995)\n* **goto:** always check for window.matchMedia support ([7d11a39](https://github.com/vuetifyjs/vuetify/commit/7d11a39d16262c867bcd1d760dee05758b95a398)), closes [#22059](https://github.com/vuetifyjs/vuetify/issues/22059)\n* **group:** support `null` values ([#21743](https://github.com/vuetifyjs/vuetify/issues/21743)) ([facd4af](https://github.com/vuetifyjs/vuetify/commit/facd4af2e90a80c80c512b8a2df46cd6d48be5e2)), closes [#20550](https://github.com/vuetifyjs/vuetify/issues/20550)\n* **nested:** detect and warn about multiple `null` values ([#21940](https://github.com/vuetifyjs/vuetify/issues/21940)) ([0960aa6](https://github.com/vuetifyjs/vuetify/commit/0960aa607835c63950976c570b880feb3f3ae358)), closes [#21815](https://github.com/vuetifyjs/vuetify/issues/21815)\n* **rounded:** prioritize `tile` prop (like in v2) ([6b13382](https://github.com/vuetifyjs/vuetify/commit/6b13382f7784dfa47b0def7b7a80d184063bf392)), closes [#21844](https://github.com/vuetifyjs/vuetify/issues/21844)\n* **selects:** open menu when items is mutated not just replaced ([#22067](https://github.com/vuetifyjs/vuetify/issues/22067)) ([a3f8b17](https://github.com/vuetifyjs/vuetify/commit/a3f8b17e66c1e12a14c80376b0ad7ad7c42cd4cd)), closes [#22066](https://github.com/vuetifyjs/vuetify/issues/22066)\n* **v-touch:** set event handlers on root components ([#21997](https://github.com/vuetifyjs/vuetify/issues/21997)) ([1da3451](https://github.com/vuetifyjs/vuetify/commit/1da3451724ca97de6a95082c0a39736ef89a4906)), closes [#21768](https://github.com/vuetifyjs/vuetify/issues/21768)\n* **VAlert:** use outline instead of background in forced-colors mode ([#21946](https://github.com/vuetifyjs/vuetify/issues/21946)) ([7560323](https://github.com/vuetifyjs/vuetify/commit/7560323d9d33a9d71d2975ab25537cc7bfe493ec))\n* **VAutocomplete:** restore placeholder on blur ([#22114](https://github.com/vuetifyjs/vuetify/issues/22114)) ([d0ebeec](https://github.com/vuetifyjs/vuetify/commit/d0ebeec88485e3579967e073b0f17136cfd84eac)), closes [#21762](https://github.com/vuetifyjs/vuetify/issues/21762)\n* **VBtn, VChip:** correct link active state after navigation cancellation ([#21651](https://github.com/vuetifyjs/vuetify/issues/21651)) ([bce7046](https://github.com/vuetifyjs/vuetify/commit/bce70460ea7e7c9243c5bbe7e0c384202a2c402f)), closes [#21594](https://github.com/vuetifyjs/vuetify/issues/21594)\n* **VBtn:** add aria-disabled and tabindex to disabled links ([#22082](https://github.com/vuetifyjs/vuetify/issues/22082)) ([6e92383](https://github.com/vuetifyjs/vuetify/commit/6e92383726ee33cbb20cfa1e8c44e7d6f089a7fa)), closes [#22061](https://github.com/vuetifyjs/vuetify/issues/22061)\n* **VBtn:** don't set group state on link click ([e292171](https://github.com/vuetifyjs/vuetify/commit/e292171a593020b3eeb02cf8fa377cca8f48235a)), closes [#21594](https://github.com/vuetifyjs/vuetify/issues/21594)\n* **VBtn:** set group state for non-router links ([6bb3fce](https://github.com/vuetifyjs/vuetify/commit/6bb3fce6a165da8cd895ceba66690af3ab7422ef)), closes [#22085](https://github.com/vuetifyjs/vuetify/issues/22085)\n* **VCard:** render border in forced-colors mode ([#21968](https://github.com/vuetifyjs/vuetify/issues/21968)) ([b30d5c8](https://github.com/vuetifyjs/vuetify/commit/b30d5c851947cb214927b7e6bd9288de9d4b15fa))\n* **VChip:** correct opacity for plain variant ([#22005](https://github.com/vuetifyjs/vuetify/issues/22005)) ([48d20f3](https://github.com/vuetifyjs/vuetify/commit/48d20f3095b3b103c791b759dbbf28a751b374f5))\n* **VChip:** render border in forced-colors mode ([#21970](https://github.com/vuetifyjs/vuetify/issues/21970)) ([59aeadc](https://github.com/vuetifyjs/vuetify/commit/59aeadc4337bd3273eebb31cb220728cf0aadac3))\n* **VChipGroup:** render selected in forced-colors mode ([#21973](https://github.com/vuetifyjs/vuetify/issues/21973)) ([997dd56](https://github.com/vuetifyjs/vuetify/commit/997dd5668fe71994e11b4a406ea472697591ac6a))\n* **VCombobox:** filter matching items when opening first time ([#21901](https://github.com/vuetifyjs/vuetify/issues/21901)) ([eeb9d14](https://github.com/vuetifyjs/vuetify/commit/eeb9d145be9f8fb0984ab8a82fc0b561c530cb17)), closes [#21900](https://github.com/vuetifyjs/vuetify/issues/21900)\n* **VCombobox:** unstable menu state while typing ([#22045](https://github.com/vuetifyjs/vuetify/issues/22045)) ([3983af9](https://github.com/vuetifyjs/vuetify/commit/3983af946d49e9eab6c523777510871aa0b5d563))\n* **VDataTable:** allow filters on all columns ([#21876](https://github.com/vuetifyjs/vuetify/issues/21876)) ([af20234](https://github.com/vuetifyjs/vuetify/commit/af20234e3642ff0cff82f546390eca7412c594d0))\n* **VDataTable:** correct alignment of checkboxes ([402257d](https://github.com/vuetifyjs/vuetify/commit/402257d8490a43bb888203ddbb57b82773ad3c0b))\n* **VDataTable:** expand rows when items are plain array ([#22109](https://github.com/vuetifyjs/vuetify/issues/22109)) ([d8b5c4a](https://github.com/vuetifyjs/vuetify/commit/d8b5c4ad009cb27a0dcee6a0c0ee8d3a0a3dd939)), closes [#22080](https://github.com/vuetifyjs/vuetify/issues/22080)\n* **VDataTable:** more flexible alignment with grouping ([#21862](https://github.com/vuetifyjs/vuetify/issues/21862)) ([6d802d3](https://github.com/vuetifyjs/vuetify/commit/6d802d3c8e87752f601414141ce0ee843592535f)), closes [#17863](https://github.com/vuetifyjs/vuetify/issues/17863)\n* **VDataTable:** should allow expanding rows when `return-object` is true ([#21128](https://github.com/vuetifyjs/vuetify/issues/21128)) ([a586965](https://github.com/vuetifyjs/vuetify/commit/a586965cf351aa34e632fe753c43ffd6e9304e4d)), closes [#21096](https://github.com/vuetifyjs/vuetify/issues/21096)\n* **VList, VTreeview:** avoid locked active state when navigating ([#21725](https://github.com/vuetifyjs/vuetify/issues/21725)) ([bdbe15a](https://github.com/vuetifyjs/vuetify/commit/bdbe15ae1a6882dbfa48f620752eba9f26578d3b))\n* **VList:** outline and selection in forced-colors mode ([#21958](https://github.com/vuetifyjs/vuetify/issues/21958)) ([a8eac52](https://github.com/vuetifyjs/vuetify/commit/a8eac52195d894b5a6f3f3c1a93de4f59a2dba7a))\n* **VList:** use proper accessibility attributes ([#21444](https://github.com/vuetifyjs/vuetify/issues/21444)) ([9b2541e](https://github.com/vuetifyjs/vuetify/commit/9b2541e1085dd69295a23fd501d44dc51730638e)), closes [#20978](https://github.com/vuetifyjs/vuetify/issues/20978)\n* **VListGroup:** fit the navigation drawer rail ([2ebc7fa](https://github.com/vuetifyjs/vuetify/commit/2ebc7fa5b4b395337faadf4a8dfbf09edac6b247)), closes [#22047](https://github.com/vuetifyjs/vuetify/issues/22047)\n* **VListItem:** fix `rounded` prop ([9ec5a0d](https://github.com/vuetifyjs/vuetify/commit/9ec5a0d624dceb659f746d11263bb53298f2bdc5)), closes [#22015](https://github.com/vuetifyjs/vuetify/issues/22015)\n* **VMenu, VTooltip:** default to `stick-to-target` false ([263ca4b](https://github.com/vuetifyjs/vuetify/commit/263ca4b9eee3b1f4acc201d255a88ea1c2c222d4)), closes [#22055](https://github.com/vuetifyjs/vuetify/issues/22055)\n* **VNumberInput:** accept external changes when focused ([#21827](https://github.com/vuetifyjs/vuetify/issues/21827)) ([d0340e7](https://github.com/vuetifyjs/vuetify/commit/d0340e7ea0925dc9995a299cd61b6b91de30e239)), closes [#21735](https://github.com/vuetifyjs/vuetify/issues/21735) [#21804](https://github.com/vuetifyjs/vuetify/issues/21804)\n* **VNumberInput:** ignore custom `type` ([c535f1a](https://github.com/vuetifyjs/vuetify/commit/c535f1a17ba2fa15ae182dc0aeeef8df985b0d91)), closes [#22110](https://github.com/vuetifyjs/vuetify/issues/22110)\n* **VOtpInput:** focus next field when correcting values ([#21781](https://github.com/vuetifyjs/vuetify/issues/21781)) ([fc91e6d](https://github.com/vuetifyjs/vuetify/commit/fc91e6d7ee632437fb376b8169a88c593e436716)), closes [#21680](https://github.com/vuetifyjs/vuetify/issues/21680)\n* **VProgressLinear:** ensure visibility when using custom colors ([#21949](https://github.com/vuetifyjs/vuetify/issues/21949)) ([e3fdb53](https://github.com/vuetifyjs/vuetify/commit/e3fdb53a1fe5bb332ad981012cfdf8cab79faa1a))\n* **VSelects:** add `aria-controls` and `aria-expanded` ([#22025](https://github.com/vuetifyjs/vuetify/issues/22025)) ([a5abe89](https://github.com/vuetifyjs/vuetify/commit/a5abe893d7d3c9f93d69f60ece5a93185f74bb9a)), closes [#22017](https://github.com/vuetifyjs/vuetify/issues/22017)\n* **VSelects/VCombobox/VAutocomplete:** use rounding from Sass variable ([d3e56de](https://github.com/vuetifyjs/vuetify/commit/d3e56def269205bb84cd26a0c8c24e433045f71a)), closes [#21956](https://github.com/vuetifyjs/vuetify/issues/21956)\n* **VSkeletonLoader:** no wrapper for content ([#21637](https://github.com/vuetifyjs/vuetify/issues/21637)) ([17ae110](https://github.com/vuetifyjs/vuetify/commit/17ae11093e0ff21a0d0d16aa4559bedf86615236)), closes [#21286](https://github.com/vuetifyjs/vuetify/issues/21286)\n* **VSlideGroup:** correct hasNext after resize ([#21124](https://github.com/vuetifyjs/vuetify/issues/21124)) ([0633aef](https://github.com/vuetifyjs/vuetify/commit/0633aef52540f5e9853e25d0ef2ad94e134fe8b2)), closes [#21115](https://github.com/vuetifyjs/vuetify/issues/21115)\n* **VSlider:** respect disabled and readonly from form ([0bbf362](https://github.com/vuetifyjs/vuetify/commit/0bbf3623ae0a66743ead2b23fb7a0dc197a035f2)), closes [#22054](https://github.com/vuetifyjs/vuetify/issues/22054)\n* **VSnackbar:** render border in forced-colors mode ([#21977](https://github.com/vuetifyjs/vuetify/issues/21977)) ([a2249c2](https://github.com/vuetifyjs/vuetify/commit/a2249c24aaed5cce0cc926993829c405b5d11296))\n* **VTimeline:** render lines in forced-colors mode ([#21974](https://github.com/vuetifyjs/vuetify/issues/21974)) ([dc7417c](https://github.com/vuetifyjs/vuetify/commit/dc7417c60c95b34b2f8375eb2269955d846427d9))\n* **VTreeview:** indent lines should support RTL ([1733666](https://github.com/vuetifyjs/vuetify/commit/1733666d5364819b78605185c00deeeef3f2f2a4)), closes [#21952](https://github.com/vuetifyjs/vuetify/issues/21952)\n* **VTreeview:** match type of update:opened with VList ([#22092](https://github.com/vuetifyjs/vuetify/issues/22092)) ([8924b4d](https://github.com/vuetifyjs/vuetify/commit/8924b4d4230cba102f3293fca0fa4c569909eb3c)), closes [#22091](https://github.com/vuetifyjs/vuetify/issues/22091)\n* **VTreeview:** support prepend icon and avatar ([#21813](https://github.com/vuetifyjs/vuetify/issues/21813)) ([478230a](https://github.com/vuetifyjs/vuetify/commit/478230abcdc0fb156523cc9edd4d5f10eea3e069)), closes [#21812](https://github.com/vuetifyjs/vuetify/issues/21812)\n* **VWindow:** override `transition-duration` to respect user preference ([27fe364](https://github.com/vuetifyjs/vuetify/commit/27fe36478ae161b7758a08c8dd4b70e7068a8f06))\n\n### :test_tube: Labs\n\n* **mask:** create useMask composable ([#21736](https://github.com/vuetifyjs/vuetify/issues/21736)) ([a687f7a](https://github.com/vuetifyjs/vuetify/commit/a687f7a38f4377421f47660564fe7f02d6e0231c))\n* **VCalendar:** correct effective weekdays determination ([#22042](https://github.com/vuetifyjs/vuetify/issues/22042)) ([54e6674](https://github.com/vuetifyjs/vuetify/commit/54e667426d5ddefbab951d240511cfc74afa0233))\n* **VCalendar:** directly port from v2 ([#21910](https://github.com/vuetifyjs/vuetify/issues/21910)) ([2e6f72b](https://github.com/vuetifyjs/vuetify/commit/2e6f72baf3a8337dee76e321ed5e18910159c5f6)), closes [#19065](https://github.com/vuetifyjs/vuetify/issues/19065) [#20098](https://github.com/vuetifyjs/vuetify/issues/20098) [#20947](https://github.com/vuetifyjs/vuetify/issues/20947) [#20970](https://github.com/vuetifyjs/vuetify/issues/20970) [#21379](https://github.com/vuetifyjs/vuetify/issues/21379) [#21783](https://github.com/vuetifyjs/vuetify/issues/21783) [#21964](https://github.com/vuetifyjs/vuetify/issues/21964) [#22016](https://github.com/vuetifyjs/vuetify/issues/22016) [#22018](https://github.com/vuetifyjs/vuetify/issues/22018)\n* **VCalendar:** fix click:date event error ([97d3a3e](https://github.com/vuetifyjs/vuetify/commit/97d3a3eed1add2b3957bb65916ebf234e9bf8e67)), closes [#22079](https://github.com/vuetifyjs/vuetify/issues/22079)\n* **VCalendar:** prevent month view event duplication ([977a7e2](https://github.com/vuetifyjs/vuetify/commit/977a7e2a2e400092723e44024c23a2f56947ac77)), closes [#22062](https://github.com/vuetifyjs/vuetify/issues/22062)\n* **VCalendar:** translate eventMoreText ([e41e091](https://github.com/vuetifyjs/vuetify/commit/e41e091f10a13aa55b14b567272412391617ff1a)), closes [#22062](https://github.com/vuetifyjs/vuetify/issues/22062)\n* **VCalendar:** use camelCase event names ([8b2fae3](https://github.com/vuetifyjs/vuetify/commit/8b2fae3428d2228660c8c8d80721da5bb9a9db6d)), closes [#22063](https://github.com/vuetifyjs/vuetify/issues/22063)\n* **VDateInput:** pass-through picker slots ([#21975](https://github.com/vuetifyjs/vuetify/issues/21975)) ([d91dad0](https://github.com/vuetifyjs/vuetify/commit/d91dad08751717ca2097932774485a939e2d9ca7))\n* **VMaskInput:** fix caret position while editing ([#21925](https://github.com/vuetifyjs/vuetify/issues/21925)) ([27dc68c](https://github.com/vuetifyjs/vuetify/commit/27dc68caec935395fdd0d713e106db06f7e00404)), closes [#21776](https://github.com/vuetifyjs/vuetify/issues/21776)\n* **VPicker:** add `hide-title` prop ([#21657](https://github.com/vuetifyjs/vuetify/issues/21657)) ([8d7eac3](https://github.com/vuetifyjs/vuetify/commit/8d7eac3dcd80387e4d3118f1660d7fb25251f66a)), closes [#21545](https://github.com/vuetifyjs/vuetify/issues/21545)\n* **VVideo:** avoid interaction conflicts with VOverlay ([10a1821](https://github.com/vuetifyjs/vuetify/commit/10a18215226793f2832a5b68ebec52241f8db2c7)), closes [#21962](https://github.com/vuetifyjs/vuetify/issues/21962)\n* **VVideo:** background variant should fill the container ([b766424](https://github.com/vuetifyjs/vuetify/commit/b76642493c7144df3573e6bedf4a62c7ea5c94e7))\n\n### :arrows_counterclockwise: Reverts\n\n* Revert \"fix(VSelect): use selected text instead of value (#21902)\" ([95dea2c](https://github.com/vuetifyjs/vuetify/commit/95dea2c3934d58fbebb50cde6314f19e8305cb1d)), closes [#22006](https://github.com/vuetifyjs/vuetify/issues/22006)\n* Revert \"fix(VBtn, VChip): correct link active state after navigation cancellation (#21651)\" ([ab28070](https://github.com/vuetifyjs/vuetify/commit/ab28070a432a15ab8ae0aeba8faa0ab0cb0b4d38)), closes [#22072](https://github.com/vuetifyjs/vuetify/issues/22072) [#22065](https://github.com/vuetifyjs/vuetify/issues/22065)\n* Revert \"fix(VCombobox): filter matching items when opening first time\" ([44002f6](https://github.com/vuetifyjs/vuetify/commit/44002f65364c524953a955479cd5badb3d926cf9)), closes [#22077](https://github.com/vuetifyjs/vuetify/issues/22077)\n\n
\n\n## The Pieces Come Together{ .mt-4 }\n\nThis 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.\n\nOctober 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.\n\n---\n\n*The Vuetify Team*\n","frontmatter":{"layout":"blog","meta":{"title":"September 2025 Update","description":"September assembles the building blocks for Vuetify's next phase — from the new Figma UI Kit and design-to-development workflows to foundational v0 composables.","keywords":"Vuetify September 2025, Figma UI Kit, Vuetify0"}},"isInternal":false,"tokens":11316,"sizeBytes":37591},{"name":"september-2026-update.md","path":"packages/docs/src/pages/en/blog/september-2026-update.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/september-2026-update.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"blog","meta":{"title":"September 2026 Update","description":"This September the team shipped v4.2, followed by 3 patches, while steadily moving to offload more utilities to @vuetify/v0.","keywords":"Vuetify September 2026, Vuetify 4.2, Vuetify 4.3, @vuetify/v0, VInfiniteCarousel, CSS layers, Vuetify MCP"}},"isInternal":false,"tokens":9242,"sizeBytes":33099},{"name":"state-of-the-union-2024-post-mortem.md","path":"packages/docs/src/pages/en/blog/state-of-the-union-2024-post-mortem.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/state-of-the-union-2024-post-mortem.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"blog","meta":{"title":"State of the Union 2024 Post Mortem","description":"An update about where we are currently post 2024 State of the Union","keywords":"vuetify, blog, updates, state of the union"}},"isInternal":false,"tokens":1515,"sizeBytes":6195},{"name":"state-of-the-union-2024.md","path":"packages/docs/src/pages/en/blog/state-of-the-union-2024.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/state-of-the-union-2024.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"blog","meta":{"title":"Vuetify — State of the Union 2024","description":"Reflecting on the journey and looking ahead for 2025","keywords":"vuetify, blog, news, updates, stories, ecosystem, state of the union"}},"isInternal":false,"tokens":2691,"sizeBytes":11633},{"name":"vuetify-herodevs-partnership.md","path":"packages/docs/src/pages/en/blog/vuetify-herodevs-partnership.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/blog/vuetify-herodevs-partnership.md","title":"Blog Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"blog","meta":{"title":"Vuetify HeroDevs Partnership","description":"Vuetify partners with HeroDevs to provide extended long-term support for Vuetify 2 users through Vue 2 NES + Essentials, ensuring security and compliance.","keywords":"Vuetify, HeroDevs, Vue 2 NES, long-term support, security, compliance, Vuetify 2, partnership"}},"isInternal":false,"tokens":684,"sizeBytes":2970},{"name":"alerts.md","path":"packages/docs/src/pages/en/components/alerts.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/alerts.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Alerts","title":"Alert component","description":"The v-alert component is used to convey information to the user. Designed to stand out, the alerts come in four contextual styles.","keywords":"v-alert, alerts, vue alert component, vuetify alert component"},"related":["/components/buttons/","/components/icons/","/components/snackbars/"],"features":{"figma":true,"github":"/components/VAlert/","label":"C: VAlert","report":true}},"isInternal":false,"tokens":1980,"sizeBytes":8438},{"name":"all.md","path":"packages/docs/src/pages/en/components/all.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/all.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"All Components","title":"All Vuetify Components","description":"Browse all of the available Vuetify components or group by category.","keywords":"components, all components, all Vuetify components"}},"isInternal":false,"tokens":3033,"sizeBytes":15156},{"name":"app-bars.md","path":"packages/docs/src/pages/en/components/app-bars.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/app-bars.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"App bars","title":"App-bar component","description":"The app bar component is a supercharged toolbar with advanced scrolling techniques and application layout support.","keywords":"app bars, vuetify app bar component, vue app bar component"},"related":["/components/buttons/","/components/icons/","/components/toolbars/"],"features":{"figma":true,"label":"C: VAppBar","report":true,"github":"/components/VAppBar/","spec":"https://m2.material.io/components/app-bars-top"}},"isInternal":false,"tokens":1109,"sizeBytes":4692},{"name":"application.md","path":"packages/docs/src/pages/en/components/application.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/application.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Application","description":"Vuetify comes equipped with a default markup that makes it easy to create layouts (boilerplate) for any Vue application.","keywords":"default layout, vuetify default markup, vuetify default layout"},"related":["/features/theme/","/components/app-bars/","/components/navigation-drawers/"],"features":{"report":true}},"isInternal":false,"tokens":550,"sizeBytes":2532},{"name":"aspect-ratios.md","path":"packages/docs/src/pages/en/components/aspect-ratios.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/aspect-ratios.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Aspect ratios","description":"The responsive component is used as a wrapper component to force custom aspect ratios for its children.","keywords":"ratio, responsive, aspect ratios"},"related":["/components/cards/","/components/sheets/","/components/images/"],"features":{"github":"/components/VAspectRatio/","label":"C: VAspectRatio","report":true}},"isInternal":false,"tokens":170,"sizeBytes":723},{"name":"audio-players.md","path":"packages/docs/src/pages/en/components/audio-players.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/audio-players.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Audio players","title":"Audio player component","description":"The audio player component wraps the native audio element with a seek bar and a transport row you compose from built-in and custom actions.","keywords":"audio, player, waveform, vuetify audio component, vue audio component"},"features":{"github":"/labs/VAudio/","label":"C: VAudio","report":true}},"isInternal":false,"tokens":1635,"sizeBytes":6591},{"name":"autocompletes.md","path":"packages/docs/src/pages/en/components/autocompletes.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/autocompletes.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Autocompletes","title":"Autocomplete component","description":"The autocomplete component provides type-ahead autocomplete functionality and provides a list of available options.","keywords":"autocomplete, vuetify autocomplete component, vue autocomplete component"},"related":["/components/combobox/","/components/forms/","/components/selects/"],"features":{"figma":true,"label":"C: VAutocomplete","report":true,"github":"/components/VAutocomplete/","spec":"https://m3.material.io/components/text-fields"}},"isInternal":false,"tokens":1169,"sizeBytes":5252},{"name":"avatar-groups.md","path":"packages/docs/src/pages/en/components/avatar-groups.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/avatar-groups.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Avatar groups","title":"Avatar group component","description":"The avatar group component combines multiple avatars into a stacked or inline group display.","keywords":"avatar groups, vuetify avatar group component, vue avatar group component"},"related":["/components/avatars/","/components/chip-groups/","/components/lists/"],"features":{"github":"/components/VAvatarGroup/","label":"C: VAvatarGroup","report":true}},"isInternal":false,"tokens":607,"sizeBytes":2550},{"name":"avatars.md","path":"packages/docs/src/pages/en/components/avatars.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/avatars.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Avatars","title":"Avatar component","description":"The avatar component is used to control the size and border radius of an image. It can be used with numerous components to provide better visual context.","keywords":"avatars, vuetify avatar component, vue avatar component"},"related":["/components/badges/","/components/icons/","/components/lists/"],"features":{"figma":true,"github":"/components/VAvatar/","label":"C: VAvatar","report":true}},"isInternal":false,"tokens":680,"sizeBytes":2939},{"name":"badges.md","path":"packages/docs/src/pages/en/components/badges.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/badges.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Badges","title":"Badge component","description":"The badge component is a small status descriptor for elements. This typically contains a small number or short set of characters.","keywords":"badges, vuetify badge component, vue badge component"},"related":["/components/avatars/","/components/icons/","/components/toolbars/"],"features":{"github":"/components/VBadge/","label":"C: VBadge","report":true}},"isInternal":false,"tokens":347,"sizeBytes":1505},{"name":"banners.md","path":"packages/docs/src/pages/en/components/banners.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/banners.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Banners","title":"Banner component","description":"The banner component displays an important and concise message for a user to address. It can also indicate actions that the user can take.","keywords":"banners, vuetify banner component, vue banner component"},"related":["/components/alerts/","/components/icons/","/components/snackbars/"],"features":{"figma":true,"github":"/components/VBanner/","label":"C: VBanner","report":true,"spec":"https://m2.material.io/components/banners"}},"isInternal":false,"tokens":688,"sizeBytes":2894},{"name":"bottom-navigation.md","path":"packages/docs/src/pages/en/components/bottom-navigation.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/bottom-navigation.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Bottom navigation","title":"Bottom navigation component","description":"The bottom navigation component is used for mobile devices and acts as the primary navigation for your application.","keywords":"bottom navigation, vuetify bottom navigation component, vue bottom navigation component"},"related":["/components/buttons/","/components/icons/","/components/tabs/"],"features":{"figma":true,"label":"C: VBottomNavigation","report":true,"github":"/components/VBottomNavigation/","spec":"https://m2.material.io/components/bottom-navigation"}},"isInternal":false,"tokens":810,"sizeBytes":3613},{"name":"bottom-sheets.md","path":"packages/docs/src/pages/en/components/bottom-sheets.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/bottom-sheets.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Bottom sheets","title":"Bottom sheet component","description":"The bottom sheet component is used for elevating content above other elements in a dialog style fashion.","keywords":"bottom sheets, vuetify bottom sheet component, vue bottom sheet component"},"related":["/components/dialogs/","/components/lists/","/components/menus/"],"features":{"label":"C: VBottomSheet","github":"/components/VBottomSheet/","report":true,"spec":"https://m2.material.io/components/sheets-bottom"}},"isInternal":false,"tokens":861,"sizeBytes":3978},{"name":"breadcrumbs.md","path":"packages/docs/src/pages/en/components/breadcrumbs.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/breadcrumbs.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Breadcrumbs","title":"Breadcrumbs component","description":"The breadcrumbs component is a navigational helper for pages. It can accept a Material Icons icon or characters as a divider.","keywords":"breadcrumbs, vuetify breadcrumbs component, vue breadcrumbs component, v-breadcrumbs component"},"related":["/components/buttons/","/components/navigation-drawers/","/components/icons/"],"features":{"figma":true,"label":"C: VBreadcrumbs","report":true,"github":"/components/VBreadcrumbs/"}},"isInternal":false,"tokens":471,"sizeBytes":1996},{"name":"button-groups.md","path":"packages/docs/src/pages/en/components/button-groups.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/button-groups.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Button toggles","title":"Button toggle component","description":"The button toggle component allows you to combine a series of selectable buttons together in a single element.","keywords":"button groups, vuetify button group component, vue button group component"},"related":["/components/buttons/","/components/icons/","/components/toolbars/"],"features":{"github":"/components/VBtnToggle/","label":"C: VBtnToggle","report":true,"spec":"https://m3.material.io/components/all-buttons"}},"isInternal":false,"tokens":533,"sizeBytes":2262},{"name":"buttons.md","path":"packages/docs/src/pages/en/components/buttons.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/buttons.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Buttons","title":"Button component","description":"The button component communicates actions that a user can take and are typically placed in dialogs, forms, cards and toolbars.","keywords":"buttons, vuetify button component, vue button component"},"related":["/components/button-groups/","/components/icons/","/components/cards/"],"features":{"figma":true,"github":"/components/VBtn/","label":"C: VBtn","report":true,"spec":"https://m3.material.io/components/buttons"}},"isInternal":false,"tokens":4126,"sizeBytes":17359},{"name":"calendars.md","path":"packages/docs/src/pages/en/components/calendars.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/calendars.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Calendars","title":"Calendar component","description":"The calendar component is a clean and simple adaptation to the popular Google Calendar application.","keywords":"calendars, vuetify calendar component, vue calendar component"},"related":["/components/date-pickers","/components/time-pickers","/components/cards"],"features":{"github":"/components/VCalendar/","label":"C: VCalendar","report":true}},"isInternal":false,"tokens":707,"sizeBytes":3180},{"name":"cards.md","path":"packages/docs/src/pages/en/components/cards.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/cards.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Cards","title":"Card component","description":"The v-card component is a versatile and enhanced sheet of paper that provides a simple interface for headings, text, images, and actions.","keywords":"cards, vuetify card component, vue card component, v-card"},"related":["/components/buttons","/components/images","/styles/text-and-typography"],"features":{"figma":true,"label":"C: VCard","github":"/components/VCard/","report":true,"spec":"https://m2.material.io/components/cards"}},"isInternal":false,"tokens":2107,"sizeBytes":9180},{"name":"carousels.md","path":"packages/docs/src/pages/en/components/carousels.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/carousels.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Carousels","title":"Carousel component","description":"The carousel component is used to cycle through visual content such as images or slides of text.","keywords":"carousels, vuetify carousel component, vue carousel component"},"related":["/components/parallax/","/components/images/","/components/windows/"],"features":{"github":"/components/VCarousel/","label":"C: VCarousel","report":true}},"isInternal":false,"tokens":581,"sizeBytes":2562},{"name":"checkboxes.md","path":"packages/docs/src/pages/en/components/checkboxes.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/checkboxes.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Checkboxes","title":"Checkbox component","description":"The checkbox component permits users to select between two values.","keywords":"checkbox, checkbox component, vuetify checkbox component, vue checkbox component"},"related":["/components/switches","/components/forms","/components/text-fields"],"features":{"label":"C: VCheckbox","report":true,"github":"/components/VCheckbox/","spec":"https://m3.material.io/components/checkboxes"}},"isInternal":false,"tokens":527,"sizeBytes":2304},{"name":"chip-groups.md","path":"packages/docs/src/pages/en/components/chip-groups.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/chip-groups.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Chip groups","title":"Chip group component","description":"The chip group component combines numerous selectable chips into single or multiple lines.","keywords":"chip groups, vuetify chip group component, vue chip group component"},"related":["/components/chips/","/components/slide-groups/","/components/item-groups/"],"features":{"github":"/components/VChipGroup/","label":"C: VChipGroup","report":true,"spec":"https://m2.material.io/components/chips#choice-chips"}},"isInternal":false,"tokens":558,"sizeBytes":2462},{"name":"chips.md","path":"packages/docs/src/pages/en/components/chips.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/chips.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Chips","title":"Chip component","description":"The chip component allows a user to enter information, make selections, filter content or trigger actions.","keywords":"chips, vuetify chip component, vue chip component"},"related":["/components/avatars","/components/icons","/components/selects"],"features":{"figma":true,"github":"/components/VChip/","label":"C: VChip","report":true,"spec":"https://m2.material.io/components/chips"}},"isInternal":false,"tokens":1217,"sizeBytes":5287},{"name":"color-inputs.md","path":"packages/docs/src/pages/en/components/color-inputs.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/color-inputs.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Color inputs","title":"Color input component","description":"The color input is a specialized input that provides a clean interface for selecting colors.","keywords":"color input, color picker, color field"},"related":["/components/color-pickers/","/components/text-fields/","/components/menus/"],"features":{"label":"C: VColorInput","report":true,"github":"/components/VColorInput/"}},"isInternal":false,"tokens":416,"sizeBytes":1744},{"name":"color-pickers.md","path":"packages/docs/src/pages/en/components/color-pickers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/color-pickers.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Color pickers","title":"Color picker component","description":"The color picker component allows users to select a from pre-defined or custom colors using a variety of different inputs and formats.","keywords":"color pickers, vuetify color picker component, vue color picker component"},"related":["/components/menus/","/styles/colors/","/features/theme/"],"features":{"github":"/components/VColorPicker/","label":"C: VColorPicker","report":true}},"isInternal":false,"tokens":619,"sizeBytes":2664},{"name":"combobox.md","path":"packages/docs/src/pages/en/components/combobox.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/combobox.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Combobox","title":"Combobox component","description":"The combobox component provides type-ahead autocomplete functionality and allows users to provide a custom values beyond the provided list of options.","keywords":"combobox, vuetify combobox component, vue combobox component"},"related":["/components/autocompletes/","/components/forms/","/components/selects/"],"features":{"figma":true,"label":"C: VCombobox","report":true,"github":"/components/VCombobox/","spec":"https://m3.material.io/components/text-fields"}},"isInternal":false,"tokens":834,"sizeBytes":3581},{"name":"command-palettes.md","path":"packages/docs/src/pages/en/components/command-palettes.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/command-palettes.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Command Palettes","title":"Command Palette component","description":"A keyboard-driven command palette component that provides a searchable dialog interface for executing commands and actions.","keywords":"command palette, keyboard shortcuts, vuetify command palette component, vue command palette component"},"related":["/components/dialogs/","/components/hotkeys/","/components/lists/"],"features":{"github":"/labs/VCommandPalette/","label":"C: VCommandPalette","report":true}},"isInternal":false,"tokens":1111,"sizeBytes":5130},{"name":"confirm-edit.md","path":"packages/docs/src/pages/en/components/confirm-edit.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/confirm-edit.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Confirm Edit","title":"Confirm Edit","description":"The confirm edit component lets users verify changes before they are committed — preventing accidental edits or letting them cancel before saving.","keywords":"v-confirm-edit, confirm edit, vuetify confirm edit, vuetify confirm edit component, vuetify confirm edit examples"},"related":["/components/avatars/","/components/icons/","/components/toolbars/"],"features":{"github":"/components/VConfirmEdit/","label":"C: VConfirmEdit","report":true}},"isInternal":false,"tokens":371,"sizeBytes":1704},{"name":"data-iterators.md","path":"packages/docs/src/pages/en/components/data-iterators.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/data-iterators.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Data iterators","title":"Data iterator component","description":"The data iterator component is used for filter and displaying data including sorting, searching, pagination, and selection.","keywords":"data iterators, vuetify data iterator component, vue data iterator component"},"related":["/components/data-tables/basics/","/components/tables/","/components/toolbars/"],"features":{"github":"/components/VDataIterator/","label":"C: VDataIterator","report":true}},"isInternal":false,"tokens":845,"sizeBytes":3618},{"name":"basics.md","path":"packages/docs/src/pages/en/components/data-tables/basics.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/data-tables/basics.md","title":"Data-tables Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Basics","title":"Data table component","description":"The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.","keywords":"data tables, vuetify data table component, vue data table component"},"related":["/components/paginations/","/components/tables/","/components/lists/"],"features":{"github":"/components/VDataTable/","label":"C: VDataTable","report":true,"spec":"https://m2.material.io/components/data-tables"}},"isInternal":false,"tokens":2691,"sizeBytes":12065},{"name":"data-and-display.md","path":"packages/docs/src/pages/en/components/data-tables/data-and-display.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/data-tables/data-and-display.md","title":"Data-tables Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Data and Display","title":"Data table - Data and Display","description":"The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.","keywords":"data tables, vuetify data table component, vue data table component"},"related":["/components/data-tables/basics/","/components/paginations/","/components/tables/"],"features":{"github":"/components/VDataTable/","label":"C: VDataTable","report":true}},"isInternal":false,"tokens":1342,"sizeBytes":6067},{"name":"introduction.md","path":"packages/docs/src/pages/en/components/data-tables/introduction.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/data-tables/introduction.md","title":"Data-tables Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Introduction","title":"Data table - Introduction","description":"The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.","keywords":"data tables, vuetify data table component, vue data table component"},"related":["/components/paginations/","/components/selects/","/components/data-tables/basics/"]},"isInternal":false,"tokens":521,"sizeBytes":3079},{"name":"server-side-tables.md","path":"packages/docs/src/pages/en/components/data-tables/server-side-tables.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/data-tables/server-side-tables.md","title":"Data-tables Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Server side tables","title":"Data table - Server side tables","description":"The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.","keywords":"data tables, vuetify data table component, vue data table component"},"related":["/components/data-tables/basics/","/components/data-tables/virtual-tables/","/components/tables/"],"features":{"github":"/components/VDataTable/VDataTableServer.tsx","label":"C: VDataTableServer","report":true}},"isInternal":false,"tokens":447,"sizeBytes":1951},{"name":"virtual-tables.md","path":"packages/docs/src/pages/en/components/data-tables/virtual-tables.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/data-tables/virtual-tables.md","title":"Data-tables Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Virtual tables","title":"Data table - Virtual tables","description":"The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.","keywords":"data tables, vuetify data table component, vue data table component"},"related":["/components/data-tables/basics/","/components/data-tables/server-side-tables/","/components/tables/"],"features":{"github":"/components/VDataTable/VDataTableVirtual.tsx","label":"C: VDataTableVirtual","report":true}},"isInternal":false,"tokens":373,"sizeBytes":1620},{"name":"date-inputs.md","path":"packages/docs/src/pages/en/components/date-inputs.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/date-inputs.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Date inputs","title":"Date input component","description":"The date input is a specialized input that provides a clean interface for selecting dates, showing detailed selection information.","keywords":"date input, date picker, date field"},"related":["/components/date-pickers/","/components/text-fields/","/components/menus/"],"features":{"label":"C: VDateInput","report":true,"github":"/components/VDateInput/"}},"isInternal":false,"tokens":694,"sizeBytes":3024},{"name":"date-pickers-month.md","path":"packages/docs/src/pages/en/components/date-pickers-month.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/date-pickers-month.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"disabled":true,"meta":{"title":"Month picker component","description":"The month picker component is a stand-alone interface that allows the selection of month or both month and year.","keywords":"month pickers, vuetify month picker component, vue month picker component"},"related":["/components/date-pickers/","/components/menus/","/components/time-pickers/"]},"isInternal":false,"tokens":686,"sizeBytes":3156},{"name":"date-pickers.md","path":"packages/docs/src/pages/en/components/date-pickers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/date-pickers.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"title":"Date pickers","description":"The date picker component is a stand-alone interface that allows the selection of a date, month and year.","keywords":"date pickers, vuetify date picker component, vue date picker component"},"related":["/components/buttons/","/features/dates/","/components/text-fields/"],"features":{"github":"/components/VDatePicker/","label":"C: VDatePicker","report":true,"spec":"https://m3.material.io/components/date-pickers"}},"isInternal":false,"tokens":1174,"sizeBytes":5047},{"name":"date-range-pickers.md","path":"packages/docs/src/pages/en/components/date-range-pickers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/date-range-pickers.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Date range pickers","description":"The date range picker component lets users select a start and end date across two adjacent months.","keywords":"date range picker, vuetify date range picker, vue date range picker"},"related":["/components/date-pickers/","/components/date-inputs/","/components/month-pickers/"],"features":{"label":"C: VDateRangePicker","github":"/labs/VDateRangePicker/","report":true}},"isInternal":false,"tokens":479,"sizeBytes":2019},{"name":"defaults-providers.md","path":"packages/docs/src/pages/en/components/defaults-providers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/defaults-providers.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Defaults providers","title":"Defaults provider component","description":"The defaults provider allows you to provide specific default prop values to components in a section of your application","keywords":"defaults provider, vuetify defaults provider component, vue defaults provider component"},"related":["/features/aliasing/","/features/blueprints/","/features/global-configuration/"],"features":{"github":"/components/VDefaultsProvider/","label":"C: VDefaultsProvider","report":true}},"isInternal":false,"tokens":308,"sizeBytes":1439},{"name":"dialogs.md","path":"packages/docs/src/pages/en/components/dialogs.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/dialogs.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Dialogs","title":"Dialog component","description":"The dialog component informs a user about a specific task and may contain critical information or require the user to take a specific action.","keywords":"dialogs, vuetify dialog component, vue dialog component"},"related":["/components/buttons","/components/cards","/components/menus"],"features":{"github":"/components/VDialog/","label":"C: VDialog","report":true,"spec":"https://m2.material.io/components/dialogs"}},"isInternal":false,"tokens":1075,"sizeBytes":4772},{"name":"dividers.md","path":"packages/docs/src/pages/en/components/dividers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/dividers.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Dividers","title":"Divider component","description":"The divider component is a thin line commonly used to separate groups of content in lists or layouts.","keywords":"dividers, vuetify divider component, vue divider component"},"related":["/components/lists","/components/navigation-drawers","/components/toolbars"],"features":{"github":"/components/VDivider/","label":"C: VDivider","report":true,"spec":"https://m3.material.io/components/dividers"}},"isInternal":false,"tokens":702,"sizeBytes":2993},{"name":"empty-states.md","path":"packages/docs/src/pages/en/components/empty-states.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/empty-states.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Empty states","description":"The empty state component is used to indicate that a list is empty or that no search results were found.","keywords":"empty state, no results, no data, no items, no content, no records, no information, no search results"},"related":["/components/buttons/","/components/icons/","/components/avatars/"],"features":{"report":true,"spec":"https://m2.material.io/design/communication/empty-states.html","label":"C: VEmptyState","github":"/components/VEmptyState/"}},"isInternal":false,"tokens":734,"sizeBytes":3140},{"name":"expansion-panels.md","path":"packages/docs/src/pages/en/components/expansion-panels.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/expansion-panels.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Expansion panels","title":"Expansion panel component","description":"The expansion panel component is a lightweight container that hides information behind expandable and contractable containers.","keywords":"expansion panels, vuetify expansion panel component, vue expansion panel component"},"related":["/components/cards/","/components/data-tables/basics/","/components/lists/"],"features":{"github":"/components/VExpansionPanel/","label":"C: VExpansionPanels","report":true,"spec":"https://m1.material.io/components/expansion-panels.html"}},"isInternal":false,"tokens":807,"sizeBytes":3583},{"name":"[...name].md","path":"packages/docs/src/pages/en/components/explorer/[...name].md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/explorer/[...name].md","title":"Explorer Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"backmatter":false,"fluid":true,"meta":{"nav":"API Explorer","title":"API Explorer","description":"Explore the Vuetify API","keywords":"vuetify api explorer"}},"isInternal":false,"tokens":75,"sizeBytes":292},{"name":"file-inputs.md","path":"packages/docs/src/pages/en/components/file-inputs.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/file-inputs.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"File inputs","title":"File input component","description":"The file input component is a specialized input that provides a clean interface for selecting files, showing detailed selection information and upload progress.","keywords":"file input, file upload, file field"},"related":["/components/text-fields/","/components/forms/","/components/icons/"],"features":{"label":"C: VFileInput","report":true,"github":"/components/VFileInput/"}},"isInternal":false,"tokens":854,"sizeBytes":3861},{"name":"file-upload.md","path":"packages/docs/src/pages/en/components/file-upload.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/file-upload.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"File upload","description":"The file upload component is a drag and drop area for uploading files.","keywords":"file uploading, file upload, file drag and drop, file drop area, file dropzone, file upload component"},"related":["/components/buttons/","/components/file-inputs/","/components/sheets/"],"features":{"report":true,"label":"C: VFileUpload","github":"/components/VFileUpload/"}},"isInternal":false,"tokens":627,"sizeBytes":2683},{"name":"floating-action-buttons.md","path":"packages/docs/src/pages/en/components/floating-action-buttons.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/floating-action-buttons.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Floating Action Buttons","title":"FAB component","description":"The floating action button (or FAB) component is a promoted action that is elevated above the UI or attached to an element such as a card.","keywords":"floating action button, fab, vuetify fab component, vue fab component"},"related":["/components/buttons/","/components/icons/","/styles/transitions/"],"features":{"report":true,"label":"C: VFab","github":"/components/VFab/","spec":"https://m2.material.io/components/buttons-floating-action-button"}},"isInternal":false,"tokens":575,"sizeBytes":2514},{"name":"footers.md","path":"packages/docs/src/pages/en/components/footers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/footers.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Footers","title":"Footer component","description":"The footer component provides a container for displaying additional navigation information about a site.","keywords":"footers, vuetify footer component, vue footer component"},"related":["/components/grids","/components/buttons","/components/toolbars"],"features":{"figma":true,"label":"C: VFooter","report":true,"github":"/components/VFooter/"}},"isInternal":false,"tokens":302,"sizeBytes":1306},{"name":"forms.md","path":"packages/docs/src/pages/en/components/forms.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/forms.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Forms","title":"Form component","description":"The form component provides a wrapper that makes it easy to process and control validation states of input components.","keywords":"forms, vuetify form component, vue form component, form validation"},"related":["/components/selects/","/components/switches/","/components/text-fields/"],"features":{"label":"C: VForm","report":true,"github":"/components/VForm/"}},"isInternal":false,"tokens":1515,"sizeBytes":6336},{"name":"grids.md","path":"packages/docs/src/pages/en/components/grids.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/grids.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Grids","title":"Grid system","description":"Vuetify supports the 12 point Material Design grid for laying out and controlling breakpoints for your application.","keywords":"grids, vuetify grid component, layout component, flex component"},"related":["/styles/flex","/features/display-and-platform/","/styles/display"],"features":{"github":"/components/VGrid/","label":"C: VGrid","report":true,"spec":"https://m3.material.io/foundations/layout/grids-spacing"}},"isInternal":false,"tokens":1889,"sizeBytes":8299},{"name":"heatmaps.md","path":"packages/docs/src/pages/en/components/heatmaps.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/heatmaps.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Heatmaps","title":"Heatmap component","description":"The heatmap component visualizes tabular data as a grid of colored cells.","keywords":"vuetify heatmap component, vue heatmap component, calendar heatmap, grid, chart"},"features":{"github":"/labs/VHeatmap/","label":"C: VHeatmap","report":true}},"isInternal":false,"tokens":931,"sizeBytes":3903},{"name":"highlights.md","path":"packages/docs/src/pages/en/components/highlights.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/highlights.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Highlights","title":"Highlight component","description":"The highlight component visually marks matching substrings within a block of text, supporting plain string queries and pre-computed match ranges.","keywords":"vuetify highlight component, vue highlight component, text highlight, search highlight, mark"},"features":{"github":"/components/VHighlight/","label":"C: VHighlight","report":true}},"isInternal":false,"tokens":542,"sizeBytes":2293},{"name":"hotkeys.md","path":"packages/docs/src/pages/en/components/hotkeys.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/hotkeys.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Hotkeys","title":"Hotkey component","description":"The hotkey component displays keyboard shortcuts in a visually consistent and platform-aware manner.","keywords":"hotkeys, keyboard shortcuts, vuetify hotkey component, vue hotkey component"},"related":["/components/buttons/","/components/icons/","/components/toolbars/"],"features":{"github":"/components/VHotkey/","label":"C: VHotkey","report":true}},"isInternal":false,"tokens":1130,"sizeBytes":5119},{"name":"hover.md","path":"packages/docs/src/pages/en/components/hover.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/hover.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Hover","title":"Hover component","description":"The hover component makes it easy respond when the user hover events by wrapping selectable content.","keywords":"hover, vuetify hover component, vue hover component"},"related":["/components/cards/","/components/images/","/components/tooltips/"],"features":{"github":"/components/VHover/","label":"C: VHover","report":true}},"isInternal":false,"tokens":382,"sizeBytes":1688},{"name":"icon-buttons.md","path":"packages/docs/src/pages/en/components/icon-buttons.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/icon-buttons.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Icon buttons","title":"Icon button component","description":"The icon component is compatible with multiple common icon fonts such as Material Design Icons, Font Awesome and more.","keywords":"icons, vuetify icon component, vue icon component"},"related":["/features/icon-fonts/","/components/buttons/","/components/floating-action-buttons/"],"features":{"github":"/components/VIconBtn/","label":"C: VIconBtn","report":true,"spec":"https://m3.material.io/components/icon-buttons/"}},"isInternal":false,"tokens":753,"sizeBytes":3269},{"name":"icons.md","path":"packages/docs/src/pages/en/components/icons.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/icons.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Icons","title":"Icon component","description":"The icon component is compatible with multiple common icon fonts such as Material Design Icons, Font Awesome and more.","keywords":"icons, vuetify icon component, vue icon component"},"related":["/features/icon-fonts/","/components/buttons/","/components/cards/"],"assets":["https://use.fontawesome.com/releases/v5.0.13/css/all.css","https://fonts.googleapis.com/icon?family=Material+Icons"],"features":{"figma":true,"github":"/components/VIcon/","label":"C: VIcon","report":true,"spec":"https://m3.material.io/styles/icons"}},"isInternal":false,"tokens":1227,"sizeBytes":5266},{"name":"images.md","path":"packages/docs/src/pages/en/components/images.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/images.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Images","title":"Image component","description":"The image component provides a flexible interface for displaying different types of images.","keywords":"images, vuetify image component, vue image component"},"related":["/components/grids","/components/aspect-ratios","/components/parallax"],"features":{"github":"/components/VImg/","label":"C: VImg","report":true}},"isInternal":false,"tokens":885,"sizeBytes":3730},{"name":"infinite-carousels.md","path":"packages/docs/src/pages/en/components/infinite-carousels.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/infinite-carousels.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Infinite carousels","title":"Infinite carousel component","description":"The infinite carousel component scrolls a strip of content in a seamless loop.","keywords":"vuetify infinite carousel component, vue infinite carousel component, marquee, ticker, logo strip, scrolling banner"},"features":{"github":"/labs/VInfiniteCarousel/","label":"C: VInfiniteCarousel","report":true}},"isInternal":false,"tokens":1131,"sizeBytes":5068},{"name":"infinite-scroller.md","path":"packages/docs/src/pages/en/components/infinite-scroller.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/infinite-scroller.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Infinite scrollers","title":"Infinite scroller component","description":"The Infinite scroll component is a container that loads more items when scrolling. It is useful when you need to display an unknown but large number of items.","keywords":"infinite scroll, vuetify infinite scroll component, vue infinite scroll component, v-infinite-scroll component"},"related":["/components/lists/","/components/data-tables/basics/","/components/data-iterators/"],"features":{"github":"/components/VInfiniteScroll/","label":"C: VInfiniteScroll","report":true}},"isInternal":false,"tokens":1415,"sizeBytes":6369},{"name":"inputs.md","path":"packages/docs/src/pages/en/components/inputs.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/inputs.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Custom inputs","title":"Input component","description":"The input component is the baseline functionality for all of Vuetify's form components and provides a baseline for custom implementations.","keywords":"inputs, vuetify input component, vue input component"},"related":["/components/forms/","/components/selects/","/components/text-fields/"],"features":{"label":"C: VInput","report":true,"github":"/components/VInput/"}},"isInternal":false,"tokens":699,"sizeBytes":2877},{"name":"item-groups.md","path":"packages/docs/src/pages/en/components/item-groups.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/item-groups.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Item groups","title":"Item group component","description":"The item group components provides the ability to create a group of selectable items out of any component.","keywords":"item groups, vuetify item group component, vue item group component"},"related":["/components/button-groups","/components/carousels","/components/tabs"],"features":{"github":"/components/VItemGroup/","label":"C: VItemGroup","report":true}},"isInternal":false,"tokens":414,"sizeBytes":1755},{"name":"lazy.md","path":"packages/docs/src/pages/en/components/lazy.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/lazy.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Lazy","title":"Lazy component","description":"The lazy component allows you to dynamically render content based upon the user's viewport.","keywords":"lazy loading"},"related":["/components/badges/","/components/icons/","/components/lists/"],"features":{"github":"/components/VLazy/","label":"C: VLazy","report":true}},"isInternal":false,"tokens":199,"sizeBytes":796},{"name":"lists.md","path":"packages/docs/src/pages/en/components/lists.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/lists.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Lists","title":"List component","description":"The list component is a continuous group of text, images and icons that may contain primary or supplemental actions.","keywords":"lists, vuetify list component, vue list component"},"related":["/components/item-groups/","/components/avatars/","/components/sheets/"],"features":{"figma":true,"github":"/components/VList/","label":"C: VList","report":true,"spec":"https://m2.material.io/components/lists"}},"isInternal":false,"tokens":1214,"sizeBytes":5014},{"name":"loading-indicators.md","path":"packages/docs/src/pages/en/components/loading-indicators.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/loading-indicators.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Loading indicators","title":"Loading indicator component","description":"The loading indicator component shows an indeterminate wait with a shape that morphs and rotates.","keywords":"vuetify loading indicator component, vue loading indicator component, loader, spinner, morphing shapes"},"related":["/components/progress/","/components/progress-circular/"],"features":{"github":"/labs/VLoadingIndicator/","label":"C: VLoadingIndicator","report":true}},"isInternal":false,"tokens":482,"sizeBytes":2018},{"name":"locale-providers.md","path":"packages/docs/src/pages/en/components/locale-providers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/locale-providers.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Locale providers","title":"Locale provider component","description":"The locale provider allows you to modify the application's current language scoped within a template","keywords":"locale provider, vuetify locale provider component, vue locale provider component"},"related":["/features/internationalization/","/features/global-configuration/","/getting-started/browser-support/"],"features":{"github":"/components/VLocaleProvider/","label":"C: VLocaleProvider","report":true}},"isInternal":false,"tokens":223,"sizeBytes":1005},{"name":"mask-inputs.md","path":"packages/docs/src/pages/en/components/mask-inputs.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/mask-inputs.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Mask inputs","title":"Mask input component","description":"The mask input component is a input component for masking input values.","keywords":"mask, vuetify mask input, vue mask input"},"features":{"label":"C: VMaskInput","report":true,"github":"/labs/VMaskInput/"}},"isInternal":false,"tokens":925,"sizeBytes":3433},{"name":"menus.md","path":"packages/docs/src/pages/en/components/menus.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/menus.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Menus","title":"Menu component","description":"The menu component exposes a dropdown of potential selections or actions that the user can make.","keywords":"menus, vuetify menu component, vue menu component"},"related":["/components/dialogs/","/components/tooltips/","/styles/transitions/"],"features":{"github":"/components/VMenu/","label":"C: VMenu","report":true,"spec":"https://m2.material.io/components/menus"}},"isInternal":false,"tokens":1235,"sizeBytes":5330},{"name":"month-pickers.md","path":"packages/docs/src/pages/en/components/month-pickers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/month-pickers.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Month pickers","description":"The month picker component allows users to select a specific month and year.","keywords":"month picker, vuetify month picker component, vue month picker component"},"related":["/components/date-pickers/","/components/date-inputs/"],"features":{"label":"C: VMonthPicker","github":"/labs/VMonthPicker/","report":true}},"isInternal":false,"tokens":562,"sizeBytes":2358},{"name":"navigation-drawers.md","path":"packages/docs/src/pages/en/components/navigation-drawers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/navigation-drawers.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Navigation drawers","title":"Navigation drawer component","description":"The navigation drawer component contains internal navigation links for an application and can be permanently on-screen or controlled programmatically.","keywords":"navigation drawer, vuetify navigation drawer component, vue navigation drawer component"},"related":["/components/lists/","/components/icons/","/getting-started/wireframes/"],"features":{"label":"C: VNavigationDrawer","report":true,"github":"/components/VNavigationDrawer/","spec":"https://m3.material.io/components/navigation-drawer"}},"isInternal":false,"tokens":1004,"sizeBytes":4680},{"name":"no-ssr.md","path":"packages/docs/src/pages/en/components/no-ssr.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/no-ssr.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"No SSR","description":"The No SSR component is a simple component that doesn't get rendered on the server, but only on the client.","keywords":"nossr, vuetify no ssr component, vue no ssr component"},"features":{"github":"/components/VNoSsr/","label":"C: VNoSsr","report":true}},"isInternal":false,"tokens":266,"sizeBytes":994},{"name":"number-inputs.md","path":"packages/docs/src/pages/en/components/number-inputs.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/number-inputs.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Number inputs","description":"The number input component provides a clean interface for entering numeric values with increment and decrement controls.","keywords":"Number, vuetify number input component, vue number component"},"related":["/components/inputs/","/components/text-fields/","/components/forms/"],"features":{"label":"C: VNumberInput","github":"/components/VNumberInput/","report":true}},"isInternal":false,"tokens":956,"sizeBytes":4228},{"name":"otp-input.md","path":"packages/docs/src/pages/en/components/otp-input.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/otp-input.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"OTP Input","description":"The OTP input component is used for MFA authentication via input field.","keywords":"OTP, MFA, vuetify OTP input component, vue OTP component"},"related":["/components/inputs/","/components/text-fields/","/components/forms/"],"features":{"label":"C: VOtpInput","github":"/components/VOtpInput/","report":true}},"isInternal":false,"tokens":1246,"sizeBytes":5214},{"name":"overlays.md","path":"packages/docs/src/pages/en/components/overlays.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/overlays.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Overlays","title":"Overlay component","description":"The overlay component makes it easy to create a scrim over components or your entire application.","keywords":"overlays, vuetify overlay component, vue overlay component"},"related":["/components/dialogs/","/components/menus/","/components/tooltips/"],"features":{"github":"/components/VOverlay/","label":"C: VOverlay","report":true}},"isInternal":false,"tokens":1038,"sizeBytes":4493},{"name":"paginations.md","path":"packages/docs/src/pages/en/components/paginations.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/paginations.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Pagination","title":"Pagination component","description":"The pagination component is used to separate long sets of data so that it is easier for a user to consume information.","keywords":"pagination, vuetify pagination component, vue pagination component"},"related":["/components/data-tables/basics/","/components/tables/"],"features":{"figma":true,"label":"C: VPagination","report":true,"github":"/components/VPagination/"}},"isInternal":false,"tokens":434,"sizeBytes":1998},{"name":"parallax.md","path":"packages/docs/src/pages/en/components/parallax.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/parallax.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Parallax","title":"Parallax component","description":"The parallax component creates a 3d effect that makes an image appear to scroll slower than the window.","keywords":"parallax, vuetify parallax component, vue parallax component"},"related":["/components/aspect-ratios/","/components/cards/","/components/images/"],"features":{"github":"/components/VParallax/","label":"C: VParallax","report":true}},"isInternal":false,"tokens":337,"sizeBytes":1377},{"name":"pie-charts.md","path":"packages/docs/src/pages/en/components/pie-charts.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/pie-charts.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Pie charts","title":"Pie chart component","description":"The pie/donut chart component is versatile and fully customizable.","keywords":"vuetify pie component, vue pie component, chart, pie, donut"},"features":{"github":"/labs/VPie/","label":"C: VPie","report":true}},"isInternal":false,"tokens":704,"sizeBytes":2981},{"name":"progress-circular.md","path":"packages/docs/src/pages/en/components/progress-circular.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/progress-circular.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Progress circular","title":"Progress circular component","description":"The progress circular component is useful for displaying a visual indicator of numerical data in a circle.","keywords":"progress circular, vuetify progress circular component, vue progress circular component, circular progress"},"related":["/components/cards/","/components/progress-linear/","/components/lists/"],"features":{"github":"/components/VProgressCircular/","label":"C: VProgressCircular","report":true,"spec":"https://m3.material.io/components/progress-indicators"}},"isInternal":false,"tokens":553,"sizeBytes":2431},{"name":"progress-linear.md","path":"packages/docs/src/pages/en/components/progress-linear.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/progress-linear.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Progress linear","title":"Progress linear component","description":"The progress-linear component is useful for displaying a visual indicator of numerical data in a straight line.","keywords":"progress linear, vuetify progress linear component, vue progress linear component, linear progress"},"related":["/components/cards/","/components/progress-circular/","/components/lists/"],"features":{"figma":true,"github":"/components/VProgressLinear/","label":"C: VProgressLinear","report":true,"spec":"https://m3.material.io/components/progress-indicators"}},"isInternal":false,"tokens":1026,"sizeBytes":4706},{"name":"progress.md","path":"packages/docs/src/pages/en/components/progress.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/progress.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Progress","title":"Progress component","description":"A unified progress indicator component that supports both linear and circular variants with labels and accessible value formatting.","keywords":"progress, progress bar, loading, vuetify progress component"},"related":["/components/progress-linear/","/components/progress-circular/"],"features":{"github":"/components/VProgress/","label":"C: VProgress","report":true}},"isInternal":false,"tokens":581,"sizeBytes":2504},{"name":"pull-to-refresh.md","path":"packages/docs/src/pages/en/components/pull-to-refresh.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/pull-to-refresh.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Pull To Refresh","description":"The PullToRefresh allows users to update content with a simple downward swipe on their screen.","keywords":"Pull to refresh, vuetify Pull to refresh component, vue pull to refresh component"},"features":{"label":"C: VPullToRefresh","github":"/components/VPullToRefresh/","report":true}},"isInternal":false,"tokens":213,"sizeBytes":906},{"name":"radio-buttons.md","path":"packages/docs/src/pages/en/components/radio-buttons.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/radio-buttons.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Radio buttons","title":"Radio button component","description":"A radio button allows the user to choose only one of a set of options using a radio group.","keywords":"radio groups, radio buttons, vuetify radio group component, vuetify radio component, vue radio component, vue radio group component"},"related":["/components/button-groups/","/components/forms/","/components/checkboxes/"],"features":{"label":"C: VRadio","report":true,"github":"/components/VRadio/","spec":"https://m3.material.io/components/radio-buttons"}},"isInternal":false,"tokens":579,"sizeBytes":2428},{"name":"range-sliders.md","path":"packages/docs/src/pages/en/components/range-sliders.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/range-sliders.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Range sliders","title":"Range Slider component","description":"The range slider component is a better visualization of the number input. It is used for gathering a range of numerical user data.","keywords":"sliders, range, vuetify slider component, vuetify range slider component, vue slider component"},"related":["/components/forms/","/components/selects/","/components/sliders/"],"features":{"label":"C: VRangeSlider","report":true,"github":"/components/VRangeSlider/","spec":"https://m3.material.io/components/sliders"}},"isInternal":false,"tokens":698,"sizeBytes":3032},{"name":"ratings.md","path":"packages/docs/src/pages/en/components/ratings.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/ratings.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Ratings","title":"Rating component","description":"The star rating component is a specialized widget for collecting user feedback via ratings.","keywords":"star ratings, vuetify star rating component, vue star rating component, rating component"},"related":["/components/cards","/components/icons","/components/lists"],"features":{"github":"/components/VRating/","label":"C: VRating","report":true}},"isInternal":false,"tokens":752,"sizeBytes":3384},{"name":"selects.md","path":"packages/docs/src/pages/en/components/selects.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/selects.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Selects","title":"Select component","description":"The select component provides a list of options that a user can make selections from.","keywords":"selects, vuetify select component, vue select component"},"related":["/components/autocompletes/","/components/combobox/","/components/forms/"],"features":{"label":"C: VSelect","report":true,"github":"/components/VSelect/","spec":"https://m3.material.io/components/text-fields"}},"isInternal":false,"tokens":1279,"sizeBytes":5533},{"name":"sheets.md","path":"packages/docs/src/pages/en/components/sheets.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/sheets.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Sheets","title":"Sheet component","description":"The sheet component is the baseline for many Material Design implementations used in Vuetify.","keywords":"sheets, vuetify sheet component, vue sheet component, paper, material design paper, material design sheets"},"related":["/components/cards","/components/grids","/styles/elevation"],"features":{"github":"/components/VSheet/","label":"C: VSheet","report":true,"spec":"https://m3.material.io/styles/elevation"}},"isInternal":false,"tokens":791,"sizeBytes":3450},{"name":"skeleton-loaders.md","path":"packages/docs/src/pages/en/components/skeleton-loaders.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/skeleton-loaders.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Skeleton loaders","title":"Skeleton loader component","description":"The skeleton loader component provides a placeholder loading state while content is fetched or loaded asynchronously — ideal for cards, lists, and tables.","keywords":"skeleton loaders, vuetify skeleton loader component, vue skeleton loader"},"related":["/components/cards/","/components/progress-circular/","/components/buttons/"],"features":{"figma":true,"label":"C: VSkeletonLoader","github":"/components/VSkeletonLoader/","report":true}},"isInternal":false,"tokens":1773,"sizeBytes":7319},{"name":"slide-groups.md","path":"packages/docs/src/pages/en/components/slide-groups.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/slide-groups.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Slide groups","title":"Slide group component","description":"The slide group component is similar to item groups in that you can make selectable content out of elements but does so in a single line fashion.","keywords":"slide groups, slideable groups, vuetify slide group component, vue slide group component"},"related":["/components/icons/","/components/carousels/","/components/tabs/"],"features":{"github":"/components/VSlideGroup/","label":"C: VSlideGroup","report":true}},"isInternal":false,"tokens":632,"sizeBytes":2792},{"name":"sliders.md","path":"packages/docs/src/pages/en/components/sliders.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/sliders.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Sliders","title":"Slider component","description":"The slider component can be used as an alternative visualization instead of a number input.","keywords":"sliders, vuetify slider component, vue slider component"},"related":["/components/forms/","/components/selects/","/components/range-sliders/"],"features":{"label":"C: VSlider","report":true,"github":"/components/VSlider/","spec":"https://m3.material.io/components/sliders"}},"isInternal":false,"tokens":845,"sizeBytes":3645},{"name":"snackbar-queue.md","path":"packages/docs/src/pages/en/components/snackbar-queue.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/snackbar-queue.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Snackbar Queue","title":"Snackbar Queue component","description":"test","keywords":"test"},"related":["/components/buttons/","/components/snackbars/","/components/defaults-providers/"],"features":{"github":"/components/VSnackbarQueue/","label":"C: VSnackbarQueue","report":true,"spec":"https://m3.material.io/components/snackbar"}},"isInternal":false,"tokens":800,"sizeBytes":3376},{"name":"snackbars.md","path":"packages/docs/src/pages/en/components/snackbars.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/snackbars.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Snackbars","title":"Snackbar component","description":"The snackbar component informs users of a process your application has performed or will perform. It is often temporary and can contain actions.","keywords":"snackbars, vuetify snackbar component, vue snackbar component"},"related":["/components/buttons/","/styles/colors/","/components/forms/"],"features":{"github":"/components/VSnackbar/","label":"C: VSnackbar","report":true,"spec":"https://m3.material.io/components/snackbar"}},"isInternal":false,"tokens":699,"sizeBytes":3030},{"name":"sparklines.md","path":"packages/docs/src/pages/en/components/sparklines.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/sparklines.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Sparklines","description":"The sparkline component creates beautiful and expressive simple graphs for displaying numerical data.","keywords":"sparklines, vuetify sparkline component, vue sparkline component, sparkline, graph, chart, line"},"related":["/components/cards/","/components/sheets/","/components/expansion-panels/"],"features":{"github":"/components/VSparkline/","label":"C: VSparkline","report":true}},"isInternal":false,"tokens":759,"sizeBytes":3341},{"name":"speed-dials.md","path":"packages/docs/src/pages/en/components/speed-dials.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/speed-dials.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Speed Dials","title":"Speed Dial component","description":"The speed dial component is a floating action button that can reveal additional actions when clicked.","keywords":"speed dial, fab, vuetify speed dial component, vue speed dial component"},"related":["/components/buttons/","/components/icons/","/styles/transitions/"],"features":{"report":true,"github":"/components/VSpeedDial/","label":"C: VSpeedDial"}},"isInternal":false,"tokens":246,"sizeBytes":1035},{"name":"split-buttons.md","path":"packages/docs/src/pages/en/components/split-buttons.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/split-buttons.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Split buttons","title":"Split button component","description":"The split button component pairs a primary action with a menu of related actions.","keywords":"vuetify split button component, vue split button component, dropdown button, menu button"},"related":["/components/buttons/","/components/button-groups/","/components/menus/"],"features":{"github":"/labs/VSplitBtn/","label":"C: VSplitBtn","report":true}},"isInternal":false,"tokens":499,"sizeBytes":1984},{"name":"steppers.md","path":"packages/docs/src/pages/en/components/steppers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/steppers.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Steppers","title":"Stepper component","description":"The stepper component provides a linear progression process for gathering and displaying information to a user, similar to a form wizard.","keywords":"steppers, vuetify stepper component, vue stepper component"},"related":["/components/tabs/","/components/item-groups/","/components/windows/"],"features":{"figma":true,"github":"/components/VStepper/","label":"C: VStepper","report":true,"spec":"https://m1.material.io/components/steppers.html"}},"isInternal":false,"tokens":1132,"sizeBytes":4917},{"name":"switches.md","path":"packages/docs/src/pages/en/components/switches.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/switches.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Switches","title":"Switch component","description":"The switch component is a simple and eloquent toggle used to select between two values.","keywords":"switch, switch component, vuetify switch component, vue switch component"},"related":["/components/checkboxes/","/components/forms/","/components/radio-buttons/"],"features":{"label":"C: VSwitch","report":true,"github":"/components/VSwitch/","spec":"https://m2.material.io/components/switches"}},"isInternal":false,"tokens":435,"sizeBytes":1816},{"name":"system-bars.md","path":"packages/docs/src/pages/en/components/system-bars.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/system-bars.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"System bars","title":"System-bar component","description":"The system bar component creates an android style status bar that rests on the very top of your application.","keywords":"system bars, vuetify system bar component, vue system bar component, android status bar, status bar"},"related":["/components/buttons/","/components/toolbars/","/components/tabs/"],"features":{"figma":true,"label":"C: VSystemBar","report":true,"github":"/components/VSystemBar/"}},"isInternal":false,"tokens":443,"sizeBytes":1870},{"name":"tables.md","path":"packages/docs/src/pages/en/components/tables.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/tables.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Tables","title":"Table","description":"The table component is a lightweight wrapper around the table element that provides a Material Design feel without all the baggage.","keywords":"table, simple table, vuetify table component, vue simple table component, table component"},"related":["/components/data-tables/basics/","/components/lists/"],"features":{"github":"/components/VTable/","label":"C: VTable","report":true,"spec":"https://m2.material.io/components/data-tables"}},"isInternal":false,"tokens":446,"sizeBytes":1835},{"name":"tabs.md","path":"packages/docs/src/pages/en/components/tabs.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/tabs.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Tabs","title":"Tabs component","description":"The tabs component provides a way to organize and navigate between groups of content that are related at the same level of hierarchy.","keywords":"tabs, vuetify tabs component, vue tabs component"},"related":["/components/icons/","/components/toolbars/","/components/windows/"],"features":{"figma":true,"label":"C: VTabs","report":true,"github":"/components/VTabs/","spec":"https://m3.material.io/components/tabs"}},"isInternal":false,"tokens":986,"sizeBytes":4149},{"name":"text-fields.md","path":"packages/docs/src/pages/en/components/text-fields.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/text-fields.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Text fields","title":"Text field component","description":"The text field component accepts textual input from users.","keywords":"text fields, vuetify text field component, vue text field component"},"related":["/components/textareas/","/components/selects/","/components/forms/"],"features":{"label":"C: VTextField","report":true,"github":"/components/VTextField/","spec":"https://m3.material.io/components/text-fields"}},"isInternal":false,"tokens":3034,"sizeBytes":13145},{"name":"textareas.md","path":"packages/docs/src/pages/en/components/textareas.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/textareas.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Textareas","title":"Textarea component","description":"The textarea component is a text field that accepts lengthy textual input from users.","keywords":"textareas, vuetify textarea component, vue textarea component"},"related":["/components/forms/","/components/selects/","/components/text-fields/"],"features":{"label":"C: VTextarea","report":true,"github":"/components/VTextarea/","spec":"https://m2.material.io/components/text-fields#input-types"}},"isInternal":false,"tokens":605,"sizeBytes":2545},{"name":"theme-providers.md","path":"packages/docs/src/pages/en/components/theme-providers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/theme-providers.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Theme providers","title":"Theme provider component","description":"The theme provider allows you to style a section of your application in a different theme from the default","keywords":"theme provider, vuetify theme provider component, vue theme provider component"},"related":["/features/theme/","/styles/colors/","/features/application-layout/"],"features":{"github":"/components/VThemeProvider/","label":"C: VThemeProvider","report":true}},"isInternal":false,"tokens":250,"sizeBytes":1140},{"name":"time-inputs.md","path":"packages/docs/src/pages/en/components/time-inputs.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/time-inputs.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Time inputs","title":"Time input component","description":"The time input combines a text field with a time picker and guides typing into a valid time.","keywords":"time input, time picker, time field"},"related":["/components/time-pickers/","/components/date-inputs/","/components/text-fields/"],"features":{"label":"C: VTimeInput","report":true,"github":"/labs/VTimeInput/"}},"isInternal":false,"tokens":607,"sizeBytes":2441},{"name":"time-pickers.md","path":"packages/docs/src/pages/en/components/time-pickers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/time-pickers.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Time pickers","title":"Time picker component","description":"The time picker component is a stand-alone interface that allows the selection of hours and minutes in AM/PM and 24hr formats.","keywords":"time pickers, vuetify time picker component, vue time picker component"},"related":["/components/buttons/","/components/date-pickers/","/components/text-fields/"],"features":{"github":"/components/VTimePicker/","label":"C: VTimePicker","report":true,"spec":"https://m3.material.io/components/time-pickers"}},"isInternal":false,"tokens":391,"sizeBytes":1666},{"name":"timelines.md","path":"packages/docs/src/pages/en/components/timelines.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/timelines.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Timelines","title":"Timeline component","description":"The timeline component is used to display chronological information either vertically or horizontally.","keywords":"timelines, vuetify timeline component, vue timeline component"},"related":["/components/cards/","/components/icons/","/components/grids/"],"features":{"github":"/components/VTimeline/","label":"C: VTimeline","report":true}},"isInternal":false,"tokens":715,"sizeBytes":3066},{"name":"toolbars.md","path":"packages/docs/src/pages/en/components/toolbars.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/toolbars.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Toolbars","title":"Toolbar component","description":"The toolbar component sits above the content that it affects and provides an area for labeling and additional actions.","keywords":"toolbars, vuetify toolbar component, vue toolbar component"},"related":["/components/navigation-drawers/","/components/cards/","/components/app-bars/"],"features":{"github":"/components/VToolbar/","label":"C: VToolbar","report":true,"spec":"https://m1.material.io/components/toolbars.html"}},"isInternal":false,"tokens":1000,"sizeBytes":4511},{"name":"tooltips.md","path":"packages/docs/src/pages/en/components/tooltips.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/tooltips.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Tooltips","title":"Tooltip component","description":"The tooltip component displays textual information regarding the element it is attached to.","keywords":"tooltips, vuetify tooltip component, vue tooltip component"},"related":["/components/overlays/","/components/icons/","/components/menus/"],"features":{"github":"/components/VTooltip/","label":"C: VTooltip","report":true,"spec":"https://m2.material.io/components/tooltips"}},"isInternal":false,"tokens":490,"sizeBytes":2197},{"name":"treeview.md","path":"packages/docs/src/pages/en/components/treeview.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/treeview.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Treeview","title":"Treeview component","description":"The treeview component is a user interface that is used to represent hierarchical data in a tree structure.","keywords":"treeview, vuetify treeview component, vue treeview component"},"related":["/components/lists/","/components/timelines/","/components/autocompletes/"],"features":{"label":"C: VTreeview","report":true}},"isInternal":false,"tokens":1387,"sizeBytes":6196},{"name":"vertical-steppers.md","path":"packages/docs/src/pages/en/components/vertical-steppers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/vertical-steppers.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Steppers Vertical","title":"Vertical Stepper component","description":"The vertical stepper component is a navigation element that guides users through a sequence of steps.","keywords":"vertical stepper, vuetify vertical stepper component, vue vertical stepper component"},"related":["/components/buttons/","/components/icons/","/styles/transitions/"],"features":{"label":"C: VStepperVertical","github":"/components/VStepperVertical/","report":true}},"isInternal":false,"tokens":389,"sizeBytes":1713},{"name":"videos.md","path":"packages/docs/src/pages/en/components/videos.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/videos.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Videos","title":"Video component","description":"The video component acts as a customizable wrapper for native video element.","keywords":"video, player, vuetify video component, vue video component"},"features":{"github":"/labs/VVideo/","label":"C: VVideo","report":true}},"isInternal":false,"tokens":1342,"sizeBytes":5934},{"name":"virtual-scroller.md","path":"packages/docs/src/pages/en/components/virtual-scroller.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/virtual-scroller.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Virtual scrollers","title":"Virtual scroll component","description":"The Virtual scroll component is a container that renders only visible elements. It is useful when you need to display large amounts of uniform data.","keywords":"virtual scroll, vuetify virtual scroll component, vue virtual scroll component, v-virtual-scroll component"},"related":["/components/lists/","/components/data-tables/virtual-tables/","/components/combobox/"],"features":{"github":"/components/VVirtualScroller/","label":"C: VVirtualScroller","report":true}},"isInternal":false,"tokens":750,"sizeBytes":3389},{"name":"windows.md","path":"packages/docs/src/pages/en/components/windows.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/components/windows.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Windows","title":"Window component","description":"The window component is a wrapper container that allows transitioning between content. It serves as the baseline for tabs and carousels.","keywords":"windows, vuetify window component, vue window component"},"related":["/components/carousels/","/components/sheets/","/components/tabs/"],"features":{"github":"/components/VWindow/","label":"C: VWindow","report":true}},"isInternal":false,"tokens":485,"sizeBytes":2162},{"name":"density-and-sizing.md","path":"packages/docs/src/pages/en/concepts/density-and-sizing.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/concepts/density-and-sizing.md","title":"Concepts Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Density and sizing","title":"Density and sizing","description":"Density and sizing","keywords":"density, sizing"},"related":["/components/buttons/","/components/chips/","/components/lists/"]},"isInternal":false,"tokens":332,"sizeBytes":1529},{"name":"items.md","path":"packages/docs/src/pages/en/concepts/items.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/concepts/items.md","title":"Concepts Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Items","title":"Items","description":"Items","keywords":"items"},"related":["/components/lists/","/components/selects/","/components/data-tables/"]},"isInternal":false,"tokens":385,"sizeBytes":1587},{"name":"routing.md","path":"packages/docs/src/pages/en/concepts/routing.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/concepts/routing.md","title":"Concepts Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Routing","title":"Routing","description":"Routing","keywords":"routing"},"related":["/components/buttons/","/components/lists/","/components/overlays/"]},"isInternal":false,"tokens":450,"sizeBytes":1837},{"name":"v-model.md","path":"packages/docs/src/pages/en/concepts/v-model.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/concepts/v-model.md","title":"Concepts Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"v-model","title":"v-model","description":"v-model","keywords":"v-model"},"related":["/components/lists","/components/text-fields"]},"isInternal":false,"tokens":619,"sizeBytes":2545},{"name":"variants.md","path":"packages/docs/src/pages/en/concepts/variants.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/concepts/variants.md","title":"Concepts Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Variants","title":"Variants","description":"Understanding and utilizing the variant prop in Vuetify","keywords":"variant, Vuetify"},"related":["/components/buttons/","/components/lists/"]},"isInternal":false,"tokens":433,"sizeBytes":1997},{"name":"click-outside.md","path":"packages/docs/src/pages/en/directives/click-outside.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/directives/click-outside.md","title":"Directives Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Click outside","title":"Click outside directive","description":"The v-click-outside directive calls a function when something outside of the target element is clicked on.","keywords":"click outside, click directive, vue click directive, vuetify click directives"},"related":["/components/dialogs/","/components/navigation-drawers/","/directives/intersect/"],"features":{"label":"D: click-outside","report":true,"github":"/directives/click-outside/"}},"isInternal":false,"tokens":371,"sizeBytes":1633},{"name":"intersect.md","path":"packages/docs/src/pages/en/directives/intersect.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/directives/intersect.md","title":"Directives Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Intersection observer","title":"Intersection observer directive","description":"The intersection observer directive utilizes the Intersection observer API. It allows you to determine when elements are visible on the screen.","keywords":"intersect, vuetify intersect directive, intersection observer directive"},"related":["/components/cards/","/components/images/","/components/text-fields/"],"features":{"label":"D: intersect","report":true,"github":"/directives/intersect/"}},"isInternal":false,"tokens":345,"sizeBytes":1691},{"name":"mutate.md","path":"packages/docs/src/pages/en/directives/mutate.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/directives/mutate.md","title":"Directives Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Mutation observer","title":"Mutation observer directive","description":"The mutation observer directive utilizes the Mutation observer API. It allows you to invoke a callback when targeted elements are updated.","keywords":"mutate, vuetify mutate directive, mutation observer directive, mutation observer"},"related":["/components/sheets/","/components/images/","/directives/intersect/"]},"isInternal":false,"tokens":1436,"sizeBytes":6322},{"name":"resize.md","path":"packages/docs/src/pages/en/directives/resize.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/directives/resize.md","title":"Directives Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Resize","title":"Resize directive","description":"The resize directive provides the ability to conditionally invoke functions when the screen is resized.","keywords":"resize, vuetify resize directive, vue resize directive, window resize directive"},"related":["/features/display-and-platform/","/components/grids/","/styles/flex/"]},"isInternal":false,"tokens":177,"sizeBytes":834},{"name":"ripple.md","path":"packages/docs/src/pages/en/directives/ripple.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/directives/ripple.md","title":"Directives Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Ripple","title":"Ripple directive","description":"The ripple directive adds touch and click feedback to any element in the form of a water ripple.","keywords":"ripples, ink, vuetify ripple directive, vue ripple directive"},"related":["/components/buttons/","/components/expansion-panels/","/styles/transitions/"],"features":{"label":"D: ripple","report":true,"github":"/directives/ripple/"}},"isInternal":false,"tokens":473,"sizeBytes":2092},{"name":"scroll.md","path":"packages/docs/src/pages/en/directives/scroll.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/directives/scroll.md","title":"Directives Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Scroll","title":"Scroll directive","description":"The scroll directive gives you the ability to conditionally invoke methods when the screen or an element are scrolled.","keywords":"scroll, vuetify scroll directive, vue scroll directive, window scroll directive"},"related":["/components/app-bars/","/components/bottom-navigation/","/directives/touch/"]},"isInternal":false,"tokens":339,"sizeBytes":1592},{"name":"tooltip.md","path":"packages/docs/src/pages/en/directives/tooltip.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/directives/tooltip.md","title":"Directives Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Tooltip","title":"Tooltip directive","description":"The Tooltip directive is an easy to use implementation of VTooltip.","keywords":"Tooltip, vuetify Tooltip directive, vue Tooltip directive, mobile Tooltip directive"},"related":["/components/navigation-drawers/","/components/slide-groups/","/components/windows/"],"features":{"label":"D: tooltip","report":true,"github":"/directives/tooltip/"}},"isInternal":false,"tokens":417,"sizeBytes":1904},{"name":"touch-hold.md","path":"packages/docs/src/pages/en/directives/touch-hold.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/directives/touch-hold.md","title":"Directives Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Touch hold","title":"Touch hold directive","description":"The touch hold directive calls a function when an element is touched and held.","keywords":"touch hold, long press, vuetify touch hold directive, vue long press directive"},"related":["/directives/touch/","/components/menus/","/components/tooltips/"]},"isInternal":false,"tokens":359,"sizeBytes":1587},{"name":"touch.md","path":"packages/docs/src/pages/en/directives/touch.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/directives/touch.md","title":"Directives Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Touch","title":"Touch directive","description":"The touch directive provides an interface for responding to various user touch actions.","keywords":"touch, vuetify touch directive, vue touch directive, mobile touch directive"},"related":["/components/navigation-drawers/","/components/slide-groups/","/components/windows/"],"features":{"label":"D: touch","report":true,"github":"/directives/touch/"}},"isInternal":false,"tokens":593,"sizeBytes":2641},{"name":"accessibility.md","path":"packages/docs/src/pages/en/features/accessibility.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/accessibility.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Accessibility (a11y)","description":"See examples and the advantages of having accessibility (a11y) support in Vuetify components.","keywords":"a11y, accessibility, usability"},"related":["/features/internationalization/","/components/menus/","/components/lists/"],"features":{"label":"a11y","report":true}},"isInternal":false,"tokens":675,"sizeBytes":2766},{"name":"aliasing.md","path":"packages/docs/src/pages/en/features/aliasing.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/aliasing.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Aliasing","description":"Description","keywords":"keywords"},"related":["/features/blueprints/","/features/global-configuration/","/features/treeshaking/"],"features":{"report":true}},"isInternal":false,"tokens":625,"sizeBytes":2562},{"name":"application-layout.md","path":"packages/docs/src/pages/en/features/application-layout.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/application-layout.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Application layout","description":"Vuetify provides functionality to create complex layouts using components such as app bars and navigation drawers","keywords":"application, layout, default layout"},"related":["/components/app-bars/","/components/navigation-drawers/","/components/footers/"],"features":{"github":"/composables/layout.ts","label":"E: layout","report":true}},"isInternal":false,"tokens":1064,"sizeBytes":5093},{"name":"blueprints.md","path":"packages/docs/src/pages/en/features/blueprints.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/blueprints.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Blueprints","description":"Setup your entire application with pre-made or custom styling and designs","keywords":"vuetify blueprints, vuetify presets, vuetify schemas"},"related":["/features/global-configuration/","/features/theme/","/features/display-and-platform/"],"features":{"github":"/blueprints/","report":true}},"isInternal":false,"tokens":702,"sizeBytes":2952},{"name":"overview.md","path":"packages/docs/src/pages/en/features/css-utilities/overview.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/css-utilities/overview.md","title":"Css-utilities Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Overview","title":"CSS Utilities - Overview","description":"Reduce your CSS bundle size and unlock modern utility-first styling by integrating TailwindCSS or UnoCSS alongside Vuetify.","keywords":"tailwindcss, unocss, css utilities, atomic css, css layers, vuetify css, bundle optimization"},"related":["/features/css-utilities/unocss-vuetify-preset/","/features/css-utilities/tailwindcss/","/styles/layers/"],"features":{"report":true}},"isInternal":false,"tokens":2019,"sizeBytes":8699},{"name":"tailwindcss.md","path":"packages/docs/src/pages/en/features/css-utilities/tailwindcss.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/css-utilities/tailwindcss.md","title":"Css-utilities Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"TailwindCSS","title":"Vuetify + TailwindCSS","description":"Integrate TailwindCSS v4 into an existing Vuetify project using Vite or Nuxt.","keywords":"tailwindcss, tailwindcss v4, vuetify tailwind, css layers, vite, nuxt"},"related":["/features/css-utilities/","/styles/layers/","/features/sass-variables/"]},"isInternal":false,"tokens":5283,"sizeBytes":18280},{"name":"unocss-tailwind-preset.md","path":"packages/docs/src/pages/en/features/css-utilities/unocss-tailwind-preset.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/css-utilities/unocss-tailwind-preset.md","title":"Css-utilities Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"UnoCSS + presetWind4","title":"Vuetify + UnoCSS (presetWind4)","description":"Integrate UnoCSS with @unocss/preset-wind4 into an existing Vuetify project using Vite or Nuxt.","keywords":"unocss, preset-wind4, tailwindcss v4, unocss tailwind, on-demand utilities, vite, nuxt"},"related":["/features/css-utilities/","/features/css-utilities/unocss-vuetify-preset/","/styles/layers/"]},"isInternal":false,"tokens":5612,"sizeBytes":19683},{"name":"unocss-vuetify-preset.md","path":"packages/docs/src/pages/en/features/css-utilities/unocss-vuetify-preset.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/css-utilities/unocss-vuetify-preset.md","title":"Css-utilities Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"UnoCSS + Vuetify preset","title":"Vuetify + UnoCSS (Vuetify preset)","description":"Integrate UnoCSS with the unocss-preset-vuetify into an existing Vuetify project using Vite or Nuxt.","keywords":"unocss, unocss-preset-vuetify, vuetify preset, on-demand utilities, vite, nuxt"},"related":["/features/css-utilities/","/features/css-utilities/unocss-tailwind-preset/","/styles/layers/"]},"isInternal":false,"tokens":1772,"sizeBytes":6309},{"name":"dates.md","path":"packages/docs/src/pages/en/features/dates.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/dates.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Dates","description":"Vuetify has first party date support that can easily be swapped for another date library","keywords":"date, datepicker, datetime, time, calendar, picker, date library"},"related":["/features/blueprints/","/features/global-configuration/","/features/treeshaking/"],"features":{"github":"/composables/date/","label":"E: date","report":true}},"isInternal":false,"tokens":2786,"sizeBytes":9940},{"name":"display-and-platform.md","path":"packages/docs/src/pages/en/features/display-and-platform.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/display-and-platform.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Display & Platform","description":"Access display viewport information using the Vuetify Breakpoint composable.","keywords":"breakpoints, grid breakpoints, platform details, screen size, display size"},"related":["/directives/resize/","/styles/display/","/styles/text-and-typography/"],"features":{"github":"/composables/display.ts","label":"E: display","report":true}},"isInternal":false,"tokens":2523,"sizeBytes":9704},{"name":"global-configuration.md","path":"packages/docs/src/pages/en/features/global-configuration.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/global-configuration.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Global configuration","description":"Vuetify.config is an object containing global configuration options that modify the bootstrapping of your project.","keywords":"vuetify config, global config, global vuetify config, configure vuetify options"},"related":["/features/accessibility/","/features/treeshaking/","/features/blueprints/"],"features":{"github":"/composables/defaults.ts","label":"E: defaults","report":true}},"isInternal":false,"tokens":3248,"sizeBytes":12925},{"name":"hotkey.md","path":"packages/docs/src/pages/en/features/hotkey.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/hotkey.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Hotkeys","title":"Hotkeys","description":"Handle keyboard shortcuts within your application using the useHotkey composable","keywords":"hotkeys, keyboard shortcuts, composable, useHotkey, key bindings"},"related":["/components/hotkeys/","/features/accessibility/","/features/global-configuration/"],"features":{"github":"/composables/hotkey","label":"E: hotkey","report":true}},"isInternal":false,"tokens":1925,"sizeBytes":7552},{"name":"icon-fonts.md","path":"packages/docs/src/pages/en/features/icon-fonts.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/icon-fonts.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Icon Fonts","description":"Vuetify supports Material Design Icons, Font awesome and other icon sets through prefixes and global options.","keywords":"vue icon component, iconfont, icon libraries, vuetify icons"},"related":["/components/icons","/components/buttons","/components/avatars"],"features":{"github":"/composables/icons.tsx","label":"E: icons","report":true}},"isInternal":false,"tokens":5030,"sizeBytes":18208},{"name":"internationalization.md","path":"packages/docs/src/pages/en/features/internationalization.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/internationalization.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Internationalization (i18n)","description":"Vuetify supports language Internationalization (i18n) from a wide range of locales and easily integrates vue-i18n.","keywords":"i18n, language, internationalization"},"related":["/features/accessibility/","/components/locale-providers/","/getting-started/browser-support/"],"features":{"github":"/composables/locale.ts","label":"i18n","report":true}},"isInternal":false,"tokens":2203,"sizeBytes":7920},{"name":"md3-button-sizes.md","path":"packages/docs/src/pages/en/features/md3-button-sizes.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/md3-button-sizes.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"nav":"Material 3 button sizes","title":"Material Design 3 button sizes","description":"Replace the default button size scale with Material Design 3 Expressive sizes using SASS variables.","keywords":"material design 3, md3, expressive, button sizes, icon button sizes, sass variables"},"related":["/components/buttons/","/components/icon-buttons/","/components/split-buttons/"],"features":{"report":true}},"isInternal":false,"tokens":2660,"sizeBytes":10582},{"name":"rules.md","path":"packages/docs/src/pages/en/features/rules.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/rules.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Validation rules","title":"Validation rules composable","description":"Vuetify implements a set of validation rules that can be overwritten","keywords":"Form validation, vuetify form validation, rules composable, validation rules"},"related":["/components/forms/","/features/internationalization/"],"features":{"github":"/composables/rules/","label":"E: rules","report":true}},"isInternal":false,"tokens":1586,"sizeBytes":6959},{"name":"sass-variables.md","path":"packages/docs/src/pages/en/features/sass-variables.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/sass-variables.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"SASS variables","description":"Customize Vuetify's internal styles by modifying SASS variables.","keywords":"sass variables, scss variables, modifying Vuetify styles"},"related":["/styles/colors/","/features/theme/","/features/treeshaking/"],"features":{"label":"sass","report":true}},"isInternal":false,"tokens":2331,"sizeBytes":9417},{"name":"scrolling.md","path":"packages/docs/src/pages/en/features/scrolling.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/scrolling.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Programmatic scrolling","description":"Handle scrolling within your application by using the goTo function","keywords":"programmatic scrolling, vuetify goto, goto"},"related":["/directives/scroll/","/features/application-layout/","/components/slide-groups/"],"features":{"github":"/composables/goto.ts","label":"E: goto","report":true}},"isInternal":false,"tokens":380,"sizeBytes":1533},{"name":"theme.md","path":"packages/docs/src/pages/en/features/theme.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/theme.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Theme","description":"Setup your application's theme and supplemental colors in a flash.","keywords":"theme, themes, theming, color, colors"},"related":["/styles/colors/","/styles/transitions/","/getting-started/wireframes/"],"features":{"github":"/composables/theme.ts","label":"E: theme","report":true}},"isInternal":false,"tokens":2968,"sizeBytes":11959},{"name":"treeshaking.md","path":"packages/docs/src/pages/en/features/treeshaking.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/features/treeshaking.md","title":"Features Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Treeshaking","description":"Vuetify provides automatic treeshaking via the vuetify-loader. Use only the features that you need and drastically reduce your package bundle size.","keywords":"a la carte, a-la-carte, vuetify single import, vuetify import, component importing, reduce vuetify size, treeshaking, tree shaking"},"related":["/features/sass-variables/","/features/blueprints/","/introduction/why-vuetify/"],"features":{"report":true}},"isInternal":false,"tokens":1420,"sizeBytes":5576},{"name":"browser-support.md","path":"packages/docs/src/pages/en/getting-started/browser-support.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/getting-started/browser-support.md","title":"Getting-started Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Browser support","description":"Vuetify is a progressive framework that supports all evergreen browsers.","keywords":"vuetify browser support"},"related":["/getting-started/installation/","/introduction/why-vuetify/","/features/sass-variables/"]},"isInternal":false,"tokens":547,"sizeBytes":2361},{"name":"contributing.md","path":"packages/docs/src/pages/en/getting-started/contributing.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/getting-started/contributing.md","title":"Getting-started Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Contributing","description":"Contributing to open source helps developers access amazing tools for free. Learn how you can help develop the Vuetify framework.","keywords":"contribute, contributing, feature request"},"related":["/getting-started/unit-testing/","/about/code-of-conduct/","/introduction/roadmap/"]},"isInternal":false,"tokens":3516,"sizeBytes":15198},{"name":"elevation-migration.md","path":"packages/docs/src/pages/en/getting-started/elevation-migration.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/getting-started/elevation-migration.md","title":"Getting-started Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Elevation migration","title":"Elevation migration","description":"Guide for migrating from MD2 to MD3 elevation shadows","keywords":"elevation, shadows, md2, md3, material design, migration"},"related":["/getting-started/upgrade-guide/","/styles/elevation/"]},"isInternal":false,"tokens":3113,"sizeBytes":6651},{"name":"frequently-asked-questions.md","path":"packages/docs/src/pages/en/getting-started/frequently-asked-questions.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/getting-started/frequently-asked-questions.md","title":"Getting-started Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Frequently asked questions","description":"Stuck on a problem? Check out the most frequently asked questions by the Vuetify community.","keywords":"frequently asked questions, faq"},"related":["/introduction/why-vuetify/","/getting-started/contributing/","/getting-started/installation/"]},"isInternal":false,"tokens":1449,"sizeBytes":5704},{"name":"grid-legacy-mode.md","path":"packages/docs/src/pages/en/getting-started/grid-legacy-mode.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/getting-started/grid-legacy-mode.md","title":"Getting-started Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Grid legacy mode","title":"Grid legacy mode","description":"How to restore the previous grid behavior using negative margins and column padding","keywords":"grid, legacy, v-row, v-col, migration, upgrade, negative margins, padding"},"related":["/getting-started/upgrade-guide/","/components/grids/"]},"isInternal":false,"tokens":532,"sizeBytes":2148},{"name":"installation.md","path":"packages/docs/src/pages/en/getting-started/installation.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/getting-started/installation.md","title":"Getting-started Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Installation","title":"Get started with Vuetify 4","description":"Details for v4 release - faq, changes, and upgrading.","keywords":"migration, releases, upgrading vuetify, beta, v4"},"related":["/getting-started/contributing/","/introduction/roadmap/","/getting-started/release-notes/"]},"isInternal":false,"tokens":4515,"sizeBytes":17864},{"name":"mcp.md","path":"packages/docs/src/pages/en/getting-started/mcp.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/getting-started/mcp.md","title":"Getting-started Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Vuetify MCP","title":"Vuetify MCP - AI assistant integration","description":"Connect Claude, Cursor, VS Code and other AI assistants to version-accurate Vuetify 4 APIs, installation guides, upgrade plans and release notes.","keywords":"mcp, model context protocol, ai, claude, cursor, vs code, vuetify api, upgrade"},"related":["/getting-started/installation/","/getting-started/upgrade-guide/","/getting-started/release-notes/"]},"isInternal":false,"tokens":1482,"sizeBytes":5146},{"name":"release-notes.md","path":"packages/docs/src/pages/en/getting-started/release-notes.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/getting-started/release-notes.md","title":"Getting-started Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"fluid":true,"meta":{"title":"Release notes","description":"Stay up to date with the latest release notes. The migration guides will also help you migrate applications though major releases.","keywords":"migration, releases, upgrading vuetify"},"related":["/introduction/long-term-support/","/getting-started/contributing/","/introduction/roadmap/"]},"isInternal":false,"tokens":120,"sizeBytes":499},{"name":"typography-migration.md","path":"packages/docs/src/pages/en/getting-started/typography-migration.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/getting-started/typography-migration.md","title":"Getting-started Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Typography migration","title":"Typography migration","description":"Guide for migrating from legacy SCSS typography to MD3 typography system","keywords":"typography, migration, md3, scss, upgrade"},"related":["/getting-started/upgrade-guide/","/styles/text-and-typography/"]},"isInternal":false,"tokens":3842,"sizeBytes":14167},{"name":"unit-testing.md","path":"packages/docs/src/pages/en/getting-started/unit-testing.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/getting-started/unit-testing.md","title":"Getting-started Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Unit testing","description":"Learn how to create unit tests with vue-test-utils and Vuetify components in your Vue application.","keywords":"unit testing vuetify, testing vuetify, vuetify spec tests"},"related":["/getting-started/frequently-asked-questions/","/getting-started/contributing/","/components/text-fields/"]},"isInternal":false,"tokens":1181,"sizeBytes":4981},{"name":"unused-sass-variables.md","path":"packages/docs/src/pages/en/getting-started/unused-sass-variables.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/getting-started/unused-sass-variables.md","title":"Getting-started Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Unused Sass variables","title":"Unused Sass variables","description":"List of Sass variables removed in v4 that had no effect on rendered output, including ones that were still functional in Vuetify 2","keywords":"sass variables, cleanup, upgrade, v4, v3, v2"},"related":["/getting-started/upgrade-guide/","/features/sass-variables/"]},"isInternal":false,"tokens":539,"sizeBytes":2110},{"name":"upgrade-guide.md","path":"packages/docs/src/pages/en/getting-started/upgrade-guide.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/getting-started/upgrade-guide.md","title":"Getting-started Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Upgrade guide","title":"Upgrade guide","description":"Detailed instruction on how to upgrade Vuetify to 4.0","keywords":"migration, upgrade, releases, upgrading vuetify, alpha, v4"},"related":["/introduction/roadmap/","/introduction/long-term-support/","/introduction/enterprise-support/"]},"isInternal":false,"tokens":5953,"sizeBytes":23384},{"name":"wireframes.md","path":"packages/docs/src/pages/en/getting-started/wireframes.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/getting-started/wireframes.md","title":"Getting-started Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Wireframes","description":"Select from a multitude of Vuetify Material Design layouts built to help kickstart your application.","keywords":"pre-defined layouts, layouts, application layout, material design layouts"},"related":["/features/application-layout/","/features/theme/","/features/blueprints/"]},"isInternal":false,"tokens":191,"sizeBytes":919},{"name":"index.md","path":"packages/docs/src/pages/en/index.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/index.md","title":"En Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"home","meta":{"title":"Vuetify — A Vue Component Framework","description":"Vuetify is a no-design-skills-required Open Source UI component framework for Vue with everything you need to build beautiful, content-rich web apps.","keywords":"vue, vue components, vue ui components, material design components, vuetify, component framework, component library"}},"isInternal":false,"tokens":165,"sizeBytes":709},{"name":"enterprise-support.md","path":"packages/docs/src/pages/en/introduction/enterprise-support.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/introduction/enterprise-support.md","title":"Introduction Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"fluid":true,"meta":{"nav":"For Enterprise","title":"Professional Support Services","description":"Get the most out of your application with professional support services from the experts behind Vuetify.","keywords":"vuetify enterprise, vuetify support, vuetify professional support, vuetify help, galaxy, cosmic, multiverse"},"related":["/introduction/long-term-support/","/about/security-disclosure/","/about/meet-the-team/"]},"isInternal":false,"tokens":445,"sizeBytes":2054},{"name":"long-term-support.md","path":"packages/docs/src/pages/en/introduction/long-term-support.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/introduction/long-term-support.md","title":"Introduction Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Long-term support","description":"Vuetify provides long-term support to the previous major release for 12 months for critical bugs and security vulnerabilities","keywords":"lts, long-term support"},"related":["/introduction/enterprise-support/","/getting-started/contributing/","/about/meet-the-team/"]},"isInternal":false,"tokens":450,"sizeBytes":1696},{"name":"roadmap.md","path":"packages/docs/src/pages/en/introduction/roadmap.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/introduction/roadmap.md","title":"Introduction Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Roadmap","title":"The Vuetify roadmap","description":"The upcoming planned features and new functionality coming to Vuetify. New components, new directives, and much much more!","keywords":"vuetify roadmap, future plans, new vuetify features"},"related":["/introduction/long-term-support/","/introduction/enterprise-support/","/getting-started/browser-support/"]},"isInternal":false,"tokens":5962,"sizeBytes":22356},{"name":"sponsors-and-backers.md","path":"packages/docs/src/pages/en/introduction/sponsors-and-backers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/introduction/sponsors-and-backers.md","title":"Introduction Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Sponsors and backers","title":"Sponsoring Vuetify","description":"Help support Vuetify by backing the project. This helps with the maintenance of existing features and the development of new ones.","keywords":"sponsor, backer, donations, patron, supporting vuetify, vuetify support"},"related":["/introduction/enterprise-support/","/introduction/roadmap/","/about/meet-the-team/"]},"isInternal":false,"tokens":672,"sizeBytes":2955},{"name":"why-vuetify.md","path":"packages/docs/src/pages/en/introduction/why-vuetify.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/introduction/why-vuetify.md","title":"Introduction Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Why Vuetify?","title":"Why Vuetify?","description":"Vuetify has an extremely active community, provides easy to use Material Design components and is consistently updated.","keywords":"why vuetify, best vue framework, best ui framework, best component framework, best ui library, best component library"},"related":["/getting-started/installation/","/introduction/roadmap/","/introduction/enterprise-support/"]},"isInternal":false,"tokens":1627,"sizeBytes":6987},{"name":"introduction.md","path":"packages/docs/src/pages/en/labs/introduction.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/labs/introduction.md","title":"Labs Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Introduction","title":"Introduction to Labs","description":"A collection of in-development components for testing purposes before final release","keywords":"labs"},"related":["/getting-started/installation/","/getting-started/browser-support/","/introduction/sponsors-and-backers/"]},"isInternal":false,"tokens":1015,"sizeBytes":4309},{"name":"mcp-privacy.md","path":"packages/docs/src/pages/en/legal/mcp-privacy.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/legal/mcp-privacy.md","title":"Legal Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"MCP privacy","title":"Vuetify MCP Privacy Policy","description":"Privacy policy for the hosted Vuetify MCP server, including data collection, retention, and Vuetify One tools.","keywords":"vuetify mcp privacy, model context protocol, privacy policy, data retention, vuetify one"},"related":["/about/licensing/","/about/security-disclosure/"]},"isInternal":false,"tokens":2749,"sizeBytes":11136},{"name":"one.md","path":"packages/docs/src/pages/en/one.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/one.md","title":"En Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"home","meta":{"nav":"One","title":"Vuetify One","description":"Subscribe to Vuetify One and power the future of Vuetify while getting premium tools and features","keywords":"vuetify one, vuetify subscription, support vuetify, vuetify sponsors, vuetify backers, vuetify premium"}},"isInternal":false,"tokens":109,"sizeBytes":401},{"name":"brand-kit.md","path":"packages/docs/src/pages/en/resources/brand-kit.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/resources/brand-kit.md","title":"Resources Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"fluid":true,"meta":{"nav":"Brand Kit","title":"Brand Kit & Assets","description":"Get access to the Vuetify logo and other brand assets","keywords":"vuetify logo, vuetify assets, vuetify media kit, vuetify brand kit"},"related":["/getting-started/installation/","/features/blueprints/","/about/meet-the-team/"]},"isInternal":false,"tokens":276,"sizeBytes":1157},{"name":"jobs-for-vue.md","path":"packages/docs/src/pages/en/resources/jobs-for-vue.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/resources/jobs-for-vue.md","title":"Resources Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"fluid":true,"meta":{"nav":"Jobs","title":"Vue & Vuetify jobs","description":"Vue.js & Vuetify jobs for developers and businesses. Apply to Software Engineer, Full Stack Developer, Senior Software Engineer and more!","keywords":"Vue.js Jobs, Vue.js careers, Vue.js job search, work in Vue.js, Vuetify jobs for Vue"},"related":["/introduction/why-vuetify/","/introduction/enterprise-support/"]},"isInternal":false,"tokens":153,"sizeBytes":607},{"name":"made-with-vuetify.md","path":"packages/docs/src/pages/en/resources/made-with-vuetify.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/resources/made-with-vuetify.md","title":"Resources Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"backmatter":false,"fluid":true,"meta":{"nav":"Made with Vuetify","title":"Made with Vuetify","description":"Check out these amazing projects built using Vuetify.","keywords":"made with vuetify, vuetify projects, vuetify apps, vuetify plugins, vuetify themes"},"related":["/getting-started/installation/","/resources/themes/","/resources/ui-kits/"]},"isInternal":false,"tokens":146,"sizeBytes":545},{"name":"search-engine.md","path":"packages/docs/src/pages/en/resources/search-engine.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/resources/search-engine.md","title":"Resources Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Search Engine","description":"Add Vuetify as a search engine to your Chrome browser for quick access to the documentation","keywords":"search engine, vuetify search engine, vuetify chrome search engine, vuetify chrome extension"},"related":["/getting-started/installation/","/introduction/why-vuetify/"]},"isInternal":false,"tokens":1159,"sizeBytes":3750},{"name":"themes.md","path":"packages/docs/src/pages/en/resources/themes.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/resources/themes.md","title":"Resources Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"nav":"Themes","title":"Free & Premium Vuetify themes","description":"Vuetify offers numerous pre-build starter and premium themes. Kickstart your next application today, no design skills needed.","keywords":"vuetify themes, pre-built material themes, premium themes"},"related":["/getting-started/installation/","/features/blueprints/","/features/theme/"]},"isInternal":false,"tokens":427,"sizeBytes":1880},{"name":"ui-kits.md","path":"packages/docs/src/pages/en/resources/ui-kits.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/resources/ui-kits.md","title":"Resources Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"UI Kits","description":"Vuetify offers numerous pre-built component kits for both Figma and Adobe Xd. Kickstart your next application today.","keywords":"vuetify ui kit, vuetify ui, ui kits, ui kit figma, ui kit adobe xd"},"related":["/getting-started/wireframes/","/features/theme/","/getting-started/installation/"]},"isInternal":false,"tokens":464,"sizeBytes":1775},{"name":"sponsor.md","path":"packages/docs/src/pages/en/sponsor.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/sponsor.md","title":"En Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"home","meta":{"nav":"Enterprise Sponsorship","title":"Enterprise Sponsorship","description":"Direct support from the Vuetify team for companies running Vuetify in production — private Discord, priority fixes, roadmap input, early access, and more.","keywords":"vuetify enterprise sponsorship, vuetify production support, priority support vuetify, sponsor vuetify"}},"isInternal":false,"tokens":114,"sizeBytes":501},{"name":"border-radius.md","path":"packages/docs/src/pages/en/styles/border-radius.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/border-radius.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Border radius","description":"Use border utilities to quickly style the border-radius of any element.","keywords":"border radius classes, radius utilities, vuetify radius helper classes"},"related":["/styles/text-and-typography/","/components/sheets/","/components/buttons/"],"features":{"report":true}},"isInternal":false,"tokens":2322,"sizeBytes":8193},{"name":"borders.md","path":"packages/docs/src/pages/en/styles/borders.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/borders.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Borders","description":"Use border utilities to quickly style the border of any element.","keywords":"border classes, border utilities, vuetify border helper classes"},"related":["/styles/border-radius/","/styles/display/","/styles/content/"],"features":{"report":true}},"isInternal":false,"tokens":1548,"sizeBytes":5505},{"name":"colors.md","path":"packages/docs/src/pages/en/styles/colors.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/colors.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Material color palette","description":"Learn about the colors of Material Design. Consume the javascript color pack directly in your application.","keywords":"colors, material design colors, vuetify color pack, material color classes"},"related":["/features/theme/","/resources/themes/","/getting-started/wireframes/"]},"isInternal":false,"tokens":553,"sizeBytes":2354},{"name":"content.md","path":"packages/docs/src/pages/en/styles/content.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/content.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Content","description":"Vuetify provides custom styling for various HTML elements.","keywords":"content, html, markup"},"related":["/styles/text-and-typography/","/styles/display/","/styles/spacing/"],"features":{"report":true}},"isInternal":false,"tokens":307,"sizeBytes":1161},{"name":"css-reset.md","path":"packages/docs/src/pages/en/styles/css-reset.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/css-reset.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"CSS Reset","description":"Vuetify applies a minimal CSS reset to normalize browser inconsistencies.","keywords":"css reset, vuetify css reset"},"related":["/styles/colors/","/styles/text-and-typography/","/features/sass-variables/"]},"isInternal":false,"tokens":381,"sizeBytes":1638},{"name":"cursor.md","path":"packages/docs/src/pages/en/styles/cursor.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/cursor.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Cursor","description":"Assign a custom cursor to any element.","keywords":"cursor, utility, helper, class"},"related":["/styles/content/","/styles/spacing/","/styles/text-and-typography/"],"features":{"report":true}},"isInternal":false,"tokens":413,"sizeBytes":1612},{"name":"display.md","path":"packages/docs/src/pages/en/styles/display.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/display.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Display","description":"Display helper classes allow you to control when elements should display based upon viewport.","keywords":"display helper classes, display classes, vuetify display"},"related":["/styles/text-and-typography/","/directives/resize/","/features/display-and-platform/"],"features":{"report":true}},"isInternal":false,"tokens":1755,"sizeBytes":6448},{"name":"elevation.md","path":"packages/docs/src/pages/en/styles/elevation.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/elevation.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Elevation","description":"Elevation helper classes allow you to control relative depth, or distance, between two surfaces along the z-axis.","keywords":"elevation helper classes, elevation classes, vuetify elevation"},"related":["/components/cards/","/components/sheets/","/components/bottom-navigation/"],"features":{"report":true}},"isInternal":false,"tokens":683,"sizeBytes":2931},{"name":"entry-points.md","path":"packages/docs/src/pages/en/styles/entry-points.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/entry-points.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"emphasized":true,"meta":{"title":"Entry points","description":"Vuetify style entry points","keywords":"styles, sass, variables, configuration, core"},"related":["/styles/css-reset/","/styles/colors/","/features/sass-variables/"]},"isInternal":false,"tokens":828,"sizeBytes":3458},{"name":"flex.md","path":"packages/docs/src/pages/en/styles/flex.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/flex.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Flex","description":"Flex helper classes allow you to modify flexbox parents and children.","keywords":"flex helper classes, flex classes, vuetify flex"},"related":["/styles/display/","/components/grids/","/styles/css-reset/"],"features":{"report":true}},"isInternal":false,"tokens":7560,"sizeBytes":22499},{"name":"float.md","path":"packages/docs/src/pages/en/styles/float.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/float.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Float","description":"Float helper classes allow you to control the float property of an element based upon the viewport size.","keywords":"float helper classes, float classes, vuetify float"},"related":["/styles/text-and-typography/","/styles/transitions/","/styles/content/"],"features":{"report":true}},"isInternal":false,"tokens":531,"sizeBytes":1888},{"name":"layers.md","path":"packages/docs/src/pages/en/styles/layers.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/layers.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"CSS Layers","description":"Vuetify 4 uses cascade layers to avoid specificity problems","keywords":"cascade layers, vuetify !important"},"related":["/features/sass-variables/"]},"isInternal":false,"tokens":907,"sizeBytes":3646},{"name":"opacity.md","path":"packages/docs/src/pages/en/styles/opacity.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/opacity.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Opacity","description":"Use opacity utilities to quickly style the opacity of any element.","keywords":"opacity classes, opacity utilities, vuetify opacity helper classes"},"related":["/styles/border-radius/","/styles/display/","/styles/content/"],"features":{"report":true}},"isInternal":false,"tokens":665,"sizeBytes":2316},{"name":"overflow.md","path":"packages/docs/src/pages/en/styles/overflow.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/overflow.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Overflow","description":"Overflow helper classes allow you to configure how content overflows when it becomes too large.","keywords":"overflow helper classes, overflow classes, vuetify overflow"},"related":["/styles/elevation/","/styles/content/","/components/grids/"],"features":{"report":true}},"isInternal":false,"tokens":472,"sizeBytes":1939},{"name":"position.md","path":"packages/docs/src/pages/en/styles/position.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/position.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Position","description":"Use position utilities to quickly style the positioning of any element.","keywords":"position classes, positioning utilities, vuetify position helper classes"},"related":["/styles/display/","/styles/spacing/","/styles/flex/"],"features":{"report":true}},"isInternal":false,"tokens":628,"sizeBytes":2690},{"name":"sizing.md","path":"packages/docs/src/pages/en/styles/sizing.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/sizing.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Sizing","description":"Modify the dimension of block level elements using one of the Vuetify sizing utility classes.","keywords":"css height, css width, sizing elements, element dimensions"},"related":["/styles/content/","/styles/flex/","/styles/text-and-typography/"],"features":{"report":true}},"isInternal":false,"tokens":852,"sizeBytes":2931},{"name":"spacing.md","path":"packages/docs/src/pages/en/styles/spacing.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/spacing.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Spacing","description":"Spacing helper classes allow you to apply margin or padding to any element in increments from 1 to 5.","keywords":"spacing helper classes, spacing classes, vuetify spacing"},"related":["/styles/elevation/","/styles/content/","/components/grids/"],"features":{"report":true}},"isInternal":false,"tokens":8314,"sizeBytes":20965},{"name":"text-and-typography.md","path":"packages/docs/src/pages/en/styles/text-and-typography.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/text-and-typography.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Text and typography","description":"View the various typography styles. From display to labels, with various weights, sizes and italics.","keywords":"typography, headings, titles, text"},"related":["/styles/display/","/styles/content/","/features/internationalization/"],"features":{"report":true,"spec":"https://m3.material.io/styles/typography/type-scale-tokens"}},"isInternal":false,"tokens":2820,"sizeBytes":10436},{"name":"transitions.md","path":"packages/docs/src/pages/en/styles/transitions.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/styles/transitions.md","title":"Styles Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"meta":{"title":"Transitions","description":"Utilize Vuetify's built in CSS and Javascript transitions within components.","keywords":"motion, transitions, vuetify transitions"},"related":["/components/menus/","/styles/colors/","/components/expansion-panels/"]},"isInternal":false,"tokens":1273,"sizeBytes":5746},{"name":"dashboard.md","path":"packages/docs/src/pages/en/user/dashboard.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/user/dashboard.md","title":"User Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"user","meta":{"nav":"Dashboard","title":"User Dashboard","description":"User Dashboard","keywords":"user dashboard"}},"isInternal":false,"tokens":59,"sizeBytes":276},{"name":"baseline.md","path":"packages/docs/src/pages/en/wireframes/baseline.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/wireframes/baseline.md","title":"Wireframes Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"wireframe","meta":{"title":"Baseline Wireframe","keywords":"vuetify wireframe, vuetify app, vue app","description":"A baseline wireframe template for Vuetify"}},"isInternal":false,"tokens":70,"sizeBytes":268},{"name":"constrained.md","path":"packages/docs/src/pages/en/wireframes/constrained.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/wireframes/constrained.md","title":"Wireframes Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"wireframe","meta":{"title":"Constrained Wireframe","keywords":"vuetify wireframe, vuetify app, vue app","description":"A constrained wireframe template for Vuetify"}},"isInternal":false,"tokens":71,"sizeBytes":283},{"name":"discord.md","path":"packages/docs/src/pages/en/wireframes/discord.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/wireframes/discord.md","title":"Wireframes Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"wireframe","meta":{"title":"Discord Wireframe","keywords":"vuetify wireframe, vuetify app, vue app","description":"A discord wireframe template for Vuetify"}},"isInternal":false,"tokens":68,"sizeBytes":263},{"name":"extended-toolbar.md","path":"packages/docs/src/pages/en/wireframes/extended-toolbar.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/wireframes/extended-toolbar.md","title":"Wireframes Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"wireframe","meta":{"title":"Extended Toolbar Wireframe","keywords":"vuetify wireframe, vuetify app, vue app","description":"A toolbar wireframe template for Vuetify"}},"isInternal":false,"tokens":72,"sizeBytes":298},{"name":"inbox.md","path":"packages/docs/src/pages/en/wireframes/inbox.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/wireframes/inbox.md","title":"Wireframes Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"wireframe","meta":{"title":"Inbox Wireframe","keywords":"vuetify wireframe, vuetify app, vue app","description":"A inbox wireframe template for Vuetify"}},"isInternal":false,"tokens":68,"sizeBytes":253},{"name":"side-navigation.md","path":"packages/docs/src/pages/en/wireframes/side-navigation.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/wireframes/side-navigation.md","title":"Wireframes Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"wireframe","meta":{"title":"Base Wireframe"}},"isInternal":false,"tokens":41,"sizeBytes":175},{"name":"steam.md","path":"packages/docs/src/pages/en/wireframes/steam.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/wireframes/steam.md","title":"Wireframes Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"wireframe","meta":{"title":"Steam Wireframe","keywords":"vuetify wireframe, vuetify app, vue app","description":"A steam wireframe template for Vuetify"}},"isInternal":false,"tokens":68,"sizeBytes":253},{"name":"system-bar.md","path":"packages/docs/src/pages/en/wireframes/system-bar.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/wireframes/system-bar.md","title":"Wireframes Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"wireframe","meta":{"title":"System bar Wireframe","keywords":"vuetify wireframe, vuetify app, vue app","description":"A system bar wireframe template for Vuetify"}},"isInternal":false,"tokens":72,"sizeBytes":277},{"name":"three-column.md","path":"packages/docs/src/pages/en/wireframes/three-column.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/src/pages/en/wireframes/three-column.md","title":"Wireframes Skill","category":"anthropic-skill","format":"markdown","content":"","frontmatter":{"layout":"wireframe","meta":{"title":"Three column Wireframe","keywords":"vuetify wireframe, vuetify app, vue app","description":"A three-column wireframe template for Vuetify"}},"isInternal":false,"tokens":73,"sizeBytes":287},{"name":"tsconfig.json","path":"packages/docs/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/docs/tsconfig.json","title":"Docs Skill","category":"anthropic-skill","format":"json","content":"","isInternal":false,"tokens":260,"sizeBytes":893},{"name":"README.md","path":"packages/README.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/README.md","title":"packages Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":89,"sizeBytes":295},{"name":"README.md","path":"packages/vuetify/README.md","rawUrl":"https://raw.githubusercontent.com/vuetifyjs/vuetify/HEAD/packages/vuetify/README.md","title":"vuetify Documentation","category":"plugin-manifest","format":"markdown","content":"","isInternal":false,"tokens":3212,"sizeBytes":11358}],"systemPromptSnippet":"\n\n# Vuetify\n\nVuetify 4 component framework. Ships Material Design as the default look, but is meant to fit non-material design systems too. `@vuetify/v0` (headless primitives) has been a direct dependency since 4.2.0 and gets adopted gradually. The next major builds fully on it to split design systems out and stop shipping CSS for every visual variant.\n\nThis file and `.claude/` help AI tooling tuned for fast output deliver results closer to what maintainers expect, and lower the barrier for contributions.\n\nMonorepo:\n\n- `packages/vuetify` — the `vuetify` npm package\n- `packages/api-generator` — builds API data (props, events, slots, descriptions) for docs\n- `packages/docs` — documentation site\n\nContributor guide: `packages/docs/src/pages/en/getting-started/contributing.md`\nSupported browsers: `packages/docs/src/pages/en/getting-started/browser-support.md`\n\n## Branches\n\n| Base | For | Docs |\n|----------|-------------------------------------------------------|--------------------|\n| `master` | safe bug fixes, docs | vuetifyjs.com |\n| `dev` | new props/features, fixes that risk visual regression | dev.vuetifyjs.com |\n| `next` | breaking changes | next.vuetifyjs.com |\n\n## Commands\n\n```bash\npnpm dev # root: playground at localhost:8090\npnpm dev docs # root: docs at localhost:8095\n\n# in packages/vuetify\npnpm test # single file or folder\npnpm lint:fix # tsgo typecheck + eslint --fix\n```\n\n## Workflow\n\n1. Reproduce in `packages/vuetify/dev/Playground.vue` — see `.claude/skills/playground/SKILL.md`\n2. Change code, observe the impact in the playground\n3. Write tests unless the change is trivial. The bar for trivial is higher than in most projects — see `.claude/skills/tests/SKILL.md`\n4. Lint, fix, refactor — see `.claude/rules/code-readability.md`\n5. Consider a11y and i18n/RTL. They are usually the implementation's concern; leaving them to framework users is the rare exception\n\n## Principles\n\n- `shallowRef` / `toRef` by default; `ref` / `computed` only when the cost is justified\n- When passing props down to composables or children, usually pass the reactive source (getter or `toRef`), not the unwrapped value — see `.claude/rules/components.md`\n- Less is more, until it isn't. A minimal patch that fixes the reported case often breaks or ignores neighbouring prop combinations. Extend the playground to cover those combinations before calling it done\n\n## Rules\n\nPath-scoped rules in `.claude/rules/`. Claude Code loads them automatically; other tools should read the ones matching the touched paths:\n\n| Rule | Paths |\n|-----------------------|-----------------------------------------------------|\n| `components.md` | `packages/vuetify/src/components/**`, `src/labs/**` |\n| `composables.md` | `packages/vuetify/src/composables/**` |\n| `sass.md` | `packages/vuetify/src/**/*.{sass,scss}` |\n| `utilities.md` | `packages/vuetify/src/util/**` |\n| `code-readability.md` | `packages/vuetify/src/**` |\n\n## Review rubric\n\nEach item is a real finding when a diff violates it. Details in the rule named at the end.\n\n- Comments that narrate code, or reference issues/URLs — `code-readability.md`\n- Abbreviated names outside short lambdas (`idx`, `opts`, `handleX`) — `code-readability.md`\n- Props passed down unwrapped instead of as getter / `toRef` — `components.md`\n- Utility classes in component markup — `components.md`\n- Non-component exports from a component `index.ts` (breaks api-generator) — `components.md`\n- New prop without `new-in.json` entry or api-generator description — `components.md`\n- Changed arguments or return shape of a public composable outside `next` — `composables.md`\n- Raw `typeof` / `== null` checks instead of `@/util` guards — `utilities.md`\n- Hardcoded tunable values instead of `!default` variables, styles outside `tools.layer`, physical `left`/`right` where logical properties work — `sass.md`\n- Surfaces or states invisible in forced-colors mode — `sass.md`\n- `transition` followed by `transition-*` in one rule — `sass.md`\n- Missing tests for a non-trivial change; fixed `wait(ms)` where polling works\n- Base branch not matching the change type (see Branches)\n\nNot findings: legacy patterns in lines the diff doesn't touch, and a11y/RTL gaps the PR explicitly scopes out.\n\n\n@AGENTS.md\n\n\n---\npaths: ['packages/vuetify/src/**']\n---\n\n# Code Readability\n\nRun `pnpm lint:fix` first (in `packages/vuetify`), then review your own diff against this list. Anything ESLint enforces is not repeated here. Only touch lines the change needs — no drive-by renames, reordering or reformatting.\n\n## Comments\n\nDefault to none. Most AI-written comments narrate what the next line does and get deleted in review.\n\nWrite one only when the reason can't be read from the code: a browser quirk, an ordering constraint, a footgun that bites if someone \"simplifies\" it. One line, plain wording.\n\nNever:\n\n- restate the code (`// set open to false`)\n- narrate intent or history (`// fixed the bug where…`, `// new approach`)\n- link or reference issues (`// see #12345`, GitHub URLs) — that belongs in the commit message\n- add JSDoc to internal functions\n\nImport group headers (`// Components`, `// Composables`, `// Utilities`, `// Types`) are the file convention — keep them.\n\n## Naming\n\nNo abbreviations in variables, params or functions:\n\n```ts\n// ❌\nconst idx = items.indexOf(item)\nconst opts = { ...defaults, ...options }\nfunction handleKeydown (e: KeyboardEvent) {}\n\n// ✅\nconst index = items.indexOf(item)\nconst merged = { ...defaults, ...options }\nfunction onKeydown (e: KeyboardEvent) {}\n```\n\nShort lambda params are fine: `items.map(v => v.value)`, `(a, b) => a - b`. Established names stay too: `e` for events, `vm`, the `El` suffix for element refs (`activatorEl`, `contentEl`). Older code in `util` still has `val`/`cb`/`obj` — don't copy it.\n\nPrefer single words when context makes them unambiguous: `open` over `isMenuOpen` inside VMenu. `on` for handlers, never `handle`.\n\n## Functions\n\nFunction declarations over `const` arrows in `setup` and modules:\n\n```ts\n// ❌\nconst toggle = () => { … }\n\n// ✅\nfunction toggle () { … }\n```\n\n## Abstractions\n\n- No helper for a single call site — inline it\n- Grep `src/util` and `src/composables` before writing a new helper\n- No wrapper that only renames or forwards arguments\n- Derive instead of syncing: a `toRef`/`computed` over a `watch` that writes into another ref\n\n\n---\npaths: ['packages/vuetify/src/components/**', 'packages/vuetify/src/labs/**']\n---\n\n# Components\n\n## Direction\n\nThe `.tsx` file holds markup, coordination and light logic. Heavy logic (data shaping, selection rules, calculations) goes into local composables next to the component, and later moves to `@vuetify/v0`. Logic in a plain function is testable without mounting. Follow this for new components and when a change grows an existing component's `setup`.\n\n## Anatomy\n\n```\ncomponents/VExample/\n├── VExample.tsx\n├── VExample.sass\n├── _variables.scss\n├── example.ts # local composable: useExample(props)\n├── index.ts\n└── __tests__/\n```\n\nSub-components (`VExampleItem`, `VExampleGroup`) live in the same folder and share its `index.ts`. Local composables are not exported from `index.ts`.\n\n## Skeleton\n\n```tsx\nexport const makeVExampleProps = propsFactory({\n label: String,\n modelValue: Boolean,\n items: {\n type: Array as PropType,\n default: () => ([]),\n },\n\n ...makeComponentProps(),\n ...makeTagProps(),\n ...makeThemeProps(),\n}, 'VExample')\n\nexport const VExample = genericComponent()({\n name: 'VExample',\n\n props: makeVExampleProps(),\n\n emits: {\n 'update:modelValue': (value: boolean) => true,\n },\n\n setup (props, { slots }) {\n const { themeClasses } = provideTheme(props)\n const model = useProxiedModel(props, 'modelValue')\n\n useRender(() => (\n \n { slots.default?.() ?? props.label }\n \n ))\n\n return {}\n },\n})\n```\n\n- `genericComponent` applies global and `VDefaultsProvider` defaults — don't call `useDefaults` in a component\n- `useProxiedModel` for every v-model, controlled or not\n- Prop type assertions go inline: `type: X as PropType<…>`\n- No utility classes (`d-flex`, `ma-2`, `text-center`) in component markup — users can disable or override utilities. Style through the component's own `.sass`\n\n## Passing props down\n\nComposables and children need the reactive source, not a snapshot. An unwrapped value is read once in `setup` and never updates.\n\n```ts\n// ❌ reads once\nuseTextColor(props.color)\nprovideDefaults({ VExampleItem: { color: props.color } })\n\n// ✅\nuseTextColor(() => props.color)\nuseDensity(props)\nprovideDefaults({ VExampleItem: { color: toRef(() => props.color) } })\n```\n\nForward props to a wrapped component with its `filterProps`:\n\n```tsx\nconst fieldProps = VExampleField.filterProps(props)\n// …\n\n```\n\n## Parent ↔ child\n\n- `provide`/`inject` with an exported `Symbol.for('vuetify:v-example-group')` key, never a string\n- Selection between parent and items: `useGroup` / `useGroupItem` before building anything new\n- Pushing props to nested components: `provideDefaults` or ``\n\n## Adding a prop\n\n- `packages/docs/src/data/new-in.json` — add `\"propName\": \"\"` under the component (`props`, `slots`, `events` or `exposed`)\n- `packages/api-generator/src/locale/en/VExample.json` — description. Props from a shared composable go in that composable's file (`border.json`, `elevation.json`). Don't restate the default, the API table already shows it\n- Docs example when the prop needs one: `packages/docs/src/examples/v-example/prop-.vue`, referenced from the page with `\" />`\n\n## Adding a component\n\nNew components start in labs.\n\n- `src/labs/VExample/` with the anatomy above\n- `src/labs/VExample/index.ts` — **components only**. Re-exporting composables, utils or types from a component barrel breaks api-generator\n- `src/labs/components.ts` — `export * from './VExample'`\n- New translation keys in **every** `src/locale/*.ts` — recent commits ship real translations, not English copies\n- `packages/api-generator/src/locale/en/VExample.json`\n- Docs:\n - page in `packages/docs/src/pages/en/components/`\n - examples in `packages/docs/src/examples/v-example/`: `usage.vue`, `prop-*`, `slot-*`, `event-*`, `misc-*`\n - `packages/docs/src/data/nav.json`\n - `packages/docs/src/data/page-to-api.json`\n - list it in `packages/docs/src/pages/en/labs/introduction.md`\n\n\n---\npaths: ['packages/vuetify/src/composables/**']\n---\n\n# Shared Composables\n\nShared composables are used by many components — a signature or reactivity slip spreads everywhere. Component-specific logic belongs in a local composable next to the component (see `components.md`).\n\n## Reuse first\n\nGrep `src/composables` and `src/util` before adding one. `@vuetify/v0` enters through `src/util/v0.ts`: import from `@/util`, and add new v0 exports to that file instead of importing `@vuetify/v0` at call sites.\n\n## Prop-driven shape\n\nMost composables. Props factory plus a `use` function taking `props` and the component name:\n\n```ts\n// Utilities\nimport { computed } from 'vue'\nimport { getCurrentInstanceName, propsFactory } from '@/util'\n\n// Types\nexport interface ExampleProps {\n example?: boolean | string\n}\n\n// Composables\nexport const makeExampleProps = propsFactory({\n example: [Boolean, String],\n}, 'example')\n\nexport function useExample (\n props: ExampleProps,\n name = getCurrentInstanceName(),\n) {\n const exampleClasses = computed(() => props.example ? `${name}--example` : [])\n\n return { exampleClasses }\n}\n```\n\n- Take `props` or `MaybeRefOrGetter`, read with `toValue` inside `computed`/`toRef`. Never destructure props in the signature\n- Return a plain object of refs, never `reactive`. Prefix names with the composable (`exampleClasses`, `exampleStyles`) — components destructure several side by side\n- Modifier classes follow `${name}--x`\n\n## Plugin shape\n\nGlobal services (display, theme, locale). `createExample(options)` is called from `framework.ts`, provided under an `InjectionKey`, and `useExample()` injects it:\n\n```ts\nexport const ExampleSymbol: InjectionKey = Symbol.for('vuetify:example')\n\nexport function useExample () {\n const example = inject(ExampleSymbol)\n\n if (!example) throw new Error('[Vuetify] Could not find example injection')\n\n return example\n}\n```\n\n## Instance, scope, SSR\n\n- `getCurrentInstance('useExample')` from `@/util` when the composable needs the vm — the name ends up in the error\n- `useToggleScope(source, fn)` for effects that should only exist while something is active\n- Remove listeners and observers in `onScopeDispose`\n- Guard browser APIs with `IN_BROWSER` / `SUPPORTS_*` from `@/util/globals`\n\n## Public API\n\n- `composables/index.ts` is public — exports there are documented by api-generator\n- Internal code imports `@/composables/example`, never the barrel\n- New exposed members of a public composable go in `packages/docs/src/data/new-in.json`\n- Changing the return shape or arguments of a public composable is breaking — `next` branch\n- Props coming from a shared composable are described once in `packages/api-generator/src/locale/en/example.json`, not in each component's file\n\n## Tests\n\nUnit project: `composables/__tests__/example.spec.ts`. See the `tests` skill.\n\n\n---\npaths: ['packages/vuetify/src/**/*.sass', 'packages/vuetify/src/**/*.scss']\n---\n\n# Styles\n\nNo stylelint — nothing below is enforced mechanically.\n\n## Files\n\n- `VExample.sass` — rules, inside `@include tools.layer('components')` so users override without fighting specificity\n- `_variables.scss` — `$example-*: … !default`\n\n## Values\n\n- Anything a user may want to tune gets a `$example-*` variable\n- Values that change at runtime or cascade into children are custom properties (`--v-example-*`)\n- Colors from `rgb(var(--v-theme-*))`, never literals\n- Shared tokens from `settings.$*` (rounded, typography, border, easing)\n\n## Tools before hand-rolling\n\n`tools.states`, `rounded`, `elevation`, `density`, `border`, `variant`, `typography`, `absolute`. Grep an existing component using the mixin before inventing a variant of it.\n\n## RTL\n\nLogical properties first (`margin-inline-start`, `inset-inline-end`, `padding-inline`). `tools.rtl` / `tools.ltr` only for what logical properties can't express — transforms, icon flips, gradients.\n\n## Forced colors\n\nBackgrounds, shadows and overlays disappear in forced-colors mode. Anything relying on them to be visible (surfaces, selected/active states, focus, progress fills, dividers drawn with background) needs a fallback:\n\n```sass\n@media (forced-colors: active)\n .v-example\n &:not(&--variant-text, &--variant-plain)\n border: thin solid\n\n &:focus-visible\n outline: 2px solid\n outline-offset: 2px\n```\n\nPrefer `currentColor` / plain `solid`; system colors (`Highlight`, `Canvas`) only when state must be distinguishable.\n\n## Motion\n\nTransitions and animations that move or resize need `@media (prefers-reduced-motion: reduce)` handling.\n\n`transition` followed by `transition-*` in the same rule is merged into one shorthand by newest Vite. The source looks fine in review while the shipped CSS differs. Use only longhands or only the shorthand:\n\n```sass\n// ❌\ntransition: .2s settings.$standard-easing\ntransition-property: width, height\n\n// ✅ longhands only\ntransition-property: width, height\ntransition-duration: .2s\ntransition-timing-function: settings.$standard-easing\n\n// ✅ full shorthand\ntransition: width .2s settings.$standard-easing, height .2s settings.$standard-easing\n```\n\nExisting files still use the two-line form — don't copy it.\n\n## Direction\n\nKeep CSS per visual variant minimal. Prefer toggling a custom property over another block of generated modifier classes — future design systems drop MD-only CSS.\n\n## Hand-off\n\nYou can't see the result. After a style change, tell the dev what to check in the Playground instead of claiming it looks right:\n\n- affected variants, densities, sizes\n- dark theme and RTL\n- forced colors: DevTools → Rendering → Emulate CSS media feature `forced-colors: active`\n- reduced motion, when transitions changed\n\n\n---\npaths: ['packages/vuetify/src/util/**']\n---\n\n# Utilities\n\n`@/util` is imported by nearly every component — a changed signature or semantics ripples everywhere.\n\n## Before adding\n\nGrep `helpers.ts`, `dom.ts` and `v0.ts` first. Most requests already exist: `wrapInArray`, `pick` / `omit`, `mergeDeep`, `debounce`, `clamp`, `focusableChildren`, `getActiveElement` (Shadow DOM-safe — use it instead of `document.activeElement`).\n\n## Where things go\n\n- Framework plumbing (`propsFactory`, `defineComponent`, `useRender`, `getCurrentInstance`) — its own file\n- Generic helpers — `helpers.ts`\n- DOM helpers — `dom.ts`\n- Environment flags — `globals.ts` (`IN_BROWSER`, `SUPPORTS_*`)\n- A new file needs `export *` in `util/index.ts`\n\n## v0 first\n\n- Type guards (`isString`, `isNullOrUndefined`, …) come from `v0.ts` — no raw `typeof x === 'string'` or `x == null`\n- A new framework-agnostic helper is a v0 candidate — mention it to the dev instead of growing `helpers.ts`\n- When core adopts a v0 helper: add it to `v0.ts`, rename on export if it would shadow common local names (`range as createRange`), delete the core copy\n\n## Changing an existing helper\n\nGrep call sites first. Don't change behavior under an existing name — add a new function or update every caller in the same change.\n\n## Console\n\n- Debugging: raw `console.*` is fine, even preferred — lint flags leftovers before they can merge\n- Messages shipped to app developers: `consoleWarn`, `consoleError`, `deprecate`, `breaking`, `removed`\n\n## Tests\n\n`util/__tests__/`, unit project by default. Browser project only for layout or DOM measurement.\n\n\n---\nname: playground\ndescription: Use when working with packages/vuetify/dev/Playground.vue\n---\n\n# Playground\n\n`packages/vuetify/dev/Playground.vue` (gitignored). `pnpm install` creates it from `Playground.template.vue` when missing; `pnpm dev` from the repo root serves it at localhost:8090.\n\nGoals, in order:\n\n1. Hands-on reproduction for the human authoring the change\n2. A demo the author copy-pastes into the PR description for reviewers — keep it brief, no lengthy descriptions, it usually helps to resemble a realistic use case\n\n## Ownership\n\nDo not overwrite Playground content unless explicitly asked. The human is a co-author and may have pasted an old use case to focus on. When asked to change it, keep what the request doesn't touch.\n\nThese guidelines exist so AI edits look like what a human would write and expect.\n\n## Setup\n\n- No build step — `@/` resolves to `src`, changes to components, composables, sass and utilities hot-reload\n- All components are auto-registered, labs included\n- Other files in `dev/` are tracked but fair game when the reproduction needs them: `dev/vuetify.js` (createVuetify options), `dev/vuetify/{defaults,locale,icons,date}.js`\n\n## Shape\n\n```vue\n\n\n\n```\n\n- Block order: template → script → style\n- Dark theme, `v-container`; `max-width=\"600\"` for smaller components\n- Avoid `v-row` / `v-col` as general layout — devs debug in split screen, so it wraps anyway. Stack with `d-flex flex-column ga-4`\n- Cover neighbouring combinations (variant, density, disabled/readonly, RTL), not just the reported case. Label each case with a short `` line, not prose\n- Deterministic local data, no fetches\n\n## Running\n\nOnly when asked, or when the scope of changes needs a visual check.\n\nThe vite process often gets stuck holding port 8090. Before starting:\n\n```bash\nlsof -ti :8090 | xargs -r kill\npnpm dev\n```\n\nRTL / locale checks — fresh Chrome profile with a forced locale (`ar`, `he`, `fa` are RTL):\n\n```bash\nLANGUAGE=ar-EG google-chrome --lang=ar-EG --user-data-dir=/tmp/chrome-ar-EG \\\n --no-first-run --no-default-browser-check http://localhost:8090/\n```\n\nSame thing as a VS Code task (`.vscode/` is gitignored, add it locally):\n\n```json\n{\n \"type\": \"shell\",\n \"label\": \"Open Playground in Chrome (locale)\",\n \"command\": \"LANGUAGE=${input:locale} google-chrome --lang=${input:locale} --user-data-dir=/tmp/chrome-${input:locale} --no-first-run --no-default-browser-check http://localhost:8090/\",\n \"problemMatcher\": []\n}\n```\n\n```json\n\"inputs\": [{\n \"id\": \"locale\",\n \"type\": \"pickString\",\n \"description\": \"Browser locale (ar/he/fa are RTL)\",\n \"options\": [\"ar-EG\", \"ar\", \"el-GR\", \"he\", \"fa\", \"en-US\", \"de\", \"ja\", \"ko-KR\", \"zh-MO\"],\n \"default\": \"ar-EG\"\n}]\n```\n\n\n---\nname: tests\ndescription: Use when writing, fixing or debugging tests in packages/vuetify (unit or browser specs, flaky tests, screenshot stories).\n---\n\n# Tests\n\n## When\n\nWrite tests unless the change is trivial — the bar for trivial is higher than in most projects. A bug fix gets a test that fails without the fix: write it first, see it red, then fix.\n\n## Where\n\nColocated in `__tests__/` next to the source.\n\n| File | Project | For |\n| -------------------- | ------------------------------- | ---------------------------------------------------------- |\n| `*.spec.ts(x)` | `unit` (jsdom) | pure logic: composables, util, local composables |\n| `*.spec.browser.tsx` | `browser` (Playwright Chromium) | anything with layout, focus, keyboard, overlays, scrolling |\n\nPrefer extracting logic into a local composable and unit-testing it over mounting a component for a calculation.\n\n## Running\n\nIn `packages/vuetify`:\n\n```bash\npnpm test # both projects\npnpm test --project browser\npnpm test:open # headed browser with devtools, bails on first failure\n```\n\n## Writing\n\n- Vitest globals (`describe`, `it`, `expect`, `vi`) are auto-imported\n- Helpers from `@test`: `render`, `screen`, `userEvent`, `page`, `commands`, `wait*`, `click`, `waitForClickable`, `scroll`\n- Assert what users observe: roles, ARIA attributes, text, emitted events, focus. Classes only when they are public API (`v-btn--active`)\n- Test names describe behavior: `it('should close on Escape')`\n- No comments referencing issues or URLs — older specs have them, don't copy\n\n## Console\n\nAny unexpected `console.warn` / `console.error` fails the test. Assert expected ones:\n\n```ts\nexpect(\"is not a valid value\").toHaveBeenTipped(); // console.warn — consoleWarn/consoleError/deprecate go through Vue's warn\nexpect(\"…\").toHaveBeenWarned(); // console.error\n```\n\n## Stability\n\nFlaky tests get fixed in follow-up commits regularly — avoid the usual causes:\n\n- `expect.poll(() => …)` or `waitForClickable` instead of fixed `await wait(100)`\n- Focus or clipboard work runs parallel with other tests — take the lock before focusing:\n\n ```ts\n const lock = await commands.getLock();\n input.focus();\n await userEvent.paste();\n await commands.releaseLock(lock);\n ```\n\n- Opening submenus with arrow keys is racy — press the key again until focus lands\n- Reduced motion is on by default; `commands.setReduceMotionDisabled()` when a transition matters, re-enable in `afterEach`\n\n## Screenshots\n\nVisual stories use `showcase({ stories, props, component })` with `gridOn(rows, columns, render)`, captured by Vizzly (`pnpm tdd`, then `pnpm test:screen`). Add them only for visual changes; never commit updated baselines unless asked.\n\n\n{\n \"name\": \"vuetifyjs.com\",\n \"type\": \"module\",\n \"description\": \"A Vue.js project\",\n \"private\": true,\n \"author\": \"John Leider \",\n \"version\": \"4.3.0\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/vuetifyjs/vuetify.git\",\n \"directory\": \"packages/docs\"\n },\n \"scripts\": {\n \"dev\": \"vite --force\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\",\n \"preview-https\": \"HTTPS=true vite preview\",\n \"lint\": \"concurrently 'vue-tsc --noEmit --pretty' 'pnpm lint:md' 'node ../../scripts/eslint.js src --concurrency 4' -n 'tsc,md,eslint' --kill-others-on-fail -gr\",\n \"lint:fix\": \"pnpm fix:md && node ../../scripts/eslint.js src --concurrency 4 --fix\",\n \"lint:md\": \"markdownlint --config .markdownlintrc --rules build/markdownlint-rules/meta-length.cjs src/pages/en\",\n \"fix:md\": \"markdownlint --config .markdownlintrc --rules build/markdownlint-rules/meta-length.cjs src/pages/en --fix\"\n },\n \"dependencies\": {\n \"@cosmicjs/sdk\": \"catalog:\",\n \"@sentry/vue\": \"catalog:\",\n \"@vue/compiler-dom\": \"catalog:\",\n \"@vuelidate/core\": \"catalog:\",\n \"@vuelidate/validators\": \"catalog:\",\n \"@vuetify/one\": \"catalog:\",\n \"algoliasearch\": \"catalog:\",\n \"fflate\": \"catalog:\",\n \"isomorphic-fetch\": \"catalog:\",\n \"markdown-it-multimd-table\": \"catalog:\",\n \"pinia\": \"catalog:\",\n \"prism-theme-vars\": \"catalog:\",\n \"prismjs\": \"catalog:\",\n \"roboto-fontface\": \"catalog:\",\n \"swetrix\": \"catalog:\",\n \"vee-validate\": \"catalog:\",\n \"vue\": \"catalog:\",\n \"vue-i18n\": \"catalog:\",\n \"vue-instantsearch\": \"catalog:\",\n \"vue-router\": \"catalog:\",\n \"vuetify\": \"workspace:*\"\n },\n \"devDependencies\": {\n \"@babel/generator\": \"catalog:\",\n \"@babel/types\": \"catalog:\",\n \"@emailjs/browser\": \"catalog:\",\n \"@intlify/unplugin-vue-i18n\": \"catalog:\",\n \"@mdi/js\": \"catalog:\",\n \"@mdi/svg\": \"catalog:\",\n \"@octokit/openapi-types\": \"catalog:\",\n \"@resvg/resvg-js\": \"catalog:\",\n \"@types/babel__generator\": \"catalog:\",\n \"@types/markdown-it\": \"catalog:\",\n \"@types/markdown-it-container\": \"catalog:\",\n \"@types/prismjs\": \"catalog:\",\n \"@vitejs/plugin-basic-ssl\": \"catalog:\",\n \"@vue/compiler-sfc\": \"catalog:\",\n \"@vuetify/api-generator\": \"workspace:*\",\n \"@yankeeinlondon/builder-api\": \"catalog:\",\n \"ajv\": \"catalog:\",\n \"algoliasearch-helper\": \"catalog:\",\n \"async-es\": \"catalog:\",\n \"date-fns\": \"catalog:\",\n \"eslint\": \"catalog:\",\n \"eslint-formatter-codeframe\": \"catalog:\",\n \"front-matter\": \"catalog:\",\n \"markdown-it\": \"catalog:\",\n \"markdown-it-anchor\": \"catalog:\",\n \"markdown-it-attrs\": \"catalog:\",\n \"markdown-it-container\": \"catalog:\",\n \"markdown-it-emoji\": \"catalog:\",\n \"markdown-it-header-sections\": \"catalog:\",\n \"markdown-it-link-attributes\": \"catalog:\",\n \"markdown-it-prism\": \"catalog:\",\n \"markdownlint-cli\": \"catalog:\",\n \"satori\": \"catalog:\",\n \"unplugin-auto-import\": \"catalog:\",\n \"unplugin-fonts\": \"catalog:\",\n \"unplugin-vue-components\": \"catalog:\",\n \"vite-plugin-md\": \"catalog:\",\n \"vite-plugin-pages\": \"catalog:\",\n \"vite-plugin-pwa\": \"catalog:\",\n \"vite-plugin-vue-layouts\": \"catalog:\",\n \"vite-plugin-vuetify\": \"catalog:\",\n \"vue-tsc\": \"catalog:\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n\n\n{\n \"components/dropdowns\": \"/components/menus\",\n \"quick-start\": \"/getting-started/installation\",\n \"vuetify/quick-start\": \"/getting-started/installation\",\n \"getting-started/quick-start/\": \"/getting-started/installation\",\n \"motion\": \"/styles/transitions\",\n \"components/sidebars\": \"/components/navigation-drawers\",\n \"components/v-navigation-drawer\": \"/components/navigation-drawers\",\n \"components/collapsible\": \"/components/expansion-panels\",\n \"components/navbars\": \"/components/toolbars\",\n \"components/toasts\": \"/components/snackbars\",\n \"components/carousel\": \"/components/carousels\",\n \"components/datatables\": \"/components/data-tables/basics\",\n \"components/expansion-panel\": \"/components/expansion-panels\",\n \"components/footer\": \"/components/footers\",\n \"directives/badges\": \"/components/badges\",\n \"vuetify/why-vuetify\": \"/getting-started/why-vuetify\",\n \"vuetify/frequently-asked-questions\": \"/getting-started/frequently-asked-questions\",\n \"vuetify/sponsors-and-backers\": \"/introduction/sponsors-and-backers\",\n \"getting-started/releases-and-migrations/\": \"/getting-started/upgrade-guide\",\n \"vuetify/releases-and-migrations\": \"/getting-started/upgrade-guide\",\n \"vuetify/contributing\": \"/getting-started/contributing\",\n \"vuetify/roadmap\": \"/getting-started/roadmap\",\n \"vuetify/a-la-carte\": \"/features/treeshaking\",\n \"getting-started/a-la-carte\": \"/features/treeshaking\",\n \"guides/a-la-carte\": \"/features/treeshaking\",\n \"customization/a-la-carte\": \"/features/treeshaking\",\n \"pre-made-themes\": \"/resources/themes\",\n \"layout/pre-made-themes\": \"/resources/themes\",\n \"themes/premium\": \"/resources/themes\",\n \"layout/grid\": \"/components/grids\",\n \"layout/pre-defined\": \"/getting-started/wireframes\",\n \"getting-started/pre-made-layouts\": \"/getting-started/wireframes\",\n \"layout/breakpoints\": \"/features/display-and-platform\",\n \"layout/aspect-ratios\": \"/components/aspect-ratios\",\n \"layout/spacing\": \"/styles/spacing\",\n \"layout/alignment\": \"/styles/alignment\",\n \"layout/display\": \"/styles/display\",\n \"layout/elevation\": \"/styles/elevation\",\n \"style/colors\": \"/styles/colors\",\n \"style/theme\": \"/customization/theme\",\n \"style/typography\": \"/styles/text-and-typography\",\n \"styles/typography\": \"/styles/text-and-typography\",\n \"styles/text\": \"/styles/text-and-typography\",\n \"style/content\": \"/styles/content\",\n \"motion/scroll\": \"/customization/scrolling\",\n \"styles/scroll\": \"/customization/scrolling\",\n \"motion/transitions\": \"/styles/transitions\",\n \"components/form\": \"/components/forms\",\n \"components/selection-controls\": \"/components/checkboxes\",\n \"components/slide-toggles\": \"/components/switches\",\n \"components/buttons-and-indicators\": \"/components/buttons\",\n \"framework/pre-defined\": \"/getting-started/pre-made-layouts\",\n \"framework/pre-made\": \"/getting-started/pre-made-layouts\",\n \"framework/pre-defined-layouts\": \"/getting-started/pre-made-layouts\",\n \"components/data-iterator\": \"/components/data-iterators\",\n \"framework/a-la-carte\": \"/customization/a-la-carte\",\n \"framework/grid\": \"/components/grids\",\n \"framework/application\": \"/components/application\",\n \"framework/breakpoints\": \"/features/display-and-platform\",\n \"framework/icons\": \"/customization/icons\",\n \"framework/i18n\": \"/customization/internationalization\",\n \"framework/theme\": \"/customization/theme\",\n \"framework/scroll\": \"/customization/scrolling\",\n \"framework/aspect-ratios\": \"/components/aspect-ratios\",\n \"framework/pre-made-layouts\": \"/getting-started/pre-made-layouts\",\n \"framework/colors\": \"/styles/colors\",\n \"framework/content\": \"/styles/content\",\n \"framework/typography\": \"/styles/typography\",\n \"framework/display\": \"/styles/display\",\n \"framework/elevation\": \"/styles/elevation\",\n \"framework/spacing\": \"/styles/spacing\",\n \"styles/alignment\": \"/styles/text\",\n \"framework/text-alignment\": \"/styles/text-and-typography\",\n \"styles/text-alignment\": \"/styles/text-and-typography\",\n \"framework/transitions\": \"/styles/transitions\",\n \"customizing/sandbox\": \"/customization/sandbox\",\n \"customizing/a-la-carte\": \"/customization/a-la-carte\",\n \"customizing/breakpoints\": \"/features/display-and-platform\",\n \"customizing/theme\": \"/customization/theme\",\n \"customizing/icons\": \"/customization/icons\",\n \"customizing/i18n\": \"/customization/internationalization\",\n \"getting-started/why-vuetify\": \"/introduction/why-vuetify\",\n \"getting-started/meet-the-team\": \"/about/meet-the-team\",\n \"getting-started/sponsors-and-backers\": \"/introduction/sponsors-and-backers\",\n \"getting-started/roadmap\": \"/introduction/roadmap\",\n \"getting-started/long-term-support\": \"/introduction/long-term-support\",\n \"getting-started/consulting-and-support\": \"/introduction/enterprise-support\",\n \"getting-started/support/enterprise\": \"/introduction/enterprise-support\",\n \"components/textarea\": \"/components/textareas\",\n \"components/virtual-scrollers\": \"/components/virtual-scroller\",\n \"directives/resizing\": \"/directives/resize\",\n \"directives/ripples\": \"/directives/ripple\",\n \"directives/scrolling\": \"/directives/scroll\",\n \"directives/touch-support\": \"/directives/touch\",\n \"introduction/frequently-asked-questions\": \"/getting-started/frequently-asked-questions\",\n \"professional-support/consulting\": \"/introduction/enterprise-support\",\n \"professional-support/enterprise\": \"/introduction/enterprise-support\",\n \"introduction/support\": \"/introduction/enterprise-support\",\n \"introduction/enterprise\": \"/introduction/enterprise-support\",\n \"introduction/consulting\": \"/introduction/enterprise-support\",\n \"customization/accessibility\": \"/features/accessibility\",\n \"customization/rtl\": \"/features/bidirectionality\",\n \"features/rtl\": \"/features/bidirectionality\",\n \"features/breakpoints\": \"/features/display-and-platform\",\n \"features/bidirectionality\": \"/features/internationalization\",\n \"customization/bidirectionality\": \"/features/bidirectionality\",\n \"customization/breakpoints\": \"/features/display-and-platform\",\n \"customization/global-config\": \"/features/global-config\",\n \"customization/scrolling\": \"/features/scrolling\",\n \"customization/icons\": \"/features/icon-fonts\",\n \"customization/internationalization\": \"/features/internationalization\",\n \"customization/presets\": \"/features/presets\",\n \"customization/sass-variables\": \"/features/sass-variables\",\n \"customization/theme\": \"/features/theme\",\n \"about/sponsors-and-backers\": \"/introduction/sponsors-and-backers\",\n \"components/simple-tables\": \"/components/tables\",\n \"components/data-tables\": \"/components/data-tables/basics\",\n \"components/date-pickers-month\": \"/introduction/roadmap\",\n \"components/server-side-data-tables\": \"/components/data-tables/server-side-tables\",\n \"components/virtual-data-tables\": \"/components/data-tables/virtual-tables\",\n \"api/v-click-outside\": \"/api/v-click-outside-directive\",\n \"api/v-intersect\": \"/api/v-intersect-directive\",\n \"api/v-mutate\": \"/api/v-mutate-directive\",\n \"api/v-resize\": \"/api/v-resize-directive\",\n \"api/v-ripple\": \"/api/v-ripple-directive\",\n \"api/v-scroll\": \"/api/v-scroll-directive\",\n \"api/v-touch\": \"/api/v-touch-directive\"\n}\n\n\n{\n \"title\": \"Vuetify — A Vue Component Framework\",\n \"description\": \"Vuetify is a no design skills required UI Component Framework for Vue. It provides you with all of the tools necessary to create beautiful content rich web applications.\",\n \"keywords\": \"vue, material design components, vue components, material design components, vuetify, vuetify, component framework\"\n}\n\n\n[\n {\n \"title\": \"introduction\",\n \"inactiveIcon\": \"mdi-script-text-outline\",\n \"activeIcon\": \"mdi-script-text\",\n \"items\": [\n \"why-vuetify\",\n \"long-term-support\",\n \"roadmap\",\n \"sponsors-and-backers\",\n { \"divider\": true },\n { \"subheader\": \"professional-support\" },\n \"enterprise-support\"\n ]\n },\n {\n \"title\": \"getting-started\",\n \"inactiveIcon\": \"mdi-speedometer-medium\",\n \"activeIcon\": \"mdi-speedometer\",\n \"items\": [\n \"installation\",\n \"mcp\",\n \"frequently-asked-questions\",\n \"wireframes\",\n \"unit-testing\",\n \"browser-support\",\n \"upgrade-guide\",\n \"release-notes\",\n \"contributing\"\n ]\n },\n {\n \"title\": \"features\",\n \"inactiveIcon\": \"mdi-image-edit-outline\",\n \"activeIcon\": \"mdi-image-edit\",\n \"items\": [\n \"accessibility\",\n \"aliasing\",\n \"application-layout\",\n \"blueprints\",\n {\n \"title\": \"css-utilities\",\n \"subfolder\": \"features\",\n \"activeIcon\": \"\",\n \"inactiveIcon\": \"\",\n \"items\": [\n \"overview\",\n \"unocss-vuetify-preset\",\n \"unocss-tailwind-preset\",\n \"tailwindcss\"\n ]\n },\n \"dates\",\n \"display-and-platform\",\n \"global-configuration\",\n \"hotkey\",\n \"icon-fonts\",\n \"internationalization\",\n \"md3-button-sizes\",\n \"rules\",\n \"scrolling\",\n \"sass-variables\",\n \"theme\",\n \"treeshaking\"\n ]\n },\n {\n \"title\": \"styles\",\n \"inactiveIcon\": \"mdi-palette-outline\",\n \"activeIcon\": \"mdi-palette\",\n \"items\": [\n \"entry-points\",\n \"css-reset\",\n \"layers\",\n \"transitions\",\n \"colors\",\n { \"divider\": true },\n {\n \"subheader\": \"utility-classes\"\n },\n \"borders\",\n \"border-radius\",\n \"content\",\n \"cursor\",\n \"display\",\n \"elevation\",\n \"flex\",\n \"float\",\n \"opacity\",\n \"overflow\",\n \"position\",\n \"sizing\",\n \"spacing\",\n \"text-and-typography\"\n ]\n },\n {\n \"title\": \"concepts\",\n \"inactiveIcon\": \"mdi-puzzle-outline\",\n \"activeIcon\": \"mdi-puzzle\",\n \"items\": [\n \"density-and-sizing\",\n \"items\",\n \"routing\",\n \"v-model\",\n \"variants\"\n ]\n },\n {\n \"title\": \"components\",\n \"inactiveIcon\": \"mdi-view-dashboard-outline\",\n \"activeIcon\": \"mdi-view-dashboard\",\n \"items\": [\n \"all\",\n {\n \"title\": \"explorer\",\n \"routeMatch\": \"explorer/:name(.*)\",\n \"routePath\": \"explorer\",\n \"subtitle\": \"browse-components\"\n },\n \"application\",\n { \"divider\": true },\n { \"subheader\": \"containment\" },\n \"bottom-sheets\",\n \"buttons\",\n \"icon-buttons\",\n \"cards\",\n \"chips\",\n \"dialogs\",\n \"dividers\",\n \"expansion-panels\",\n \"lists\",\n \"menus\",\n \"overlays\",\n \"sheets\",\n \"toolbars\",\n \"tooltips\",\n { \"divider\": true },\n { \"subheader\": \"navigation\" },\n \"app-bars\",\n \"bottom-navigation\",\n \"breadcrumbs\",\n \"floating-action-buttons\",\n \"footers\",\n \"navigation-drawers\",\n \"paginations\",\n \"speed-dials\",\n \"system-bars\",\n \"tabs\",\n { \"divider\": true },\n { \"subheader\": \"form-inputs-and-controls\" },\n \"autocompletes\",\n \"checkboxes\",\n \"color-inputs\",\n \"combobox\",\n \"date-inputs\",\n \"file-inputs\",\n \"file-upload\",\n \"forms\",\n \"inputs\",\n \"number-inputs\",\n \"otp-input\",\n \"radio-buttons\",\n \"range-sliders\",\n \"selects\",\n \"sliders\",\n \"switches\",\n \"text-fields\",\n \"textareas\",\n { \"divider\": true },\n { \"subheader\": \"data-and-display\" },\n \"calendars\",\n \"confirm-edit\",\n \"data-iterators\",\n {\n \"title\": \"data-tables\",\n \"subfolder\": \"components\",\n \"activeIcon\": \"\",\n \"inactiveIcon\": \"\",\n \"items\": [\n \"introduction\",\n { \"subheader\": \"guide\" },\n \"basics\",\n \"data-and-display\",\n { \"subheader\": \"types\" },\n \"server-side-tables\",\n \"virtual-tables\"\n ]\n },\n \"highlights\",\n \"hotkeys\",\n \"sparklines\",\n \"infinite-scroller\",\n \"tables\",\n \"treeview\",\n \"virtual-scroller\",\n { \"divider\": true },\n { \"subheader\": \"grids\" },\n \"grids\",\n { \"divider\": true },\n { \"subheader\": \"selection\" },\n \"button-groups\",\n \"carousels\",\n \"chip-groups\",\n \"item-groups\",\n \"slide-groups\",\n \"steppers\",\n \"vertical-steppers\",\n \"windows\",\n { \"divider\": true },\n { \"subheader\": \"feedback\" },\n \"alerts\",\n \"badges\",\n \"banners\",\n \"empty-states\",\n \"hover\",\n \"progress\",\n \"progress-circular\",\n \"progress-linear\",\n \"ratings\",\n \"skeleton-loaders\",\n \"snackbars\",\n \"snackbar-queue\",\n \"timelines\",\n { \"divider\": true },\n { \"subheader\": \"images-and-icons\" },\n \"aspect-ratios\",\n \"avatars\",\n \"avatar-groups\",\n \"icons\",\n \"images\",\n \"parallax\",\n { \"divider\": true },\n { \"subheader\": \"pickers\" },\n \"color-pickers\",\n \"date-pickers\",\n \"time-pickers\",\n { \"divider\": true },\n { \"subheader\": \"providers\" },\n \"defaults-providers\",\n \"locale-providers\",\n \"theme-providers\",\n { \"divider\": true },\n { \"subheader\": \"miscellaneous\" },\n \"lazy\",\n \"no-ssr\",\n \"pull-to-refresh\"\n ]\n },\n {\n \"title\": \"api\",\n \"inactiveIcon\": \"mdi-flask-empty-outline\",\n \"activeIcon\": \"mdi-flask-outline\",\n \"items\": [\n \"hotkey\"\n ]\n },\n {\n \"title\": \"directives\",\n \"inactiveIcon\": \"mdi-function\",\n \"activeIcon\": \"mdi-function\",\n \"items\": [\n \"click-outside\",\n \"intersect\",\n \"mutate\",\n \"resize\",\n \"ripple\",\n \"scroll\",\n \"tooltip\",\n \"touch\",\n \"touch-hold\"\n ]\n },\n {\n \"title\": \"labs\",\n \"inactiveIcon\": \"mdi-beaker-outline\",\n \"activeIcon\": \"mdi-beaker\",\n \"items\": [\n \"introduction\",\n {\n \"title\": \"audio-players\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"command-palettes\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"date-range-pickers\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"heatmaps\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"infinite-carousels\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"loading-indicators\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"mask-inputs\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"month-pickers\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"pie-charts\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"split-buttons\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"time-inputs\",\n \"subfolder\": \"components\"\n },\n {\n \"title\": \"videos\",\n \"subfolder\": \"components\"\n }\n ]\n },\n {\n \"title\": \"resources\",\n \"inactiveIcon\": \"mdi-human-male-board\",\n \"activeIcon\": \"mdi-human-male-board\",\n \"items\": [\n \"brand-kit\",\n \"jobs-for-vue\",\n \"made-with-vuetify\",\n \"themes\",\n { \"divider\": true },\n { \"subheader\": \"guides\" },\n \"search-engine\",\n \"ui-kits\"\n ]\n },\n {\n \"title\": \"about\",\n \"inactiveIcon\": \"$vuetify-outline\",\n \"activeIcon\": \"$vuetify\",\n \"items\": [\n \"code-of-conduct\",\n \"licensing\",\n \"meet-the-team\",\n \"security-disclosure\"\n ]\n }\n]\n\n\n{\n \"useTheme\": {\n \"exposed\": {\n \"change\": \"3.9.0\",\n \"toggle\": \"3.9.0\",\n \"cycle\": \"3.9.0\"\n }\n },\n \"VAlert\": {\n \"props\": {\n \"timeout\": \"4.3.0\",\n \"timer\": \"4.3.0\",\n \"transition\": \"4.3.0\"\n }\n },\n \"VAppBar\": {\n \"props\": {\n \"scrollBehavior\": \"3.2.0\"\n }\n },\n \"VAutocomplete\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"autocomplete\": \"3.10.0\",\n \"autoSelectFirst\": \"3.3.0\",\n \"clearOnSelect\": \"3.5.0\",\n \"closeOnInputClick\": \"4.2.0\",\n \"filteredOrder\": \"4.3.0\",\n \"form\": \"4.2.0\",\n \"listProps\": \"3.5.0\",\n \"menuElevation\": \"4.0.0\",\n \"openOnFocus\": \"4.2.0\"\n },\n \"slots\": {\n \"menu-header\": \"3.12.0\",\n \"menu-footer\": \"3.12.0\"\n },\n \"events\": {\n \"item:added\": \"4.2.0\",\n \"item:removed\": \"4.2.0\"\n },\n \"examples\": {\n \"slot-menu-footer\": \"3.12.0\",\n \"misc-new-tab\": \"3.3.0\",\n \"prop-filtered-order\": \"4.3.0\",\n \"prop-ignore-accents\": \"4.2.0\"\n }\n },\n \"VAvatar\": {\n \"props\": {\n \"text\": \"3.4.0\",\n \"border\": \"3.7.0\",\n \"badge\": \"4.0.0\"\n },\n \"slots\": {\n \"badge\": \"4.0.0\"\n },\n \"examples\": {\n \"prop-badge\": \"4.0.0\"\n }\n },\n \"VBadge\": {\n \"props\": {\n \"dotSize\": \"4.0.0\"\n }\n },\n \"VBanner\": {\n \"props\": {\n \"bgColor\": \"3.4.0\"\n }\n },\n \"VBottomSheet\": {\n \"props\": {\n \"contextMenu\": \"4.3.0\"\n }\n },\n \"VBreadcrumbsItem\": {\n \"props\": {\n \"width\": \"3.11.0\",\n \"maxWidth\": \"3.11.0\"\n }\n },\n \"VBtn\": {\n \"props\": {\n \"text\": \"3.2.0\",\n \"slim\": \"3.4.0\",\n \"readonly\": \"3.6.0\",\n \"activeColor\": \"3.7.0\",\n \"spaced\": \"3.10.0\"\n },\n \"examples\": {\n \"prop-spaced\": \"3.10.0\",\n \"misc-readonly\": \"3.6.0\"\n }\n },\n \"VBtnGroup\": {\n \"props\": {\n \"connected\": \"4.3.0\",\n \"size\": \"4.2.0\"\n }\n },\n \"VCarousel\": {\n \"props\": {\n \"crossfade\": \"3.10.0\",\n \"transitionDuration\": \"3.10.0\",\n \"pauseOnHover\": \"4.3.0\"\n },\n \"examples\": {\n \"misc-vertical\": \"3.9.0\",\n \"prop-custom-transition\": \"3.10.0\"\n }\n },\n \"VCalendar\": {\n \"props\": {\n \"format\": \"4.1.0\",\n \"intervalHighlight\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-hour24\": \"4.1.0\"\n }\n },\n \"VCheckbox\": {\n \"props\": {\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VCheckboxBtn\": {\n \"props\": {\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VChip\": {\n \"props\": {\n \"baseColor\": \"3.8.0\"\n }\n },\n \"VChipGroup\": {\n \"props\": {\n \"scrollToActive\": \"3.10.6\"\n }\n },\n \"VColorInput\": {\n \"props\": {\n \"openOnFocus\": \"4.2.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"reset\": \"4.3.0\",\n \"resetValidation\": \"4.3.0\",\n \"validate\": \"4.3.0\",\n \"isValid\": \"4.3.0\",\n \"errorMessages\": \"4.3.0\"\n }\n },\n \"VColorPicker\": {\n \"props\": {\n \"hideEyeDropper\": \"3.10.0\",\n \"eyeDropperIcon\": \"3.10.0\",\n \"hideTitle\": \"3.10.0\",\n \"hideInputLabels\": \"4.1.0\"\n }\n },\n \"VCombobox\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"alwaysFilter\": \"3.10.4\",\n \"autocomplete\": \"3.10.0\",\n \"clearOnSelect\": \"3.5.0\",\n \"closeOnInputClick\": \"4.2.0\",\n \"filteredOrder\": \"4.3.0\",\n \"form\": \"4.2.0\",\n \"listProps\": \"3.5.0\",\n \"menuElevation\": \"4.0.0\",\n \"openOnFocus\": \"4.2.0\",\n \"trimValues\": \"4.2.0\"\n },\n \"slots\": {\n \"menu-header\": \"3.12.0\",\n \"menu-footer\": \"3.12.0\"\n },\n \"events\": {\n \"item:added\": \"4.2.0\",\n \"item:removed\": \"4.2.0\",\n \"item:created\": \"4.2.0\"\n },\n \"examples\": {\n \"slot-menu-header\": \"3.12.0\"\n }\n },\n \"VConfirmEdit\": {\n \"props\": {\n \"hideActions\": \"3.8.0\"\n }\n },\n \"VDateInput\": {\n \"props\": {\n \"openOnFocus\": \"4.2.0\"\n }\n },\n \"VDatePicker\": {\n \"props\": {\n \"events\": \"3.11.0\",\n \"eventColor\": \"3.11.0\",\n \"controlHeight\": \"3.8.0\",\n \"controlVariant\": \"3.11.0\",\n \"firstDayOfYear\": \"3.10.0\",\n \"headerColor\": \"3.8.0\",\n \"headerDateFormat\": \"3.11.0\",\n \"hideTitle\": \"3.10.0\",\n \"landscape\": \"3.11.0\",\n \"landscapeHeaderWidth\": \"3.11.0\",\n \"noAutoNavigation\": \"4.1.0\",\n \"noMonthPicker\": \"3.11.0\",\n \"wheel\": \"4.3.0\"\n },\n \"slots\": {\n \"controls\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-landscape\": \"3.11.0\",\n \"prop-events\": \"3.11.0\",\n \"slots-controls\": \"3.11.0\"\n }\n },\n \"VDataIterator\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"groupKey\": \"4.1.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-grouping\": \"4.1.0\"\n }\n },\n \"VDataTable\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"collapseIcon\": \"3.10.0\",\n \"expandIcon\": \"3.10.0\",\n \"expandStrategy\": \"4.1.0\",\n \"expandTransition\": \"4.1.0\",\n \"gridlines\": \"4.1.0\",\n \"groupCollapseIcon\": \"3.10.0\",\n \"groupExpandIcon\": \"3.10.0\",\n \"groupKey\": \"4.1.0\",\n \"headerProps\": \"3.5.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\",\n \"pageBy\": \"3.12.0\",\n \"showFirstLastPage\": \"4.1.0\",\n \"sortIcon\": \"3.12.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\",\n \"expanded\": \"4.1.0\",\n \"group-summary\": \"3.10.0\"\n },\n \"examples\": {\n \"prop-grouping\": \"4.1.0\",\n \"prop-sort-icon\": \"3.12.0\",\n \"slot-expanded\": \"4.1.0\",\n \"slot-group-summary\": \"3.10.0\"\n }\n },\n \"VDataTableServer\": {\n \"props\": {\n \"collapseIcon\": \"3.10.0\",\n \"expandIcon\": \"3.10.0\",\n \"expandStrategy\": \"4.1.0\",\n \"expandTransition\": \"4.1.0\",\n \"gridlines\": \"4.1.0\",\n \"groupCollapseIcon\": \"3.10.0\",\n \"groupExpandIcon\": \"3.10.0\",\n \"groupKey\": \"4.1.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\",\n \"pageBy\": \"3.12.0\",\n \"showFirstLastPage\": \"4.1.0\",\n \"sortIcon\": \"3.12.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\",\n \"expanded\": \"4.1.0\",\n \"group-summary\": \"3.10.0\"\n }\n },\n \"VDataTableVirtual\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"collapseIcon\": \"3.10.0\",\n \"expandIcon\": \"3.10.0\",\n \"expandStrategy\": \"4.1.0\",\n \"expandTransition\": \"4.1.0\",\n \"gridlines\": \"4.1.0\",\n \"groupCollapseIcon\": \"3.10.0\",\n \"groupExpandIcon\": \"3.10.0\",\n \"groupKey\": \"4.1.0\",\n \"initialSortOrder\": \"3.11.0\",\n \"openAll\": \"4.1.0\",\n \"opened\": \"4.1.0\",\n \"sortIcon\": \"3.12.0\"\n },\n \"events\": {\n \"update:opened\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\",\n \"expanded\": \"4.1.0\",\n \"group-summary\": \"3.10.0\"\n }\n },\n \"VDialog\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"contextMenu\": \"4.3.0\",\n \"retainFocus\": \"3.11.0\",\n \"stickToTarget\": \"3.10.0\",\n \"viewportMargin\": \"3.11.0\"\n }\n },\n \"VDivider\": {\n \"props\": {\n \"gradient\": \"3.11.0\",\n \"contentOffset\": \"3.11.0\",\n \"variant\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-gradient\": \"3.11.0\"\n }\n },\n \"VExpansionPanels\": {\n \"props\": {\n \"static\": \"3.4.0\",\n \"gap\": \"4.1.0\",\n \"hover\": \"4.1.0\",\n \"noDivider\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-rounded-gap\": \"4.1.0\"\n }\n },\n \"VExpansionPanelTitle\": {\n \"props\": {\n \"hover\": \"4.1.0\"\n }\n },\n \"VField\": {\n \"props\": {\n \"iconColor\": \"3.8.0\",\n \"glow\": \"3.8.0\"\n }\n },\n \"VFileInput\": {\n \"props\": {\n \"filterByType\": \"3.10.0\",\n \"truncateLength\": \"3.10.0\"\n }\n },\n \"VFileUpload\": {\n \"props\": {\n \"filterByType\": \"3.10.0\",\n \"loading\": \"4.1.0\"\n },\n \"slots\": {\n \"loader\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-loading\": \"4.1.0\"\n }\n },\n \"VIcon\": {\n \"props\": {\n \"opacity\": \"3.8.0\"\n }\n },\n \"VIconBtn\": {\n \"props\": {\n \"widthVariant\": \"4.3.0\"\n }\n },\n \"VImg\": {\n \"props\": {\n \"position\": \"3.4.0\",\n \"draggable\": \"3.4.0\",\n \"referrerpolicy\": \"3.4.0\",\n \"crossorigin\": \"3.4.0\",\n \"absolute\": \"3.7.0\",\n \"imageClass\": \"3.12.0\"\n },\n \"examples\": {\n \"prop-image-class\": \"3.12.0\"\n }\n },\n \"VInput\": {\n \"props\": {\n \"detailsActive\": \"4.2.0\",\n \"iconColor\": \"3.8.0\",\n \"glow\": \"3.8.0\"\n }\n },\n \"VList\": {\n \"props\": {\n \"indent\": \"3.11.0\",\n \"itemsRegistration\": \"3.11.0\",\n \"prependGap\": \"3.11.0\"\n },\n \"exposed\": {\n \"activeDescendant\": \"4.3.0\"\n }\n },\n \"VListItem\": {\n \"props\": {\n \"baseColor\": \"3.3.0\",\n \"prependGap\": \"3.11.0\",\n \"slim\": \"3.4.0\"\n }\n },\n \"VMenu\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"contextMenu\": \"4.3.0\",\n \"openOnArrow\": \"4.2.0\",\n \"retainFocus\": \"3.11.0\",\n \"stickToTarget\": \"3.10.0\",\n \"submenu\": \"3.7.0\",\n \"viewportMargin\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-context-menu\": \"4.3.0\",\n \"prop-submenu\": \"3.7.0\"\n }\n },\n \"VNavigationDrawer\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"retainFocus\": \"3.11.0\",\n \"persistent\": \"3.6.0\"\n }\n },\n \"VNumberInput\": {\n \"props\": {\n \"autocomplete\": \"3.10.0\",\n \"grouping\": \"4.1.0\",\n \"groupSeparator\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-grouping\": \"4.1.0\"\n }\n },\n \"VOtpInput\": {\n \"props\": {\n \"density\": \"3.12.0\",\n \"masked\": \"3.12.0\",\n \"merged\": \"4.1.0\",\n \"pattern\": \"4.1.0\"\n },\n \"slots\": {\n \"divider\": \"4.1.0\"\n },\n \"examples\": {\n \"misc-custom-layout\": \"4.1.0\",\n \"prop-merged\": \"4.1.0\",\n \"prop-pattern\": \"4.1.0\",\n \"slot-divider\": \"4.1.0\"\n }\n },\n \"VOverlay\": {\n \"props\": {\n \"captureFocus\": \"3.11.0\",\n \"contextMenu\": \"4.3.0\",\n \"retainFocus\": \"3.11.0\",\n \"stickToTarget\": \"3.10.0\",\n \"viewportMargin\": \"3.11.0\"\n }\n },\n \"VPicker\": {\n \"props\": {\n \"hideTitle\": \"3.10.0\"\n }\n },\n \"VProgress\": {\n \"examples\": {\n \"misc-loading-indicator\": \"4.3.0\"\n }\n },\n \"VProgressCircular\": {\n \"props\": {\n \"reveal\": \"3.12.0\",\n \"rounded\": \"3.11.0\",\n \"shape\": \"4.3.0\",\n \"transition\": \"4.2.0\",\n \"variant\": \"4.3.0\"\n },\n \"examples\": {\n \"prop-reveal\": \"3.12.0\",\n \"prop-transition\": \"4.2.0\"\n }\n },\n \"VProgressLinear\": {\n \"props\": {\n \"chunkCount\": \"3.10.0\",\n \"chunkGap\": \"3.10.0\",\n \"chunkWidth\": \"3.10.0\",\n \"reveal\": \"4.2.0\",\n \"shape\": \"4.3.0\",\n \"stopIndicator\": \"4.3.0\",\n \"transition\": \"4.2.0\",\n \"variant\": \"4.1.0\"\n },\n \"examples\": {\n \"prop-chunks\": \"3.10.0\",\n \"prop-transition\": \"4.2.0\"\n }\n },\n \"VRadio\": {\n \"props\": {\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VRadioGroup\": {\n \"events\": {\n \"update:focused\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VRangeSlider\": {\n \"examples\": {\n \"prop-value-format\": \"4.3.0\"\n },\n \"props\": {\n \"endThumbAriaLabel\": \"4.3.0\",\n \"size\": \"4.3.0\",\n \"startThumbAriaLabel\": \"4.3.0\",\n \"thumbGap\": \"4.3.0\",\n \"valueFormat\": \"4.3.0\",\n \"variant\": \"4.3.0\"\n }\n },\n \"VRating\": {\n \"props\": {\n \"iconSize\": \"4.3.0\"\n }\n },\n \"VRow\": {\n \"props\": {\n \"gapSm\": \"4.3.0\",\n \"gapMd\": \"4.3.0\",\n \"gapLg\": \"4.3.0\",\n \"gapXl\": \"4.3.0\",\n \"gapXxl\": \"4.3.0\",\n \"size\": \"4.0.0\"\n }\n },\n \"VSelect\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"autocomplete\": \"3.10.0\",\n \"form\": \"4.2.0\",\n \"listProps\": \"3.5.0\",\n \"menuElevation\": \"4.0.0\",\n \"noAutoScroll\": \"3.9.0\",\n \"openOnFocus\": \"4.2.0\"\n },\n \"slots\": {\n \"menu-header\": \"3.12.0\",\n \"menu-footer\": \"3.12.0\"\n },\n \"events\": {\n \"item:added\": \"4.2.0\",\n \"item:removed\": \"4.2.0\"\n },\n \"examples\": {\n \"prop-list-props\": \"3.5.0\",\n \"slot-menu-header-and-footer\": \"3.12.0\"\n }\n },\n \"VSelectionControl\": {\n \"props\": {\n \"indeterminate\": \"4.1.0\",\n \"indeterminateIcon\": \"4.1.0\",\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\"\n }\n },\n \"VSelectionControlGroup\": {\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\"\n }\n },\n \"VSkeletonLoader\": {\n \"props\": {\n \"types\": \"4.2.0\"\n },\n \"examples\": {\n \"prop-types\": \"4.2.0\"\n }\n },\n \"VSlider\": {\n \"examples\": {\n \"prop-value-format\": \"4.3.0\"\n },\n \"events\": {\n \"start\": \"3.2.0\",\n \"end\": \"3.2.0\"\n },\n \"props\": {\n \"appendInnerIcon\": \"4.3.0\",\n \"centered\": \"4.3.0\",\n \"prependInnerIcon\": \"4.3.0\",\n \"size\": \"4.3.0\",\n \"thumbGap\": \"4.3.0\",\n \"valueFormat\": \"4.3.0\",\n \"variant\": \"4.3.0\"\n },\n \"slots\": {\n \"append-inner\": \"4.3.0\",\n \"prepend-inner\": \"4.3.0\"\n }\n },\n \"VSlideGroup\": {\n \"props\": {\n \"contentClass\": \"3.9.0\",\n \"gap\": \"4.3.0\",\n \"padding\": \"4.3.0\",\n \"scrollDistance\": \"4.2.0\",\n \"scrollSnap\": \"4.2.0\",\n \"scrollToActive\": \"3.10.6\"\n },\n \"events\": {\n \"edge\": \"4.2.0\"\n },\n \"exposed\": {\n \"hasOverflow\": \"4.2.0\",\n \"slide\": \"4.2.0\"\n },\n \"examples\": {\n \"misc-image-slider\": \"4.3.0\"\n }\n },\n \"VSnackbar\": {\n \"props\": {\n \"loading\": \"4.0.0\",\n \"prependAvatar\": \"4.0.0\",\n \"prependIcon\": \"4.0.0\",\n \"reverseTimer\": \"4.0.0\",\n \"timer\": \"3.4.0\",\n \"timerColor\": \"4.0.0\",\n \"text\": \"3.4.0\"\n },\n \"slots\": {\n \"header\": \"4.0.0\",\n \"prepend\": \"4.0.0\"\n },\n \"examples\": {\n \"prop-prepend-icon\": \"4.0.0\",\n \"prop-prepend-avatar\": \"4.0.0\",\n \"prop-loading\": \"4.0.0\",\n \"prop-timer-position\": \"4.0.0\",\n \"slot-header\": \"4.0.0\",\n \"slot-prepend\": \"4.0.0\"\n }\n },\n \"VSnackbarQueue\": {\n \"props\": {\n \"closable\": \"4.0.0\",\n \"closeText\": \"4.0.0\",\n \"gap\": \"4.0.0\",\n \"totalVisible\": \"4.0.0\"\n },\n \"examples\": {\n \"misc-promise\": \"4.0.0\",\n \"prop-total-visible\": \"3.11.0\",\n \"prop-transition\": \"4.0.0\"\n }\n },\n \"VSpeedDial\": {\n \"props\": {\n \"contextMenu\": \"4.3.0\"\n }\n },\n \"VSparkline\": {\n \"props\": {\n \"animation\": \"4.1.0\",\n \"autoDraw\": \"4.1.0\",\n \"inset\": \"4.1.0\",\n \"interactive\": \"4.1.0\",\n \"markerSize\": \"4.1.0\",\n \"markerStroke\": \"4.1.0\",\n \"showMarkers\": \"4.1.0\",\n \"smoothMode\": \"4.1.0\",\n \"tooltip\": \"4.1.0\"\n },\n \"events\": {\n \"update:currentIndex\": \"4.1.0\"\n },\n \"examples\": {\n \"misc-interactive\": \"4.1.0\",\n \"prop-animation\": \"4.1.0\",\n \"prop-inset\": \"4.1.0\",\n \"prop-smooth-mode\": \"4.1.0\"\n }\n },\n \"VStepper\": {\n \"props\": {\n \"itemProps\": \"3.11.0\"\n }\n },\n \"VSwitch\": {\n \"props\": {\n \"size\": \"4.1.0\",\n \"thumbColor\": \"4.1.0\",\n \"description\": \"4.3.0\"\n },\n \"slots\": {\n \"thumb\": \"3.5.0\",\n \"track-false\": \"3.5.0\",\n \"track-true\": \"3.5.0\",\n \"description\": \"4.3.0\"\n },\n \"exposed\": {\n \"blur\": \"4.3.0\",\n \"focus\": \"4.3.0\",\n \"isFocused\": \"4.3.0\"\n }\n },\n \"VTab\": {\n \"props\": {\n \"inset\": \"3.11.2\",\n \"text\": \"3.2.0\",\n \"spaced\": \"3.10.0\",\n \"sliderTransition\": \"3.11.0\",\n \"sliderTransitionDuration\": \"3.11.0\",\n \"sliderVariant\": \"4.3.0\"\n }\n },\n \"VTable\": {\n \"props\": {\n \"gridlines\": \"4.1.0\"\n },\n \"slots\": {\n \"caption\": \"4.1.0\"\n }\n },\n \"VTabs\": {\n \"props\": {\n \"inset\": \"3.11.0\",\n \"insetPadding\": \"3.11.0\",\n \"insetRadius\": \"3.11.0\",\n \"spaced\": \"3.10.0\",\n \"sliderTransition\": \"3.11.0\",\n \"sliderTransitionDuration\": \"3.11.0\",\n \"sliderVariant\": \"4.3.0\"\n },\n \"slots\": {\n \"next\": \"3.11.0\",\n \"prev\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-slider-transition\": \"3.11.0\",\n \"prop-spaced\": \"3.10.0\"\n }\n },\n \"VTextarea\": {\n \"props\": {\n \"maxHeight\": \"3.11.0\"\n }\n },\n \"VTextField\": {\n \"props\": {\n \"autocomplete\": \"3.10.0\"\n }\n },\n \"VTimePicker\": {\n \"props\": {\n \"density\": \"3.11.0\",\n \"hideTitle\": \"3.10.0\",\n \"period\": \"3.10.0\",\n \"variant\": \"3.11.0\"\n },\n \"examples\": {\n \"prop-scrollable\": \"4.3.0\"\n }\n },\n \"VTreeview\": {\n \"props\": {\n \"ignoreAccents\": \"4.2.0\",\n \"hideActions\": \"3.9.0\",\n \"hideNoData\": \"3.10.0\",\n \"noDataText\": \"3.10.0\",\n \"separateRoots\": \"3.9.0\",\n \"indentLines\": \"3.9.0\",\n \"indentLinesColor\": \"3.12.0\",\n \"indentLinesOpacity\": \"3.12.0\",\n \"itemsRegistration\": \"3.11.0\"\n },\n \"slots\": {\n \"header\": \"3.10.0\",\n \"footer\": \"3.11.0\",\n \"no-data\": \"3.11.0\",\n \"toggle\": \"3.10.0\"\n },\n \"examples\": {\n \"prop-items-registration\": \"3.11.0\",\n \"slot-no-data\": \"3.11.0\",\n \"slot-toggle\": \"3.10.0\"\n }\n },\n \"VTreeviewItem\": {\n \"props\": {\n \"hideActions\": \"3.9.0\",\n \"indentLines\": \"3.9.0\"\n },\n \"slots\": {\n \"toggle\": \"3.10.0\"\n }\n },\n \"VToolbar\": {\n \"props\": {\n \"collapsePosition\": \"3.11.0\",\n \"location\": \"3.12.0\"\n },\n \"examples\": {\n \"prop-location\": \"3.12.0\"\n }\n },\n \"VTooltip\": {\n \"props\": {\n \"eager\": \"3.2.0\",\n \"interactive\": \"3.8.0\",\n \"stickToTarget\": \"3.10.0\",\n \"viewportMargin\": \"3.11.0\",\n \"persistent\": \"3.11.3\"\n },\n \"examples\": {\n \"prop-interactive\": \"3.8.0\"\n }\n },\n \"VVirtualScroll\": {\n \"props\": {\n \"itemKey\": \"3.8.0\"\n }\n },\n \"VWindow\": {\n \"props\": {\n \"crossfade\": \"3.10.0\",\n \"transitionDuration\": \"3.10.0\",\n \"wheel\": \"4.3.0\"\n }\n }\n}\n\n\n{\n \"components/alerts\": [\"VAlert\", \"VAlertTitle\"],\n \"components/app-bars\": [\n \"VAppBar\",\n \"VAppBarNavIcon\",\n \"VAppBarTitle\"\n ],\n \"components/application\": [\n \"VApp\",\n \"VLayout\",\n \"VLayoutItem\",\n \"VMain\"\n ],\n \"components/aspect-ratios\": [\"VResponsive\"],\n \"components/audio-players\": [\"VAudio\", \"VAudioControls\", \"VAudioWaveform\", \"VMediaProgressBar\", \"VMediaVolume\"],\n \"components/autocompletes\": [\"VAutocomplete\"],\n \"components/avatars\": [\"VAvatar\"],\n \"components/avatar-groups\": [\"VAvatarGroup\"],\n \"components/badges\": [\"VBadge\"],\n \"components/banners\": [\n \"VBanner\",\n \"VBannerActions\",\n \"VBannerText\"\n ],\n \"components/bottom-navigation\": [\"VBottomNavigation\"],\n \"components/bottom-sheets\": [\"VBottomSheet\"],\n \"components/breadcrumbs\": [\n \"VBreadcrumbs\",\n \"VBreadcrumbsDivider\",\n \"VBreadcrumbsItem\"\n ],\n \"components/button-groups\": [\n \"VBtn\",\n \"VBtnGroup\",\n \"VBtnToggle\"\n ],\n \"components/buttons\": [\n \"VBtn\",\n \"VBtnGroup\",\n \"VBtnToggle\"\n ],\n \"components/calendars\": [\n \"VCalendar\",\n \"VCalendarDay\",\n \"VCalendarHeader\",\n \"VCalendarInterval\",\n \"VCalendarIntervalEvent\",\n \"VCalendarMonthDay\"\n ],\n \"components/cards\": [\n \"VCard\",\n \"VCardActions\",\n \"VCardItem\",\n \"VCardSubtitle\",\n \"VCardText\",\n \"VCardTitle\"\n ],\n \"components/carousels\": [\"VCarousel\", \"VCarouselItem\"],\n \"components/checkboxes\": [\"VCheckbox\", \"VCheckboxBtn\"],\n \"components/chip-groups\": [\"VChip\", \"VChipGroup\"],\n \"components/chips\": [\"VChip\", \"VChipGroup\"],\n \"components/color-inputs\": [\"VColorInput\", \"VColorPicker\"],\n \"components/color-pickers\": [\"VColorPicker\"],\n \"components/combobox\": [\"VCombobox\"],\n \"components/command-palettes\": [\"VCommandPalette\", \"VCommandPaletteItem\"],\n \"components/confirm-edit\": [\"VConfirmEdit\"],\n \"components/data-iterators\": [\"VDataIterator\"],\n \"components/date-inputs\": [\"VDateInput\", \"VDatePicker\"],\n \"components/date-pickers-month\": [\"VDatePicker\"],\n \"components/date-pickers\": [\"VDatePicker\", \"VDateInput\"],\n \"components/date-range-pickers\": [\"VDateRangePicker\"],\n \"components/defaults-providers\": [\"VDefaultsProvider\"],\n \"components/data-tables\": [\n \"VDataTable\",\n \"VDataTableFooter\",\n \"VDataTableRow\",\n \"VDataTableRows\",\n \"VDataTableServer\",\n \"VDataTableVirtual\"\n ],\n \"components/data-tables/server-side-tables\": [\n \"VDataTableServer\"\n ],\n \"components/data-tables/virtual-tables\": [\n \"VDataTableVirtual\"\n ],\n \"components/dialogs\": [\"VDialog\", \"VOverlay\"],\n \"components/dividers\": [\"VDivider\"],\n \"components/empty-states\": [\"VEmptyState\"],\n \"components/expansion-panels\": [\n \"VExpansionPanel\",\n \"VExpansionPanels\",\n \"VExpansionPanelText\",\n \"VExpansionPanelTitle\"\n ],\n \"components/file-inputs\": [\"VFileInput\"],\n \"components/file-upload\": [\"VFileUpload\"],\n \"components/floating-action-buttons\": [\"VFab\"],\n \"components/footers\": [\"VFooter\"],\n \"components/forms\": [\"VForm\"],\n \"components/grids\": [\"VCol\", \"VContainer\", \"VRow\", \"VSpacer\"],\n \"components/heatmaps\": [\"VHeatmap\", \"VHeatmapCell\", \"VHeatmapLegend\", \"VHeatmapLegendCell\"],\n \"components/highlights\": [\"VHighlight\"],\n \"components/hotkeys\": [\"VHotkey\"],\n \"components/hover\": [\"VHover\"],\n \"components/icon-buttons\": [\"VIconBtn\"],\n \"components/icons\": [\"VIcon\"],\n \"components/images\": [\"VImg\"],\n \"components/infinite-carousels\": [\"VInfiniteCarousel\"],\n \"components/loading-indicators\": [\"VLoadingIndicator\"],\n \"components/infinite-scroller\": [\"VInfiniteScroll\"],\n \"components/inputs\": [\"VInput\"],\n \"components/item-groups\": [\"VItem\", \"VItemGroup\"],\n \"components/lazy\": [\"VLazy\"],\n \"components/lists\": [\n \"VList\",\n \"VListGroup\",\n \"VListItem\",\n \"VListItemAction\",\n \"VListItemMedia\",\n \"VListItemSubtitle\",\n \"VListItemTitle\",\n \"VListSubheader\",\n \"VListImg\"\n ],\n \"components/locale-providers\": [\"VLocaleProvider\"],\n \"components/mask-inputs\": [\"VMaskInput\"],\n \"components/menus\": [\"VMenu\"],\n \"components/navigation-drawers\": [\"VNavigationDrawer\"],\n \"components/no-ssr\": [\"VNoSsr\"],\n \"components/month-pickers\": [\"VMonthPicker\"],\n \"components/number-inputs\": [\"VNumberInput\"],\n \"components/otp-input\": [\"VOtpInput\", \"VOtpField\", \"VOtpGroup\", \"VOtpSeparator\"],\n \"components/overlays\": [\"VOverlay\"],\n \"components/paginations\": [\"VPagination\"],\n \"components/parallax\": [\"VParallax\"],\n \"components/pie-charts\": [\"VPie\", \"VPieSegment\", \"VPieTooltip\"],\n \"components/progress\": [\"VProgress\"],\n \"components/progress-circular\": [\"VProgressCircular\"],\n \"components/progress-linear\": [\"VProgressLinear\"],\n \"components/pull-to-refresh\": [\"VPullToRefresh\"],\n \"components/radio-buttons\": [\"VRadio\", \"VRadioGroup\"],\n \"components/range-sliders\": [\"VRangeSlider\", \"VSlider\"],\n \"components/ratings\": [\"VRating\"],\n \"components/selects\": [\"VSelect\"],\n \"components/sheets\": [\"VSheet\"],\n \"components/skeleton-loaders\": [\"VSkeletonLoader\"],\n \"components/slide-groups\": [\"VSlideGroup\", \"VSlideGroupItem\"],\n \"components/sliders\": [\"VRangeSlider\", \"VSlider\"],\n \"components/snackbar-queue\": [\"VSnackbarQueue\", \"VSnackbar\"],\n \"components/snackbars\": [\"VSnackbar\"],\n \"components/sparklines\": [\"VSparkline\", \"VSparklineTooltip\"],\n \"components/speed-dials\": [\"VSpeedDial\"],\n \"components/split-buttons\": [\"VSplitBtn\"],\n \"components/steppers\": [\n \"VStepper\",\n \"VStepperHeader\",\n \"VStepperItem\",\n \"VStepperWindow\",\n \"VStepperWindowItem\"\n ],\n \"components/switches\": [\"VSwitch\"],\n \"components/system-bars\": [\"VSystemBar\"],\n \"components/tables\": [\"VTable\"],\n \"components/tabs\": [\"VTabs\", \"VTab\"],\n \"components/text-fields\": [\"VTextField\"],\n \"components/textareas\": [\"VTextarea\"],\n \"components/theme-providers\": [\"VThemeProvider\"],\n \"components/time-pickers\": [\"VTimePicker\"],\n \"components/time-inputs\": [\"VTimeInput\", \"VTimePicker\"],\n \"components/timelines\": [\"VTimeline\", \"VTimelineItem\"],\n \"components/toolbars\": [\"VToolbar\", \"VToolbarItems\", \"VToolbarTitle\"],\n \"components/tooltips\": [\"VTooltip\"],\n \"components/treeview\": [\n \"VTreeview\",\n \"VTreeviewItem\",\n \"VTreeviewChildren\",\n \"VTreeviewGroup\"\n ],\n \"components/vertical-steppers\": [\"VStepperVertical\", \"VStepperVerticalActions\", \"VStepperVerticalItem\"],\n \"components/videos\": [\"VVideo\", \"VVideoControls\", \"VMediaProgressBar\", \"VMediaVolume\"],\n \"components/virtual-scroller\": [\"VVirtualScroll\"],\n \"components/windows\": [\"VWindow\", \"VWindowItem\"],\n \"directives/click-outside\": [\"v-click-outside\"],\n \"directives/intersect\": [\"v-intersect\"],\n \"directives/mutate\": [\"v-mutate\"],\n \"directives/resize\": [\"v-resize\"],\n \"directives/ripple\": [\"v-ripple\"],\n \"directives/scroll\": [\"v-scroll\"],\n \"directives/touch\": [\"v-touch\"],\n \"directives/touch-hold\": [\"v-touch-hold\"],\n \"directives/tooltip\": [\"v-tooltip\"],\n \"features/dates\": [\"useDate\"],\n \"features/display-and-platform\": [\"useDisplay\"],\n \"features/hotkey\": [\"useHotkey\"],\n \"features/scrolling\": [\"useGoTo\"],\n \"features/global-configuration\": [\"VDefaultsProvider\"],\n \"features/internationalization\": [\"useLocale\", \"VLocaleProvider\"],\n \"features/theme\": [\"useTheme\", \"VThemeProvider\"],\n \"styles/transitions\": [\n \"VDialogBottomTransition\",\n \"VDialogTopTransition\",\n \"VDialogTransition\",\n \"VExpandTransition\",\n \"VExpandXTransition\",\n \"VFabTransition\",\n \"VFadeTransition\",\n \"VScaleTransition\",\n \"VScrollXTransition\",\n \"VScrollXReverseTransition\",\n \"VScrollYTransition\",\n \"VScrollYReverseTransition\",\n \"VSlideXTransition\",\n \"VSlideXReverseTransition\",\n \"VSlideYTransition\",\n \"VSlideYReverseTransition\"\n ]\n}\n\n\n{\n \"johnleider\": {\n \"discord\": \"johnleider\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/johnleider)\",\n \"[Paypal](https://paypal.me/vuetify)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"john-leider-626183a2\",\n \"location\": \"Keller, TX, USA\",\n \"name\": \"John Leider\",\n \"team\": \"company\",\n \"twitter\": \"zeroskillz\",\n \"work\": \"Engineer @ Vuetify\",\n \"joined\": \"Jun 2016\"\n },\n \"heatherleider\": {\n \"discord\": \"heatherleider\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Keller, TX, USA\",\n \"name\": \"Heather Leider\",\n \"team\": \"company\",\n \"twitter\": \"grneyedgrl01\",\n \"work\": \"COO @ Vuetify\",\n \"joined\": \"Nov 2019\"\n },\n \"KaelWD\": {\n \"discord\": \"kaelwd\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\",\n \"[vuetify-loader](https://github.com/vuetifyjs/vuetify-loader)\",\n \"[eslint-plugin-vuetify](https://github.com/vuetifyjs/eslint-plugin-vuetify)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/kaelwd)\",\n \"[Patreon](https://patreon.com/kaelwd)\",\n \"[Open Collective](https://opencollective.com/vuetify)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Melbourne, Australia\",\n \"name\": \"Kael Watts-Deuchar\",\n \"team\": \"core\",\n \"joined\": \"Oct 2017\"\n },\n \"nekosaur\": {\n \"discord\": \".nekosaur\",\n \"languages\": [\n \"Swedish\",\n \"English\"\n ],\n \"location\": \"Malmö, Sweden\",\n \"name\": \"Albert Kaaman\",\n \"team\": \"legends\",\n \"joined\": \"Jun 2017\"\n },\n \"MajesticPotatoe\": {\n \"discord\": \"majesticpotatoe\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\",\n \"[vuetifyjs/docs](https://github.com/vuetifyjs/vuetify/tree/master/packages/docs)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/majesticpotatoe)\",\n \"[Open Collective](https://opencollective.com/vuetify)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"andrew-henry-01049830\",\n \"location\": \"Rochester, NY, USA\",\n \"name\": \"Andrew Henry\",\n \"team\": \"core\",\n \"twitter\": \"SeeMWhyK\",\n \"joined\": \"Dec 2018\"\n },\n \"blalan05\": {\n \"discord\": \"blalan05\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"blalan05\",\n \"location\": \"Wisconsin, USA\",\n \"name\": \"Blaine Landowski\",\n \"team\": \"core\",\n \"work\": \"CEO at Foundational Technologies LLC\",\n \"joined\": \"Feb 2021\"\n },\n \"userquin\": {\n \"discord\": \"userquin\",\n \"focus\": [\n \"[vuetifyjs/create](https://github.com/vuetifyjs/create)\",\n \"[Nuxt](https://github.com/userquin/vuetify-nuxt-module)\"\n ],\n \"languages\": [\n \"Spanish\",\n \"English\"\n ],\n \"location\": \"Madrid, Spain\",\n \"name\": \"Joaquín Sánchez\",\n \"twitter\": \"userquin\",\n \"team\": \"core\",\n \"joined\": \"Mar 2024\"\n },\n \"MatthewAry\": {\n \"discord\": \"bitshift_\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Spokane, WA, USA\",\n \"name\": \"Matthew Ary\",\n \"twitter\": \"MatthewAry\",\n \"linkedin\": \"matthewary\",\n \"work\": \"Director of Product Development at Symplsoft Inc.\",\n \"team\": \"core\",\n \"joined\": \"May 2024\"\n },\n \"J-Sek\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/j-sek.png\",\n \"discord\": \"jacek#1420\",\n \"focus\": [\n \"[vuetifyjs/vuetify](https://github.com/vuetifyjs/vuetify)\"\n ],\n \"languages\": [\n \"Polish\",\n \"English\"\n ],\n \"location\": \"Gdańsk, Poland\",\n \"name\": \"Jacek Czarniecki\",\n \"team\": \"core\",\n \"joined\": \"Nov 2024\"\n },\n \"Spatlani\": {\n \"name\": \"Shubham Patlani\",\n \"team\": \"core\",\n \"discord\": \"spatlani\",\n \"focus\": [\"[vuetifyjs/*](https://github.com/vuetifyjs)\"],\n \"languages\": [\"English\", \"Hindi\", \"Punjabi\"],\n \"linkedin\": \"spatlani\",\n \"github\": \"spatlani\",\n \"avatar\": \"https://avatars.githubusercontent.com/u/11574195\",\n \"location\": \"Delhi, India\",\n \"joined\": \"March 2025\"\n },\n \"Haviles04\": {\n \"name\": \"Henry Aviles\",\n \"team\": \"core\",\n \"discord\": \"hankthetank4\",\n \"linkedin\": \"henry-aviles\",\n \"focus\": [\"[One](https://github.com/vuetifyjs/one)\"],\n \"languages\": [\"English\"],\n \"joined\": \"March 2025\",\n \"location\": \"Huntington, NY, USA\"\n },\n \"ikushum\": {\n \"name\": \"Ishan Subedi\",\n \"team\": \"core\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"Nepali\",\n \"English\"\n ],\n \"discord\": \"ikushum\",\n \"linkedin\": \"ikushum\",\n \"joined\": \"March 2025\",\n \"location\": \"Kathmandu, Nepal\",\n \"avatar\": \"https://avatars.githubusercontent.com/u/17315781\"\n },\n \"AndreyYolkin\": {\n \"name\": \"Andrei Elkin\",\n \"team\": \"core\",\n \"discord\": \"yol_kin\",\n \"focus\": [\n \"[vuetifyjs/create](https://github.com/vuetifyjs/create)\",\n \"[vuetify-loader](https://github.com/vuetifyjs/vuetify-loader)\",\n \"[Nuxt](https://github.com/vuetifyjs/nuxt-module)\"\n ],\n \"languages\": [\n \"Polish\",\n \"English\",\n \"Russian\"\n ],\n \"location\": \"Kraków, Poland\",\n \"linkedin\": \"yolkin\",\n \"joined\": \"March 2025\"\n },\n \"jcjp\": {\n \"name\": \"JC Puno\",\n \"team\": \"core\",\n \"discord\": \"psi#8085\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\",\n \"[Nuxt](https://github.com/userquin/vuetify-nuxt-module)\"\n ],\n \"languages\": [\n \"Tagalog / Filipino\",\n \"English\"\n ],\n \"location\": \"Manila, Philipines\",\n \"joined\": \"March 2025\"\n },\n \"oumoussa98\": {\n \"name\": \"Abdelouahed Oumoussa\",\n \"team\": \"core\",\n \"discord\": \"oumoussa\",\n \"twitter\": \"oumoussa_\",\n \"github\": \"oumoussa98\",\n \"linkedin\": \"aoumoussa\",\n \"avatar\": \"https://gravatar.com/avatar/7d1a8ba680ab9d49bd9cdaeff05d0e76\",\n \"focus\": [\n \"[vuetifyjs/*](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"Arabic\",\n \"English\"\n ],\n \"joined\": \"March 2025\",\n \"location\": \"Casablanca, Morocco\"\n },\n \"yuwu9145\": {\n \"discord\": \"yuwu9145\",\n \"focus\": [\n \"[vuetifyjs](https://github.com/vuetifyjs)\"\n ],\n \"languages\": [\n \"English\",\n \"Chinese(Mandarin)\"\n ],\n \"location\": \"Melbourne, Australia\",\n \"name\": \"Yuchao Wu\",\n \"team\": \"legends\",\n \"joined\": \"Mar 2023\"\n },\n \"kieuminhcanh\": {\n \"discord\": \"kieuminhcanh\",\n \"focus\": [\n \"[vuetifyjs/studio](https://github.com/vuetifyjs/studio)\"\n ],\n \"funding\": [\n \"[GitHub Sponsors](https://github.com/sponsors/kieuminhcanh)\",\n \"[Patreon](https://patreon.com/kieuminhcanh)\",\n \"[Open Collective](https://opencollective.com/vuetify)\"\n ],\n \"languages\": [\n \"English\",\n \"Vietnamese\"\n ],\n \"location\": \"California, US\",\n \"name\": \"Ken Kieu\",\n \"team\": \"legends\",\n \"twitter\": \"kieuminhcanh\",\n \"joined\": \"April 2024\"\n },\n \"jacekkarczmarczyk\": {\n \"discord\": \"jacek#3542\",\n \"languages\": [\n \"Polish\",\n \"English\"\n ],\n \"location\": \"Warsaw, Poland\",\n \"name\": \"Jacek Karczmarczyk\",\n \"team\": \"legends\"\n },\n \"chewy94\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/chewy94.jpg\",\n \"discord\": \"Sean Kimball#0001\",\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"sean-kimball-b50922126\",\n \"location\": \"Goodyear, Arizona, USA\",\n \"name\": \"Sean Kimball\",\n \"team\": \"legends\"\n },\n \"bdeo\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/bdeo.jpg\",\n \"discord\": \"brandondeo#0001\",\n \"languages\": [\n \"English\"\n ],\n \"linkedin\": \"brandondeo\",\n \"location\": \"Philadelphia, PA, USA\",\n \"name\": \"Brandon Deo\",\n \"team\": \"legends\"\n },\n \"ElijahKotyluk\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/ElijahKotyluk.jpg\",\n \"discord\": \"edk#4363\",\n \"languages\": [\n \"English\"\n ],\n \"location\": \"USA\",\n \"name\": \"Elijah Kotyluk\",\n \"team\": \"legends\"\n },\n \"santiagoaloi\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/santiagoaloi.jpg\",\n \"discord\": \"lannnister\",\n \"languages\": [\n \"Swedish\",\n \"English\",\n \"Spanish\"\n ],\n \"linkedin\": \"santiagoaloi\",\n \"location\": \"Stockholm, Sweden\",\n \"name\": \"Santiago Aloi\",\n \"team\": \"legends\",\n \"joined\": \"Feb 2023\"\n },\n \"yooneskh\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/yooneskh.png\",\n \"discord\": \"YoonesKh#7826\",\n \"languages\": [\n \"English\",\n \"Persian\"\n ],\n \"twitter\": \"yooneskh\",\n \"linkedin\": \"yooneskh \",\n \"location\": \"Iran\",\n \"name\": \"Yoones Khoshghadam\",\n \"team\": \"legends\",\n \"joined\": \"January 2023\"\n },\n \"elvinagarcia\": {\n \"avatar\": \"https://cdn.vuetifyjs.com/docs/images/team/elvinagarcia.png\",\n \"discord\": \"elvinagarcia\",\n \"focus\": [\n \"Design/Animations\"\n ],\n \"languages\": [\n \"English\"\n ],\n \"location\": \"Virginia, USA\",\n \"name\": \"Elvina Garcia\",\n \"team\": \"legends\",\n \"joined\": \"Feb 2023\"\n }\n}\n\n\n---\nmeta:\n title: Code of conduct\n description: Vuetify provides a safe, inclusive, and judgment free community for developers from all walks of life!\n keywords: vuetify code of conduct, vuetify coc, community conduct\n---\n\n# Code of conduct\n\nFor questions or concerns regarding our *Code of Conduct*, please reach out to us at [support@vuetifyjs.com](mailto:support@vuetifyjs.com).\n\n\n\n\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@vuetifyjs.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant](https://contributor-covenant.org), version 1.4, available at [https://contributor-covenant.org/version/1/4](https://contributor-covenant.org/version/1/4/)\n\n\n---\nmeta:\n nav: Discord takeover (June 2026)\n title: 'Incident report: Discord takeover (June 2026)'\n description: An infostealer on a maintainer's machine led to the takeover of the Vuetify Discord account. No Vuetify packages, releases, or user data were affected.\n keywords: vuetify security incident, infostealer, discord account takeover, extortion, incident report, nyven\nrelated:\n - /about/security-disclosure/\n - /introduction/enterprise-support/\n - /introduction/long-term-support/\n---\n\n# Incident report June 2026\n\nThis page documents the June 2026 security incident affecting Vuetify's Discord support account.\n\n\n\n::: info\n**TLDR:** On 2026-06-03, a Vuetify maintainer's personal machine was compromised by a commodity infostealer after a social-engineering lure. The attacker used credentials harvested from the browser to take over the Vuetify Discord support account, added 2FA to lock the owner out, and sent an extortion demand, which was refused. No Vuetify package, source, release, CI pipeline, or user data was affected. The Discord account was recovered on 2026-06-10, but the original community server was deleted and cannot be restored; the community now lives on a replacement server — see [Where to find us now](#where-to-find-us-now).\n:::\n\n## Summary { #summary }\n\nOn 2026-06-03, a Vuetify maintainer ran an unsigned installer that was a packaged infostealer. It harvested the credentials, cookies, and autofill data saved in the browser and exfiltrated them.\n\nThe attacker used those credentials to take over the Vuetify Discord support account. After taking control, the attacker added 2FA to lock the owner out and sent an extortion demand under threat to leak and sell the data. The demand was refused and no payment was made.\n\nThe compromise was limited to one personal machine and the accounts reachable from it. No part of Vuetify's software supply chain was affected.\n\n## What was and was not affected { #scope }\n\n| Asset | Status |\n| - | - |\n| **npm packages & releases** | **Not affected.** No package was modified, tampered with, or published. |\n| **Source & GitHub org** | **Not affected.** No repository, branch, tag, or release was altered. |\n| **CI/CD & infrastructure** | **Not affected.** |\n| **User data & databases** | **Not affected.** |\n| **Google Workspace** | **Not breached.** The `vuetifyjs.com` account was auto-suspended by Google as a precaution; the password was reset and control retained. |\n| **Discord support account** | **Recovered (2026-06-10).** The attacker added 2FA after taking it over; the account was later recovered, but the original community server was deleted and cannot be restored, per Discord support. |\n| **Browser-stored secrets** | **Exposed.** Saved credentials, cookies, and autofill on the affected machine are treated as compromised and have been rotated or removed pending an internal audit. |\n| **Developer tokens & keys** | **Treated as exposed.** Tokens on the host, including those with npm/GitHub access, have been rotated or removed and their sessions revoked, pending an internal audit. No evidence any were used against project infrastructure. |\n\nCredentials and tokens on the machine that could reach npm or GitHub have been rotated or removed pending an internal audit. Vuetify's release pipeline already enforces several layers of protection, including OIDC-based trusted publishing to npm and mandatory two-factor authentication, which limit what any single stolen credential can do. There is no sign any were used against Vuetify's packages, repositories, or releases, and all areas of the ecosystem are being actively monitored for suspicious activity. No action is required of users.\n\n## Timeline { #timeline }\n\nAll times are UTC on 2026-06-03 unless noted. Approximate times are marked with `~`.\n\n| Time (UTC) | Event | Detail |\n| - | - | - |\n| `~17:00` | Installer downloaded | The unsigned installer was downloaded from the throwaway site. |\n| `17:06` | Malware executed | The installer was run; the infostealer harvested browser-stored credentials and cookies and exfiltrated them. |\n| `17:08` | Host isolated | The machine was disconnected from the network. |\n| `17:16` | Extortion email received | The attacker emailed claiming to hold the stolen passwords, cookies, and autofill data. |\n| `17:25` | Refused to engage | The attacker's contact was declined. |\n| `~17:46–17:58` | Discord account takeover | The attacker used the stolen credentials to seize the Vuetify support account and added 2FA to lock the owner out. |\n| `18:06` | Email/GitHub secured | Email and GitHub passwords were changed and all sessions forced to re-authenticate. |\n| `18:10` | OAuth revoked | Third-party OAuth grants were revoked and active sessions cut. |\n| `18:25` | Payment demanded | The attacker demanded payment under threat to leak and sell the data; no payment was made. |\n| `2026-06-04` | Discord recovery blocked | Self-service recovery failed because of the attacker-added 2FA; a recovery case was opened with Discord. |\n| `2026-06-05` | Replacement server opened | A new Vuetify Discord server was opened as the verified home for the community. |\n| `2026-06-10` | Account recovered; server lost | The support account was recovered. Discord support confirmed the original server was deleted and cannot be restored. |\n\n## Root cause { #root-cause }\n\nThe maintainer was led to a throwaway website and ran an unsigned installer that was malware. Because credentials were stored in the browser, a single execution exposed the full set at once.\n\n## Discord outcome { #discord-recovery }\n\nThe Vuetify Discord support account has been recovered. The original community server, however, was deleted, and Discord support has confirmed there is no ability to restore it — the loss of the server, its channels, and its message history is permanent.\n\nA replacement server was opened while recovery was pending and is now the official home of the Vuetify community on Discord. The verified invite is in [Where to find us now](#where-to-find-us-now).\n\nThe exfiltration channel and the attacker's delivery infrastructure have been reported to the relevant platforms.\n\n## Where to find us now { #where-to-find-us-now }\n\n::: warning\nThe original server is permanently gone. We have started rebuilding and you can request an invite by going to [https://community.vuetifyjs.com](https://community.vuetifyjs.com).\n\nIf any other server, or any direct message, claims to be us and asks for money, credentials, or 2FA codes, it is not us.\n:::\n\nChanges to the official channels will be posted here and on [vuetifyjs.com](https://vuetifyjs.com), the [GitHub organization](https://github.com/vuetifyjs), and [@vuetifyjs on X](https://x.com/vuetifyjs).\n\n## For security researchers and organizations { #coordinated-disclosure }\n\nA complete evidence package has been preserved: forensic artifacts, the full set of indicators of compromise, and the malware sample. Security vendors, researchers, CERT/CSIRTs, and platform trust-and-safety teams that can action it can request it at [security@vuetifyjs.com](mailto:security@vuetifyjs.com?subject=INCIDENT) (subject: INCIDENT).\n\nA subset of indicators is published below; the complete set is available on request.\n\n### Indicators (public subset) { #indicators }\n\n- Malware family: a commodity \"Nyven\" infostealer (Electron dropper delivering an obfuscated Java credential grabber).\n- Delivery: an unsigned installer (`NyvenSetupV1.exe`) downloaded from a throwaway `*.pages.dev` site (`nyvanbeta.pages.dev`).\n- Behavior: harvests browser-stored credentials, cookies, and autofill data and exfiltrates them over a Discord channel.\n\nFull indicators (file hashes, exfiltration channel identifiers, and build metadata) are withheld here to avoid interfering with platform recovery, and are shared with vetted parties on request.\n\n## Contact { #contact }\n\nQuestions about this incident, or related information, can be sent to [security@vuetifyjs.com](mailto:security@vuetifyjs.com?subject=INCIDENT)\n\n---\n\n### Updates { #updates }\n\nDated entries are added here rather than editing the report above.\n\n| Date | Update |\n| - | - |\n| 2026-06-05 | Initial publication. |\n| 2026-06-10 | The Discord support account has been recovered. Discord support confirmed the original server was deleted and cannot be restored; the replacement server is now active at [https://community.vuetifyjs.com](https://community.vuetifyjs.com). |\n\n\n---\nmeta:\n nav: Licensing\n title: Licensing\n description: Vuetify is available under the MIT License — understand your freedoms to use, modify, and distribute it, and how community contributions are licensed.\n keywords: MIT License, open source, Vuetify license, free software\nrelated:\n - /introduction/why-vuetify/\n - /getting-started/contributing/\n - /introduction/enterprise-support/\n---\n\n# Licensing\n\nThis document provides comprehensive details about the licensing of the Vuetify framework.\n\n\n\n\n\n## Overview\n\nVuetify is an open-source project that is free to use. It is licensed under the [MIT License](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md), one of the most permissive and flexible open source licenses available.\n\n## What is the MIT License?\n\nThe MIT License is one of the most widely used licenses in the open-source community, known for its simplicity and permissiveness. This license grants users significant freedom in how they use, modify, and distribute software. Here are its key features and what they mean for Vuetify users:\n\n- **Freedom to Use**: The MIT License allows you to use Vuetify for any purpose - whether it's a private hobby project, a high-scale commercial application, or a public service. This level of freedom ensures that Vuetify is accessible to everyone, regardless of their project's nature or scale.\n- **Freedom to Modify**: Flexibility is at the core of Vuetify, and the MIT License extends this principle. You have the freedom to tweak, customize, and modify Vuetify to suit your project's unique requirements. This feature is particularly beneficial for developers looking to tailor their UI/UX without constraints.\n- **Freedom to Distribute**: The license not only allows you to use and modify Vuetify but also to distribute your version of it. Whether you're distributing your Vuetify-based project openly or commercially, the MIT License supports your endeavors. This aspect is crucial for fostering a culture of sharing and innovation in the developer community.\n- **No Warranty**: Please note that Vuetify is provided \"as is\", without any warranty of any kind. This is a standard clause in open-source licenses, emphasizing that users should test and evaluate the software in their specific contexts. While there's no formal warranty, the Vuetify team is committed to delivering a high-quality, robust framework, continuously working to improve its reliability and functionality.\n\nThe MIT License's simplicity and breadth make it an ideal choice for Vuetify, aligning with our commitment to open-source values and community-driven development.\n\n## Why MIT License for Vuetify?\n\nChoosing the MIT License for Vuetify was a deliberate decision to align with our core values of openness, simplicity, and community collaboration. Here’s why this license is the perfect fit for Vuetify:\n\n- **Simplicity and Permissiveness**: The MIT License is renowned for its simplicity and clarity. It doesn't impose complex restrictions, making it straightforward for developers to use Vuetify in various projects. Whether you're building a small personal project or a large-scale commercial application, the MIT License keeps things simple and unrestricted.\n- **Broad Compatibility**: One of Vuetify's strengths is its compatibility with a wide range of other tools and libraries. The MIT License is known for its broad compatibility with other open-source licenses. This compatibility makes it easier for developers to integrate Vuetify with other software, fostering a more vibrant and versatile ecosystem.\n- **Encourages Open Source Contribution**: Vuetify thrives on community contributions. The permissive nature of the MIT License encourages developers from around the world to contribute to Vuetify, enhancing its features and functionality. This collaborative spirit has been pivotal in shaping Vuetify into the robust and versatile framework it is today.\n\nBy adopting the MIT License, Vuetify remains committed to promoting innovation, collaboration, and freedom in software development. We believe this approach not only benefits Vuetify but also the broader open-source community.\n\n## Using Vuetify in Your Projects\n\nYou are free to use Vuetify in your projects, be it personal, commercial, or for educational purposes. The flexibility of the MIT License allows for a wide range of applications. When redistributing Vuetify or derivative works, the only requirement is to include the original copyright and license notice in any copy of the software/source code.\n\nTo get inspired or see what's possible with Vuetify, check out [Awesome Vuetify](https://github.com/vuetifyjs/awesome-vuetify), a curated list of awesome Vuetify resources, libraries, and tools. Additionally, explore the [Made With Vuetify](/resources/made-with-vuetify/) page to see a showcase of applications and projects built using Vuetify. These resources can provide you with ideas and examples of how Vuetify can enhance your projects.\n\n## Contributions to Vuetify\n\nContributions to Vuetify are also subject to the MIT License. By contributing to the Vuetify project, you agree that your contributions will be licensed under the MIT License. See our [Contributing](/getting-started/contributing/) page for more details.\n\n## Questions and Comments\n\nIf you have any questions or comments about our licensing policy, or if you need clarification on legal aspects of using Vuetify in your projects, please [contact us](mailto:hello@vuetifyjs.com).\n\n## Legal Disclaimer\n\nThe information provided on this page is for general informational purposes only and is not intended as legal advice. For specific legal questions regarding the use of Vuetify, please consult with a qualified attorney.\n\n\n---\nmeta:\n title: Meet the team\n description: Meet the team responsible for building Vuetify. These are the core individuals who drive the vision of the framework.\n keywords: vuetify dev team, vuetify core team\nrelated:\n - /introduction/enterprise-support/\n - /introduction/long-term-support/\n - /introduction/roadmap/\n---\n\n# Meet the team\n\nVuetify is _not_ a one person show. We have a very active and engaged team that is **constantly striving** to bring developers a better experience. Keep in mind the below is not an exhaustive list of all the individuals that help make Vuetify great.\n\n\n\n\n\n## Company\n\nVuetify (the framework) is [MIT Licensed](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md) and [Open Source](https://opensource.com/resources/what-open-source). You can support the ongoing development of Vuetify by sponsoring the project on [GitHub](https://github.com/sponsors/johnleider).\n\n\n\n## Core Team\n\nThe core development team are Open Source developers that help guide the direction of Vuetify and its ecosystem.\n\n\n\n\n\n## Legends\n\nLegends are inactive members of the core team. They have contributed a significant amount of time and effort to the project and are recognized for their contributions.\n\n\n\n\n---\nmeta:\n nav: Security disclosure\n title: Security disclosure procedures\n description: This document outlines security procedures and general policies for the Vuetify project.\n keywords: security, security vulnerability, disclosure policy, security disclosure\nrelated:\n - /introduction/enterprise-support/\n - /getting-started/contributing/\n - /introduction/long-term-support/\n---\n\n# Security disclosure procedures\n\nThis document outlines security procedures and general policies for the Vuetify project.\n\n\n\n\n\n## Incidents\n\nIn the interest of transparency, confirmed security incidents that affect Vuetify or its community are logged here, each linking to a full public report.\n\n| Date | Incident | Severity | Status | Report |\n| - | - | - | - | - |\n| 2026-06-03 | Maintainer endpoint compromise → Discord account takeover & extortion | High | Contained — Discord recovery ongoing | [Read the report](/about/incidents/2026-06-nyven-infostealer/) |\n\n::: warning\nThe Vuetify Discord support account was taken over in the June 2026 incident and has not yet been recovered. Until it is restored, the only verified home for our community on Discord is **[vtfy.link/discord-fallback](https://vtfy.link/discord-fallback)**. Anyone using the old server — or a DM — to ask you for money, credentials, or 2FA codes is not us.\n:::\n\n## Reporting a Bug\n\nThe Vuetify team and community take all security bugs in Vuetify seriously. We appreciate your efforts and responsible disclosure and will make every effort to acknowledge your contributions.\n\nTo report a security issue, email [security@vuetifyjs.com](mailto:security@vuetifyjs.com?subject=SECURITY) and include the word **\\\"SECURITY\\\"** in the subject line.\n\nThe Vuetify team will send a response indicating the next steps in handling your report. After the initial reply to your report, the security team will keep you informed of the progress towards a fix and full announcement, and may ask for additional information or guidance.\n\nReport security bugs in third-party modules to the person or team maintaining the module.\n\n## Disclosure Policy\n\nWhen the security team receives a security bug report, they will assign it to a primary handler. This person will coordinate the fix and release process, involving the following steps:\n\n- Confirm the problem and determine the affected versions.\n- Audit code to find any potential similar problems.\n- Prepare fixes for all releases still under maintenance.These fixes will be released as fast as possible to npm.\n\n## Comments on this Policy\n\nIf you have suggestions on how this process could be improved please submit a pull request using the [issue creator](https://issues.vuetifyjs.com).\n\n\n---\nlayout: blank\nmeta:\n title: API\n description: API documentation\n keywords: api, vuetify\n---\n\n\n\n\n\n# {{ name }} API\n\n\n\n\n\n\n\n\n\n\n\n\n---\nmeta:\n title: useHotkey API\n description: API documentation for the useHotkey composable\n keywords: useHotkey, hotkey, keyboard shortcuts, composable, api\n---\n\n\n\n# useHotkey API\n\nHandle keyboard shortcuts within your application using the **useHotkey** composable.\n\n\n\n\n\n\n\n\n\n## Function Signature\n\n```typescript\nfunction useHotkey(\n keys: MaybeRef,\n callback: (e: KeyboardEvent) => void,\n options?: HotkeyOptions\n): () => void\n```\n\n## Parameters\n\n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n## Options\n\n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n## Return Value\n\n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\n---\nlayout: blog\nmeta:\n title: Announcing Vuetify v3.8\n description: Vuetify v3.8 is here! Discover the latest features, improvements, and bug fixes in this minor release, including new components and form input enhancements.\n keywords: Vuetify v3.8, VNumberInput, VSnackbarQueue, VDataTable, VTooltip, VDateInput, useRules, VIconBtn\n---\n\n# Announcing Vuetify v3.8\n\n---\n\n🖊️ John Leider • 📅 April 8th, 2025\n\n\n\n---\n\n## Introduction\n\nToday we are excited to announce the release of Vuetify v3.8 \"Andromeda\"!\n\nThis minor release contains no breaking changes and is packed with new features, improvements, and bug fixes. This blog post will highlight some of the most notable changes—for a full list of changes and new features, please see [the full changelog](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.0).\n\n---\n\n- [Form input improvements](#form-input-improvements)\n - [Multi-word search highlight](#multi-word-search-highlight)\n - [Input icon states](#input-icon-states)\n- [New components](#new-components)\n - [VNumberInput](#vnumberinput)\n - [VSnackbarQueue](#vsnackbarqueue)\n- [Other updates](#other-updates)\n - [VDataTable selection](#vdatatable-selection)\n - [VTooltip interactive](#vtooltip-interactive)\n- [Labs](#labs)\n - [VDateInput](#vdateinput)\n - [useRules composable](#userules-composable)\n - [VIconBtn](#viconbtn)\n\n## Form input improvements\n\nIn v3.8, we have made several improvements to form controls, including new styling options and additional components. These changes are designed to give you more control over the look and feel of inputs.\n\n### Multi-word search highlight\n\nSearch terms that match multiple words in the item text will now be highlighted in VAutocomplete and VCombobox. This enhancement makes it easier for users to see how their search terms match available options, improving the overall search experience.\n\n**Before:**\n![Image of Autocomplete with single word highlighting](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/autocomplete-before.png \"Single-word highlighting\"){ height=300 }\n\n**After:**\n![Image of Autocomplete with multi word highlighting](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/autocomplete-after.png \"Multi-word highlighting\"){ height=300 }\n\n**Details:** [PR#16462](https://github.com/vuetifyjs/vuetify/pull/16462)\n\n### Input icon states\n\nIn earlier versions of Vuetify, focused inputs would add color to their icons. This is now possible using the new **icon-color** and **glow** props. The former allows you to set the default color of the icon, when combined with the latter, the icon will change color when the input is focused.\n\n![Gif of input icon states](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/icon-color-glow-prop.gif \"Input icon states\"){ height=300 }\n\nThis is perfect for drawing attention to active inputs or creating dynamic, responsive forms.\n\n**Details:** [PR#21076](https://github.com/vuetifyjs/vuetify/pull/21076)\n\n## New components\n\nBoth VNumberInput and VSnackbarQueue have been promoted from labs to the core framework. They offer a clean experience and are easy to use.\n\n### VNumberInput\n\nThe [v-number-input](https://vuetifyjs.com/components/number-inputs/) component has moved from Labs to the Core framework in v3.8. It's intended to be a replacement for the standard `` and supports all of the standard Vuetify input variant props.\n\n![Gif of the NumberInput component](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/number-input.gif \"VNumberInput component\"){ height=300 }\n\n**Details:**\n\n- [Documentation](https://vuetifyjs.com/components/number-inputs/)\n- [PR#18162](https://github.com/vuetifyjs/vuetify/pull/18162)\n\n### VSnackbarQueue\n\nThe [v-snackbar-queue](https://vuetifyjs.com/components/snackbar-queue/) component has moved from Labs to the Core framework in v3.8. This component makes it easy to create a queue of snackbars that can be displayed one after the other.\n\nSetting up a queue of snackbars is as simple as creating a store that holds the queue and passing it to the VSnackbarQueue component.\n\n```ts { resource=\"src/stores/queue.ts\" }\nimport { defineStore } from 'pinia'\nimport { Ref } from 'vue'\n\nexport type Snackbar = Record\n\nexport interface SnackbarQueueState {\n queue: Ref\n show: (text: Snackbar | string) => void\n}\n\nexport const useQueueStore = defineStore('Queue', () => {\n const queue = ref([])\n\n function show (text: Snackbar) {\n const record = typeof text === 'string' ? { text } : text\n\n queue.value.push(record)\n }\n\n return {\n queue,\n show,\n } as SnackbarQueueState\n})\n```\n\n```html { resource=\"src/App/AppSnackbarQueue.vue\"}\n\n\n\n```\n\nQueue items support all [v-snackbar](https://vuetifyjs.com/components/snackbars/) props, including **timeout** and **color**.\n\n**Details:**\n\n- [Documentation](https://vuetifyjs.com/components/snackbar-queue/)\n- [PR#19629](https://github.com/vuetifyjs/vuetify/pull/19629)\n\n## Other updates\n\nSome other small updates in v3.8 involve quality of life improvements to existing components such as VDataTable and VTooltip.\n\n### VDataTable selection\n\nIn v3.8, when using the **show-select** property and VDataTable, you can hold the shift key when making a selection to select a range of items.\n\n![Gif of VDataTable selection](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/data-table-select.gif \"v-data-table selection\"){ height=500 }\n\n**Details:** [Commit c9a2a22](https://github.com/vuetifyjs/vuetify/commit/c9a2a2269b0492cc3cd0b757888be9ddd96316ba)\n\n### VTooltip interactive\n\nv3.8 introduces the **interactive** property to the [v-tooltip](https://vuetifyjs.com/components/tooltips/) component. When enabled, this allows users to interact with and select text within the tooltip.\n\n![Gif of v-tooltip interactive](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/tooltip-interactive.gif \"v-tooltip interactive\"){ height=300 }\n\n**Details:** [Commit 1599512](https://github.com/vuetifyjs/vuetify/commit/159951278e9a27309d4d1eb633b426c770989584)\n\n## Labs\n\nThe latest version of Vuetify also includes a number of updates to existing Labs components, including the new VIconBtn. In addition, we're also bringing a new composable for testing named **useRules**.\n\n### VDateInput\n\nThe [v-date-input](https://vuetifyjs.com/components/date-inputs) component received multiple quality of life improvements, including:\n\n- Now has actions hidden by default, reducing screen clutter\n- Improved inputmode usage on mobile\n- Normalized control button sizes giving the component a more consistent look\n\n![Image of v-date-input](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/date-input-enhancements.png \"v-date-input component\"){ height=300 }\n\nThis component is getting close to being ready for production, keep an eye out for it in the next release!\n\n### useRules composable\n\nThe useRules composable is a new way to propagate shared rules through your application with full localization support. After following the [Installation Guide](https://vuetifyjs.com/features/rules/#installation), you can use the composable in your components.\n\n```html\n\n\n\n```\n\nRules also support localization, allowing text strings to change based upon the injected locale. This applies globally, as well as inline:\n\n```html\n\n```\n\nThis simplifies managing validation rules across your app, ensuring consistency and easing localization.\n\n### VIconBtn\n\n[v-icon-btn](https://vuetifyjs.com/components/icon-buttons/) is a new component in testing that's intended to bridge the gap between VBtn and VIcon. Its size is meant to be more intentional and is ideal for compact UI patterns like toolbars, icon-only lists, or action grids.\n\n![Gif of v-icon-btn](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-3.8/icon-btn.gif \"v-icon-btn component\"){ height=300 }\n\nWe're also experimenting with a new way of mapping sizes, moving the configuration from SCSS to props.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nimport { createVuetify } from 'vuetify'\n\nexport default createVuetify({\n defaults: {\n VIconBtn: {\n sizes: [\n ['x-small', 16],\n ['small', 20],\n ['medium', 24],\n ['large', 28],\n ['x-large', 32],\n ],\n iconSizes: [\n ['x-small', 10],\n ['small', 12],\n ['medium', 14],\n ['large', 16],\n ['x-large', 18],\n ],\n size: 'small',\n }\n }\n})\n```\n\nMoving to a system like this also opens up the ability to configure your own sizing names:\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\n{\n VIconBtn: {\n sizes: [\n ['xs', 16],\n ['sm', 20],\n ['md', 24],\n ['lg', 28],\n ['xl', 32],\n ['2xl', 36],\n ],\n iconSizes: [\n ['xs', 10],\n ['sm', 12],\n ['md', 14],\n ['lg', 16],\n ['xl', 18],\n ['2xl', 20],\n ],\n size: 'xl',\n }\n}\n```\n\nThis is still in testing so please give us your feedback by dropping a line on our [Discord](https://community.vuetifyjs.com/)\n\n**Details:** [PR#21114](https://github.com/vuetifyjs/vuetify/pull/21114)\n\n---\n\nFor a complete list of all the changes and features in v3.8, please see the [full changelog](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.0).\n\n\n---\nlayout: blog\nmeta:\n title: Announcing Vuetify v4.3\n description: Vuetify v4.3 \"Paladin\" brings data table and form controls, new labs components, right-click menus, opt-in MD Expressive styles and a steadier SSR layout.\n keywords: Vuetify v4.3, Vuetify Paladin, VDataTable, VAutocomplete, VMenu, context-menu, Material Design Expressive, VBtn, VSlider, VTabs, VSlideGroup, SSR, v-touch-hold, Vuetify0\n---\n\n# Announcing Vuetify v4.3\n\n---\n\n🖊️ John Leider • 📅 October 20th, 2026\n\n\n\n![Hero image for Vuetify v4.3](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/hero.png \"Vuetify v4.3 Paladin hero image\"){ height=112 }\n\n---\n\n## Introduction\n\nVuetify v4.3 is a minor release with no breaking changes.\n\nIt adds more control over filtering and selection in data tables and forms, a batch of new labs components, right-click menus for VMenu, and opt-in Material Design Expressive styles for 7 components. It also includes new options for carousels and slide groups, and a more stable layout for SSR apps.\n\nThis post covers the highlights. For everything else, see [the full changelog](https://github.com/vuetifyjs/vuetify/releases/tag/v4.3.0).\n\n---\n\n- [Data tables & forms](#data-tables-forms)\n- [Labs preview](#labs-preview)\n- [VMenu context-menu](#vmenu-context-menu)\n- [7 components aligned with Material Design Expressive](#7-components-aligned-with-material-design-expressive)\n - [Button sizes](#button-sizes)\n - [Progress](#progress)\n - [Sliders](#sliders)\n - [Tabs](#tabs)\n- [Carousel alternatives](#carousel-alternatives)\n - [VSlideGroup padding and gap](#vslidegroup-padding-and-gap)\n - [VCarousel pause-on-hover](#vcarousel-pause-on-hover)\n - [Wheel navigation](#wheel-navigation)\n - [VInfiniteCarousel](#vinfinitecarousel)\n- [Stable layout & SSR](#stable-layout-ssr)\n- [Under the hood](#under-the-hood)\n- [v-touch-hold](#v-touch-hold)\n- [Promoted from labs](#promoted-from-labs)\n\n## Data tables & forms\n\nMore control over how lists filter and how rows select.\n\n### Filtered order\n\n`VAutocomplete` and `VCombobox` have a **filtered-order** prop for controlling the order of items after filtering.\n\n**Details:** [PR#23282](https://github.com/vuetifyjs/vuetify/pull/23282)\n\n### Filtered select strategy\n\n`VDataTable` adds a **filtered** select strategy, so select all applies to the rows that match the current filter.\n\n**Details:** [041bb72](https://github.com/vuetifyjs/vuetify/commit/041bb7269d228e97f9dda210362d149a4d0ff709), closes [#22867](https://github.com/vuetifyjs/vuetify/issues/22867)\n\n### Row state in row-props\n\n`isSelected` and `isExpanded` are now passed to **row-props**, and selected and expanded rows are marked with data attributes, so you can style them without extra bookkeeping.\n\n**Details:** [PR#23238](https://github.com/vuetifyjs/vuetify/pull/23238), [1b4a6b4](https://github.com/vuetifyjs/vuetify/commit/1b4a6b430340a5dc32a441b3ba281ae1d874a711), closes [#17670](https://github.com/vuetifyjs/vuetify/issues/17670)\n\n### Descriptions on selection controls\n\nCheckboxes, radios and switches can show a description through the new **description** prop and slot on `VSelectionControl`.\n\n**Details:** [3e734be](https://github.com/vuetifyjs/vuetify/commit/3e734be3d6e9141237f1b57dd32a1010f5a4f7b8), closes [#21773](https://github.com/vuetifyjs/vuetify/issues/21773)\n\n![Image of v-checkbox and v-switch with descriptions](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/selection-control-descriptions.png \"Selection control descriptions\"){ height=150 }\n\n### Smaller form updates\n\n- `VDateInput` shows a localized format hint ([PR#23173](https://github.com/vuetifyjs/vuetify/pull/23173))\n- `VTextarea` keeps native undo history when **auto-grow** is on ([PR#23279](https://github.com/vuetifyjs/vuetify/pull/23279))\n\n## Labs preview\n\nThese are new in labs. You can try them today, but the API may still change before they move to core, so pin your version if you use them in production.\n\n![Image of v-split-btn](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/labs-split-btn.png \"v-split-btn component\"){ height=250 }\n\n![Image of v-time-input](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/labs-time-input.png \"v-time-input component\"){ height=120 }\n\n![Image of v-loading-indicator](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/labs-loading-indicator.png \"v-loading-indicator component\"){ height=120 }\n\n- `VAudio` ([Docs](/components/audio-players/), [PR#23227](https://github.com/vuetifyjs/vuetify/pull/23227))\n- `VSplitBtn` ([Docs](/components/split-buttons/), [PR#23267](https://github.com/vuetifyjs/vuetify/pull/23267))\n- `VTimeInput` ([Docs](/components/time-inputs/), [PR#23141](https://github.com/vuetifyjs/vuetify/pull/23141))\n- `VLoadingIndicator` ([Docs](/components/loading-indicators/), [c5ce339](https://github.com/vuetifyjs/vuetify/commit/c5ce3396e1c3e51c6925aab8f3a63365f7acc42a))\n\n`VVideo` also picked up an **actions** prop and an overhauled progress bar and volume control ([PR#23241](https://github.com/vuetifyjs/vuetify/pull/23241)).\n\nTry them out and let us know what you think on [Discord](https://community.vuetifyjs.com/).\n\n## VMenu context-menu\n\n[v-menu](https://vuetifyjs.com/components/menus/) can now open on right click with the new **context-menu** prop.\n\n![Image of v-menu opened with right click](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/menu-contextmenu.png \"v-menu context menu\"){ height=300 }\n\n```html\n\n```\n\n**Details:** [PR#23196](https://github.com/vuetifyjs/vuetify/pull/23196), closes [#9235](https://github.com/vuetifyjs/vuetify/issues/9235)\n\n## 7 components aligned with Material Design Expressive\n\n`VBtn`, `VIconBtn`, `VBtnGroup`, `VProgressLinear`, `VProgressCircular`, `VSlider` and `VTabs` have new options that follow Material Design Expressive. They are regular props you can use with any blueprint. The `md3` blueprint now turns on the new progress look (split variant, rounded bar, stop indicator) and the primary tab slider by default.\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nimport { createVuetify } from 'vuetify'\nimport { md3 } from 'vuetify/blueprints'\n\nexport default createVuetify({\n blueprint: md3,\n})\n```\n\n::: info\nThe `md3` blueprint will make `VSlider` use the pill variant by default in an upcoming patch.\n:::\n\n### Button sizes\n\n`VBtn`, `VIconBtn` and `VBtnGroup` support the Expressive sizes, plus the radius animation on press. There's a new guide that walks through it: [MD3 button sizes](https://vuetifyjs.com/features/md3-button-sizes/).\n\n![Image of MD3 button sizes](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/md3-buttons.png \"MD3 button sizes\")\n\n**Details:** [PR#23253](https://github.com/vuetifyjs/vuetify/pull/23253)\n\n### Progress\n\n[v-progress-linear](https://vuetifyjs.com/components/progress-linear/) and [v-progress-circular](https://vuetifyjs.com/components/progress-circular/) add a split variant, a stop indicator, a rounded bar and a wavy track.\n\n![Image of MD3 progress variants](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/md3-progress.png \"MD3 progress variants\")\n\n**Details:** [PR#23276](https://github.com/vuetifyjs/vuetify/pull/23276)\n\n### Sliders\n\n[v-slider](https://vuetifyjs.com/components/sliders/) has a new **pill** variant and a **centered** prop for values that start from the middle.\n\n```html\n\n\n\n```\n\n![Image of v-slider pill variant](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify-4.3/md3-sliders.png \"v-slider pill variant\")\n\n**Details:** [PR#22699](https://github.com/vuetifyjs/vuetify/pull/22699), [PR#23277](https://github.com/vuetifyjs/vuetify/pull/23277)\n\n### Tabs\n\n`VTab` gets a **slider-variant** prop for the primary tab indicator style.\n\n\n\n**Details:** [PR#23181](https://github.com/vuetifyjs/vuetify/pull/23181)\n\n## Carousel alternatives\n\nSpacing props for `VSlideGroup`, pausing and wheel navigation for `VCarousel`, and a new looping carousel in labs.\n\n### VSlideGroup padding and gap\n\n[v-slide-group](https://vuetifyjs.com/components/slide-groups/) has **padding** and **gap** props, so you can space items without custom CSS. VTabs and VChipGroup are built on VSlideGroup, so they get these too.\n\n**Example:** [Image slider](https://vuetifyjs.com/components/slide-groups/#image-slider)\n\n**Details:** [PR#23184](https://github.com/vuetifyjs/vuetify/pull/23184), closes [#11972](https://github.com/vuetifyjs/vuetify/issues/11972)\n\n### VCarousel pause-on-hover\n\nThe new **pause-on-hover** prop pauses a cycling carousel while the pointer is over it. Keyboard focus inside the carousel now pauses it too, with or without the prop.\n\n```html\n\n```\n\n**Details:** [e835b88](https://github.com/vuetifyjs/vuetify/commit/e835b885a181052f830f75e80cb716764e634da6), closes [#10544](https://github.com/vuetifyjs/vuetify/issues/10544)\n\n### Wheel navigation\n\n`VWindow` and `VCarousel` support mouse wheel navigation, and the wrap animation is now correct when using arrows or touch.\n\n**Details:** [PR#22906](https://github.com/vuetifyjs/vuetify/pull/22906)\n\n### VInfiniteCarousel\n\n`VInfiniteCarousel` is new in labs, for content that loops continuously. Unlike most marquee implementations, it is fully navigable with arrow keys: focus moves between focusable items and scrolls them into view, otherwise the arrows shift the content. The motion runs on the Web Animations API rather than pure CSS, and keeps its position when paused, reversed or scrubbed with drag and wheel.\n\n**Docs:** [v-infinite-carousel](https://vuetifyjs.com/components/infinite-carousels/)\n\n**Details:** [PR#23116](https://github.com/vuetifyjs/vuetify/pull/23116)\n\n## Stable layout & SSR\n\nLayout item sizes and offsets now render before mount, so SSR apps keep a stable layout on load instead of shifting once the app hydrates.\n\n**Details:** [PR#23250](https://github.com/vuetifyjs/vuetify/pull/23250)\n\nA few other layout updates:\n\n- `VRow` has responsive gap props ([PR#23246](https://github.com/vuetifyjs/vuetify/pull/23246))\n- New `vuetify/styles/layers` entry point with only the default `@layer` order declaration ([ed2dbea](https://github.com/vuetifyjs/vuetify/commit/ed2dbeaa96c944052e85e7bf9678f8b8da9956a3))\n- `VNavigationDrawer` has a **modal** prop and `v-model:expanded` ([PR#23182](https://github.com/vuetifyjs/vuetify/pull/23182))\n\n## Under the hood\n\nWe've started porting core framework features over to use Vuetify0 under the hood. The first pieces are the display, locale, RTL and observer composables ([PR#23210](https://github.com/vuetifyjs/vuetify/pull/23210), [PR#23220](https://github.com/vuetifyjs/vuetify/pull/23220)). You shouldn't notice anything in your app. More of the framework will follow in upcoming releases.\n\n## v-touch-hold\n\n`v-touch-hold` is a new directive for long-press interactions on mobile and other touch devices.\n\n**Details:** [PR#23269](https://github.com/vuetifyjs/vuetify/pull/23269), closes [#5322](https://github.com/vuetifyjs/vuetify/issues/5322)\n\n## Promoted from labs\n\n[v-avatar-group](https://vuetifyjs.com/components/avatar-groups/), [v-highlight](https://vuetifyjs.com/components/highlights/) and [v-progress](https://vuetifyjs.com/components/progress/) graduated from labs to core, so update any `vuetify/labs` imports.\n\n---\n\n::: warning\n\n**Vuetify needs your support.** Open Collective is how we fund the team that builds releases like this one. If your team relies on Vuetify, point your organization at [Open Collective](https://opencollective.com/vuetify) or [GitHub Sponsors](https://github.com/sponsors/johnleider).\n\n:::\n\nFor a complete list of all the changes and features in v4.3, please see the [full changelog](https://github.com/vuetifyjs/vuetify/releases/tag/v4.3.0).\n\n---\n\n*Stay connected with Vuetify updates through our [GitHub repository](https://github.com/vuetifyjs/vuetify), [Discord community](https://community.vuetifyjs.com), and follow [@vuetifyjs](https://twitter.com/vuetifyjs) for the latest announcements.*\n\n\n---\nlayout: blog\nmeta:\n title: Announcing the Vuetify0 Alpha\n description: The Vuetify0 alpha is here — a headless Vue framework with 46 components, 63 composables, first-class AI integration, 100% TypeScript, and zero styles.\n keywords: Vuetify0 alpha, headless Vue, Vue component library, AI-native framework, TypeScript components, Vuetify MCP\n---\n\n\n\n# Announcing the Vuetify0 Alpha\n\n**The foundation of the next generation of Vuetify is here.** Vuetify0 is a headless Vue framework — 100% TypeScript, zero styles, built from the ground up to power custom UI libraries, design systems, and the Vuetify ecosystem itself. Today we're releasing the first public alpha.\n\n🖊️ John Leider • 📅 April 7th, 2026\n\n\n\n---\n\n\n\n## What is Vuetify0?\n\nVuetify0 is not a component library — it's a **meta-framework for building component libraries**. Every component is a standard Vue SFC using the latest macros (`defineModel`, `defineSlots`, generics). Every composable is a pure TypeScript function. Nothing ships with styles, opinions about your CSS framework, or assumptions about your design language.\n\nThe primitives handle the hard parts — accessibility, keyboard navigation, focus management, state coordination, form validation — so you can focus on what makes your library yours: the design.\n\n```html { resource=\"src/components/MyButton.vue\" }\n\n\n\n\n\n```\n\nYou bring the styles. Vuetify0 brings everything else.\n\n---\n\n## What's in the Alpha\n\nThe alpha ships with **46 components** and **63 composables** across three maturity levels:\n\n| Maturity | Components | Composables | What it means |\n|----------|-----------|-------------|---------------|\n| **Stable** | 0 | 6 | API locked, production-ready |\n| **Preview** | 34 | 54 | Implemented, API may change |\n| **Draft** | 13 | 3 | Planned or in early development |\n\n::: success\nSee the full breakdown on the [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix) — every component and composable with its current stability level.\n:::\n\n**Components** span six categories — every one headless, accessible, and keyboard-navigable out of the box:\n\n- **Forms** — [Input](https://0.vuetifyjs.com/components/forms/input), [Select](https://0.vuetifyjs.com/components/forms/select), [Combobox](https://0.vuetifyjs.com/components/forms/combobox), [Checkbox](https://0.vuetifyjs.com/components/forms/checkbox), [Radio](https://0.vuetifyjs.com/components/forms/radio), [Switch](https://0.vuetifyjs.com/components/forms/switch), [Slider](https://0.vuetifyjs.com/components/forms/slider), [Rating](https://0.vuetifyjs.com/components/forms/rating)\n- **Disclosure** — [Dialog](https://0.vuetifyjs.com/components/disclosure/dialog), [Popover](https://0.vuetifyjs.com/components/disclosure/popover), [Tabs](https://0.vuetifyjs.com/components/disclosure/tabs), [Collapsible](https://0.vuetifyjs.com/components/disclosure/collapsible), [ExpansionPanel](https://0.vuetifyjs.com/components/disclosure/expansion-panel), [Treeview](https://0.vuetifyjs.com/components/disclosure/treeview)\n- **Navigation** — [Breadcrumbs](https://0.vuetifyjs.com/components/semantic/breadcrumbs), [Pagination](https://0.vuetifyjs.com/components/semantic/pagination)\n- **Layout** — [Splitter](https://0.vuetifyjs.com/components/semantic/splitter)\n- **Feedback** — [Snackbar](https://0.vuetifyjs.com/components/semantic/snackbar)\n- **Primitives** — [Atom](https://0.vuetifyjs.com/components/primitives/atom), [Portal](https://0.vuetifyjs.com/components/primitives/portal), [Presence](https://0.vuetifyjs.com/components/primitives/presence)\n\n[Browse all components](https://0.vuetifyjs.com/components).\n\n**Composables** go even deeper:\n\n- **Selection** — [single](https://0.vuetifyjs.com/composables/selection/create-single), [multi](https://0.vuetifyjs.com/composables/selection/create-group), [grouped](https://0.vuetifyjs.com/composables/selection/create-selection), [stepped](https://0.vuetifyjs.com/composables/selection/create-step), [nested](https://0.vuetifyjs.com/composables/selection/create-nested)\n- **Data** — [filtering](https://0.vuetifyjs.com/composables/data/create-filter), [pagination](https://0.vuetifyjs.com/composables/data/create-pagination), [virtual scrolling](https://0.vuetifyjs.com/composables/data/create-virtual), [data tables](https://0.vuetifyjs.com/composables/data/create-data-table)\n- **Forms** — [validation](https://0.vuetifyjs.com/composables/forms/create-validation) with Standard Schema support, [form coordination](https://0.vuetifyjs.com/composables/forms/create-form), [rules engine](https://0.vuetifyjs.com/composables/plugins/use-rules)\n- **Plugins** — [theme](https://0.vuetifyjs.com/composables/plugins/use-theme), [locale](https://0.vuetifyjs.com/composables/plugins/use-locale), [breakpoints](https://0.vuetifyjs.com/composables/plugins/use-breakpoints), [features](https://0.vuetifyjs.com/composables/plugins/use-features), [permissions](https://0.vuetifyjs.com/composables/plugins/use-permissions), [logger](https://0.vuetifyjs.com/composables/plugins/use-logger), [storage](https://0.vuetifyjs.com/composables/plugins/use-storage), [notifications](https://0.vuetifyjs.com/composables/plugins/use-notifications)\n- **Browser** — [observers](https://0.vuetifyjs.com/composables/system/use-resize-observer), [event listeners](https://0.vuetifyjs.com/composables/system/use-event-listener), [hotkeys](https://0.vuetifyjs.com/composables/system/use-hotkey), [media queries](https://0.vuetifyjs.com/composables/system/use-media-query)\n\n---\n\n## Built for AI\n\n\n\nVuetify0 is the first Vue framework designed from day one to be consumed by AI agents.\n\nEvery documentation page includes **Ask AI** — ask a question about any component or composable and get an answer grounded in the actual source code and API reference. The docs ship with `llms.txt` and `llms-full.txt` files for direct LLM consumption, plus `SKILL.md` files that let AI agents discover and use Vuetify0 capabilities automatically.\n\nThe [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) connects your IDE to the full documentation and API surface. Use it with Claude, Cursor, Copilot, or any MCP-compatible tool to get context-aware assistance while you build.\n\n::: info\n**Try Vuetify0 with Claude.** Our [Vuetify MCP guide](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp#claude-code) walks you through connecting Vuetify MCP to your development environment.\n:::\n\n---\n\n## Progressive Enhancement\n\nVuetify0's plugin system follows a simple principle: **only take what you use**. Every plugin is optional and tree-shakeable. A minimal setup might use nothing at all — just import components and composables directly. As your needs grow, add plugins:\n\n```ts\nimport { createApp } from 'vue'\nimport {\n createBreakpointsPlugin,\n createThemePlugin,\n createLocalePlugin,\n createStoragePlugin,\n} from '@vuetify/v0'\n\nconst app = createApp(App)\n\n// Add only what you need\napp.use(createThemePlugin({ default: 'light', themes: { light, dark } }))\napp.use(createBreakpointsPlugin())\napp.use(createLocalePlugin({ default: 'en', messages: { en, es } }))\napp.use(createStoragePlugin())\n```\n\nAvailable plugins include `useTheme`, `useLocale`, `useBreakpoints`, `useFeatures`, `usePermissions`, `useLogger`, `useStorage`, `useNotifications`, `useRules`, `useRtl`, and `useStack`. Each one follows the same pattern: install the plugin to provide app-wide context, or use the `create*` factory for scoped instances in component subtrees. [Browse all composables](https://0.vuetifyjs.com/composables).\n\n---\n\n## Adapter-Based Architecture\n\nMost plugins accept **adapters** — swappable implementations that let you plug in the tools you already use. Vuetify0 ships with sensible defaults, but you're never locked in.\n\n```ts { resource=\"src/plugins/vuetify0.ts\" }\nimport { createLocalePlugin } from '@vuetify/v0'\nimport { VueI18nLocaleAdapter } from '@vuetify/v0/locale/adapters/vue-i18n'\nimport { createI18n } from 'vue-i18n'\n\nconst i18n = createI18n({ locale: 'en', messages: { en, es } })\n\napp.use(\n createLocalePlugin({\n adapter: new VueI18nLocaleAdapter({ i18n }),\n })\n)\n```\n\nThe adapter pattern extends across the framework:\n\n| Plugin | Default | Third-party adapters |\n|--------|---------|---------------------|\n| Logger | Console | Pino, Consola |\n| Locale | Built-in | VueI18n |\n| Date | Built-in | Custom (implement DateAdapter) |\n| Features | Built-in | LaunchDarkly, Flagsmith, PostHog |\n| Notifications | Built-in | Knock, Novu |\n| Validation | Built-in | Standard Schema (Zod, Valibot, ArkType) |\n| Storage | localStorage | sessionStorage, memory |\n| Theme | CSS variables | Unhead (SSR) |\n\nWrite your own adapter by implementing a single interface. The framework handles the rest.\n\n---\n\n## Performance\n\nPerformance was a priority from the start, not an afterthought. Every composable is independently importable and tree-shakeable. There is no runtime CSS — your bundle includes exactly the JavaScript you use and nothing else.\n\nComponents use lazy mounting (`usePresence`, `useLazy`) so dialogs, popovers, and menus don't render their content until they're opened. Observer composables (`useResizeObserver`, `useIntersectionObserver`, `useMutationObserver`) clean up automatically on scope disposal.\n\nThe registry system — the foundation of every stateful composable — uses cached iterations and batched mutations to minimize reactive overhead. Performance-critical paths include benchmarks (`*.bench.ts`) tracked across releases.\n\n::: info\n**Want the numbers?** Check out our [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) for detailed performance testing guidelines and results.\n:::\n\n---\n\n## Documentation\n\nThe documentation at [0.vuetifyjs.com](https://0.vuetifyjs.com) is designed to be the most complete documentation experience available.\n\n- **Live examples** on every component and composable page with full source code\n- **Auto-generated API reference** extracted directly from TypeScript source — always accurate, never stale\n- **Ask AI** on every page — ask questions grounded in the actual docs and source\n- **Skill-based filtering** — pages are tagged beginner, intermediate, or advanced so you see content matched to your experience\n- **Personalized documentation** — the [Vuetify CLI](https://github.com/vuetifyjs/cli) generates docs context tailored to your project's installed plugins and components\n\n---\n\n## Ecosystem\n\nVuetify0 works with the tools the Vuetify community already uses:\n\n- **[Vuetify CLI](https://github.com/vuetifyjs/cli)** — Scaffold new projects, generate components, and get personalized documentation based on your project setup\n- **[Vuetify Play](https://vtfy.link/vuetify0-play)** — Try components and composables in the browser without installing anything\n- **[Vuetify0 Play](https://v0play.vuetifyjs.com)** (beta) — Vuetify Play built entirely with Vuetify0\n- **[Vuetify MCP](https://mcp.vuetifyjs.com)** — Connect your IDE to the full Vuetify0 API surface for context-aware AI assistance\n\n---\n\n## Road to v1\n\nToday's alpha is the first milestone on the path to a stable release:\n\n- **Alpha** (April 7, 2026) — Open for feedback, APIs mostly stable, expect minor breaking changes\n- **Beta** (June 2026) — API freeze, stability and performance focus\n- **v1.0** (July 2026) — Stable release\n\nSee the full [roadmap](https://0.vuetifyjs.com/roadmap) for milestone details and timelines.\n\n\n\nAfter v1, the next chapter is **[Vuetify Paper](https://github.com/vuetifyjs/0/tree/master/packages/paper)**: complete design systems built on Vuetify0. Paper design systems recreate popular design languages as ready-to-use component libraries powered by v0's headless primitives. We're starting with two original design systems, **Emerald** and **Onyx**, with recreations of well-known design systems to follow.\n\nVuetify0 is the result of over a decade of building component frameworks and learning what works. It's already being integrated into the core Vuetify framework, quietly powering the next generation from the inside out. The alpha is live. [Go break things](https://0.vuetifyjs.com/introduction/getting-started).\n\n::: info\n**Considering building with Vuetify0?** We'd love to hear about your use case. [Get in touch](https://vuetifyjs.com/introduction/enterprise-support/) about enterprise support and consulting.\n:::\n\n---\n\n## Let's Build Something\n\nEnough about what Vuetify0 *can* do — let's see it in action. We're going to build **DevKey**, a developer API dashboard, as a reusable UI library. Three pages, ten components, one composite component that ties it all together.\n\nBy the end, you'll have a publishable package that any Vue app can install and use. The full source is on GitHub: [vuetifyjs/devkey](https://github.com/vuetifyjs/devkey).\n\n> This guide uses plain CSS for styling. Vuetify0 works great with [UnoCSS, Tailwind, or any CSS approach](https://0.vuetifyjs.com/guide/fundamentals/styling) you prefer.\n\n### Project Setup\n\nFirst, install the alpha:\n\n::: tabs\n\n```bash [pnpm]\npnpm add @vuetify/v0\n```\n\n```bash [npm]\nnpm install @vuetify/v0\n```\n\n```bash [yarn]\nyarn add @vuetify/v0\n```\n\n```bash [bun]\nbun add @vuetify/v0\n```\n\n:::\n\nThen create a plugin file that registers the v0 plugins we'll use throughout the project:\n\n```ts { resource=\"src/plugins/devkey.ts\" }\nimport {\n createBreakpointsPlugin,\n createPermissionsPlugin,\n createRulesPlugin,\n} from '@vuetify/v0'\nimport type { App } from 'vue'\n\nexport default function devkey (app: App) {\n app.use(\n createPermissionsPlugin({\n permissions: {\n admin: [['manage', '*']],\n developer: [['read', 'keys'], ['create', 'keys']],\n viewer: [['read', 'keys']],\n },\n })\n )\n\n app.use(\n createRulesPlugin({\n aliases: {\n required: v => !!v || 'Required',\n email: v => /.+@.+\\..+/.test(String(v)) || 'Invalid email',\n },\n })\n )\n\n app.use(createBreakpointsPlugin())\n}\n```\n\nThe theme is configured separately in its own plugin file, using the `V0StyleSheetThemeAdapter` to generate CSS custom properties with a `v0-theme` prefix:\n\n```ts { resource=\"src/plugins/vuetify.ts\" }\nimport { createThemePlugin, V0StyleSheetThemeAdapter } from '@vuetify/v0'\n\nexport default createThemePlugin({\n default: 'dark',\n target: 'html',\n adapter: new V0StyleSheetThemeAdapter({ prefix: 'v0-theme' }),\n themes: {\n dark: {\n dark: true,\n colors: {\n 'primary': '#818cf8',\n 'secondary': '#fbbf24',\n 'error': '#f87171',\n 'info': '#38bdf8',\n 'success': '#4ade80',\n 'warning': '#fb923c',\n 'background': '#18181b',\n 'surface': '#1f1f23',\n 'surface-tint': '#2a2a2a',\n 'surface-variant': '#1e1e1e',\n 'text': '#f1f5f9',\n 'muted': '#94a3b8',\n 'border': '#2e2e32',\n 'divider': '#404040',\n 'on-primary': '#1a1a1a',\n 'on-secondary': '#1a1a1a',\n 'on-error': '#1a1a1a',\n 'on-info': '#1a1a1a',\n 'on-success': '#1a1a1a',\n 'on-warning': '#1a1a1a',\n 'on-background': '#e0e0e0',\n 'on-surface': '#e0e0e0',\n 'on-surface-variant': '#a0a0a0',\n },\n },\n },\n})\n```\n\nAnd wire it into your app entry:\n\n```ts { resource=\"src/main.ts\" }\nimport { createApp } from 'vue'\nimport devkey from './plugins/devkey'\nimport vuetify from './plugins/vuetify'\nimport App from './App.vue'\n\nconst app = createApp(App)\ndevkey(app)\napp.use(vuetify)\napp.mount('#app')\n```\n\nFour plugins across two files, each doing one job: `createPermissionsPlugin` sets up RBAC so we can gate dashboard actions by role, `createRulesPlugin` registers validation rule aliases so our form fields can use `'required'` and `'email'` by name, `createThemePlugin` with `V0StyleSheetThemeAdapter` provides DevKey's color tokens as CSS variables (`var(--v0-theme-primary)`, `var(--v0-theme-on-primary)`, etc.), and `createBreakpointsPlugin` gives us reactive viewport detection for the responsive dashboard layout.\n\nHere's what we're building:\n\n**Components:**\n\n| Component | Wraps | Description |\n|-----------|-------|-------------|\n| `DkButton` | [Button](https://0.vuetifyjs.com/components/actions/button) | Styled button with variants |\n| `DkInput` | [Input](https://0.vuetifyjs.com/components/forms/input) | Form field with label and errors |\n| `DkCard` | [Atom](https://0.vuetifyjs.com/components/primitives/atom) | Content container |\n| `DkToggle` | [Single](https://0.vuetifyjs.com/components/providers/single) | Option switcher |\n| `DkTabs` | [Tabs](https://0.vuetifyjs.com/components/disclosure/tabs) | Tab navigation |\n| `DkTable` | [createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table) | Filterable, paginated table |\n| `DkCollapsible` | [Collapsible](https://0.vuetifyjs.com/components/disclosure/collapsible) | Expandable section |\n| `DkLayout` | [useBreakpoints](https://0.vuetifyjs.com/composables/plugins/use-breakpoints) | Responsive shell |\n| `DkCommandPalette` | [Dialog](https://0.vuetifyjs.com/components/disclosure/dialog) + [Input](https://0.vuetifyjs.com/components/forms/input) + [createFilter](https://0.vuetifyjs.com/composables/data/create-filter) + [useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey) + [useVirtualFocus](https://0.vuetifyjs.com/composables/system/use-virtual-focus) | `Cmd+K` search overlay with keyboard navigation |\n\n**Plugins:**\n\n| Plugin | Purpose |\n|--------|---------|\n| [createThemePlugin](https://0.vuetifyjs.com/composables/plugins/use-theme) | Dark theme with V0StyleSheetThemeAdapter for CSS custom properties |\n| [createBreakpointsPlugin](https://0.vuetifyjs.com/composables/plugins/use-breakpoints) | Reactive viewport detection for responsive layout |\n| [createPermissionsPlugin](https://0.vuetifyjs.com/composables/plugins/use-permissions) | RBAC to gate dashboard actions by role |\n| [createRulesPlugin](https://0.vuetifyjs.com/composables/plugins/use-rules) | Built-in validation rules (required, email, minLength) |\n\n---\n\n## Part 1: Landing Page\n\nThe landing page introduces two core patterns in v0:\n\n- **[Button](https://0.vuetifyjs.com/components/actions/button)** uses a compound component pattern — `Button.Root` handles state (loading, disabled, ARIA), `Button.Content` and `Button.Loading` swap visibility automatically. You style the root, v0 handles the behavior.\n- **[Single](https://0.vuetifyjs.com/components/providers/single)** manages single-selection state. `Single.Root` provides the context, `Single.Item` exposes `isSelected` and `toggle` — perfect for our pricing interval toggle. No state management code needed.\n\nBoth patterns show up everywhere in v0: compound components for structure, provider components for state. Once you learn one, you know them all. We'll build `DkButton`, `DkCard`, `DkToggle`, and `DkLayout`.\n\n![DevKey Landing Page](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/landing.png \"DevKey Landing Page\")\n\n### DkButton\n\nOur first component wraps Vuetify0's [Button](https://0.vuetifyjs.com/components/actions/button) with DevKey's visual style. Button uses a compound component pattern — `Button.Root` handles all the state (loading, disabled, selected, ARIA), and we style on top:\n\n```html { resource=\"src/components/DkButton.vue\" }\n\n\n\n\n\n```\n\nNotice what we *didn't* write: loading state management, disabled coordination, toggle group support, or grace period timing. `Button.Root` handles all of that — we just pass `loading` and `disabled` props through. `Button.Content` renders when the button isn't loading, and `Button.Loading` renders when it is — with an absolutely positioned spinner overlay and `[data-loading]` disabling pointer events. We just add our styles on top.\n\n### DkToggle — Pricing Interval Switcher\n\nThe pricing section needs a toggle between monthly and yearly. We use [Single](https://0.vuetifyjs.com/components/providers/single) for single-selection state — `Single.Root` provides the context, and `Single.Item` exposes `isSelected` and `toggle` for each option:\n\n```html { resource=\"src/components/DkToggle.vue\" }\n\n\n\n\n\n```\n\nThe `mandatory` prop on `Single.Root` ensures something is always selected. The `isSelected` and `toggle` slot props from `Single.Item` give us everything we need to render the active state and handle clicks. Zero state management code in our component.\n\n---\n\n## Part 2: Login Page\n\nThe login page is where Vuetify0's form system shines. Three composables work together here:\n\n- **[Form](https://0.vuetifyjs.com/components/forms/form)** coordinates validation across all fields. When the form submits, it validates every registered input and reports whether the form is valid.\n- **[Input](https://0.vuetifyjs.com/components/forms/input)** handles individual field state — value binding, validation errors, ARIA attributes, dirty/pristine tracking — through a compound component pattern (`Input.Root`, `Input.Control`, `Input.Description`, `Input.Error`).\n- **[createRulesPlugin](https://0.vuetifyjs.com/composables/plugins/use-rules)** provides named rule aliases. In our plugin setup we registered `'required'` and `'email'` — now any `Input.Root` with `:rules=\"['required', 'email']\"` resolves those aliases automatically. You can mix aliases with inline functions for custom validation.\n\nWe'll build `DkInput` — a styled wrapper around Input — and assemble the login page.\n\n![DevKey Login Page](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/login.png \"DevKey Login Page\")\n\n### DkInput\n\nWrapping Vuetify0's [Input](https://0.vuetifyjs.com/components/forms/input) compound component. `Input.Root` handles validation, ARIA attributes, and field state. `Input.Control` renders the native ``. `Input.Description` and `Input.Error` are automatically wired to `aria-describedby` and `aria-errormessage`:\n\n```html { resource=\"src/components/DkInput.vue\" }\n\n\n\n\n\n```\n\n### Login Page Assembly\n\nNow we compose the login page using Vuetify0's [Form](https://0.vuetifyjs.com/components/forms/form) component. Form coordinates all child validations automatically — the `submit` slot prop is a function that validates every registered field and returns a boolean. We pass it to our `onSubmit` handler via `@click=\"onSubmit(submit)\"`, which manages the loading state with a try/finally pattern. The `:rules` prop on `DkInput` accepts both string aliases (`'required'`, `'email'`) from the [rules plugin](https://0.vuetifyjs.com/composables/plugins/use-rules) and inline functions:\n\n```html { resource=\"src/pages/LoginPage.vue\" }\n\n\n\n\n\n```\n\n---\n\n## Part 3: Dashboard\n\nThis is where v0 really shows its depth. The dashboard composes more primitives than the previous two pages combined, and demonstrates how they stay out of each other's way:\n\n- **[createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table)** handles the API key list — filtering, pagination, and column definitions in a single composable. We wire a search input to its `search()` method and let it manage the data pipeline.\n- **[useBreakpoints](https://0.vuetifyjs.com/composables/plugins/use-breakpoints)** powers the responsive layout — sidebar visible on desktop, hidden on mobile — through the plugin we registered earlier.\n- **The command palette** is the showcase piece: five v0 primitives ([Dialog](https://0.vuetifyjs.com/components/disclosure/dialog), [Input](https://0.vuetifyjs.com/components/forms/input), [createFilter](https://0.vuetifyjs.com/composables/data/create-filter), [useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey), [useVirtualFocus](https://0.vuetifyjs.com/composables/system/use-virtual-focus)) composed into a single interaction.\n\n![DevKey Dashboard](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/dashboard.png \"DevKey Dashboard\")\n\n### DkTable — API Key Management\n\nThe API key table uses [createDataTable](https://0.vuetifyjs.com/composables/data/create-data-table), which composes filtering, pagination, and sorting into a single reactive state:\n\n```html { resource=\"src/components/DkTable.vue\" }\n\n\n\n\n\n```\n\nThe `createDataTable` composable handles all the data wrangling — filtering rows by the search query, computing page counts, slicing the visible rows — while our component handles only the rendering.\n\n### DkCommandPalette — The Showcase\n\nThis is the component that shows what composing Vuetify0 primitives really looks like. A `Cmd+K` command palette that combines five v0 primitives into a single, polished interaction:\n\n- [Dialog](https://0.vuetifyjs.com/components/disclosure/dialog) — modal overlay with focus trapping\n- [Input](https://0.vuetifyjs.com/components/forms/input) — search field with ARIA\n- [createFilter](https://0.vuetifyjs.com/composables/data/create-filter) — live filtering\n- [useHotkey](https://0.vuetifyjs.com/composables/system/use-hotkey) — `Cmd+K` activation\n- [useVirtualFocus](https://0.vuetifyjs.com/composables/system/use-virtual-focus) — keyboard navigation with `scrollIntoView`\n\n```html { resource=\"src/components/DkCommandPalette.vue\" }\n\n\n\n\n\n```\n\nThat's roughly 100 lines of template and script for a fully functional command palette with keyboard navigation, live filtering, grouped results, and a hotkey trigger. Five Vuetify0 primitives, each doing one thing well, composed into something greater than the sum of its parts.\n\n\n\n![DevKey Command Palette](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-alpha/command-palette.png \"DevKey Command Palette\")\n\n---\n\n## Ship It\n\nThe full DevKey source is on GitHub: [vuetifyjs/devkey](https://github.com/vuetifyjs/devkey). Clone it, run `pnpm dev`, and you have a working app.\n\nTo deploy to production, build the project and preview it locally:\n\n::: tabs\n\n```bash [pnpm]\npnpm build\nnpx http-server dist\n```\n\n```bash [npm]\nnpm run build\nnpx http-server dist\n```\n\n```bash [yarn]\nyarn build\nnpx http-server dist\n```\n\n```bash [bun]\nbun run build\nbunx http-server dist\n```\n\n:::\n\nThe `dist/` directory contains everything you need. Deploy it anywhere that serves static files — Vercel, Netlify, Cloudflare Pages, or your own server. The entire app, including all Vuetify0 primitives, builds to **~235 kB JS** (84 kB gzipped).\n\n::: info\n**Want to package your components as a reusable library?** We'll cover publishing and consuming a v0-based component library in an upcoming blog post. In the meantime, the [Building Frameworks](https://0.vuetifyjs.com/guide/fundamentals/building-frameworks) guide walks through using v0 as a dependency for your own library.\n:::\n\n---\n\n## FAQ\n\n### How is Vuetify0 different from Reka UI or other headless libraries?\n\nMost headless libraries give you components. v0 gives you both the components *and* the underlying composables used to build them — so when a component doesn't fit your exact need, you're not stuck. The plugin system is also distinct: framework-level features like theme, locale, permissions, and notifications ship with fallbacks, so any component works standalone without requiring the full plugin to be installed. And v0 is built from a decade of Vuetify production experience by the same team — not a port of a React library.\n\n### Is this only for teams building design systems?\n\nNo. Import a `Select` and stop there — you don't need the plugin system, the composables, or any of it. The advanced layer is there when you need it, invisible when you don't.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They don't conflict. You can start adopting v0 components and composables in a Vuetify 4 project today. The migration path to future Vuetify versions is expected to require trivial changes at most.\n\n### Do I have to use all the plugins?\n\nNo. Every plugin is optional and tree-shakeable. A component import is just an import — no required setup. Add plugins as your needs grow.\n\n### Is the alpha API stable enough to build on?\n\nMostly, yes. We ship ~5,000 unit tests and over 300 benchmark scenarios across the framework. The alpha label reflects completeness, not instability — expect minor breaking changes until beta, but nothing requiring rewrites.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\nThe alpha is open for feedback. File issues, ask questions in Discord, or just build something and tell us about it. This is the foundation — help us shape it.\n\n::: info\n**Try Vuetify0 with Claude.** Connect the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/ai-tools) to get AI-assisted development with full access to the v0 docs and API reference.\n:::\n\n---\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Follow us on [Twitter](https://twitter.com/vuetifyjs), join the conversation on [Discord](https://community.vuetifyjs.com), and star us on [GitHub](https://github.com/vuetifyjs/0).*\n\n\n---\nlayout: blog\nmeta:\n title: Announcing the Vuetify0 Beta\n description: Vuetify0 hits beta and freezes its public API — 49 components, 68 composables, a headless drag-and-drop family, and the testing work leading to v1.\n keywords: Vuetify0 beta, headless Vue, API freeze, Vue drag and drop, createSortable, createKanban, TypeScript components, Vuetify0 v1\n---\n\n\n\n# Announcing the Vuetify0 Beta\n\nVuetify0 has reached beta. The main change from the alpha is that the public API is now frozen: the existing composables and components keep their current names and signatures, and we don't expect them to change before v1. Work from here is focused on stability, documentation, and edge cases.\n\n🖊️ John Leider • 📅 June 2nd, 2026\n\n\n\n---\n\n\n\n## What beta means\n\nThe alpha, released in April, came with the caveat that APIs were mostly stable but could still shift between releases. Beta removes that caveat for the existing surface. From here to v1.0:\n\n- Existing composables and components keep their names, signatures, and behavior. A breaking change would only happen if a critical issue required one, and it would be documented in the release notes.\n- Development shifts toward edge cases, documentation, accessibility, and performance rather than new API.\n- v0 is the headless layer being built into Vuetify itself. Freezing it gives that migration a fixed target to build against.\n\n---\n\n## Where things stand\n\nSince the [alpha](/blog/announcing-vuetify0-alpha/) in April, the totals went from 46 components and 63 composables to **49 components and 68 composables**. The maturity mix also changed: at alpha, three composables and thirteen components were still marked draft. Now no composables are in draft, and ten components remain there.\n\n| Maturity | Components | Composables | What it means |\n|----------|-----------|-------------|---------------|\n| **Stable** | 0 | 6 | In use across releases, no planned breaking changes |\n| **Preview** | 39 | 62 | Feature-complete and documented |\n| **Draft** | 10 | 0 | Experimental or planned for a future release |\n\n::: info\nThe full list is on the [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix), with the current level for every component and composable.\n:::\n\nThe preview label describes how long a primitive has been in use, not whether its API is settled. With the freeze, the existing preview surface is not expected to change before v1.\n\n---\n\n## Drag and drop\n\nThe largest addition since the alpha is a group of three composables for drag-and-drop. Like the rest of v0, they handle state and behavior only, with no markup or styling.\n\n- **[useDragDrop](https://0.vuetifyjs.com/composables/system/use-drag-drop)** ([#225](https://github.com/vuetifyjs/0/pull/225)) — the base primitive: a pointer and keyboard input adapter that owns two registries (draggables and drop zones) and the active-drag state.\n- **[createSortable](https://0.vuetifyjs.com/composables/data/create-sortable)** ([#231](https://github.com/vuetifyjs/0/pull/231)) — ordered-list state, with `move`, `swap`, and `reorder` mutations and a typed `move:ticket` event. It has no DOM or input handling of its own, so it can be driven from buttons, gestures, or server updates.\n- **[createKanban](https://0.vuetifyjs.com/composables/data/create-kanban)** ([#234](https://github.com/vuetifyjs/0/pull/234)) — two levels of `createSortable` (columns and their items) plus a `transfer` method for moving items between columns.\n\nBecause `createSortable` is state only, a pair of buttons can drive it without any drag handling:\n\n```ts\nimport { createSortable } from '@vuetify/v0'\nimport type { SortableTicketInput } from '@vuetify/v0'\n\ninterface TaskTicket extends SortableTicketInput {\n value: { id: number, label: string }\n}\n\nconst sortable = createSortable()\n\nconst [a, b, c] = sortable.onboard([\n { value: { id: 1, label: 'Cut alpha' } },\n { value: { id: 2, label: 'Ship docs' } },\n { value: { id: 3, label: 'Tweet' } },\n])\n\nsortable.move(a.id, 2) // move a ticket to a new index\nsortable.swap(a.id, b.id) // swap two tickets\nsortable.reorder([b.id, a.id, c.id]) // apply a full permutation\n```\n\nThe same state rendered as a list — this is the example from the documentation:\n\n```html { resource=\"src/components/ReorderList.vue\" }\n\n\n\n```\n\n`useDragDrop` adds pointer and keyboard dragging on top, calling the same `move`, `swap`, and `reorder` methods.\n\n---\n\n## Other additions\n\nOther primitives added since the alpha:\n\n- **[createOtp](https://0.vuetifyjs.com/composables/forms/create-otp)** ([#238](https://github.com/vuetifyjs/0/pull/238)) — state and focus management for one-time-code and verification inputs.\n- **[Overflow](https://0.vuetifyjs.com/components/semantic/overflow)** ([#220](https://github.com/vuetifyjs/0/pull/220)) — a container that detects overflow and exposes scroll state to its children.\n- **useDelay** — debounce and delayed-execution timing.\n- **[toHighlight](https://0.vuetifyjs.com/composables/transformers/to-highlight)** ([#222](https://github.com/vuetifyjs/0/pull/222)) — a transformer that marks matched substrings, for search results and filters.\n\n`createRegistry`, which the stateful composables build on, also gained a bulk `reorder` primitive and an `offboard` that returns removed entries. The latter is what `createKanban` uses to move items between columns.\n\n---\n\n## Testing and performance\n\nCurrent numbers:\n\n- 5,700+ unit tests across 142 spec files.\n- 98.7% average test coverage across the 105 primitives with recorded metrics.\n- 12 benchmark suites covering performance-sensitive paths such as `createDataTable`, `createFilter`, and the registry core. `createSortable`'s reorder was rewritten to use the registry's bulk operation rather than a per-item loop.\n- 100% TypeScript and no runtime CSS. The package ships no styles, and exports are annotated so bundlers can drop unused composables.\n\n::: info\nThe [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) documents the methodology and per-primitive results.\n:::\n\nOne change since the alpha: `useTheme`, `useLocale`, and `useFeatures` use a reactive registry by default ([#210](https://github.com/vuetifyjs/0/pull/210)), so switching a theme or feature flag updates consumers without extra setup. The convention is [documented](https://0.vuetifyjs.com/guide/fundamentals/reactivity) for plugin authors.\n\n---\n\n## AI tooling\n\n\n\nAs in the alpha, each documentation page has an Ask AI option, the docs publish `llms.txt` and `llms-full.txt`, and the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) connects an editor to the API reference. The MCP data is synced to the beta.\n\n::: info\nThe [Vuetify MCP guide](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp#claude-code) covers connecting it to an editor.\n:::\n\n---\n\n## Road to v1\n\nThe beta is the second of three milestones:\n\n- **Alpha** (April 7, 2026) — open for feedback, APIs mostly stable\n- **Beta** (June 2, 2026) — API freeze; stability, documentation, and edge cases\n- **v1.0** (July 2026) — milestone-driven; ships when the milestones are met\n\nSee the [roadmap](https://0.vuetifyjs.com/roadmap) for details.\n\n---\n\n## FAQ\n\n### What changes at beta?\n\nThe public API stops changing. During alpha, names and signatures could change between releases; from beta to v1.0 they don't, unless a critical fix requires it. The stable, preview, and draft labels still indicate how long each primitive has been in use.\n\n### Can I use the beta in production?\n\nCode written against the beta API should keep working through v1, since the API is frozen. The remaining work is hardening and documentation.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They don't conflict, and v0 is already used inside Vuetify's internals. The path to future Vuetify versions is expected to need minimal changes.\n\n### Will there be breaking changes between beta and v1?\n\nNone are planned. If a critical bug or accessibility issue requires one, it will be noted in the release notes.\n\n### Do I have to use the whole framework?\n\nNo. You can import a single component or composable on its own. The plugins and other layers are optional.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Documentation is at [0.vuetifyjs.com](https://0.vuetifyjs.com); source is on [GitHub](https://github.com/vuetifyjs/0).*\n\n\n---\nlayout: blog\nmeta:\n title: Announcing the Vuetify0 Release Candidate\n description: Vuetify0 reaches release candidate. The API freeze held through five beta releases and 60 fixes — 50 components, 71 composables, and the last stretch to v1.\n keywords: Vuetify0 RC, release candidate, headless Vue, API freeze, accessibility, WCAG, useReducedMotion, Vuetify0 v1\n---\n\n\n\n# Announcing the Vuetify0 Release Candidate\n\nVuetify0 has reached release candidate. The API freeze announced at [beta](/blog/announcing-vuetify0-beta/) held through six beta releases: nothing was renamed, nothing was removed, and the only additions were additive — a reduced-motion plugin and an accessibility helper on the locale system. From here to v1.0, the work is final testing and documentation. No new features.\n\n🖊️ John Leider • 📅 July 2nd, 2026\n\n\n\n---\n\n\n\n## Table of Contents\n\n- [What a release candidate means](#what-a-release-candidate-means)\n- [Where things stand](#where-things-stand)\n- [A month of hardening](#a-month-of-hardening)\n- [Accessible by default](#accessible-by-default)\n- [Testing and benchmarks](#testing-and-benchmarks)\n- [A reference implementation](#a-reference-implementation)\n- [Documentation](#documentation)\n- [AI tooling](#ai-tooling)\n- [Road to v1](#road-to-v1)\n- [FAQ](#faq)\n\n---\n\n## What a release candidate means\n\nThe beta froze the public API and promised that existing composables and components would keep their names, signatures, and behavior. A month and six releases later, that promise held — and it is now enforced mechanically: a repository check fails any pull request that changes the public surface ([#409](https://github.com/vuetifyjs/0/pull/409)).\n\nThe release candidate narrows scope further. Between now and v1.0:\n\n- **No breaking changes and no new features.** The beta still accepted additive changes; the RC does not. The single exception is a critical security vulnerability that cannot be fixed any other way — and it would be documented in the release notes.\n- **The time goes to testing.** Exercising the frozen surface against edge cases, accessibility passes, and security testing on top of the hardening the betas already shipped.\n- **Documentation and feedback.** The rest of the effort is documentation, and the RC window is the last chance for feedback to catch a problem before the API locks in for the whole 1.x line. An API that fights you, a doc that misleads, a behavior that surprises — report it at [issues.vuetifyjs.com](https://issues.vuetifyjs.com) or on [Discord](https://community.vuetifyjs.com).\n- **v1.0 is milestone-driven**, targeted for Q3 2026. Barring release-blocking discoveries, the RC is what v1.0 ships as — it releases when the milestones are met, not on a date.\n\nAfter v1.0, the surface is governed by semver: breaking changes only in major releases.\n\n---\n\n## Where things stand\n\nAt the beta announcement the totals were 49 components and 68 composables. Beta.0 itself shipped the [Tooltip](https://0.vuetifyjs.com/components/disclosure/tooltip) component with its [useTooltip](https://0.vuetifyjs.com/composables/plugins/use-tooltip) plugin and [createDataGrid](https://0.vuetifyjs.com/composables/data/create-data-grid); the freeze window added [useReducedMotion](https://0.vuetifyjs.com/composables/plugins/use-reduced-motion) in beta.2. The RC surface is **50 components, 71 composables, and 24 utilities**.\n\nThe RC also promotes the v1 stable set ([#470](https://github.com/vuetifyjs/0/pull/470)): the selection family — `createModel`, `createSelection`, `createSingle`, `createStep`, `createGroup`, `createNested` — plus `createRegistry` and the `useTheme`, `useStorage`, and `useBreakpoints` plugins are now API-locked for 1.0. They join the already-stable foundation and observer composables, bringing the stable surface to 16 composables and 17 utilities.\n\n| Maturity | Components | Composables | Utilities | What it means |\n|----------|-----------|-------------|-----------|---------------|\n| **Stable** | 0 | 16 | 17 | In use across releases, no planned breaking changes |\n| **Preview** | 40 | 55 | 7 | Feature-complete and documented |\n| **Draft** | 10 | 0 | 0 | Experimental or planned for a future release |\n\n::: info\nThe full list is on the [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix), with the current level for every component and composable.\n:::\n\nThe ten draft components — DatePicker, DateRangePicker, TimePicker, Otp, Alert, DataGrid, DataTable, Kanban, Virtualizer, and Tour — are experimental and sit outside the frozen surface. They are not committed to v1 and promote individually when ready.\n\n---\n\n## A month of hardening\n\nThe beta cycle ran on a weekly cadence — five follow-up releases between June 9 and the RC cut — and produced 184 commits: 60 fixes, 5 performance rewrites, and 66 documentation commits. The fixes cluster into a few themes:\n\n- **Security and input hardening** — composables were hardened against prototype pollution, CSS injection, and unbounded allocation ([#271](https://github.com/vuetifyjs/0/pull/271)); theme adapters now validate their CSS prefix ([#440](https://github.com/vuetifyjs/0/pull/440)) and popover anchor names are coerced to a safe charset ([#416](https://github.com/vuetifyjs/0/pull/416)).\n- **Overlays and the top layer** — a native modal `` paints above all z-index, so overlays teleported to `body` rendered underneath it. Snackbar and Portal can now teleport into the topmost open modal instead ([#397](https://github.com/vuetifyjs/0/pull/397)), and non-modal overlays no longer count toward stack blocking or scrim state ([#354](https://github.com/vuetifyjs/0/pull/354), [#352](https://github.com/vuetifyjs/0/pull/352)).\n- **SSR and adapter lifecycle** — CSP nonces are applied to server-rendered theme styles ([#441](https://github.com/vuetifyjs/0/pull/441)), adopted stylesheets are removed on dispose ([#424](https://github.com/vuetifyjs/0/pull/424)), and plugins defer factory work to install time so unused plugins no longer allocate resources ([#343](https://github.com/vuetifyjs/0/pull/343)).\n- **Selection and registry contracts** — disabled items can no longer slip in through the v-model sync path ([#426](https://github.com/vuetifyjs/0/pull/426)) or be toggled off ([#311](https://github.com/vuetifyjs/0/pull/311)), circular tree references are guarded ([#316](https://github.com/vuetifyjs/0/pull/316)), and registry cache consistency was tightened ([#331](https://github.com/vuetifyjs/0/pull/331)).\n- **Forms edge cases** — submitting a form with a field id of `0` ([#288](https://github.com/vuetifyjs/0/pull/288)), invalidating in-flight async validation ([#294](https://github.com/vuetifyjs/0/pull/294)), and committing parsed NumberField values before the reactivity round-trip completes ([#371](https://github.com/vuetifyjs/0/pull/371)).\n- **Renderless mode** — the element and handler contracts are now exposed through slot attributes across dialogs, form controls, Scrim, and Snackbar ([#327](https://github.com/vuetifyjs/0/pull/327)), so the consumer-owned-DOM path carries the same guarantees as the rendered one.\n\nPerformance work landed alongside: registry reordering moved from a Map rebuild to an order-array splice with windowed reindexing ([#273](https://github.com/vuetifyjs/0/pull/273)), proxy registry snapshots rebuild lazily on read ([#280](https://github.com/vuetifyjs/0/pull/280)), `createDataTable` replaced its reactive row registry with an event-driven version signal ([#328](https://github.com/vuetifyjs/0/pull/328)), and Overflow visibility checks dropped from O(n²) to O(n) per resize ([#417](https://github.com/vuetifyjs/0/pull/417)).\n\n---\n\n## Accessible by default\n\nThe largest user-facing change of the cycle is invisible until you turn on a screen reader. Every v0 component now ships a built-in English aria label through the locale system's new `ti` method ([#372](https://github.com/vuetifyjs/0/pull/372)) — \"translate if exists\" — which returns the translation or `undefined` instead of echoing the key:\n\n```ts\nconst label = locale.ti('Button.label') ?? 'Button'\n```\n\nApps with no locale plugin get meaningful accessible names (WCAG 4.1.2) with zero locale strings bundled into the runtime. The canonical English catalog is exposed as an optional `@vuetify/v0/locale/messages/en` export for seeding translations.\n\nThe RC audit of the project's [PHILOSOPHY](https://github.com/vuetifyjs/0/blob/master/packages/0/PHILOSOPHY.md) document surfaced two more attribute-compliance bugs, fixed in the same pass ([#451](https://github.com/vuetifyjs/0/pull/451)): ExpansionPanel emitted `data-selected=\"false\"` instead of dropping the attribute, and Slider and Rating dropped `aria-disabled` entirely when enabled instead of emitting a concrete boolean for assistive tech.\n\nBeta.2 also added the [useReducedMotion](https://0.vuetifyjs.com/composables/plugins/use-reduced-motion) plugin ([#278](https://github.com/vuetifyjs/0/pull/278)) — a three-way `system` / `always` / `never` mode over `prefers-reduced-motion`, with a reactive flag and a body data attribute for CSS-only consumers:\n\n```ts\nimport { useReducedMotion } from '@vuetify/v0'\n\nconst motion = useReducedMotion()\n\nmotion.isReduced.value // should motion be minimized right now?\nmotion.select('always') // force reduce\nmotion.select('system') // follow the OS setting\n```\n\n---\n\n## Testing and benchmarks\n\nCurrent numbers:\n\n- 6,338 passing unit tests across 159 test files.\n- 97.8% average test coverage across the 113 primitives with recorded metrics; 78 of them sit at 100%.\n- 13 benchmark suites with 399 recorded cases. Benchmark history is now regenerated on every release against a fixed apparatus ([#394](https://github.com/vuetifyjs/0/pull/394), [#422](https://github.com/vuetifyjs/0/pull/422)), so regressions show up as history, not anecdotes.\n- 100% TypeScript and no runtime CSS. The package ships no styles, and exports are annotated so bundlers can drop unused composables.\n\n::: info\nThe [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) documents the methodology and per-primitive results.\n:::\n\n---\n\n## A reference implementation\n\nNumbers describe the surface; [DevKey](https://devkey.vuetifyjs.com) shows it in use. The developer API dashboard from the [alpha tutorial](/blog/announcing-vuetify0-alpha/) is maintained as the reference v0 implementation and is updated in lockstep with releases — including this RC. Its command palette is a good picture of how the primitives compose: a `Dialog`, an `Input`, `createFilter`, `useHotkey`, and `useVirtualFocus` in one component (condensed from the source):\n\n```html { resource=\"src/components/DkCommandPalette.vue\" }\n\n```\n\nNo positioning math, no key-event switch statements, no filter re-implementation — the component is mostly wiring. The full source is at [vuetifyjs/devkey](https://github.com/vuetifyjs/devkey), and the [integration guide](https://0.vuetifyjs.com/guide/integration/devkey) walks through the architecture.\n\n---\n\n## Documentation\n\nThe 61 documentation commits were mostly one push: a full audit of the guide pages. Component and composable pages were normalized to one structure ([#392](https://github.com/vuetifyjs/0/pull/392)), FAQ sections homogenized ([#395](https://github.com/vuetifyjs/0/pull/395)), examples converted to multi-file copy-paste blocks ([#382](https://github.com/vuetifyjs/0/pull/382)), and stale data corrected across the board ([#458](https://github.com/vuetifyjs/0/pull/458), [#461](https://github.com/vuetifyjs/0/pull/461)).\n\nNew pages landed for [testing](https://0.vuetifyjs.com/guide/tooling/testing) ([#283](https://github.com/vuetifyjs/0/pull/283)) and a [core terminology glossary](https://0.vuetifyjs.com/guide/essentials/glossary) ([#410](https://github.com/vuetifyjs/0/pull/410)). The release pipeline moved to [Changesets](https://github.com/changesets/changesets) ([#365](https://github.com/vuetifyjs/0/pull/365)), and the docs now derive feature counts directly from the maturity manifest instead of hand-maintained numbers ([#378](https://github.com/vuetifyjs/0/pull/378)).\n\nFor learning the framework, [Vuetify0 Skillz](https://0.vuetifyjs.com/skillz) — interactive, hands-on tutorials built into the docs, itself in beta — now counts three guided tours: Using the Docs, Using Search, and Using Examples, the newest landing alongside the RC ([#459](https://github.com/vuetifyjs/0/pull/459)) to walk through live examples, the Playground, and multi-file recipes. Every page is also tagged Beginner, Intermediate, or Advanced, and the [skill filter](https://0.vuetifyjs.com/guide/essentials/using-the-docs#skill-levels-learning-tracks) trims the navigation to the levels you choose.\n\n---\n\n## AI tooling\n\n\n\nAs before, each documentation page has an Ask AI option, the docs publish `llms.txt` and `llms-full.txt`, and the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) connects an editor to the API reference. The MCP data is synced to the RC.\n\n::: info\nThe [Vuetify MCP guide](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp#claude-code) covers connecting it to an editor.\n:::\n\n---\n\n## Road to v1\n\nThe release candidate is the last milestone before v1.0:\n\n- **Alpha** (April 7, 2026) — open for feedback, APIs mostly stable\n- **Beta** (June 2, 2026) — API freeze; stability, documentation, and edge cases\n- **RC** (July 2, 2026) — final testing and documentation; no new features\n- **v1.0** (Q3 2026) — milestone-driven; ships when the milestones are met\n\nSee the [roadmap](https://0.vuetifyjs.com/roadmap) for details.\n\n---\n\n## FAQ\n\n### What changes at RC?\n\nScope, not API. The beta froze names and signatures but still accepted additive features; the RC accepts none. Between now and v1.0 only release-blocking fixes and documentation land — the focus is testing, security review, and feedback. New features resume after v1.\n\n### Can I use the RC in production?\n\nCode written against the beta API ran through six beta releases and the RC without changes, and the same guarantee carries to v1: the surface is frozen and the freeze is enforced by a repository check on every pull request.\n\n### Will the draft components ship in v1?\n\nThe ten draft components are experimental and outside the frozen surface, and each is already plotted on the public [milestones](https://github.com/vuetifyjs/0/milestones): table components in v1.1, product tours in v1.2, virtualized lists, Kanban, and OTP input in v1.3, then time and date pickers in v1.4 and v1.5. Each promotes when it meets the bar.\n\n### Will there be breaking changes between RC and v1?\n\nNone are planned. The only thing that could force one is a critical security vulnerability with no other fix, and it would be documented in the release notes.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They don't conflict, and you can adopt v0 primitives inside a Vuetify 4 app today. Meanwhile, Vuetify 5's internals are being refactored to use v0 directly — the frozen surface is the foundation that work builds on.\n\n### How do I report a problem or contribute?\n\nBug reports go through [issues.vuetifyjs.com](https://issues.vuetifyjs.com) — issues opened outside the generator are closed automatically. The [contributing guide](https://0.vuetifyjs.com/introduction/contributing) covers local setup and conventions, and [Discord](https://community.vuetifyjs.com) is the place to discuss before you build.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Report an issue** — [issues.vuetifyjs.com](https://issues.vuetifyjs.com)\n- **Contributing** — [Contributing guide](https://0.vuetifyjs.com/introduction/contributing)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Documentation is at [0.vuetifyjs.com](https://0.vuetifyjs.com); source is on [GitHub](https://github.com/vuetifyjs/0).*\n\n\n---\nlayout: blog\nmeta:\n title: Announcing Vuetify0 1.0\n description: Vuetify0 1.0 — a headless meta-framework for Vue 3. Its foundation is now locked under semver — the logic layer plus a stable component spine.\n keywords: Vuetify0 1.0, Vuetify0 v1, headless Vue, meta-framework, composables, WAI-ARIA, semver\n---\n\n\n\n# Announcing Vuetify0 1.0\n\nI've built Vuetify0 — the framework, its documentation, and everything surrounding it — with one express intent: to take everything I've learned over a decade of building Vuetify and pour it into something that will stand the test of time. The principles and the underlying functionality that drive v0 weren't invented for this release; they were honed over ten years of Vuetify, tested against real applications, and only then extracted into a foundation you can build on directly.\n\nVuetify0 is 1.0. The release candidate held — the frozen surface shipped through the validation window without a breaking change — and the package is now `@vuetify/v0`, no tag required. For most projects, 1.0 is the signal that a library is safe to build on. For a framework whose job is to build other frameworks, it means something more precise: the contracts are locked.\n\n🖊️ John Leider • 📅 July 22nd, 2026\n\n\n\n---\n\n\n\n## Table of Contents\n\n- [What 1.0 means](#what-1-0-means)\n- [What Vuetify0 is](#what-vuetify0-is)\n- [Headless, accessible by default](#headless-accessible-by-default)\n- [The whole logic layer](#the-whole-logic-layer)\n- [Where it sits in the stack](#where-it-sits-in-the-stack)\n- [Logic without components](#logic-without-components)\n- [Proven, not promised](#proven-not-promised)\n- [The road to v1.x](#the-road-to-v1-x)\n- [Get started](#get-started)\n- [FAQ](#faq)\n\n---\n\n## What 1.0 means { #what-1-0-means }\n\nI want to be precise about what shipped, because it is easy to read \"1.0\" as \"every component is finished.\" Not all of them are — and for a meta-framework, that is by design.\n\nVuetify0 is a headless meta-framework — a logic layer you build UI libraries *on top of*. Its value is not a catalog of buttons; it is the guarantee that the primitives underneath your buttons will not move. So 1.0 is a promise about the foundation:\n\n- **The stable set is locked under semver.** Nineteen composables, seventeen utilities, and thirteen components — the selection family, the registry, the foundation and observer primitives, the `useTheme`, `useStorage`, and `useBreakpoints` plugins, and the structural spine the rest of the library is built from (Tabs, Checkbox, Radio, Switch, the providers, and more) — carry a no-breaking-changes guarantee for the entire 1.x line. Breaking changes wait for a major.\n- **The freeze is enforced mechanically.** A repository check fails any pull request that alters the public surface. The guarantee is not a promise in a blog post; it is CI.\n- **The rest of the components promote individually.** Beyond that stable spine, the remaining components are `preview` and graduate onto the frozen foundation one at a time, each on its own milestone rather than gated behind a single number. Stabilizing the engine and its load-bearing components first is exactly the right order for a meta-framework — everything downstream inherits that stability.\n\nIf you have used Vuetify at any point in the last decade, you have relied on this logic without seeing it — selection, registries, focus management, theming. 1.0 is that logic, extracted, hardened, and frozen, so you can build on it directly.\n\n![The Vuetify0 maturity matrix — 49 stable primitives across 15 categories at 1.0](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-v1/maturity-matrix-dark.png \"The Vuetify0 maturity matrix\"){ width=100% }\n\n::: info\nThe [Maturity Matrix](https://0.vuetifyjs.com/roadmap#maturity-matrix) lists the current level for every component, composable, and utility.\n:::\n\n---\n\n## What Vuetify0 is\n\nIf this is your first time hearing about it: **Vuetify0 (v0) is a headless meta-framework for Vue 3.** Logic only, zero styling. You do not install v0 to get a button — you install it to *build* the button your design system paints.\n\nThat distinction is the whole point. Most component libraries hand you finished, opinionated UI and ask you to fight the defaults when they do not fit. Most headless libraries hand you a dozen primitives and leave the rest to you. v0 aims at the layer underneath both: the complete state, accessibility, and behavior of a UI library, exposed as composables and unstyled compound components, with nothing rendered until you say so.\n\nThe acid test v0 holds itself to: strip every stylesheet from the page, and the components still work — still manage focus, still enforce selection rules, still announce their state to a screen reader. If styling is load-bearing, it is not headless.\n\nThere is no plugin to register and nothing is global. Everything is a tree-shakeable import:\n\n```ts\nimport { createSelection, useBreakpoints } from '@vuetify/v0'\nimport { Tabs, Dialog } from '@vuetify/v0/components'\n```\n\n---\n\n## Headless, accessible by default\n\nHeadless is not an excuse to ship less. Every v0 component is WAI-ARIA correct out of the box, SSR-safe by default, and exposes each piece of its state as a `data-*` attribute so a stylesheet — or a design system — can react to it without touching the logic.\n\nAccessibility does not wait for a locale plugin, either. Every component ships a built-in English aria label through the locale system's `ti` method — \"translate if exists\" — which returns a translation when one is registered and falls back to the inline default otherwise:\n\n```ts\nconst label = locale.ti('Button.label') ?? 'Button'\n```\n\nAn app with no i18n configured still gets meaningful accessible names (WCAG 4.1.2), with zero locale strings bundled into the runtime. Add a locale plugin later and the same components localize with no code change. That is the pattern throughout v0: correct defaults for the beginner, full control for the framework author.\n\nThe release cycle closed with a dedicated accessibility pass — carousel autoplay that pauses on focus (WCAG 2.2.2), `aria-current` on tree items, explicit group labels on sliders and splitters, and more — so the guarantee holds in the details, not just the headline.\n\n---\n\n## The whole logic layer\n\nThe number that matters is not how many buttons v0 draws — it is how much of the hard logic you never have to write again. At 1.0, v0 ships **40 components, 71 composables, and 24 utilities** across fifteen categories, with ten more components already scheduled through v1.5.\n\nBefore you write custom logic, the odds are v0 already has the primitive:\n\n| You need | Reach for |\n|----------|-----------|\n| Single, multi, grouped, or nested selection | `createSingle`, `createSelection`, `createGroup`, `createNested` |\n| Wizard / carousel / step tracking | `createStep` |\n| Form validation with async + dirty tracking | `createForm`, `createValidation` |\n| Autocomplete / combobox | `createCombobox` |\n| Paginated, virtualized, sortable, filterable data | `createPagination`, `createVirtual`, `createSortable`, `createFilter`, `createDataTable` |\n| Floating UI — popover, tooltip, menu | `usePopover` |\n| Roving tabindex / virtual focus | `useRovingFocus`, `useVirtualFocus` |\n| Breakpoints, theme, RTL, locale, storage | `useBreakpoints`, `useTheme`, `useRtl`, `useLocale`, `useStorage` |\n\nThis is where \"meta-framework\" stops being marketing. The goal is breadth no point-solution can match — the selection, forms, data, and system primitives that every serious UI library re-implements, written once, tested once, and shared. See how that stacks up against a typical headless library in [Beyond a Component Library](https://0.vuetifyjs.com/introduction/why-vuetify0#beyond-a-component-library).\n\n---\n\n## Where it sits in the stack\n\nv0 is the bottom of a three-layer stack, and each layer only depends on the one below it:\n\n- **Vuetify0** — headless logic (this release)\n- **Design systems** — Material, and the in-development Emerald, Helix, and Onyx — each a *complete framework* with its own visual language, built directly on the v0 primitives\n- **Vuetify** — orchestration and the defaults system that ties it together\n\nThe clearest proof that the foundation is solid is that we are rebuilding on it ourselves. Vuetify's own internals are being refactored to consume v0 directly — the frozen 1.0 surface is exactly what that work stands on. A decade of Vuetify — 41k+ GitHub stars, millions of monthly downloads, MIT-licensed with nothing gated behind a paid tier — is being rebuilt from this layer up.\n\n---\n\n## Logic without components\n\nThe fastest way to understand v0 is to use a composable with nothing rendered. `createSelection` is a complete multi-selection engine — mandatory rules, batch operations, enrollment — and it does not care whether you ever draw a list:\n\n```ts\nimport { createSelection } from '@vuetify/v0'\n\nconst selection = createSelection({ mandatory: true })\n\nconst home = selection.register({ value: 'home' })\nconst search = selection.register({ value: 'search' })\n\nhome.select() // ticket self-method — select this item\nhome.isSelected.value // -> true\nselection.selectedIds // -> reactive Set of selected ids\nselection.selectedValues.value // -> reactive Set { 'home' }\n```\n\nWhen you *do* want UI, the same logic backs a headless compound component. The root owns state; the sub-components read it through context — no prop-drilling between siblings:\n\n```html\n\n\n\n```\n\nBoth examples run live in the docs — [createSelection](https://0.vuetifyjs.com/composables/selection/create-selection) and [Tabs](https://0.vuetifyjs.com/components/disclosure/tabs) — and every example on the site is a multi-file, copy-paste recipe you can open in the playground.\n\nWhere it gets interesting is at application scale. [DevKey](https://devkey.vuetifyjs.com), a developer API dashboard, is the reference implementation — maintained in lockstep with every release. Its dashboard is almost entirely wiring: a `Tabs` view over a data layer that is `useStorage` and nothing more, driving the components that render it.\n\n![The DevKey dashboard — API-key management built on Vuetify0](https://cdn.vuetifyjs.com/docs/images/blog/announcing-vuetify0-v1/devkey-dashboard.png \"DevKey — the Vuetify0 reference implementation\"){ width=100% }\n\nThe code behind that view is mostly this:\n\n```html\n\n\n\n```\n\nThe stable spine here — `Tabs` and the `useStorage`-backed data layer — is exactly what 1.0 freezes. The components it orchestrates (`DkTable`, the create-key dialog, the command palette) are built on preview primitives today; the data-table components promote to stable in v1.1, and the rest follow across the 1.x line. The wiring above doesn't change when they do. Build it yourself with the [DevKey integration guide](https://0.vuetifyjs.com/guide/integration/devkey).\n\n---\n\n## Proven, not promised\n\nThe 1.x guarantee is only worth as much as the testing behind it. Heading into 1.0:\n\n- **6,200+ passing unit tests** across the primitives, with average coverage above 98% and 80 of them at 100%.\n- **16 benchmark suites** regenerated on every release against a fixed apparatus, so regressions surface as history rather than anecdotes — `mergeDeep`, for instance, clears 1.7M+ ops/sec on a shallow merge, and a recent rewrite cut large-grid sort time by roughly 28×. The [benchmarks page](https://0.vuetifyjs.com/guide/fundamentals/benchmarks) documents the methodology and per-primitive results.\n- **A dedicated security pass** hardened the composables against prototype pollution and CSS injection, and validated theme, locale, and feature-flag inputs against safe charsets.\n- **100% TypeScript, zero runtime CSS.** The package ships no styles, and exports are annotated so bundlers drop anything you do not import.\n\nv0 is also built to be understood by the tools people now build with: every documentation page has an Ask AI option, the docs publish `llms.txt` and `llms-full.txt`, and the [Vuetify MCP server](https://0.vuetifyjs.com/guide/tooling/vuetify-mcp) wires the full API reference into your editor.\n\n---\n\n## The road to v1.x { #the-road-to-v1-x }\n\n1.0 locks the engine. Everything on the roadmap from here is components promoting onto that stable foundation — and because the logic already shipped and is already frozen, each one is assembly over a proven primitive, not a rewrite. The milestones are public:\n\n- **v1.1** — DataTable and DataGrid components over the shipped `createDataTable` and `createDataGrid`, plus the Alert component\n- **v1.2** — Tour, a headless primitive for guided product tours and feature discovery\n- **v1.3** — Virtualizer, Kanban, and Otp over the shipped `createVirtual`, `createKanban`, and `createOtp`\n- **v1.4** — TimePicker, headless and accessible time selection\n- **v1.5** — DatePicker and DateRangePicker for single dates and ranges\n\nBeyond the components, the first design systems — Emerald and Onyx — come next, and the whole surface is authored for forward-compatibility with Vue Vapor. Track it on the [roadmap](https://0.vuetifyjs.com/roadmap) and the [milestones](https://github.com/vuetifyjs/0/milestones).\n\n---\n\n## Get started\n\n```bash\npnpm install @vuetify/v0\n```\n\nNo plugin to register, nothing global. Import what you need:\n\n```ts\nimport { createSelection } from '@vuetify/v0'\nimport { Dialog } from '@vuetify/v0/components'\n```\n\nThe [getting-started guide](https://0.vuetifyjs.com/introduction/getting-started) covers setup, and [Vuetify0 Skillz](https://0.vuetifyjs.com/skillz) walks through the docs, search, and examples interactively.\n\n---\n\n## FAQ\n\n### Does 1.0 mean the components are stable?\n\nThe spine is. Thirteen components — the structural and selection primitives the rest of the library builds on, like Tabs, Checkbox, Radio, and Switch — are stable and semver-locked at 1.0, alongside nineteen composables and seventeen utilities. The remaining components are `preview` and promote individually as they meet the bar. For a meta-framework, the engine and its load-bearing components are what must not move first; everything downstream inherits that stability.\n\n### Can I use it in production?\n\nYes. Code written against the beta API ran through six beta releases, the release candidate, and into 1.0 without changes, and the surface freeze is enforced by CI on every pull request. The stable set will not break under you within 1.x.\n\n### Can I use Vuetify0 alongside Vuetify 4?\n\nYes. They do not conflict, and you can adopt v0 primitives inside a Vuetify 4 app today. Vuetify's own internals are being refactored to consume v0 directly.\n\n### When do the draft components ship?\n\nEach is plotted on the public [milestones](https://github.com/vuetifyjs/0/milestones): table components in v1.1, tours in v1.2, virtualized lists, Kanban, and OTP in v1.3, then time and date pickers in v1.4 and v1.5. Each promotes when it is ready.\n\n### How do I report a problem or contribute?\n\nBug reports go through [issues.vuetifyjs.com](https://issues.vuetifyjs.com). The [contributing guide](https://0.vuetifyjs.com/introduction/contributing) covers local setup, and [Discord](https://community.vuetifyjs.com) is the place to discuss before you build.\n\n---\n\n- **Documentation** — [0.vuetifyjs.com](https://0.vuetifyjs.com)\n- **Getting Started** — [Installation guide](https://0.vuetifyjs.com/introduction/getting-started)\n- **GitHub** — [vuetifyjs/0](https://github.com/vuetifyjs/0)\n- **Report an issue** — [issues.vuetifyjs.com](https://issues.vuetifyjs.com)\n- **Contributing** — [Contributing guide](https://0.vuetifyjs.com/introduction/contributing)\n- **Discord** — [community.vuetifyjs.com](https://community.vuetifyjs.com)\n\n*Vuetify0 is part of the [Vuetify](https://vuetifyjs.com) ecosystem. Documentation is at [0.vuetifyjs.com](https://0.vuetifyjs.com); source is on [GitHub](https://github.com/vuetifyjs/0).*\n\n\n---\nlayout: blog\nmeta:\n title: April 2025 Update\n description: April delivered tangible progress on MCP, the new theming engine, component refinements, docs, ESLint v4, and tooling across the Vuetify ecosystem.\n keywords: Vuetify April 2025, Model Context Protocol, Vuetify theming, ESLint flat config, Vuetify Playground, Tailwind integration\n---\n\n# April 2025 Update\n\nThis month is packed full of exciting updates and progress across the Vuetify ecosystem.\n\n---\n\n🖊️ John Leider • 📅 May 1st, 2025\n\n\n\n---\n\n## Building Momentum\n\nApril was a month of execution. Multiple long-standing features landed, foundational work for future flexibility accelerated, and we’re seeing clearer paths emerge around how Vuetify can scale—technically, visually, and in terms of contributor access.\n\nFrom labs promotions like VNumberInput and VSnackbarQueue, to the start of public-facing infrastructure like @vuetify/mcp, the team is pushing forward on all fronts. This kind of momentum is what sets up big things for the summer and fall—especially as we close in on shipping the new theming engine and continue to clean up performance bottlenecks.\n\n::: success\n\nCool example of the month: [VScrollSelect](https://play.vuetifyjs.com/playgrounds/CS5a9g) by [J-Sek](https://github.com/J-Sek)\n\n:::\n\n---\n\n## Table of Contents\n\n- [Building Momentum](#building-momentum)\n - [Releases](#releases)\n - [MCP soon](#mcp-soon)\n - [Theming evolved](#theming-evolved)\n - [Performance improvements](#performance-improvements)\n- [Ecosystem updates](#ecosystem-updates)\n - [DX Efforts](#dx-efforts)\n - [Unvuetify](#unvuetify)\n - [Vuetify One teams](#vuetify-one-teams)\n - [Vuetify Play](#vuetify-play)\n - [Vuetify Issues](#vuetify-issues)\n- [The Road Ahead](#the-road-ahead)\n\n### Releases\n\nThe month of April saw the release of \"Andromeda\", the latest version of Vuetify, which includes a host of new features, improvements, and bug fixes. Most notably, [VNumberInput](https://vuetifyjs.com/components/number-inputs/) and [VSnackbarQueue](https://vuetifyjs.com/components/snackbar-queue/) were promoted from Labs to the Core framework! We've also followed up with several patch releases to address bugs and improve stability.\n\n![Hero image for andromeda release notes](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/andromeda-release-banner.png \"Andromeda release notes hero image\"){ height=150}\n\n**Details:**\n\n- [v3.8.0](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.0)\n- [v3.8.1](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.1)\n- [v3.8.2](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.2)\n- [v3.8.3](https://vuetifyjs.com/getting-started/release-notes/?version=v3.8.3)\n\n### MCP soon\n\nOne of the most exciting developments underway is the creation of [MCP: Model Context Protocol](https://modelcontextprotocol.io/introduction) and our efforts to provide LLMs with the most up to date framework information using it. The **@vuetify/mcp** package represents our attempt to improve how developers interact with Vuetify through AI and LLM-powered tools.\n\n![Image of outdated LLM response showing Vuetify 2](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/outdated-llm-responses.png \"Outdated LLM response\"){ height=500 }\n\nToday, developers often receive outdated or inaccurate help from AI chatbots because these models aren't trained on Vuetify’s latest updates and new innovations we're building. MCP is our answer to that problem.\n\nWe want to ensure developers have access to contextually accurate, up-to-date, and deeply integrated Vuetify tools, documentation, snippets and much more right when they need it.\n\n![Image of VSCode in Agent mode](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/vuetify-mcp.png \"VSCode agent querying vuetify-mcp\"){ height=550 }\n\nThis initiative won't just improve AI responses—it will fundamentally change how accessible and powerful Vuetify development can be.\n\nMCP is a major step towards empowering our community even further and we look forward to making the package public soon (like very soon).\n\n**Details:** [@vuetify/mcp](https://github.com/vuetifyjs/mcp)\n\n### Theming evolved\n\nAlongside MCP, another major focus has been Vuetify’s theming system. Our goal is to enable full customization of Vuetify — allowing developers to use any UI library, support long-awaited Material Design 3, and adapt the framework effortlessly to a wide variety of design systems. This includes things such as:\n\n- First party Tailwind integration.\n- Support for unstyled mode that includes only the necessary styles for components to function.\n- New and improved ways of interacting with the theme system.\n\nThe work happening right now is a foundational step toward that vision. We're targeting an October reveal for this theming overhaul and will be teasing more about it in the months ahead. Here's a small preview of the new theming API in action:\n\n```html\n\n\n\n```\n\nThese changes focus on expanding Vuetify’s flexibility, making it an even more powerful tool for projects of every scale and style.\n\n**Details:**\n\n- [PR#21244](https://github.com/vuetifyjs/vuetify/pull/21244)\n- [PR#21224](https://github.com/vuetifyjs/vuetify/pull/21224)\n- [Commit 3190331](https://github.com/vuetifyjs/vuetify/commit/3190331e70f42b7fdf4d7ee04f662b15eefde026)\n- [Commit abfdb77](https://github.com/vuetifyjs/vuetify/commit/abfdb777e0e00d4a1798f52d7e4c118e7409fcb9)\n\n### Performance improvements\n\nThis month, we focused on performance improvements across the board, including saving a bunch of overhead associated with computed caching and call frequency.\n\nFor those anticipating the release of [VTreeview](https://vuetifyjs.com/components/treeview), there has been movement on an [upstream](https://github.com/vuejs/babel-plugin-jsx/issues/712) issue that was bottlenecking performance. Once released, we will be able to wrap up the component and move it to the Core framework 🎉.\n\n**Details:**\n\n- [PR#21167](https://github.com/vuetifyjs/vuetify/pull/21167)\n- [Commit 8d798e3](https://github.com/vuetifyjs/vuetify/commit/8d798e36baf86f04eebf2828be0cffa0dc31053a)\n- [vue-macros#942](https://github.com/vue-macros/vue-macros/pull/942)\n\n## Ecosystem updates\n\nFrom the release of team subscriptions for Vuetify One, to major rewrites of tools like Vuetify Create and the modernized Vuetify Issues site, April was about refining the developer experience across the board. New tooling like @unvuetify is pushing boundaries with Nuxt and auto-import support, and MCP continues to bridge the gap between AI and accurate Vuetify usage.\n\n### DX efforts\n\nA major focus has been making Vuetify more accessible to developers at all levels.\n\n- **MCP**: Coding companion that provides contextually accurate, up-to-date, and deeply integrated Vuetify tools, documentation, snippets and much more right when you need it.\n- **Vuetify Create**: Multiple updates with improvements and planning for 3.0 representing a total rewrite of our project scaffolding tool.\n- **Labs Components**: Added auto-import support by default for labs components.\n- **Internationalization**: Expansion of translations including Spanish additions to the documentation.\n- **Modern ESLint Configuration**: Complete rewrite of our ESLint configuration with a functional approach, being rolled out across all repositories.\n\n**Details:**\n\n- [create/releases](https://github.com/vuetifyjs/create/releases)\n- [ESLint configuration](https://github.com/vuetifyjs/eslint-config-vuetify)\n- [Commit 98ef110](https://github.com/vuetifyjs/vuetify-loader/commit/98ef1106fb3875a5079d309986de61e12cd5683d)\n\n### Unvuetify\n\nThe motivation behind @unvuetify is simple: existing plugins aren’t keeping up with the evolving capabilities of Vue and Nuxt. Features like lazy hydration, auto-importing, and tree shaking are either missing or cumbersome in older tools.\n\nThis monorepo isn’t a hard replacement — you can still use vite-plugin-vuetify or webpack-plugin-vuetify if they suit your needs. But if you're working with Nuxt 3, Vue 3.5, or want more flexibility and performance, @unvuetify is built for you.\n\nCreated [@unvuetify](https://github.com/userquin/unvuetify-monorepo) repository to enable:\n\n- Vue Lazy Hydration support: ready to use Vue Lazy Hydration with Vuetify components and Nuxt 3/4.\n- Extensible: allow prefixing Vuetify components, directives and composables with Vuetify prefix.\n- VSCode directives suggestions.\n- Nuxt 3/4 utilities: drop a simple Nuxt module and it will auto-import all Vuetify components, directives and composables for you.\n- and more...\n\n**Details:**\n\n- [@unvuetify/shared](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/shared): utilities to resolve Vuetify components and directives\n- [@unvuetify/unimport-presets](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/unimport-presets): presets to auto-import Vuetify composables and directives\n- [@unvuetify/unplugin-vue-components-resolvers](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/unplugin-vue-components-resolvers): resolvers to auto-import Vuetify components and directives\n- [@unvuetify/vite-styles-plugin](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/styles-plugin): Vite plugin to load Vuetify sass/scss styles with Nuxt 3 SSR support\n- [@unvuetify/nuxt-utils](https://github.com/userquin/unvuetify-monorepo/tree/main/packages/nuxt-utils): utilities to configure Vuetify composables, directives, components and styles in your Nuxt 3 application\n\n### Vuetify One teams\n\nWe have recently updated Vuetify One to support teams, which allows you to invite up to 25 members to collaborate on your Vuetify projects. This update is designed to share subscription benefits across your team.\n\n![Image of Vuetify One teams subscription panel](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/one-teams.png \"Vuetify One teams subscription panel\"){ height=400 }\n\nSubscribe by logging into Vuetify One (top right) and clicking on **Subscriptions**. If you have any issues or questions, please reach out to us on [Discord](https://community.vuetifyjs.com).\n\n**Details:** [PR#15](https://github.com/vuetifyjs/one/pull/15)\n\n### Vuetify Play\n\nOf the many changes coming to [Vuetify Play](https://play.vuetifyjs.com/), one of the longest requested features is finally here: **router support**! This means you can now create and share Vuetify Play projects that include Vue Router, allowing for more complex and interactive examples.\n\n![Image of Vuetify Play with router support](https://cdn.vuetifyjs.com/docs/images/blog/april-2025-update/play-router.png \"Vuetify Play with router support\"){ height=250 }\n\nWe are also in the process of updating the entire Vuetify Play interface to be more intuitive and user-friendly. This includes a new design, improved navigation, and better organization of examples and components. We look forward to sharing more details in the coming months.\n\n**Details:**\n\n- [PR#7](https://github.com/vuetifyjs/play/pull/7)\n- [Commit 0e89a33](https://github.com/vuetifyjs/play/commit/0e89a334f241d440987908a456c205bed53e96d6)\n\n### Vuetify Issues\n\nWe are wrapping up the new [Vuetify Issue Generator](https://issues.vuetifyjs.com/), which will replace the current system (still on Vuetify v1.5!).\n\n\n\nThe new interface is faster, clearer, and built with Vuetify 3 from the ground up.\n\n## The Road Ahead\n\nMay is all about delivery. MCP will ship publicly, and early previews of the new theming system will start rolling out with documentation and migration guides. We're also beginning to lay the foundation for Vuetify 4. The focus is simple: ship real features, reduce friction, and keep moving fast.\n\nMore to come next month—stay tuned.\n\n\n"}
NameTypeDefaultDescription
\n keys\n \n MaybeRef<string | undefined>\n \n required\n \n

The key combination string or reactive reference to a key combination. Supports modifiers (ctrl, cmd, alt, shift, meta) and key sequences separated by dashes. Changes to reactive refs are automatically applied.

\n
\n callback\n \n (e: KeyboardEvent) => void\n \n required\n \n

Function to execute when the hotkey is triggered. Receives the KeyboardEvent as a parameter.

\n
\n options\n \n HotkeyOptions\n \n {}\n \n

Optional configuration object to customize hotkey behavior. All options support reactive refs and will update automatically when changed.

\n
NameTypeDefaultDescription
\n event\n \n MaybeRef<'keydown' | 'keyup'>\n \n 'keydown'\n \n

The keyboard event type to listen for. Can be reactive - changing this will automatically re-register the event listener.

\n
\n inputs\n \n MaybeRef<boolean>\n \n false\n \n

Whether to trigger hotkeys when input elements (input, textarea, contenteditable) are focused. When false, hotkeys are disabled in input contexts. Changes to reactive refs take effect immediately.

\n
\n preventDefault\n \n MaybeRef<boolean>\n \n true\n \n

Whether to call preventDefault() on the keyboard event when the hotkey matches. Can be reactive to dynamically control event prevention.

\n
\n sequenceTimeout\n \n MaybeRef<number>\n \n 1000\n \n

Timeout in milliseconds for key sequences. If the next key in a sequence isn't pressed within this time, the sequence resets. Changes to reactive refs apply to new sequences.

\n
TypeDescription
\n () => void\n \n

Cleanup function that removes the keyboard event listener. Automatically called when the component unmounts if used within a Vue component setup context.

\n