[Vuetify 3 Rules for the Project] - pierwszy szkic

[klimekszymon]

Vuetify 3 Rules for the Project

General Usage

• Use Vuetify 3 as the primary UI component library for building Material Design 3-compliant interfaces. (Rule: Design Consistency)
• Enable tree-shaking to reduce bundle size by importing only the components you use. (Rule: Performance Optimization)
• Leverage Vuetify's CSS variables for dynamic theming and easier customization. (Rule: Theme Management)

Component Standards

• Use the Composition API with <script setup lang="ts"> for concise and type-safe component definitions. (Rule: Composition API)
• Use Vuetify's v-memo directive for optimizing render-heavy list rendering scenarios. (Rule: Performance Optimization)
• Use the Teleport component for rendering UI elements outside the DOM hierarchy when necessary. (Rule: Advanced UI)

Styling and Theming

• Define custom themes in a centralized configuration file for consistent theming across the app. (Rule: Theme Management)
• Use scoped styles in Vue components to prevent style leakage. (Rule: Scoped Styles)

Layout and Grid System

• Use Vuetify's updated grid system for responsive layouts aligned with Material Design 3. (Rule: Grid System)
• Leverage Vuetify's flexbox utilities for quick and consistent layout adjustments. (Rule: Layout Optimization)

Accessibility

• Ensure all components follow ARIA guidelines for accessibility compliance. (Rule: Accessibility)
• Test components for proper keyboard navigation and focus management. (Rule: Accessibility)

Performance

• Use lazy loading for heavy components like dialogs and modals to optimize performance. (Rule: Performance Optimization)
• Implement shallow refs for large objects that don't need deep reactivity. (Rule: Performance Optimization)

Testing and Debugging

• Test Vuetify components in isolation to ensure proper functionality and styling. (Rule: Testing Strategies)
• Address edge cases, such as empty states or invalid inputs, in component logic. (Rule: Edge Case Handling)

Integration with Vue

• Use Vuetify's global component registration to avoid repetitive imports. (Rule: Maintainability)
• Use defineProps and defineEmits macros for type-safe props and events in Vuetify components. (Rule: Type Safety)

Key Differences from Vuetify 2

• Vuetify 3 introduces CSS variables for easier theming and dynamic style changes.
• Fully embraces the Composition API, unlike Vuetify 2, which primarily used the Options API.
• Requires explicit configuration for tree-shaking, unlike Vuetify 2.
• Adopts Material Design 3 for a more modern and customizable design language.

These rules ensure that Vuetify 3 is used effectively in your project, adhering to best practices for maintainability, performance, and scalability.

[psmyrdek]

Let's engage more Vue.js users to comment on that - happy to proceed with the change once we have 2-3 extra reviewers.