New to Kendo UI for Vue? Start a free 30-day trial

Available Codemods

Updated on Nov 10, 2026

This page outlines the codemods that the Kendo CLI runs when you migrate Kendo UI for Vue packages between major versions. For more information on how to run the migration and on its options, see Assisted Migration Tooling and Kendo CLI Options.

Kendo UI for Vue v10.0.0 to v11.0.0

Quick Guide

To migrate a specific Kendo UI for Vue package from v10.0.0 to v11.0.0, run the following command in your project root:

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-<package-name> --from=10 --to=11 --ai-mode

If not already installed, you will be prompted to install the Kendo CLI when running this command for the first time.

This command checks for available updates for the specified package and its peer dependencies that are already present in the project, prompts you to install them, and runs all relevant codemods.

Most v11.0.0 codemods flag the affected files and print migration instructions that you apply manually. These instruction-only codemods run only when you use the --ai-mode option. Codemods that make automatic changes are listed separately in each package section.

For the complete list of changes in this release, see Breaking Changes in 11.0.0 and Rendering Changes in 11.0.0.

Best Practices

Migrate between consecutive major versions.
Migrate one package at a time.

Dropdowns

To migrate the Dropdowns package from v10.0.0 to v11.0.0, run the following command in your project root:

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-dropdowns --from=10 --to=11 --ai-mode

All Dropdowns codemods perform the following:

Scan your .js, .jsx, .ts, .tsx, .vue, .css, .scss, .sass, and .less files for imports from @progress/kendo-vue-dropdowns and the affected CSS classes. The detection recognizes custom import names as well.
Preserve your existing code. Each instruction-only codemod only flags the affected files and surfaces the migration instructions.

Dynamic template bindings (v-bind="obj", :[name]), lang="pug" templates, and components registered globally with app.component() are not analyzed. Review them manually.

The following table outlines the specific Dropdowns codemods:

Codemod Description

Codemod	Description
`dropdowns-tree-item-rendering-changes`	Flags the files affected by the custom items of the `DropDownTree` and `MultiSelectTree`, which are rendered without the `k-treeview-leaf-text` element. Detects the `item` prop of `DropDownTree` and `MultiSelectTree`. Detects the `k-treeview-leaf-text` CSS class. Instructs you to update the selectors that expect `.k-treeview-leaf-text` around a custom item, or to add the class to the root element of the custom item.

dropdowns-tree-item-rendering-changes

Flags the files affected by the custom items of the DropDownTree and MultiSelectTree, which are rendered without the k-treeview-leaf-text element.

Detects the item prop of DropDownTree and MultiSelectTree.
Detects the k-treeview-leaf-text CSS class.
Instructs you to update the selectors that expect .k-treeview-leaf-text around a custom item, or to add the class to the root element of the custom item.

Grid

To migrate the Grid package from v10.0.0 to v11.0.0, run the following command in your project root:

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-grid --from=10 --to=11 --ai-mode

All Grid codemods perform the following:

Scan your .js, .jsx, .ts, .tsx, and .vue files for the affected members of the Grid template ref.
Preserve your existing code. Each instruction-only codemod only flags the affected files and surfaces the migration instructions.

Calls that build the method name dynamically, for example gridRef.value[name](), are not detected. Review them manually.

The following table outlines the specific Grid codemods:

Codemod Description

Codemod	Description
`grid-handle-export-as-pdf`	Flags the files that call the removed `exportAsPdf()` method of the Grid template ref (`GridHandle`). Detects the `exportAsPdf` calls and declarations in any script or `.vue` file, even if it does not import from `@progress/kendo-vue-grid`, for example in composables that receive the Grid template ref. Instructs you to wrap the Grid in the `GridPdfExport` component from `@progress/kendo-vue-pdf` and to call the `save()` method of its template ref.

grid-handle-export-as-pdf

Flags the files that call the removed exportAsPdf() method of the Grid template ref (GridHandle).

Detects the exportAsPdf calls and declarations in any script or .vue file, even if it does not import from @progress/kendo-vue-grid, for example in composables that receive the Grid template ref.
Instructs you to wrap the Grid in the GridPdfExport component from @progress/kendo-vue-pdf and to call the save() method of its template ref.

Indicators

To migrate the Indicators package from v10.0.0 to v11.0.0, run the following command in your project root:

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-indicators --from=10 --to=11 --ai-mode

All Indicators codemods perform the following:

Scan your .js, .jsx, .ts, .tsx, and .vue files for imports from @progress/kendo-vue-indicators and the affected props. The detection recognizes custom import names as well.
Preserve your existing code. Each instruction-only codemod only flags the affected files and surfaces the migration instructions.

Dynamic template bindings (v-bind="obj", :[name]), lang="pug" templates, and components registered globally with app.component() are not analyzed. Review them manually.

The following table outlines the specific Indicators codemods:

Codemod Description

Codemod	Description
`badge-position-type`	Flags the files affected by the `position` prop of the `Badge` and `BadgeContainer`, which no longer accepts any string, and by the new `'inline'` position. Detects the `position` prop of `Badge` and `BadgeContainer` bound to an expression or set to a value other than `'edge'`, `'outside'`, and `'inside'`, for example `'inline'` or `'top'`. Detects the `BadgeProps` and `BadgeContainerProps` types in files that import from `@progress/kendo-vue-indicators` and reference `position`, including type-only imports. Instructs you to type the bound values as `BadgePosition` or to narrow them to a supported value.

badge-position-type

Flags the files affected by the position prop of the Badge and BadgeContainer, which no longer accepts any string, and by the new 'inline' position.

Detects the position prop of Badge and BadgeContainer bound to an expression or set to a value other than 'edge', 'outside', and 'inside', for example 'inline' or 'top'.
Detects the BadgeProps and BadgeContainerProps types in files that import from @progress/kendo-vue-indicators and reference position, including type-only imports.
Instructs you to type the bound values as BadgePosition or to narrow them to a supported value.

Layout

To migrate the Layout package from v10.0.0 to v11.0.0, run the following command in your project root:

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-layout --from=10 --to=11 --ai-mode

All Layout codemods perform the following:

Scan your .js, .jsx, .ts, .tsx, .vue, .css, .scss, .sass, and .less files for imports from @progress/kendo-vue-layout and the affected CSS classes. The detection recognizes custom import names as well.
Preserve your existing code. Each instruction-only codemod only flags the affected files and surfaces the migration instructions.

