drpshtiwan / livewire-async-select
A powerful async select component for Laravel Livewire with Alpine.js - a modern alternative to Select2
Installs: 126
Dependents: 0
Suggesters: 0
Security: 0
Stars: 87
Watchers: 0
Forks: 4
Open Issues: 0
pkg:composer/drpshtiwan/livewire-async-select
Requires
- php: >=8.1
- illuminate/database: ^10.0|^11.0|^12.0
- illuminate/support: ^10.0|^11.0|^12.0
- livewire/livewire: ^3.3
Requires (Dev)
- guzzlehttp/guzzle: ^7.5
- laravel/pint: ^1.20.0|^1.25.0
- orchestra/testbench: ^8.0|^9.0|^10.0
- pestphp/pest: ^2.34
- pestphp/pest-plugin-laravel: ^2.4
README
A powerful async select component for Laravel Livewire with Alpine.js - a modern, lightweight alternative to Select2.
🎥 Demo
✨ Features
- 🚀 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
📚 Documentation
Complete guides, examples, and API reference available at:
https://livewire-select.thejano.com/
To build and view the documentation locally, see DOCS.md.
⚡ Quick Install
- 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.
🎯 Basic Usage
<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.
📋 Requirements
- PHP 8.1+
- Laravel 10.x, 11.x, or 12.x
- Livewire 3.3+
🆚 Why This Package?
| Feature | Livewire Async Select | Select2 |
|---|---|---|
| jQuery Dependency | ❌ No | ✅ Yes |
| Livewire Integration | ✅ Native | ⚠️ Manual |
| Bundle Size | 🟢 Small | 🟡 Large |
| Modern Stack | ✅ Yes | ❌ Legacy |
🤝 Contributing
Contributions are welcome! Please see the documentation for details.
📄 License
The MIT License (MIT). Please see License File for more information.