Vue Modular Project Structure

This skill consolidates the web project conventions and the Vue3 project modules approach to help design, enforce, and migrate to and keep a modular Vue 3 architecture.

When to Use This Skill

• Starting a new Vue 3 application that must scale across domains and teams.
• Migrating a legacy codebase toward module-level encapsulation and public APIs.
• Designing folder/layout conventions, public API exports, and routing auto-discovery.
• Configuring ESLint or automation to enforce module boundaries and naming rules.

Key Concepts

• Module = domain folder with views, components, services, composables, stores, types and a mandatory index.ts public API.
• Global assets = components/, composables/, features/, entities/, and shared/ (UI kit + utilities).
• App infrastructure = app/ (router, plugins, layouts, global styles).
• Layered access: the repository defines six layers; imports are allowed only downward.

Example Project Structure