Dynamic template bindings (v-bind="obj", :[name]), lang="pug" templates, and components registered globally with app.component() are not analyzed. Review them manually.

The following table outlines the specific Layout codemods:

Codemod Description

Codemod	Description
`menu-rendering-changes`	Flags the files affected by the removed `Menu` and `ContextMenu` classes and by the changed `ContextMenu` root list and popup list markup. Detects the `k-widget`, `k-first`, `k-last`, `k-group`, `k-menu`, `k-reset`, `k-menu-vertical`, `k-context-menu`, and `k-menu-group-md` CSS classes in files that use `Menu` or `ContextMenu` (named or namespace imports), or the `k-menu` and `k-context-menu` classes.

menu-rendering-changes

Flags the files affected by the removed Menu and ContextMenu classes and by the changed ContextMenu root list and popup list markup.

Detects the k-widget, k-first, k-last, k-group, k-menu, k-reset, k-menu-vertical, k-context-menu, and k-menu-group-md CSS classes in files that use Menu or ContextMenu (named or namespace imports), or the k-menu and k-context-menu classes.

Scheduler

To migrate the Scheduler package from v10.0.0 to v11.0.0, run the following command in your project root:

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-scheduler --from=10 --to=11 --ai-mode

All Scheduler codemods perform the following:

Scan your .js, .jsx, .ts, .tsx, .vue, .css, .scss, .sass, and .less files for imports from @progress/kendo-vue-scheduler and the affected CSS classes. The detection recognizes custom import names as well. The scheduler-data-action-prop-rename codemod also scans the files that do not import the Scheduler package.
Automatically rename recurrenceButtonTextTemplate to recurrenceSummaryTemplate and RecurrenceButtonTextTemplateProps to RecurrenceSummaryTemplateProps. If both template props are set, preserve the existing recurrenceSummaryTemplate and remove the deprecated prop.
Preserve your existing code for instruction-only codemods, which only flag the affected files and surface migration instructions.

Dynamic template bindings (v-bind="obj", :[name]), lang="pug" templates, and components registered globally with app.component() are not analyzed. Review them manually.

The following table outlines the specific Scheduler codemods:

Codemod	Description
`scheduler-event-rendering-changes`	Flags the files affected by the resource color of the Scheduler events, which is now applied through the `--kendo-scheduler-event-color` CSS variable, and by the new drag hint and all-day event rendering. Detects imports of `SchedulerItem`, `SchedulerEditItem`, `SchedulerViewItem`, `SchedulerProportionalViewItem`, `SchedulerTask`, `SchedulerEditTask`, and `SchedulerViewTask`. The task components are flagged only for the `k-scheduler-mark` color, which is now resolved through the theme. Detects the `k-event-drag-hint`, `k-marquee-color`, `k-event-all-day`, and `k-scheduler-mark` CSS classes, `k-selected` selectors scoped to `k-scheduler` or `k-event`, including selectors that are nested in SCSS, Sass, and Less rules, and `k-event` attribute selectors on the inline `style` colors. Detects tests and scripts in files that import the Scheduler package and assert the inline `backgroundColor` or `borderColor` of `.k-event` elements.
`scheduler-default-behavior-changes`	Flags the files affected by the new `eventOverview` and `quickCreate` popovers, which are enabled by default, by the handling of the exceptions of recurring series, and by the removed `k-scheduler-mobile` class. Detects imports of `Scheduler`. Detects the `k-scheduler-mobile` CSS class. Instructs you to set `:event-overview="false"` and `:quick-create="false"` to keep the previous behavior.
`scheduler-data-action-prop-rename`	Flags the files that may use the renamed `onDataaction` callback that the `Scheduler` passes to its views, which is now `onDataAction`. Detects `onDataaction` and the `dataaction` event name, for example in `defineEmits` declarations, `emits` arrays and objects, and `emit` calls, in any script, template, or `.vue` file, even if it does not import the Scheduler package, because custom views may not import it. Instructs you to read the callback from the `onDataAction` prop in custom views. Files that only attach an `onDataaction` or `@dataaction` listener to a built-in component need no change.
`scheduler-recurrence-template-deprecation`	Renames the deprecated `recurrenceButtonTextTemplate` prop of `SchedulerFormEditor` to `recurrenceSummaryTemplate` and `RecurrenceButtonTextTemplateProps` to `RecurrenceSummaryTemplateProps`. Detects JSX/TSX, `h()`/`createVNode()`, and Vue template usages of `SchedulerFormEditor`, including aliased imports. If both template props are set, keeps the existing `recurrenceSummaryTemplate` and removes the deprecated prop. The new template customizes the recurrence summary, not the button label. Review nullable payload handling and templates previously used to customize button labels.

TreeView

To migrate the TreeView package from v10.0.0 to v11.0.0, run the following command in your project root:

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-treeview --from=10 --to=11 --ai-mode

All TreeView codemods perform the following:

Scan your .js, .jsx, .ts, .tsx, .vue, .css, .scss, .sass, and .less files for imports from @progress/kendo-vue-treeview and the affected CSS classes. The detection recognizes custom import names as well.
Preserve your existing code. Each instruction-only codemod only flags the affected files and surfaces the migration instructions.

Dynamic template bindings (v-bind="obj", :[name]), lang="pug" templates, and components registered globally with app.component() are not analyzed. Review them manually.

The following table outlines the specific TreeView codemods:

Codemod	Description
`treeview-item-rendering-changes`	Flags the files affected by the custom items of the `TreeView`, which are rendered without the `k-treeview-leaf-text` element. Detects the `item` prop of `TreeView`. Detects the `k-treeview-leaf-text` CSS class. Instructs you to update the selectors that expect `.k-treeview-leaf-text` around a custom item, or to add the class to the root element of the custom item.

Kendo UI for Vue v9.0.0 to v10.0.0

Quick Guide

To migrate a specific Kendo UI for Vue package from v9.0.0 to v10.0.0, run the following command in your project root:

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-<package-name> --from=9 --to=10 --ai-mode

If not already installed, you will be prompted to install the Kendo CLI when running this command for the first time.

This command checks for available updates for the specified package and its peer dependencies that are already present in the project, prompts you to install them, and runs all relevant codemods.

The v10.0.0 codemods flag the affected files and print migration instructions that you apply manually. These codemods are instruction-only and do not modify your code. They run only when you use the --ai-mode option. The only exception is scheduler-editor-title-message, which updates your code and runs with or without --ai-mode.

