skills.rest
christophevg
christophevgCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vuetify-v3

Migrate Vuetify 2 components to Vuetify 3 APIs, props, events, and slots.

Updated Mar 26, 2026
Search Tags:#theming#vue#migration#forms#ui components#data tables#vuetify
One-click install
npx skills add https://github.com/christophevg/c3 --skill vuetify-v3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vuetify-v3
Source: https://github.com/christophevg/c3/tree/main/skills/vuetify-v3
Command: npx skills add https://github.com/christophevg/c3 --skill vuetify-v3

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents slow, error-prone work when building or migrating Vue UIs by translating Vuetify 2 patterns into correct Vuetify 3 component APIs, props, events, and slots.

Core Features & Use Cases

  • Vuetify 3-focused guidance: Provides component selection help plus the correct Vuetify 3 props and usage rules for common UI building blocks.
  • Migration support (V2 → V3): Maps breaking changes such as value/model-value, input/update events, activator-slot syntax, icon usage, and renamed/removed components.
  • Practical patterns and templates: Covers frequent UI needs like dialogs, menus, data tables (client/server patterns), forms with validation, theming, icons, layout grids, and accessibility.
  • Baseweb interoperability: Aligns with Baseweb responsibilities by handling Vuetify-specific UI composition while Baseweb handles project structure and state integration.

Quick Start

Use the vuetify-v3 skill to create a responsive Vuetify 3 data table with a search bar, row action buttons, and correct v-slot syntax.

Frequently Asked Questions about vuetify-v3

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

FAQPage Schema
How do I migrate Vuetify 2 components to Vuetify 3 without breaking my Vue UI?▼

Migrate Vuetify 2 components to Vuetify 3 by resolving breaking API changes, mapping value to model-value, updating input events to update:model-value, and adjusting activator-slot syntax for correct Vue 3 conventions.

What is the correct way to use v-slot activator props in Vuetify 3 dialogs and menus?▼

Vuetify 3 dialogs and menus require the correct v-slot activator props syntax, replacing the Vuetify 2 activator patterns to ensure proper component interaction and UI rendering within your Vue application.

How do I build a Vuetify 3 data table with client-side and server-side patterns?▼

Build Vuetify 3 data tables by applying correct component APIs for both client-side and server-side patterns, ensuring proper prop and event conventions are used for data handling and UI rendering.

Why does my Vuetify 2 icon usage break in Vuetify 3?▼

Vuetify 2 icon usage breaks in Vuetify 3 due to updated API conventions, requiring you to migrate icon implementations to use the new icon props for correct rendering.

Can I use Vuetify 3 forms with validation alongside theming and layout grids?▼

Yes, Vuetify 3 supports building forms with validation while applying theming and layout grids, providing practical patterns and templates to ensure accessibility and correct component composition.

Does Vuetify 3 work with Baseweb for project structure and state integration?▼

Vuetify 3 aligns with Baseweb interoperability by handling Vuetify-specific UI composition, while Baseweb manages the broader project structure and state integration within the Vue workflow.

Related Skills

Explore More Design & Creative Skills→
IntelliTectIntelliTect

scaffold-component

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

Official
Intermediate
hendrax5hendrax5

phase-6-ui-integration

Implement frontend UI and integrate it with backend APIs.

Community
Intermediate
christophevgchristophevg
1

baseweb-migrate

Migrates Flask/Vue 2 baseweb apps to Quart/Vue 3 with async updates.

Community
Advanced
OpenDCAIOpenDCAI
114

web-component-design

Develop reusable cross-framework UI component patterns for React, Vue, and Svelte.

Official
Advanced