vuetify-skilld by harlan-zw/vue-ecosystem-skills
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill vuetify-skilldvuetifyVue 材料设计组件框架
版本: 4.0.1 标签: v1-stable: 1.5.24, v2-stable: 2.7.2, next: 4.0.1, dev: 4.0.1, v3-stable: 3.12.3, latest: 4.0.3
参考: 文档 — API 参考、指南 • GitHub Issues — 错误、变通方案、边缘情况 • GitHub Discussions — 问答、模式、示例 • 版本发布 — 更新日志、破坏性变更、新 API
本节记录了特定版本的 API 变更 — 请优先关注近期的主要/次要版本发布。
破坏性变更: VRow / VCol 网格 — 使用 CSS gap 完全重构,替代了负边距。 属性已移除(请使用 ), 上的 / 和 上的 / 已移除,推荐使用工具类
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
densedensity="compact"VRowalignjustifyVColorderalign-self破坏性变更: MD3 排版 — 为符合 Material Design 3 规范,变体名称已重命名:h1-h3 -> display-*, h4-h6 -> headline-*, subtitle-1/body-1 -> body-large, button/subtitle-2 -> label-large 来源
破坏性变更: MD3 高度 — 高度级别从 25 个 (0-24) 减少到 6 个 (0-5),以与 MD3 密度无关像素级别对齐 来源
破坏性变更: VBtn 默认值 — 默认移除了 text-transform: uppercase。$button-stacked-icon-margin Sass 变量已被 $button-stacked-gap 替换 来源
破坏性变更: VSelect / VAutocomplete / VCombobox — item 插槽属性已重命名为 internalItem。item 属性现在作为 internalItem.raw 的别名 来源
破坏性变更: VForm 插槽 — isValid、errors 和 isDisabled 插槽变量现在是非包装的值,而不是 Ref 对象 来源
新增: VSnackbarQueue — 在 v4 中重写,以支持同时显示多个 snackbar;default 插槽已重命名为 item 来源
新增: VRow gap 属性 — 提供对网格间距的精细控制,接受数字、字符串或 [x, y] 数组 来源
新增: VAvatarGroup (实验性) — 新的实验室组件,用于分组多个头像并支持重叠 来源
新增: VCommandPalette (实验性) — 新的实验室组件,为应用程序命令提供搜索和操作界面 来源
其他变更: VCalendar 从实验室提升为正式组件 · VHotkey 从实验室提升为正式组件 · VToolbar 新增 location 属性 · VAvatar 新增 badge 属性 · VProgressCircular 新增 reveal 属性 · VTreeview 新增 indent-lines 属性 · vuetify/styles/core 新增入口点 · system 默认主题 · VSnackbar 移除 multi-line 属性 · VContainer fill-height 行为变更
在 useHotkey 组合式函数中使用 cmd 修饰符以实现跨平台兼容性 — 在 Mac 上自动解析为 Command 键,在 PC 上解析为 Control 键 来源
// 推荐:在 Mac 和 PC 上都能工作 useHotkey('cmd+s', (e) => saveDocument(e))
// 避免:硬编码 'ctrl' 可能在 Mac 上导致冲突或感觉不地道 useHotkey('ctrl+s', (e) => saveDocument(e))
在 defaults 配置中将 class 和 style 应用到特定的组件键 — 这些在 global 默认键中不受支持 来源
// 推荐 createVuetify({ defaults: { VBtn: { class: 'text-none', style: { textTransform: 'none' } } } })
// 避免:在 global 中 class 和 style 会被忽略 createVuetify({ defaults: { global: { class: 'text-none' } } })
通过重新定义 CSS 层顺序来解决 Vuetify 和 TailwindCSS 之间的样式冲突 — 将 Vuetify 的样式放在一个专门的层中,其优先级低于 Tailwind 的基础层 来源
/* main.css */ @layer theme, base, vuetify, components, utilities; @import 'vuetify/styles' layer(vuetify); @import 'tailwindcss';
将 v-text-field 与 decimal.js 结合使用以进行高精度十进制算术运算 — VNumberInput 内部使用 toFixed(),可能会受到标准 JavaScript 浮点数精度问题的影响 来源
使用全局状态(例如 Pinia)和 v-snackbar-queue 来集中管理 snackbar 消息 — 允许通过向共享数组推送消息,从应用程序的任何部分触发通知 来源
使用 order 属性来显式控制布局组件的优先级 — 覆盖了默认行为(默认情况下优先级仅由标记顺序决定) 来源
利用 useDate() 的 parseISO 和 toISO 方法来标准化日期字符串 — VDateInput 和其他日期组件内部期望并返回原生的 JS Date 对象 来源
使用 v-command-palette (实验性) 实现键盘驱动的专业用户工作流 — 提供一个预配置、可访问且可搜索的对话框界面,自动实现 ARIA 最佳实践 来源
在 Vuetify 4 迁移期间,使用 @layer vuetify-overrides 块来恢复之前的负边距/内边距网格行为 — 当现有布局依赖于旧系统而不是新的 CSS gap 属性时,这是必要的 来源
@layer vuetify-overrides { .v-row { gap: unset; margin: calc(var(--v-col-gap-y) * -.5) calc(var(--v-col-gap-x) * -.5); } }
每周安装量
74
代码仓库
GitHub 星标数
145
首次出现
2026年2月19日
安全审计
安装于
github-copilot65
codex62
gemini-cli61
opencode60
amp60
kimi-cli60
vuetifyVue Material Component Framework
Version: 4.0.1 Tags: v1-stable: 1.5.24, v2-stable: 2.7.2, next: 4.0.1, dev: 4.0.1, v3-stable: 3.12.3, latest: 4.0.3
References: Docs — API reference, guides • GitHub Issues — bugs, workarounds, edge cases • GitHub Discussions — Q&A, patterns, recipes • Releases — changelog, breaking changes, new APIs
This section documents version-specific API changes — prioritize recent major/minor releases.
BREAKING: VRow / VCol Grid — complete overhaul using CSS gap instead of negative margins. dense prop removed (use density="compact"), align/justify on VRow and order/align-self on VCol removed in favor of utility classes source
BREAKING: MD3 Typography — variant names renamed for Material Design 3 compliance: h1-h3 -> display-*, h4-h6 -> headline-*, subtitle-1/body-1 -> body-large, button/subtitle-2 -> label-large
BREAKING: MD3 Elevation — elevation levels reduced from 25 (0-24) to 6 (0-5) to align with MD3 density-independent pixel levels source
BREAKING: VBtn Defaults — text-transform: uppercase removed by default. $button-stacked-icon-margin Sass variable replaced by $button-stacked-gap source
BREAKING: VSelect / VAutocomplete / VCombobox — item slot prop renamed to internalItem. The item prop is now an alias for internalItem.raw source
BREAKING: VForm Slot — isValid, errors, and isDisabled slot variables are now unwrapped values instead of Ref objects source
NEW: VSnackbarQueue — rewritten in v4 to support showing multiple snackbars simultaneously; default slot renamed to item source
NEW: VRow gap prop — provides fine-grained control over grid spacing, accepting numbers, strings, or [x, y] arrays source
NEW: VAvatarGroup (experimental) — new labs component for grouping multiple avatars with overlapping support source
NEW: VCommandPalette (experimental) — new labs component providing a search and action interface for application commands source
Also changed: VCalendar promoted from labs · VHotkey promoted from labs · VToolbar location prop new · VAvatar badge prop new · VProgressCircular reveal prop new · VTreeview indent-lines props new · vuetify/styles/core new entry point · default theme · removed · behavior changed
Use the cmd modifier in the useHotkey composable for cross-platform compatibility — automatically resolves to Command on Mac and Control on PC source
// Preferred: works on both Mac and PC useHotkey('cmd+s', (e) => saveDocument(e))
// Avoid: hardcoding 'ctrl' may cause conflicts or feel non-idiomatic on Mac useHotkey('ctrl+s', (e) => saveDocument(e))
Apply class and style to specific component keys in the defaults configuration — these are not supported in the global defaults key source
// Preferred createVuetify({ defaults: { VBtn: { class: 'text-none', style: { textTransform: 'none' } } } })
// Avoid: class and style are ignored in global createVuetify({ defaults: { global: { class: 'text-none' } } })
Weekly Installs
74
Repository
GitHub Stars
145
First Seen
Feb 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
github-copilot65
codex62
gemini-cli61
opencode60
amp60
kimi-cli60
前端开发AI工具 | 5大专业能力构建生产级前端页面 | 设计工程与动效系统
759 周安装
systemVSnackbarmulti-lineVContainerfill-heightResolve style conflicts between Vuetify and TailwindCSS by redefining CSS layer order — place Vuetify's styles in a dedicated layer with lower precedence than Tailwind's base layer source
/* main.css */ @layer theme, base, vuetify, components, utilities; @import 'vuetify/styles' layer(vuetify); @import 'tailwindcss';
Use v-text-field with decimal.js for high-precision decimal arithmetic — VNumberInput uses toFixed() internally and may suffer from standard JavaScript floating-point inaccuracies source
Centralize snackbar messages using global state (e.g., Pinia) with v-snackbar-queue — allows triggering notifications from any part of the application by pushing to a shared array source
Use the order prop to explicitly control layout component priority — overrides the default behavior where priority is determined solely by markup order source
Utilize useDate()'s parseISO and toISO methods for standardizing date strings — VDateInput and other date components internally expect and return native JS Date objects source
Use v-command-palette (experimental) for keyboard-driven power-user workflows — provides a pre-configured, accessible, and searchable dialog interface that implements ARIA best practices automatically source
Restore previous negative-margin/padding grid behavior during Vuetify 4 migration using the @layer vuetify-overrides block — necessary when existing layouts rely on the legacy system instead of the new CSS gap property source
@layer vuetify-overrides { .v-row { gap: unset; margin: calc(var(--v-col-gap-y) * -.5) calc(var(--v-col-gap-x) * -.5); } }