vuetify-v4

What problem does it solve?

This Skill prevents broken or non-scrolling Vuetify 4 page layouts by guiding you to use Vuetify’s required component hierarchy and positioning rules in Baseweb projects.

Core Features & Use Cases

• Correct layout structure: Ensures you always wrap pages with v-app, use v-layout, and place content in v-main so the app behaves consistently.
• Fixed headers/footers that don’t overlap: Shows when and how to use the app prop on v-footer and v-app-bar to make elements fixed while Vuetify adjusts spacing automatically.
• Reliable scrolling patterns: Provides flexbox-based patterns so chat-like UIs and content pages scroll correctly instead of overflowing the viewport.

Quick Start

Ask to generate a Vuetify 4 Baseweb page layout with a fixed v-footer containing an input form and a scrollable v-main content area that correctly fills the remaining height.