For the complete list of changes in this release, see Breaking Changes in 10.0.0 and Rendering Changes in 10.0.0.

Best Practices

Migrate between consecutive major versions.
Migrate one package at a time.

Scheduler

To migrate the Scheduler package from v9.0.0 to v10.0.0, run the following command in your project root:

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-scheduler --from=9 --to=10 --ai-mode

All Scheduler codemods perform the following:

Scan your .js, .jsx, .ts, .tsx, .vue, .css, .scss, .sass, and .less files for imports from @progress/kendo-vue-scheduler, the affected props and events, and the affected CSS classes. The detection recognizes custom import names as well.
Preserve your existing code, except for the scheduler-editor-title-message codemod. Each instruction-only codemod only flags the affected files and surfaces the migration instructions.

Dynamic template bindings (v-bind="obj", :[name]), lang="pug" templates, and components registered globally with app.component() are not analyzed. Review them manually.

The following table outlines the specific Scheduler codemods:

Codemod	Description
`scheduler-item-rendering-changes`	Flags the files affected by the removed inline delete icon of the Scheduler events and by the new `k-readonly` state of read-only events. Detects imports of `SchedulerItem`, `SchedulerEditItem`, `SchedulerViewItem`, and `SchedulerProportionalViewItem`. Detects the `k-event-delete` and `k-event-actions` CSS classes. Detects the `removeclick` event handlers, except in files that use only the task components.
`scheduler-toolbar-rendering-changes`	Flags the files affected by the redesigned Scheduler toolbar, which includes the view selector, the collapsed toolbar, and the `BusinessHours` button. Detects imports of `Scheduler`, `SchedulerHeader`, `SchedulerFooter`, `SchedulerNavigation`, `SchedulerViewSelector`, and `BusinessHours`. Detects the `k-views-dropdown` CSS class.
`scheduler-form-rendering-changes`	Flags the files affected by the redesigned create and edit form, which includes the markup, the footer buttons, the custom editors, and the recurrence dialog. Detects imports of `SchedulerForm`, `SchedulerFormEditor`, `SchedulerActionButtons`, and `SchedulerRecurrenceDialog`. Detects the `startEditor`, `endEditor`, and `recurrenceEditor` props of `SchedulerForm` and `SchedulerFormEditor`, and the `form` prop of `Scheduler`. Detects the `k-scheduler-edit-form` CSS class.
`scheduler-agenda-rendering-changes`	Flags the files affected by the `AgendaView` table roles, the moved `k-scheduler-body` wrapper, and the new `DateHeaderCell` markup. Detects imports of `AgendaView` and `DateHeaderCell`. Detects the `k-scheduler-agendaday` and `k-scheduler-datecolumn` CSS classes.
`scheduler-date-format-changes`	Flags the files that may rely on the default `selectedDateFormat` and `selectedShortDateFormat` of the Scheduler views, which changed. Detects imports of `AgendaView`, `DayView`, `WeekView`, `WorkWeekView`, `MonthView`, and `TimelineView`. Detects the `selectedDateFormat` and `selectedShortDateFormat` props.
`scheduler-more-events-changes`	Flags the files affected by the `MonthView` more button, which opens a popover instead of switching to the Day view. Detects imports of `MonthView`. Detects the `k-more-events` CSS class. Detects the `showmoreitems` event handlers.
`scheduler-editor-title-message`	Updates your localization messages for the new `SchedulerForm` dialog titles. This codemod changes your code and runs without the `--ai-mode` option. Replaces the `scheduler.editorTitle` message with the `scheduler.editorNewEvent` and `scheduler.editorEditEvent` messages and keeps your customized text. Updates flat keys (`'scheduler.editorTitle'`) and keys nested under `scheduler`, in `.js`, `.jsx`, `.ts`, `.tsx`, `.vue` (script blocks), and `.json` files. Keeps the `scheduler.editorNewEvent` and `scheduler.editorEditEvent` messages that already exist. Leaves values that are expressions with possible side effects, such as function calls and property access, unchanged and reports the file. Migrate these messages manually.

Kendo UI for Vue v8.0.0 to v9.0.0

Quick Guide

To migrate a specific Kendo UI for Vue package from v8.0.0 to v9.0.0, run the following command in your project root:

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-<package-name> --from=8 --to=9 --ai-mode

If not already installed, you will be prompted to install the Kendo CLI when running this command for the first time.

This command checks for available updates for the specified package and its peer dependencies that are already present in the project, prompts you to install them, and runs all relevant codemods.

The v9.0.0 codemods flag the affected files and print migration instructions that you apply manually. These codemods are instruction-only and do not modify your code. They run only when you use the --ai-mode option. The exceptions are dialog-window-theme-color-removed in the Dialogs package and app-bar-theme-color-values in the Layout package, which update your code and run with or without --ai-mode.

For the complete list of changes in this release, see Breaking Changes in 9.0.0 and Rendering Changes in 9.0.0.

Best Practices

Migrate between consecutive major versions.
Migrate one package at a time.

What the Codemods Detect

All v9.0.0 codemods perform the following:

Scan your .js, .jsx, .ts, .tsx, .vue, .css, .scss, .sass, and .less files for imports from the Kendo UI for Vue package, the affected props, and the affected CSS classes. The detection recognizes custom import names as well.
Preserve your existing code, except for the dialog-window-theme-color-removed and app-bar-theme-color-values codemods. Each instruction-only codemod only flags the affected files and surfaces the migration instructions.
Detect the removed themeColor values only when they are set as string literals. Review the values that come from variables, props, or computed expressions manually.

Dynamic template bindings (v-bind="obj", :[name]), lang="pug" templates, and components registered globally with app.component() are not analyzed. Review them manually.

Buttons

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-buttons --from=8 --to=9 --ai-mode

