skills.rest
JuanJoseGonGi
JuanJoseGonGiCOMMUNITY
Explore all skills by this author →
𝕏@JuanJoseGonGiGitHub

vuetify2-to-vuetify3

Migrate Vuetify 2 applications to Vuetify 3 within Vue 3.

Updated Aug 23, 2026
Search Tags:#frontend#migration#component library#vuejs#vuetify#ui upgrade
One-click install
npx skills add https://github.com/JuanJoseGonGi/skills --skill vuetify2-to-vuetify3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vuetify2-to-vuetify3
Source: https://github.com/JuanJoseGonGi/skills/tree/main/vuetify2-to-vuetify3
Command: npx skills add https://github.com/JuanJoseGonGi/skills --skill vuetify2-to-vuetify3

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill streamlines the complex process of migrating a Vuetify 2 application to Vuetify 3, ensuring compatibility with Vue 3 and addressing breaking changes in components and APIs.

Core Features & Use Cases

  • Component API Updates: Handles renames for props, events, and slots (e.g., value/input to modelValue/update:modelValue).
  • Bootstrap and Plugin Migration: Guides the transition from new Vuetify() to createVuetify() and app.use().
  • Style and Theming: Addresses changes in utility class naming and custom theme variable handling.
  • Use Case: You have a large Vue 2 application that has been upgraded to Vue 3, and now you need to update its Vuetify 2 components to Vuetify 3 to leverage new features and maintainability.

Quick Start

Use the vuetify2-to-vuetify3 skill to migrate the Vuetify components in the project.

Frequently Asked Questions about vuetify2-to-vuetify3

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate Vuetify 2 components to Vuetify 3 in a Vue 3 environment?▼

Migrating Vuetify 2 components to Vuetify 3 involves updating prop and event naming conventions, shifting from `new Vuetify()` to `createVuetify()` for bootstrap initialization, and adjusting global style imports to ensure seamless Vue 3 compatibility.

What are the main breaking changes when upgrading to Vuetify 3?▼

Breaking changes when upgrading to Vuetify 3 include component-specific API shifts like renaming `value`/`Input` to `modelValue`/`update:modelValue`, transitioning from `new Vuetify()` to `createVuetify()`, and modifications to utility class naming and custom theme variable handling.

How do I update the Vuetify bootstrap initialization for Vue 3?▼

Updating the Vuetify bootstrap initialization for Vue 3 requires transitioning from `new Vuetify()` to the `createVuetify()` function and registering the plugin using `app.use()` to ensure proper application integration.

Do I need to upgrade to Vue 3 before migrating my Vuetify 2 application?▼

Yes, upgrading to Vue 3 is required before migrating Vuetify 2 to Vuetify 3, as the Vuetify 3 migration process specifically targets developers undertaking major UI framework upgrades within a Vue 3 environment to ensure seamless transition and compatibility.

How do I handle custom theme variables and styles after a Vuetify 3 migration?▼

When migrating to Vuetify 3, handle custom theme variables and styles by addressing changes in utility class naming and updating custom theme variable handling to match the new Vuetify 3 theming specifications for seamless visual compatibility.

Related Skills

Explore More Software Engineering Skills→
xiaoshuangLixiaoshuangLi
1

vue-development

Guide Vue 3 development with Composition API, Pinia, and TypeScript.

Community
Advanced
Sheldon-92Sheldon-92
3

Testing

Execute test suites and report failures with coverage metrics.

Community
Intermediate
AratKruglikAratKruglik
9

vue-state-management

Guide Vue 3 developers in selecting state management approaches for SPAs.

Community
Advanced
IntelliTectIntelliTect

scaffold-component

Generate a Vuetify Vue 3 SFC scaffold with Composition API props and emits.

Official
Intermediate