skills.rest
SandroBeatz
SandroBeatzCOMMUNITY
Explore all skills by this author →
GitHub

vue-fsd

Create Vue 3 projects with Feature-Sliced Design layered architecture.

Updated Dec 22, 2025
Search Tags:#architecture#vue#feature-sliced design#vue 3#scalable#maintainable
One-click install
npx skills add https://github.com/SandroBeatz/layrix --skill vue-fsd-sandrobeatz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-fsd
Source: https://github.com/SandroBeatz/layrix/tree/main/.agents/skills/vue-fsd
Command: npx skills add https://github.com/SandroBeatz/layrix --skill vue-fsd-sandrobeatz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vue, typescript, pinia, vue-router, vite, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the complexity and maintainability challenges of large-scale Vue 3 applications by providing a structured approach using Feature-Sliced Design (FSD) architecture.

Core Features & Use Cases

  • Layered Architecture: Defines a clear structure with six layers (shared, entities, features, widgets, pages, app) for organizing code.
  • Scalability: Ensures that large-scale applications remain manageable and maintainable.
  • Maintainability: Facilitates easy refactoring and modification of individual parts of the application.
  • Use Case: Ideal for teams looking to refactor or build new large-scale Vue 3 projects using FSD principles.

Quick Start

Create a new Vue 3 project with FSD structure by running the command: vue-fsd create <project-name>

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 (FSD) is an architectural pattern for Vue 3 that organizes code into six distinct layers—shared, entities, features, widgets, pages, and app—to ensure scalability and clear boundaries between components.

How do I structure a scalable Vue 3 project with Feature-Sliced Design?▼

You structure a scalable Vue 3 project using FSD by dividing your codebase into specific layers: shared, entities, features, widgets, pages, and app. This separation enforces clear boundaries and makes large applications maintainable.

Do I need TypeScript and Pinia to use Feature-Sliced Design in Vue 3?▼

Yes, implementing Feature-Sliced Design in Vue 3 requires an understanding of TypeScript and Pinia. The architecture relies on these dependencies, alongside Vue Router and Vite, to maintain structured layers and domain-driven design principles.

When should I use Feature-Sliced Design instead of a standard Vue 3 architecture?▼

You should use Feature-Sliced Design when building or refactoring large-scale Vue 3 applications. It addresses complexity and maintainability challenges that standard architectures struggle with as your project and team grow.

How do I create a new Vue 3 project with an FSD structure?▼

You can create a new Vue 3 project with an FSD structure by running the command `vue-fsd create <project-name>`. This initializes your application with the predefined layered architecture guidelines.

Related Skills

Explore More Software Engineering Skills→
SandroBeatzSandroBeatz

vue-best-practices

Guide Vue.js development with best practices for state management, components, and performance.

Community
Intermediate
ngxtmngxtm

Next.js Architecture (FSD)

Organize Next.js code by business domain slices with Feature-Sliced Design.

Community
Intermediate
fanguyunfanguyun

vue-expert

Create Vue 3 components with Composition API and Pinia state management.

Community
Advanced
leaderiopleaderiop
7

Advanced Clean Hexagonal Architecture

Guide software engineers in implementing Clean Architecture and Hexagonal patterns for domain isolation.

Community
Advanced