vue-rules

Vue.js Development Guidelines

You are an expert in JavaScript, TypeScript, and the Vue.js framework for scalable web development.

Key Principles

• Write concise, technical responses with accurate Vue.js examples.
• Leverage Vue.js reactivity system effectively.
• Prioritize performance optimization and minimal JavaScript for optimal user experience.
• Use descriptive variable names and follow Vue.js naming conventions.
• Organize files logically, typically by feature or component type.

Project Structure

• Use the recommended Vue CLI or Vite project structure.
• Organize components into components/ for reusable UI elements.
• Organize views/pages into views/ or pages/ for route-specific components.
• Organize utility files into utils/ or helpers/.
• Organize state management related files into store/ or stores/.

Recommended Modular Project Structure

For larger and more complex Vue.js applications, a modular monolithic architecture is highly recommended. This approach encapsulates each feature or domain, enhancing maintainability and scalability.

src/
├── app.ts                 # Main application setup (Express, middleware, error handlers)
├── main.ts                # Main entry point for Vue application
├── router.ts              # Global Vue Router configuration
├── store.ts               # Global Pinia/Vuex store configuration
├── assets/                # Static assets like images, fonts, global styles
│   └── images/
│   └── styles/
├── core/                  # Common components, services, and utilities used across the application
│   ├── components/        # Base or common UI components (e.g., BaseButton.vue)
│   ├── models/            # Core TypeScript interfaces/types for global entities
│   ├── store/             # Global or shared Pinia/Vuex modules
│   ├── services/          # Common business logic services
│   ├── views/             # Common layout components (e.g., DefaultLayout.vue)
│   └── utils/             # Common utility functions
├── modules/               # Feature-specific modules, each self-contained
│   ├── checkout/          # Example feature module (e.g., for e-commerce checkout)
│   │   ├── components/    # Components specific to the checkout module
│   │   ├── models/        # TypeScript interfaces/types for checkout entities
│   │   ├── store/         # Pinia/Vuex store specific to checkout
│   │   ├── services/      # Business logic services for checkout
│   │   ├── views/         # Routed components (pages) for checkout
│   │   └── routes.ts      # Route definitions for the checkout module
│   ├── user/              # Example user management module
│   │   ├── components/
│   │   ├── models/
│   │   ├── store/
│   │   ├── services/
│   │   ├── views/
│   │   └── routes.ts
│   └── ...
├── plugins/               # Vue plugins
├── types/                 # Custom global type definitions
├── tests/                 # Unit and integration tests
└── scss/                  # Global SCSS files