Introduction

Welcome to VueAirport, a powerful composable for managing parent-child component relationships in Vue 3.

What is VueAirport?

VueAirport is a generic check-in system designed for parent-child component registration patterns. Think of it like an airport check-in desk: parent components provide a check-in counter where child components register themselves with their data.

This pattern is particularly useful when building:

• Tab systems where tabs register with a parent container
• Form fields that register with a parent form
• Shopping carts where products register with a cart manager
• Any scenario where child components need to communicate their state to a parent

Inversion of Control (IoC)

VueAirport implements a local Inversion of Control container.

Traditional Approach

In a traditional parent-child relationship, the parent component directly manages its children:

<!-- ❌ Traditional: Parent controls children -->
<script setup>
const tabs = ref([]);
const registerTab = (tab) => tabs.value.push(tab);

// Parent must expose registration method
// Children must know how to find and call it
</script>

IoC Approach with VueAirport

With IoC, children control their own registration. The parent simply provides a "desk" (container) where children can check in:

<!-- ✅ IoC: Children register themselves -->
<script setup>
// Parent just creates a desk and provides it
const { createDesk } = useCheckIn();
const { desk } = createDesk('tabs');

// Children will register themselves automatically
// Parent receives updates via the reactive registry
</script>

Benefits of IoC in VueAirport

Dependency Injection

VueAirport uses Vue's provide/inject mechanism as its dependency injection system:

1. Parent provides a desk via Vue's provide()
2. Children inject the desk via Vue's inject()
3. No direct coupling between parent and child
4. Works across any depth in the component tree

This approach follows the Dependency Inversion Principle: both parent and child depend on an abstraction (the desk interface), not on each other.

The Airport Analogy

Imagine an airport check-in desk:

1. The Desk 📋 - A parent component creates a "desk" where children can register
2. Check-In ✅ - Child components "check in" with their data (like passengers registering luggage)
3. Registry 📝 - The desk maintains a registry of all checked-in items
4. Check-Out 👋 - When unmounted, children automatically "check out"

Key Features

VueAirport provides a comprehensive set of features for component communication:

• Inversion of Control: Children register themselves with parents, enabling clean decoupling and better component composition
• Type-Safe: Full TypeScript support with generic types for your data
• Plugin Architecture: Extensible system with built-in plugins (history, validation, logger, activeItem)
• Event System: Subscribe to check-in, check-out, update, and clear events
• Batch Operations: Check-in, check-out, or update multiple items at once
• Auto Check-In: Components can automatically register on mount
• Reactive Updates: Watch component data and automatically update the registry
• Flexible Sorting: Sort registered items by any field or timestamp
• Context Sharing: Share context data between parent and children
• Debug Mode: Built-in debugging for development

Use Cases

VueAirport excels in scenarios such as:

Quick Example

Here's a simple example to get you started:

<!-- Parent Component -->
<script setup lang="ts">
import { useCheckIn } from 'vue-airport';

interface TabItem {
  label: string;
  content: string;
}

const { createDesk } = useCheckIn<TabItem>();
const { desk } = createDesk('tabs');
const activeTab = ref('tab1');
</script>

<template>
  <div>
    <div v-for="item in desk.getAll()" :key="item.id">
      <button @click="activeTab = item.id">{{ item.data.label }}</button>
    </div>
  </div>
</template>

<!-- Child Component -->
<script setup lang="ts">
import { useCheckIn } from 'vue-airport';

const props = defineProps<{
  id: string;
  label: string;
}>();

const { checkIn } = useCheckIn<TabItem>();

checkIn('tabs', {
  autoCheckIn: true,
  id: props.id,
  data: () => ({ label: props.label, content: 'Tab content' })
});
</script>