vue-fsd

Implement Feature-Sliced Design architecture for Vue 3 projects with strict import rules and six named layers.

1|Updated Jan 28, 2026

Search Tags:#vue #fsd #modular #layered-architecture #frontend-architecture #public-api #import-rules

Ready to run

npx skills add https://github.com/Shohzod-Abdusamatov-7777777/agent-skills --skill vue-fsd

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vue-fsd
Source: https://github.com/Shohzod-Abdusamatov-7777777/agent-skills/tree/main/skills/vue-fsd
Command: npx skills add https://github.com/Shohzod-Abdusamatov-7777777/agent-skills --skill vue-fsd

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Feature-Sliced Design provides a scalable, opinionated architecture for Vue 3 applications, enabling clear boundaries and maintainable codebases in medium-to-large projects.

Core Features & Use Cases

Clear layer boundaries (app/pages/widgets/features/entities/shared) for scalable frontend architectures.
Enforces strict import rules and public API patterns to improve maintainability and collaboration.
Case studies include structuring large Vue apps, refactoring monoliths, and onboarding new developers with a shared blueprint.

Quick Start

Initialize a Vue 3 project and apply the six-layer FSD structure with public API exports.

Frequently Asked Questions about vue-fsd

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is Feature-Sliced Design for Vue 3 applications?▼

Feature-Sliced Design is an opinionated frontend architecture for Vue 3 that organizes code into six strict layers: app, pages, widgets, features, entities, and shared, ensuring clear boundaries and maintainability.

How do I structure a large Vue app using layered architecture?▼

Structure a large Vue app by applying the six-layer Feature-Sliced Design hierarchy and enforcing strict import rules with a single public API, using TypeScript and named exports to prevent circular dependencies.

Does Feature-Sliced Design work for refactoring monolithic Vue projects?▼

Yes, Feature-Sliced Design works for refactoring monolithic Vue projects by enforcing strict layer boundaries and public API patterns, which breaks down tangled codebases into scalable, maintainable modules.

When should I use modular frontend architecture for my Vue project?▼

Use modular frontend architecture for medium-to-large Vue applications that require clear layer boundaries, strict import rules, and a shared blueprint to facilitate team collaboration and developer onboarding.

Why does Feature-Sliced Design discourage cross-layer imports in Vue?▼

Feature-Sliced Design discourages cross-layer imports in Vue to maintain strict layer boundaries, prevent circular dependencies, and ensure the six-layer hierarchy remains scalable and maintainable across teams.

Can I use Feature-Sliced Design with TypeScript named exports?▼

Yes, Feature-Sliced Design uses TypeScript and named exports to enforce a single public API within Vue projects, ensuring strict import rules and clear module boundaries across the architecture.