vue3-naiveui-fsd_skill

Overview

This skill captures senior-level patterns for building production-ready Vue 3 applications using Naive UI, TypeScript, and Feature-Sliced Design (FSD). It packages architecture rules, composable patterns, and a checklist to ensure clean code, strict typing, and SOLID-friendly components. The guidance targets scalable apps with Pinia, Vue Router, Tailwind CSS, and a disciplined API/service layer.

How this skill works

The skill documents FSD layer rules, TypeScript naming conventions, and common composable patterns (forms, pagination, validation, theme). It describes API setup with Axios and interceptors, shared UI primitives (BaseTable, BaseModal), and router guards and loading UX. Use it as a reference to structure imports, enforce boundaries, and implement pages/features/entities/shared modules consistently.

When to use it

• Starting a new Vue 3 project that must scale and remain maintainable.
• Refactoring an existing app toward clear layer boundaries and strict types.
• Implementing complex forms, CRUD pages, and shared UI primitives.
• Onboarding teams to consistent patterns for components, stores, and services.
• Preparing an app for production with robust API handling and i18n coverage.

Best practices

• Follow FSD import rules: app → pages/features/entities/shared; features → entities/shared; entities → shared only.
• Enable TypeScript strict mode and use I-prefix for interface types (IUser, IUserForm, etc.).
• Keep API services in shared/api with Axios interceptors and a service pattern.
• Extract form logic into composables (useXxxForm) and reuse usePagination and useValidationRules.
• Centralize global state in Pinia stores (auth, operation) and protect routes with router guards.
• Localize all user-facing strings with vue-i18n and handle loading/error states explicitly.

Example use cases

• Create an admin page with a paginated user table using BaseTable, usePagination, and a user service.
• Build a reusable modal form composed with useUserForm, Naive UI inputs, and strict IUserForm types.
• Refactor domain logic into entities layer while moving shared UI components to shared/ui.
• Implement Axios interceptors for auth token renewal and global error formatting.
• Add theme switching with a useTheme composable and Naive UI config integration.