VueAirport
VueAirport A generic check-in system for parent/child component registration pattern in Vue 3 using Inversion of Control (IoC).
Like an airport check-in desk: parent components provide a check-in counter where child components register themselves with their data. Built on dependency injection principles for clean, maintainable component architecture.
Core Features
Type-Safe Registration
Full TypeScript support with generic types for your data. Safely register and retrieve child components with complete type inference.
Extensible Plugin System
Extend functionality with plugins. Built-in plugins include active item tracking, history logging, validation, and debug logging.
Reactive by Design
Built on Vue 3's reactivity system. Automatically track check-ins, check-outs, and updates with full reactivity support.
Inversion of Control
Implements IoC pattern using Vue's provide/inject for dependency injection. Children register with parents instead of parents managing children directly.
Event System
Subscribe to check-in, check-out, update, and clear events. Perfect for implementing custom behaviors and side effects.
Batch Operations
Efficiently handle multiple items at once with checkInMany, checkOutMany, and updateMany methods for optimal performance.
Modular Architecture
VueAirport is organized as a monorepo with separate packages for maximum flexibility
vue-airport
Core composable and desk system. Install only what you need for minimal bundle size.
@vue-airport/plugins-base
Built-in plugins: activeItem, validation, debounce, and history. Optional, install separately.
vue-airport-devtools
Vue DevTools integration for debugging and inspecting check-in registries.
Use Cases
VueAirport excels in scenarios where you need dynamic parent-child relationships
Tab Systems
Create dynamic tabs where children register their content and metadata automatically.
Todo Lists
Build interactive lists where items can self-register and manage their own state.
Forms & Validation
Complex forms where fields register themselves and validation state is centrally managed.
Shopping Carts
Product cards that automatically add/remove themselves from a central cart system.
Search Results
Dynamic search with debounced updates and automatic result management.
Accordions & Menus
Collapsible sections that coordinate state through a shared desk.
::: ::
See It In Action
Try our interactive examples to understand how VueAirport works
0 item(s)
- Learn Vue Airport
- Create plugins
- Contribute
- Build awesome apps