Codemod	Description
`button-theme-color`	Flags the files that set the `themeColor` of `Button`, `SmartPasteButton`, or `SpeechToTextButton` to the removed `'dark'` or `'light'` value. Detects the `themeColor` (`theme-color`) prop set to `'dark'` or `'light'` on these components.
`drop-down-button-split-button-theme-color`	Flags the files that set the `themeColor` of `DropDownButton` or `SplitButton` to the removed `'dark'` or `'light'` value. Detects the `themeColor` (`theme-color`) prop set to `'dark'` or `'light'` on these components.
`floating-action-button-theme-color`	Flags the files that set the `themeColor` of `FloatingActionButton` to a removed value. Detects the `themeColor` (`theme-color`) prop set to `'info'`, `'success'`, `'warning'`, `'error'`, `'dark'`, `'light'`, or `'inverse'`.
`buttons-rendering-changes`	Flags the files affected by the removed classes of the Toolbar scroll buttons and by the changed default icons of the Toolbar scroll buttons, `SplitButton`, and `SpeechToTextButton`. Detects the `k-toolbar-prev` and `k-toolbar-next` CSS classes. Detects the `k-i-` and `k-svg-i-` icon classes of `caret-alt-down`, `caret-alt-left`, `caret-alt-right`, `microphone-outline`, and `stop-sm`.

Common

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-common --from=8 --to=9 --ai-mode

Codemod	Description
`icon-theme-color`	Flags the files that set the `themeColor` of `SvgIcon`, `FontIcon`, or `Icon` to the removed `'dark'` or `'light'` value. Detects the `themeColor` (`theme-color`) prop set to `'dark'` or `'light'` on these components.

Conversational UI

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-conversational-ui --from=8 --to=9 --ai-mode

Codemod Description

Codemod	Description
`conversational-ui-rendering-changes`	Flags the files affected by the new default icons of `PromptBox` and `AIPrompt` and by the `PromptBox` action button markup changes. Detects the `k-generating` CSS class. Detects the `k-i-` and `k-svg-i-` icon classes of `stop-sm`, `arrow-up-outline`, `paperclip-outline-alt-right`, `x-mark-sm-outline`, `thumb-up-outline`, and `thumb-down-outline`. Detects the `aria-multiline` attribute in files that import from `@progress/kendo-vue-conversational-ui`.

conversational-ui-rendering-changes

Flags the files affected by the new default icons of PromptBox and AIPrompt and by the PromptBox action button markup changes.

Detects the k-generating CSS class.
Detects the k-i-* and k-svg-i-* icon classes of stop-sm, arrow-up-outline, paperclip-outline-alt-right, x-mark-sm-outline, thumb-up-outline, and thumb-down-outline.
Detects the aria-multiline attribute in files that import from @progress/kendo-vue-conversational-ui.

Data Tools

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-data-tools --from=8 --to=9 --ai-mode

Codemod	Description
`datatools-rendering-changes`	Flags the files affected by the new default icons of the `Pager` navigation buttons, which the Grid pager also uses, and by the new `k-pager-responsive` class. Detects the `k-i-` and `k-svg-i-` icon classes of `caret-alt-to-left`, `caret-alt-to-right`, `caret-alt-left`, and `caret-alt-right`.

Date Inputs

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-dateinputs --from=8 --to=9 --ai-mode

Codemod	Description
`dateinputs-rendering-changes`	Flags the files affected by the new `DateTimePicker` Date/Time switcher markup, the new `DateInput` spinner icons, and the conditional `aria-controls` attribute. Detects the `k-datetime-buttongroup` CSS class. Detects the `k-i-` and `k-svg-i-` icon classes of `caret-alt-up` and `caret-alt-down`.

Dialogs

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-dialogs --from=8 --to=9 --ai-mode

Codemod Description

Codemod	Description
`dialog-window-theme-color-removed`	Removes the `themeColor` prop from the `Dialog` and `Window` components. The prop is removed, and the `k-window-primary`, `k-window-dark`, and `k-window-light` theme classes are no longer rendered. This codemod changes your code and runs with or without the `--ai-mode` option. Removes the `themeColor` (`theme-color`) attribute from `Dialog` and `Window` in `.ts`, `.tsx`, `.js`, `.jsx`, and `.vue` files, including `.vue` templates, JSX, and `h()` or `createVNode()` calls. Does not change props passed through `v-bind="obj"` or JSX spreads, dynamic components, and wrapper components that forward `themeColor` to a `Dialog` or a `Window`. Migrate these manually.
`dialogs-rendering-changes`	Flags the files that reference the `k-window-primary`, `k-window-dark`, or `k-window-light` classes, which are no longer rendered. Detects the `k-window-primary`, `k-window-dark`, and `k-window-light` CSS classes.

dialog-window-theme-color-removed

Removes the themeColor prop from the Dialog and Window components. The prop is removed, and the k-window-primary, k-window-dark, and k-window-light theme classes are no longer rendered. This codemod changes your code and runs with or without the --ai-mode option.

Removes the themeColor (theme-color) attribute from Dialog and Window in .ts, .tsx, .js, .jsx, and .vue files, including .vue templates, JSX, and h() or createVNode() calls.
Does not change props passed through v-bind="obj" or JSX spreads, dynamic components, and wrapper components that forward themeColor to a Dialog or a Window. Migrate these manually.

dialogs-rendering-changes

Flags the files that reference the k-window-primary, k-window-dark, or k-window-light classes, which are no longer rendered.

Detects the k-window-primary, k-window-dark, and k-window-light CSS classes.

Dropdowns

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-dropdowns --from=8 --to=9 --ai-mode

Codemod	Description
`dropdowns-rendering-changes`	Flags the files affected by the new default toggle icon of `ComboBox`, `DropDownList`, and `DropDownTree` and by the `SearchBar` `tabindex`. Detects the `k-i-caret-alt-down` and `k-svg-i-caret-alt-down` CSS classes.

Grid

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-grid --from=8 --to=9 --ai-mode

Codemod Description

Codemod	Description
`grid-rendering-changes`	Flags the files affected by the new default icons of the Grid: the group arrow, the pin and unpin icons, the icons of the built-in context menu items, and the `Pager` buttons. Detects imports of `contextMenuItemsMap`. Detects the `k-i-` and `k-svg-i-` icon classes of `caret-alt-down`, `caret-alt-right`, `caret-alt-left`, `caret-alt-up`, `caret-alt-expand`, `caret-alt-to-top`, `caret-alt-to-bottom`, `caret-alt-to-left`, `caret-alt-to-right`, `pin-outline`, `pin-outline-top`, `pin-outline-bottom`, and `unpin-outline`.

grid-rendering-changes

Flags the files affected by the new default icons of the Grid: the group arrow, the pin and unpin icons, the icons of the built-in context menu items, and the Pager buttons.

Detects imports of contextMenuItemsMap.
Detects the k-i-* and k-svg-i-* icon classes of caret-alt-down, caret-alt-right, caret-alt-left, caret-alt-up, caret-alt-expand, caret-alt-to-top, caret-alt-to-bottom, caret-alt-to-left, caret-alt-to-right, pin-outline, pin-outline-top, pin-outline-bottom, and unpin-outline.

