vue3-naiveui-fsd

Feature-Sliced Design (FSD) in Vue 3 structures applications into layers like app, pages, features, entities, and shared. It enforces strict layer import rules to ensure consistent organization, reusable references, and best-practice patterns across frontend teams.

To organize a Vue 3 project with Naive UI and FSD, create a skill directory with SKILL.md frontmatter, add architecture guidance, and use a references folder for templates. This scaffolds production-grade projects with structured conventions.

TypeScript conventions for Vue 3 FSD architecture include using an I-prefix for types and applying strict patterns. These conventions integrate with API client patterns, composables, and utilities to maintain consistency across the codebase.

Feature-Sliced Design works with Naive UI for production-grade Vue 3 applications. It enables structured organization, reusable references, and consistent conventions, making it suitable for frontend teams building complex projects.

Yes, you can use Feature-Sliced Design with Vue 3 Composition API and TypeScript. The architecture provides clear layer guidance, strict TypeScript patterns, and API client composables tailored for this specific tech stack.

Applying Feature-Sliced Design to an existing Vue 3 project requires enforcing strict layer import rules and adopting specific TypeScript conventions. This architectural shift demands careful refactoring to align with the structured FSD layers and shared utilities.