---
name: vuetify2-to-vuetify3
description: Use when migrating a Vuetify 2 application to Vuetify 3 in a Vue 3 codebase, including bootstrap, prop/event renames, and component API changes.
enabled: false
source: github:JuanJoseGonGi/skills
imported-from: github:JuanJoseGonGi/skills
---

# Vuetify 2 to Vuetify 3

## Overview

Use this skill for Vuetify migration after base Vue 3 compatibility is in place.

## Key Migration Areas

- `new Vuetify()` -> `createVuetify()`
- `Vue.use(Vuetify)` -> `app.use(vuetify)`
- import global styles from `vuetify/styles`
- `value` / `@input` -> `modelValue` / `@update:modelValue`
- utility and color class naming updates (`primary--text` -> `text-primary`, etc.)
- component-specific breaking changes (`item-text` -> `item-title`, slot API shifts)

## Workflow

1. Bootstrap and plugin migration
   - Create Vuetify plugin with `createVuetify`.
   - Ensure style entry points are imported once.

2. Mechanical API sweep
   - Replace `@input`, `value`, legacy size props, theme props, and renamed classes.

3. Component-by-component remediation
   - Prioritize high-frequency components in the codebase (inputs, lists, dialogs, buttons).
   - Fix slot payload changes and removed wrappers.

4. Theme and tokens
   - Revalidate custom theme variables and typography mappings.
   - Verify dark/light behavior if previously controlled by per-component props.

5. Test updates
   - Replace Vue 2 mount patterns using `new Vuetify()` with Vue 3 plugin injection.

## High-Risk Components

- `v-select`, `v-combobox`, `v-autocomplete`
- `v-form` and input stack
- `v-list` composition and list item internals
- dialogs, menus, and overlay-driven components

## Done Criteria

- No Vuetify 2 bootstrapping APIs remain.
- Core UI flows render correctly on desktop and mobile.
- Component tests and interaction tests pass with Vuetify 3 plugin wiring.

## Common Pitfalls

- Migrating Vuetify before Vue/router/store foundations are stable.
- Treating all component changes as simple prop renames (many slot contracts changed).
- Forgetting global style imports and assuming old reset/theme behavior.