Indicators

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-indicators --from=8 --to=9 --ai-mode

Codemod Description

Codemod	Description
`badge-theme-color`	Flags the files affected by the removed `Badge` and `BadgeContainer` `themeColor` values, the removed `k-badge-dark` and `k-badge-light` classes, and the `BadgeContainer` default `themeColor` change from `'primary'` to `'base'`. Detects imports of `BadgeContainer`. Detects the `themeColor` (`theme-color`) prop of `Badge` set to `'dark'`, `'light'`, `'inverse'`, or `'inherit'`. Detects the `themeColor` (`theme-color`) prop of `BadgeContainer` set to `'dark'` or `'light'`. Detects the `k-badge-dark` and `k-badge-light` CSS classes.
`loader-theme-color`	Flags the files affected by the removed `Loader` `themeColor` values, the removed `k-loader-<color>` classes, and the `Loader` default `themeColor` change. Detects imports of `Loader`. Detects the `themeColor` (`theme-color`) prop set to `'info'`, `'success'`, `'warning'`, `'error'`, `'dark'`, `'light'`, or `'inverse'`. Detects the `k-loader-info`, `k-loader-success`, `k-loader-warning`, `k-loader-error`, `k-loader-dark`, `k-loader-light`, and `k-loader-inverse` CSS classes.

badge-theme-color

Flags the files affected by the removed Badge and BadgeContainer themeColor values, the removed k-badge-dark and k-badge-light classes, and the BadgeContainer default themeColor change from 'primary' to 'base'.

Detects imports of BadgeContainer.
Detects the themeColor (theme-color) prop of Badge set to 'dark', 'light', 'inverse', or 'inherit'.
Detects the themeColor (theme-color) prop of BadgeContainer set to 'dark' or 'light'.
Detects the k-badge-dark and k-badge-light CSS classes.

loader-theme-color

Flags the files affected by the removed Loader themeColor values, the removed k-loader-<color> classes, and the Loader default themeColor change.

Detects imports of Loader.
Detects the themeColor (theme-color) prop set to 'info', 'success', 'warning', 'error', 'dark', 'light', or 'inverse'.
Detects the k-loader-info, k-loader-success, k-loader-warning, k-loader-error, k-loader-dark, k-loader-light, and k-loader-inverse CSS classes.

Inputs

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-inputs --from=8 --to=9 --ai-mode

Codemod	Description
`inputs-rendering-changes`	Flags the files affected by the new default icons of `ColorInput`, `ColorPicker`, `NumericTextBox`, `Slider`, and `Rating`. Detects the `k-i-` and `k-svg-i-` icon classes of `caret-alt-expand`, `caret-alt-up`, `caret-alt-down`, `caret-alt-left`, `caret-alt-right`, and `star-outline`.

Layout

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-layout --from=8 --to=9 --ai-mode

Codemod	Description
`app-bar-theme-color-values`	Replaces the removed `AppBar` `themeColor` values. This codemod updates your code and runs without the `--ai-mode` option. Replaces `'light'` with `'base'` and `'dark'` with `'inverse'`. Updates static values, string-literal bindings, and JSX or `h()` props of `AppBar`, including the `theme-color` spelling. Leaves dynamic values, spreads, and `v-bind="obj"` unchanged.
`app-bar-theme-color`	Flags the files affected by the removed `AppBar` `themeColor` value `'inherit'`, the removed `k-appbar-<color>` classes, and the `AppBar` default `themeColor` change from `'light'` to `'base'`. Detects imports of `AppBar`. Detects the `themeColor` (`theme-color`) prop set to `'inherit'`. Detects the `k-appbar-light`, `k-appbar-dark`, and `k-appbar-inherit` CSS classes.
`avatar-theme-color`	Flags the files affected by the removed `Avatar` `themeColor` values, the changed `k-avatar-<color>` classes, and the removed `Avatar` default `themeColor`. Detects imports of `Avatar`. Detects the `themeColor` (`theme-color`) prop set to `'info'`, `'success'`, `'error'`, `'warning'`, `'dark'`, `'light'`, `'inverse'`, or `'inherit'`. Detects the `k-avatar-solid-<color>` and `k-avatar-outline-<color>` CSS classes.
`bottom-navigation-theme-color`	Flags the files affected by the removed `BottomNavigation` `themeColor` values, the removed `k-bottom-nav-<color>` classes, and the `BottomNavigation` default `themeColor` change from `'primary'` to `'base'`. Detects imports of `BottomNavigation`. Detects the `themeColor` (`theme-color`) prop set to `'info'`, `'success'`, `'warning'`, `'error'`, `'dark'`, or `'light'`. Detects the `k-bottom-nav-<color>`, `k-bottom-nav-flat-<color>`, and `k-bottom-nav-solid-<color>` CSS classes of these values.
`layout-rendering-changes`	Flags the files affected by the new default icons of `Menu`, `Splitter`, and `Stepper` and by the `PanelBar` accessibility markup changes. Detects the `k-i-` and `k-svg-i-` icon classes of `caret-alt-left`, `caret-alt-right`, `caret-alt-up`, and `caret-alt-down`. Detects the `k-svg-i-check-outline` CSS class. Detects the `k-panelbar-item` and `k-panelbar-content` CSS classes.

ListBox

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-listbox --from=8 --to=9 --ai-mode

Codemod	Description
`listbox-rendering-changes`	Flags the files that import `ListBoxToolbar` or reference the caret icon classes, which the new default chevron icons replace. Detects imports of `ListBoxToolbar`. Detects the `k-i-` and `k-svg-i-` icon classes of `caret-alt-up`, `caret-alt-down`, `caret-alt-left`, `caret-alt-right`, `caret-double-alt-left`, and `caret-double-alt-right`.

Notification

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-notification --from=8 --to=9 --ai-mode

Codemod	Description
`notification-rendering-changes`	Flags the files that reference the outline icon classes, which the new default success and error `Notification` icons replace. Detects the `k-i-check-outline`, `k-svg-i-check-outline`, `k-i-x-outline`, and `k-svg-i-x-outline` CSS classes.

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-popup --from=8 --to=9 --ai-mode

Codemod Description

