Direct answer
Vuetify 3 expects cols to be a number. String values such as cols="12" still work in many current 3.x releases but trigger a Vue prop-validation warning in development and are treated as deprecated. There is no publicly confirmed release date for removing string coercion entirely. For a workload of 1,000 v-col elements, the performance difference between numeric and string cols is not measured in published Vuetify benchmarks and is expected to be negligible, because string-to-number conversion happens once during prop resolution rather than on every frame.
Confirmed behavior versus likely explanation
| Item | Status |
|---|
cols prop type in Vuetify 3 type definitions | Number |
String cols in development mode | Triggers prop-validation warning |
| Rendered output when coercion succeeds | Identical grid class, e.g. col-12 |
| Removal timeline for string support | Not publicly confirmed |
| Measurable frame-rate or CPU difference at 1,000 columns | Not established; expected to be negligible |
The likely explanation for the change is alignment with Vue 3 prop validation and removal of one-time runtime string parsing. That parsing cost occurs at component initialization, so eliminating it does not meaningfully improve frame rate during scrolling or updates.
Migration steps
- Search Vue single-file components for static string usage, for example
cols="12".
- Replace static strings with numeric bindings:
:cols="12".
- If using TypeScript, confirm the value passed to
cols is typed as number; strings will be flagged by the type checker.
- Run the app in development and inspect the browser console for
Invalid prop warnings related to v-col.
- Verify the rendered HTML class is unchanged by comparing an element using
:cols="12" against one previously using cols="12"; both should produce col-12.
Tooling and auditing
No official Vuetify ESLint rule is documented for auditing cols. A practical approach is a template search or custom ESLint rule that flags static string attributes on v-col. Example scoped search command:
grep -R 'cols="[0-9][0-9]*"' src --include="*.vue"
This command is read-only and only reports matches; it does not modify files.
Missing diagnostic detail
Are you using TypeScript with Vuetify's official type definitions? If yes, string cols values are build errors rather than only runtime warnings, which changes the migration priority.
vuetify