VueAirport LogoVueAirport
Getting Started

Examples

VueAirport usage examples with different use cases

Discover different use cases of vue-airport through practical and detailed examples.

Todo List Example

Simple todo list demonstrating fundamental check-in/check-out concepts.

Tabs Example

Tab system with shared context to manage the active tab.

Plugin Stack Example

Demonstrates plugin stack usage with ActiveItem and History plugins.

Form Example

Form with real-time validation using ValidationPlugin.

Shopping Cart Example

E-commerce cart with product management, quantities and total calculation.

Constraints Example

Example of constraint-based validation and member management.

Overview

These examples illustrate the main features of vue-airport:

🎯 Core Concepts

  • Creating a parent desk
  • Registering child components
  • Reactive data synchronization
  • InjectionKey for typed injection

🔌 Advanced Features

  • Context: Sharing data between parent and children
  • Plugins: Extending desk functionality

⚡ Automation

  • autoCheckIn: true: Automatic registration on mount
  • watchData: true: Automatic props synchronization
  • Automatic unregistration on destroy

Example Structure

Each example is organized in its own folder under app/components/examples/ and follows conventions inspired by shadcn-vue:

app/components/examples/
├── tabs/
│   ├── Tabs.vue
│   ├── TabItem.vue
│   └── index.ts
├── todo-list/
│   ├── TodoList.vue
│   ├── TodoItem.vue
│   └── index.ts
├── form/
│   ├── Form.vue
│   ├── FormField.vue
│   └── index.ts
├── shopping-cart/
│   ├── ShoppingCart.vue
│   ├── ProductCard.vue
│   └── index.ts
├── constraints/
│   ├── ConstraintsMemberList.vue
│   ├── MemberItem.vue
│   └── index.ts
├── plugin-stack/
│   ├── PluginStack.vue
│   ├── PluginStackListItem.vue
│   ├── PluginStackActiveItemPanel.vue
│   ├── PluginStackHistoryPanel.vue
│   └── index.ts

Each folder contains:

  • An index.ts file for InjectionKey and exports
  • One or more parent components (e.g., Tabs.vue, TodoList.vue, Form.vue)
  • Child components (e.g., TabItem.vue, TodoItem.vue, FormField.vue)

InjectionKey (index.ts)

import type { InjectionKey } from 'vue';
import type { CheckInDesk } from '@/vue-airport/composables/useCheckIn';

interface MyData {
  // Data type
}

export const MY_DESK_KEY: InjectionKey<CheckInDesk<MyData>> = Symbol('myDesk');

export { default as ParentComponent } from './ParentComponent.vue';
export { default as ChildComponent } from './ChildComponent.vue';

Parent Component

<script setup lang="ts">
import { useCheckIn } from '@/vue-airport/composables/useCheckIn';
import { MY_DESK_KEY } from '.';

const { createDesk } = useCheckIn<MyData>();
const { desk } = createDesk(MY_DESK_KEY, {
  debug: true,
  // options...
});
</script>

Child Component

<script setup lang="ts">
import { useCheckIn } from '@/vue-airport/composables/useCheckIn';
import { MY_DESK_KEY } from '.';

useCheckIn<MyData>().checkIn(MY_DESK_KEY, {
  id: props.id,
  autoCheckIn: true,
  watchData: true,
  data: () => ({ ... }),
});
</script>

API Reference

Complete API documentation for useCheckIn composable

Active Item Plugin

Track which item is currently active in the registry.