Codemod	Description
`popup-rendering-changes`	Flags the files that reference the Popup animation container and slide classes, which the Popup markup and animation changes affect. Detects the `k-animation-container`, `k-animation-container-shown`, and `k-child-animation-container` CSS classes. Detects the `k-slide-<direction>-<phase>` CSS classes, where the direction is `up`, `down`, `left`, or `right`, and the phase is `appear`, `enter`, or `exit`, optionally followed by `-active`.

popup-rendering-changes

Flags the files that reference the Popup animation container and slide classes, which the Popup markup and animation changes affect.

Detects the k-animation-container, k-animation-container-shown, and k-child-animation-container CSS classes.
Detects the k-slide-<direction>-<phase> CSS classes, where the direction is up, down, left, or right, and the phase is appear, enter, or exit, optionally followed by -active.

Scheduler

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-scheduler --from=8 --to=9 --ai-mode

Codemod Description

Codemod	Description
`scheduler-rendering-changes`	Flags the files affected by the Scheduler view selector (a `SegmentedControl` instead of a `ButtonGroup`), the new navigation and event arrow icons, and the `MonthView` item positioning. Detects the `k-scheduler-views` and `k-nav-day` CSS classes. Detects the `k-i-` and `k-svg-i-` icon classes of `caret-alt-left` and `caret-alt-right`. Detects `translateY(30px)` in files that import from `@progress/kendo-vue-scheduler`.

scheduler-rendering-changes

Flags the files affected by the Scheduler view selector (a SegmentedControl instead of a ButtonGroup), the new navigation and event arrow icons, and the MonthView item positioning.

Detects the k-scheduler-views and k-nav-day CSS classes.
Detects the k-i-* and k-svg-i-* icon classes of caret-alt-left and caret-alt-right.
Detects translateY(30px) in files that import from @progress/kendo-vue-scheduler.

This codemod describes only the 8.x to 9.0.0 changes. For the Scheduler changes in 10.0.0, see Breaking Changes in 10.0.0 and Rendering Changes in 10.0.0.

TreeList

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-treelist --from=8 --to=9 --ai-mode

Codemod	Description
`treelist-rendering-changes`	Flags the files affected by the new default icons of the TreeList expand and collapse toggle and the `Pager` buttons. Detects the `k-i-` and `k-svg-i-` icon classes of `caret-alt-down`, `caret-alt-right`, `caret-alt-left`, `caret-alt-to-left`, and `caret-alt-to-right`.

Kendo UI for Vue v7.0.0 to v8.0.0

Quick Guide

To migrate a specific Kendo UI for Vue package from v7.0.0 to v8.0.0, run the following command in your project root:

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-<package-name> --from=7 --to=8 --ai-mode

If not already installed, you will be prompted to install the Kendo CLI when running this command for the first time.

This command checks for available updates for the specified package and its peer dependencies that are already present in the project, prompts you to install them, and runs all relevant codemods.

The v8.0.0 codemods flag the affected files and print migration instructions that you apply manually. These codemods are instruction-only and do not modify your code. They run only when you use the --ai-mode option. The exceptions are the <package>-appearance-null-props codemods, grid-loader-show-loader, and grid-ref-get-columns, which update your code and run with or without --ai-mode.

For the complete list of changes in this release, see Breaking Changes in 8.0.0 and Rendering Changes in 8.0.0.

Best Practices

Migrate between consecutive major versions.
Migrate one package at a time.

What the Codemods Detect

All v8.0.0 codemods perform the following:

Scan your .js, .jsx, .ts, .tsx, .vue, .css, .scss, .sass, and .less files for imports from the Kendo UI for Vue package, the affected props, and the affected CSS classes. The detection recognizes custom import names as well.
Preserve your existing code, except for the <package>-appearance-null-props codemods, grid-loader-show-loader, and grid-ref-get-columns. Each instruction-only codemod only flags the affected files and surfaces the migration instructions.
Remove or rename only the literal values. The <package>-appearance-null-props codemods remove the literal null values (:size="null", size={null}, or size: null in h() and createVNode() calls) of the affected props in .ts, .tsx, .js, .jsx, and .vue files. When an earlier spread ({...props}) or v-bind="obj" on the same element might provide the prop, the codemods replace null with undefined instead, so that the value does not leak from the spread. The codemods change only the components that resolve to the imported Kendo UI component and leave shadowing variables or parameters with the same name unchanged. Review the values that evaluate to null at runtime, the props passed through v-bind="obj" or JSX spreads, and the wrapper components that forward these props.
Do not add the props that you need to keep the previous default look. Set size="medium", rounded="medium", fillMode="solid", and themeColor="base" explicitly where the component supports them.

Dynamic template bindings (v-bind="obj", :[name]), lang="pug" templates, and components registered globally with app.component() are not analyzed. Review them manually.

Buttons

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-buttons --from=7 --to=8 --ai-mode

Codemod	Description
`buttons-appearance-null-props`	Removes the literal `null` values of the props whose default values were removed. This codemod updates your code and runs without the `--ai-mode` option. Removes the `size`, `rounded`, `fillMode`, and `themeColor` props of `Button`, `Chip`, `FloatingActionButton`, `DropDownButton`, `SplitButton`, and `SpeechToTextButton`. Removes the `size`, `rounded`, and `fillMode` props of `ChipList`, and the `size` and `fillMode` props of `Toolbar`.
`buttons-default-appearance-rendering-changes`	Flags the files affected by the removed default `size`, `rounded`, `fillMode`, and `themeColor` values and by the renamed theme color classes. Detects imports of `Button`, `Chip`, `ChipList`, `FloatingActionButton`, `DropDownButton`, `SplitButton`, `SpeechToTextButton`, and `Toolbar`. Detects the `k-button-md`, `k-button-solid`, `k-rounded-md`, `k-rounded-full`, `k-chip-md`, `k-chip-solid`, `k-chip-list-md`, `k-fab-md`, `k-fab-solid`, `k-toolbar-md`, `k-toolbar-solid`, `k-toolbar-items-list-md`, and `k-toolbar-items-list-solid` CSS classes. Detects the combined `k-button-<fillMode>-<themeColor>`, `k-chip-<fillMode>-<themeColor>`, and `k-fab-<fillMode>-<themeColor>` CSS classes.
`button-shape-removed`	Flags the files that set the removed `shape` prop or use the removed `FloatingActionButtonShape` type. Detects the `shape` prop of `Button`, `FloatingActionButton`, `DropDownButton`, and `SplitButton`. Detects the `FloatingActionButtonShape` type. Detects the `k-button-square`, `k-fab-rectangle`, `k-fab-square`, `k-fab-pill`, `k-fab-circle`, and `k-fab-rounded` CSS classes.

