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

vuetify-v1

Guide Vue UI creation using Vuetify 1.5 components and syntax.

Updated Mar 26, 2026
Search Tags:#vue#ui components#component props#vuetify#legacy maintenance#v1.5 migration#slot syntax
One-click install
npx skills add https://github.com/christophevg/c3 --skill vuetify-v1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vuetify-v1
Source: https://github.com/christophevg/c3/tree/main/skills/vuetify-v1
Command: npx skills add https://github.com/christophevg/c3 --skill vuetify-v1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill prevents breakage and confusion when building or maintaining legacy Vue apps by explaining how Vuetify 1.5 components differ from Vuetify 2 and by providing practical guidance for choosing components, props, slots, and layout patterns.

Core Features & Use Cases

  • Vuetify 1.5 component guidance: Helps you select the right v-* component for containment, navigation, forms, layout, data display, feedback, images/icons, pickers, and other common UI needs.
  • V1.5 syntax & prop accuracy: Clarifies critical V1.5 vs V2 differences, including grid components (v-layout/v-flex), activator slot syntax, and common prop name changes like flat vs text and outline vs outlined.
  • Production-ready patterns: Provides reusable UI patterns (dialogs, menus, tables, validation forms, theming, responsive layout) that match Vuetify 1.5 conventions.

Quick Start

Use the vuetify-v1 skill to generate the correct Vuetify 1.5 Vue template and props for a dialog, including the right activator slot syntax for a legacy Baseweb project.

Frequently Asked Questions about vuetify-v1

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

FAQPage Schema
How do I build a Vuetify 1.5 dialog with the correct activator slot syntax?▼

To build a Vuetify 1.5 dialog, you must use the specific V1.5 activator slot syntax rather than the newer V2 patterns. This skill provides actionable UI templates and best practices for legacy Vue apps to ensure your dialogs render correctly.

What is the difference between Vuetify 1.5 and Vuetify 2 component props?▼

Vuetify 1.5 uses different prop names than Vuetify 2, such as 'flat' instead of 'text' and 'outline' instead of 'outlined'. This skill clarifies these critical prop differences and component name changes to prevent breakage in legacy Vue applications.

How do I create a responsive layout using Vuetify 1.5 grid components?▼

Creating responsive layouts in Vuetify 1.5 requires using the v-layout and v-flex grid components instead of the newer V2 row and col system. This skill guides component selection and layout patterns matching V1.5 conventions.

Can I use Vuetify 2 components in a legacy Baseweb application?▼

Using Vuetify 2 components in a legacy Baseweb application causes breakage and confusion due to mismatched syntax. This skill guides the maintenance of Vue UIs using Vuetify 1.5 components, ensuring prop and slot correctness for legacy projects.

What is the best way to plan a migration from Vuetify 1.5 to V2?▼

Planning a migration from Vuetify 1.5 requires understanding the exact differences in component names, activator slots, and props. This skill provides practical guidance for mapping V1.5 patterns to V2 to prepare your migration strategy.

Why does my Vuetify component prop not work after updating my legacy Vue app?▼

Your Vuetify component prop likely fails because you are using Vuetify 2 syntax like 'outlined' in a V1.5 application expecting 'outline'. This skill identifies common prop name changes and syntax differences to resolve legacy maintenance issues.

Related Skills

Explore More Design & Creative Skills→
harlan-zwharlan-zw
174

vuetify-skilld

Document Vuetify components, APIs, and upgrade strategies for Vue.js projects.

Community
Intermediate
christophevgchristophevg

vuetify-v3

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

Community
Intermediate
IntelliTectIntelliTect

use-composition-api

Build Vue 3 components with the Composition API, TypeScript, and Vuetify.

Official
Intermediate
christophevgchristophevg

vuetify-v2

Develop Vuetify V2 user interfaces for Baseweb projects.

Community
Intermediate