A powerful async select component for Laravel Livewire with Alpine.js - a modern, lightweight alternative to Select2.
- 🚀 Asynchronous Loading - Load options dynamically from API endpoints
- 🔍 Search & Filter - Built-in search with debouncing
- 🎯 Multiple Selection - Beautiful chip/tag display
- ⚡ Alpine.js Powered - Lightweight, no jQuery dependency
- 🎨 Styled with Tailwind CSS - Pre-built styles with
las-prefix - 🎭 Custom Slots - Fully customizable rendering
- 📦 Easy Integration - Native Livewire component
- 🔄 Two-way Binding - Full wire:model support
- 🔒 No Style Conflicts - All classes prefixed with
las- - 🔐 Authentication Support - Custom headers and internal authentication
- 🛡️ Secure Internal Auth - Signed tokens with replay protection
Complete guides, examples, and API reference available at:
To build and view the documentation locally, see DOCS.md.
- Install via Composer:
composer require drpshtiwan/livewire-async-select- Publish the CSS assets:
php artisan vendor:publish --tag=async-select-assets- Setup your layout (important!):
<head>
@asyncSelectStyles
@livewireStyles
</head>
<body>
{{ $slot }}
@livewireScripts
@stack('scripts') {{-- Required! --}}
</body>
⚠️ Important: The@stack('scripts')directive is required for the component to work properly.
<livewire:async-select
name="user_id"
wire:model="selectedUser"
endpoint="/api/users/search"
placeholder="Search users..."
/>API Route with async-auth middleware:
// Default guard (web)
Route::middleware(['async-auth'])->get('/api/users/search', function (Request $request) {
$users = User::where('name', 'like', "%{$request->get('search')}%")
->limit(20)
->get();
return response()->json(['data' => $users]);
});
// With Sanctum
Route::middleware(['async-auth:sanctum'])->get('/api/users/search', function (Request $request) {
// Works with Sanctum tokens or internal auth
$users = User::where('name', 'like', "%{$request->get('search')}%")
->limit(20)
->get();
return response()->json(['data' => $users]);
});
// With web guard and session persistence
Route::middleware(['web', 'async-auth:web,persist'])->get('/api/users/search', function (Request $request) {
// Persists login in session
$users = User::where('name', 'like', "%{$request->get('search')}%")
->limit(20)
->get();
return response()->json(['data' => $users]);
});The async-auth middleware is automatically registered and works exactly like auth middleware, but also handles internal authentication automatically when the X-Internal-User header is present. Supports all guards: async-auth:web, async-auth:sanctum, async-auth:api, etc.
- PHP 8.1+
- Laravel 10.x, 11.x, or 12.x
- Livewire 3.3+
| Feature | Livewire Async Select | Select2 |
|---|---|---|
| jQuery Dependency | ❌ No | ✅ Yes |
| Livewire Integration | ✅ Native | |
| Bundle Size | 🟢 Small | 🟡 Large |
| Modern Stack | ✅ Yes | ❌ Legacy |
Contributions are welcome! Please see the documentation for details.
The MIT License (MIT). Please see License File for more information.