Data Tools

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-data-tools --from=7 --to=8 --ai-mode

Codemod	Description
`datatools-appearance-null-props`	Removes the literal `null` values of the `Pager` `size` prop, whose default value was removed. This codemod updates your code and runs without the `--ai-mode` option.
`datatools-default-appearance-rendering-changes`	Flags the files affected by the removed default `size` of the `Pager` and the `FilterCell` child controls and by the classes it produced. Detects imports of `Pager`, `PagerInput`, `PagerNavigationButton`, `PagerNumericButtons`, `PagerPageSizes`, and `FilterCell`. Detects the `k-pager-md` and `k-picker-md` CSS classes.

Date Inputs

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-dateinputs --from=7 --to=8 --ai-mode

Codemod	Description
`dateinputs-appearance-null-props`	Removes the literal `null` values of the props whose default values were removed. This codemod updates your code and runs without the `--ai-mode` option. Removes the `size`, `rounded`, and `fillMode` props of `DateInput`, `DatePicker`, `DateRangePicker`, `DateTimePicker`, and `TimePicker`.
`dateinputs-default-appearance-rendering-changes`	Flags the files affected by the removed default `size`, `rounded`, and `fillMode` values and by the classes they produced. Detects imports of `DateInput`, `DatePicker`, `DateRangePicker`, `DateTimePicker`, and `TimePicker`. Detects the `k-input-md`, `k-input-solid`, `k-rounded-md`, and `k-button-md` CSS classes.

Dropdowns

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-dropdowns --from=7 --to=8 --ai-mode

Codemod Description

Codemod	Description
`dropdowns-appearance-null-props`	Removes the literal `null` values of the props whose default values were removed. This codemod updates your code and runs without the `--ai-mode` option. Removes the `size`, `rounded`, and `fillMode` props of `AutoComplete`, `ComboBox`, `DropDownList`, `DropDownTree`, `MultiSelect`, and `MultiSelectTree`. Removes the `tagsRounded` prop of `MultiSelect`.
`dropdowns-default-appearance-rendering-changes`	Flags the files affected by the removed default `size`, `rounded`, `fillMode`, and `tagsRounded` values and by the classes they produced. Detects imports of `AutoComplete`, `ComboBox`, `DropDownList`, `DropDownTree`, `MultiSelect`, and `MultiSelectTree`. Detects the `k-input-md`, `k-input-solid`, `k-picker-md`, `k-picker-solid`, `k-rounded-md`, `k-chip-list-md`, `k-chip-md`, `k-chip-solid`, and `k-chip-solid-base` CSS classes.

dropdowns-appearance-null-props

Removes the literal null values of the props whose default values were removed. This codemod updates your code and runs without the --ai-mode option.

Removes the size, rounded, and fillMode props of AutoComplete, ComboBox, DropDownList, DropDownTree, MultiSelect, and MultiSelectTree.
Removes the tagsRounded prop of MultiSelect.

dropdowns-default-appearance-rendering-changes

Flags the files affected by the removed default size, rounded, fillMode, and tagsRounded values and by the classes they produced.

Detects imports of AutoComplete, ComboBox, DropDownList, DropDownTree, MultiSelect, and MultiSelectTree.
Detects the k-input-md, k-input-solid, k-picker-md, k-picker-solid, k-rounded-md, k-chip-list-md, k-chip-md, k-chip-solid, and k-chip-solid-base CSS classes.

Grid

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-grid --from=7 --to=8 --ai-mode

Codemod	Description
`grid-loader-show-loader`	Renames the literal boolean `loader` prop of the `Grid` to `showLoader`, because the boolean form of `loader` was removed. This codemod updates your code and runs without the `--ai-mode` option. Renames `loader`, `:loader="true"`, `:loader="false"`, `loader={true}`, and `loader={false}` to `showLoader` (`show-loader` in templates). Does not change dynamic bindings, non-boolean values, or elements that already set `showLoader`. Migrate these manually.
`grid-row-render-item`	Flags the files that use the `Grid` `rowRender` or the `GridRowProps` type, whose row props now declare `item` instead of `dataItem`. Detects the `rowRender` (`row-render`) prop of `Grid`. Detects the `GridRowProps` type.
`grid-ref-get-columns`	Replaces the removed `getColumns()` method of the `Grid` template ref with the `columns` property. This codemod updates your code and runs without the `--ai-mode` option. Rewrites the zero-argument `gridRef.value.getColumns()` and `this.$refs.grid.getColumns()` calls to `gridRef.value.columns` and `this.$refs.grid.columns`, which are properties, not function calls. Recognizes the `Grid` refs that are statically declared in the same file: a static `ref="grid"` on the `Grid`, a JSX `ref`, `useTemplateRef`, `ref<InstanceType<typeof Grid>>()`, and `this.$refs.grid`. Does not change the calls with arguments, optional calls, template expressions such as `@click="gridRef.getColumns()"`, aliased or dynamic refs, and refs that are not provably `Grid` refs. Migrate these manually; the `grid-ref-api` codemod flags them.
`grid-ref-api`	Flags the files that still call `getColumns()` after the automatic rewrite, because the `Grid` template ref now exposes only the `GridHandle` members. Detects the remaining `.getColumns()` calls, such as the template expressions, the aliased or dynamic refs, and the refs that the `grid-ref-get-columns` codemod could not prove to be `Grid` refs.
`grid-default-appearance-rendering-changes`	Flags the files affected by the removed `GridToolbar` default `size` and by the changed Grid markup, which includes the header and footer padding, the header cells, the no-records and loader markup, and the row attributes. Detects imports of `Grid`, `GridToolbar`, `GridNoRecords`, and `GridFilterCell`. Detects the `k-toolbar-md`, `k-grid-norecords`, `k-loader-container`, `k-loader-container-md`, `k-loader-container-overlay`, `k-loader-container-inner`, and `k-loader-top` CSS classes.
`grid-loader-binding`	Flags the files where a `Grid` receives a `loader` binding that is not a literal boolean or a plain slot name, for example `:loader="isLoading"`, because `loader` no longer accepts booleans and a custom loader template renders only when `showLoader` is `true`. Detects the `loader` prop of `Grid` bound to a variable or an expression, unless `showLoader` is also set.

