vuetify-layout

What problem does it solve?

This Skill solves the problem of assembling a consistent, responsive Vuetify 4 application layout in a Vue 3 SSR starter kit without reinventing navigation, grid scaffolding, and common shell patterns.

Core Features & Use Cases

• Application shell composition: Use v-app, v-main, and related layout building blocks to create the overall page frame.
• Grid-based page structure: Implement the 12-column layout with v-container, v-row, and v-col for responsive content/side-by-side sections.
• Navigation and UX primitives: Add a top bar with v-app-bar, side navigation with v-navigation-drawer (rail/temporary behavior), and interactive UI elements like v-menu, v-tabs/v-tabs-window, and v-breadcrumbs.
• Use case example: Create an authenticated dashboard layout where mobile users get a temporary drawer, desktop users get a rail drawer, and the content switches between profile/security/notifications via tabs.

Quick Start

Create the page shell by wiring v-app-bar, v-navigation-drawer (temporary on mobile and rail on desktop), and the main content grid with v-container/v-row/v-col, then add v-menu, v-tabs/v-tabs-window, and v-breadcrumbs where needed.