VueAirport LogoVueAirport
Getting Started

Installation

Get started with VueAirport.

VueAirport can be installed in any Vue 3 or Nuxt 3 project using your preferred package manager.

Package Manager Installation

Install the packages

VueAirport is organized as a monorepo with separate packages. Install what you need:

# Core only
npm install vue-airport

# With base plugins
npm install vue-airport @vue-airport/plugins-base

# With DevTools
npm install vue-airport vue-airport-devtools
Recommended: Install both core and plugins packages for the full VueAirport experience.

Import the composable

Import useCheckIn from the core package:

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

// Your component logic
</script>

Import plugins (optional)

If you installed @vue-airport/plugins-base, import plugins separately:

<script setup lang="ts">
import { useCheckIn } from 'vue-airport';
import { 
  createActiveItemPlugin,
  createValidationPlugin,
  createHistoryPlugin,
  createDebouncePlugin
} from '@vue-airport/plugins-base';

// Your component logic
</script>

Start building

You're ready to go! Check out the Examples to see VueAirport in action.

Requirements

VueAirport requires Vue 3.3+ or Nuxt 3+ for proper TypeScript support and composition API features.

Vue 3 Projects

package.json
{
  "dependencies": {
    "vue": "^3.3.0",
    "vue-airport": "latest",
    "@vue-airport/plugins-base": "latest"
  }
}

Nuxt 3 Projects

package.json
{
  "dependencies": {
    "nuxt": "^3.0.0",
    "vue-airport": "latest",
    "@vue-airport/plugins-base": "latest",
    "vue-airport-devtools": "latest"
  }
}
The vue-airport-devtools package provides automatic integration with Vue DevTools in Nuxt projects.

TypeScript Support

VueAirport is written in TypeScript and provides full type definitions out of the box. No additional type packages are needed.

import { useCheckIn } from 'vue-airport';
import type { DeskCore, CheckInItem } from 'vue-airport';

interface MyData {
  label: string;
  value: number;
}

const { createDesk } = useCheckIn<MyData>();
const { desk } = createDesk('myDesk');

// Fully typed desk and items
const items: CheckInItem<MyData>[] = desk.getAll();

Using Plugins

VueAirport includes built-in plugins in the @vue-airport/plugins-base package:

import { useCheckIn } from 'vue-airport';
import { 
  createActiveItemPlugin, 
  createHistoryPlugin,
  createValidationPlugin,
  createDebouncePlugin
} from '@vue-airport/plugins-base';

const { createDesk } = useCheckIn();
const { desk } = createDesk('myDesk', {
  plugins: [
    createActiveItemPlugin(),
    createHistoryPlugin({ maxHistory: 50 }),
  ]
});
Check out the Plugin System documentation to learn more about using and creating plugins!

Package Organization

VueAirport is organized as a monorepo with separate packages for optimal tree-shaking:

vue-airport

Core composable and desk system. Required for all projects.

@vue-airport/plugins-base

Built-in plugins (activeItem, validation, debounce, history). Optional.

vue-airport-devtools

Vue DevTools integration. Optional, recommended for debugging.
Tree-shaking benefits: Only import what you need! The modular structure ensures minimal bundle size for your production builds.

Introduction

Welcome to VueAirport documentation.

Plugin System

Extend VueAirport functionality with plugins.