Indicators

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-indicators --from=7 --to=8 --ai-mode

Codemod Description

Codemod	Description
`indicators-appearance-null-props`	Removes the literal `null` values of the props whose default values were removed. This codemod updates your code and runs without the `--ai-mode` option. Removes the `size`, `rounded`, `fillMode`, and `themeColor` props of `Badge`. Removes the `size`, `rounded`, and `fillMode` props of `BadgeContainer`. Removes the `size` prop of `Loader`. Leaves the `themeColor` prop of `BadgeContainer` and `Loader` unchanged, because its default value was not removed.
`indicators-default-appearance-rendering-changes`	Flags the files affected by the removed default `size`, `rounded`, `fillMode`, and `themeColor` values and by the classes they produced. Detects imports of `Badge`, `BadgeContainer`, and `Loader`. Detects the `k-badge-md`, `k-badge-solid`, `k-rounded-md`, and `k-loader-md` CSS classes. Detects the combined `k-badge-<fillMode>-<themeColor>` CSS classes.

indicators-appearance-null-props

Removes the literal null values of the props whose default values were removed. This codemod updates your code and runs without the --ai-mode option.

Removes the size, rounded, fillMode, and themeColor props of Badge.
Removes the size, rounded, and fillMode props of BadgeContainer.
Removes the size prop of Loader.
Leaves the themeColor prop of BadgeContainer and Loader unchanged, because its default value was not removed.

indicators-default-appearance-rendering-changes

Flags the files affected by the removed default size, rounded, fillMode, and themeColor values and by the classes they produced.

Detects imports of Badge, BadgeContainer, and Loader.
Detects the k-badge-md, k-badge-solid, k-rounded-md, and k-loader-md CSS classes.
Detects the combined k-badge-<fillMode>-<themeColor> CSS classes.

Inputs

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-inputs --from=7 --to=8 --ai-mode

Codemod Description

Codemod	Description
`inputs-appearance-null-props`	Removes the literal `null` values of the props whose default values were removed. This codemod updates your code and runs without the `--ai-mode` option. Removes the `size`, `rounded`, and `fillMode` props of `ColorPicker`, `Input`, `MaskedTextBox`, `NumericTextBox`, `Signature`, `TextArea`, and `TextBox`. Removes the `size` and `rounded` props of `Checkbox`. Removes the `size` prop of `ColorPalette`, `FlatColorPicker`, and `RadioButton`. Removes the `size`, `trackRounded`, and `thumbRounded` props of `Switch`.
`inputs-default-appearance-rendering-changes`	Flags the files affected by the removed default `size`, `rounded`, `fillMode`, `trackRounded`, and `thumbRounded` values, by the removed `Switch` `'circle'` option, and by the classes they produced. Detects imports of `Checkbox`, `ColorPalette`, `ColorPicker`, `FlatColorPicker`, `Input`, `MaskedTextBox`, `NumericTextBox`, `RadioButton`, `Signature`, `Switch`, `TextArea`, and `TextBox`. Detects the `trackRounded` and `thumbRounded` props of `Switch` set to `'circle'`. Detects the `k-input-md`, `k-input-solid`, `k-picker-md`, `k-picker-solid`, `k-signature-md`, `k-checkbox-md`, `k-radio-md`, `k-switch-md`, `k-colorpalette-md`, `k-coloreditor-md`, `k-colorgradient-md`, `k-rounded-md`, and `k-rounded-full` CSS classes.

inputs-appearance-null-props

Removes the literal null values of the props whose default values were removed. This codemod updates your code and runs without the --ai-mode option.

Removes the size, rounded, and fillMode props of ColorPicker, Input, MaskedTextBox, NumericTextBox, Signature, TextArea, and TextBox.
Removes the size and rounded props of Checkbox.
Removes the size prop of ColorPalette, FlatColorPicker, and RadioButton.
Removes the size, trackRounded, and thumbRounded props of Switch.

inputs-default-appearance-rendering-changes

Flags the files affected by the removed default size, rounded, fillMode, trackRounded, and thumbRounded values, by the removed Switch 'circle' option, and by the classes they produced.

Detects imports of Checkbox, ColorPalette, ColorPicker, FlatColorPicker, Input, MaskedTextBox, NumericTextBox, RadioButton, Signature, Switch, TextArea, and TextBox.
Detects the trackRounded and thumbRounded props of Switch set to 'circle'.
Detects the k-input-md, k-input-solid, k-picker-md, k-picker-solid, k-signature-md, k-checkbox-md, k-radio-md, k-switch-md, k-colorpalette-md, k-coloreditor-md, k-colorgradient-md, k-rounded-md, and k-rounded-full CSS classes.

Layout

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-layout --from=7 --to=8 --ai-mode

Codemod	Description
`layout-appearance-null-props`	Removes the literal `null` values of the props whose default values were removed. This codemod updates your code and runs without the `--ai-mode` option. Removes the `size`, `rounded`, and `fillMode` props of `Avatar`. Removes the `size` prop of `Breadcrumb` and `TabStrip`. Leaves the `themeColor` prop of `Avatar` unchanged, because its default value was not removed.
`layout-default-appearance-rendering-changes`	Flags the files affected by the removed default `size`, `rounded`, and `fillMode` values of `Avatar` and `TabStrip` and by the classes they produced. Detects imports of `Avatar` and `TabStrip`. Detects the `k-avatar-md`, `k-avatar-solid`, `k-avatar-solid-primary`, `k-rounded-md`, and `k-tabstrip-md` CSS classes.

ListBox

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-listbox --from=7 --to=8 --ai-mode

Codemod	Description
`listbox-appearance-null-props`	Removes the literal `null` values of the `ListBox` `size` prop, whose default value was removed. This codemod updates your code and runs without the `--ai-mode` option.
`listbox-default-appearance-rendering-changes`	Flags the files affected by the removed `ListBox` default `size` and by the `k-list-md` class it produced. Detects imports of `ListBox` and `ListBoxToolbar`. Detects the `k-list-md` CSS class.

TreeList

bash

npx @progress/kendo-cli migrate @progress/kendo-vue-treelist --from=7 --to=8 --ai-mode

Codemod	Description
`treelist-default-appearance-rendering-changes`	Flags the files affected by the removed `TreeList` default `size` and by the changed table, header table, toolbar, and `Pager` classes. Detects imports of `TreeList`. Detects the `k-toolbar-md`, `k-table-md`, and `k-pager-md` CSS classes.