Weave Code
Spotlight Laravel Package
wire-elements/spotlight
Livewire Spotlight brings Alfred/Spotlight-style search and command palette to Laravel. Install via Composer, add the @livewire('livewire-ui-spotlight') directive, and open with customizable shortcuts (Ctrl/Cmd+K, Ctrl/Cmd+/) or toggle via events.
Livewire component that provides Spotlight/Alfred-like functionality to your Laravel application.
Frequently asked questions about Spotlight
- How do I install Livewire Spotlight in a Laravel project?
- Run `composer require wire-elements/spotlight`, publish the config and translations with `php artisan vendor:publish --tag=livewire-ui-spotlight-config` and `--tag=livewire-ui-spotlight-translations`, then add `@livewire('livewire-ui-spotlight')` to your Blade layout. Ensure Alpine.js is included (CDN or bundled) if using Livewire v2.
- Does Livewire Spotlight work with Livewire v3?
- Yes, but note that Livewire v3 uses `dispatch()` instead of `dispatchBrowserEvent()` for triggering Spotlight. Check the package docs for version-specific differences, as some event handling may vary. Test thoroughly if migrating from v2.
- Can I customize the keyboard shortcuts for Spotlight?
- Absolutely. Edit the `config/livewire-ui-spotlight.php` file to modify shortcuts like `['k', 'slash']` for `CTRL/CMD+K` or `CTRL/CMD+/`. You can also toggle Spotlight programmatically via JavaScript or Livewire events (`dispatch('toggle-spotlight')` in v3).
- Will Spotlight work with Inertia.js and Laravel?
- Yes, since Spotlight is a Livewire component, it integrates seamlessly with Inertia.js. Include the Livewire directive in your Inertia layout, and ensure Alpine.js is available in your frontend setup. No additional configuration is needed beyond standard Livewire-Inertia setup.
- How do I create custom commands for Spotlight?
- Generate a command with `php artisan make:spotlight [CommandName]`, then define `execute()`, `shouldBeShown()`, and `dependencies()` methods in the generated class. Register it via `Spotlight::registerCommand()` in your `AppServiceProvider` or config file. Dynamic commands can query Eloquent models or use Laravel services.
- Does Spotlight support user-specific commands (e.g., admin-only actions)?
- Yes, use the `shouldBeShown()` method in your command class to enforce logic like `auth()->user()->isAdmin()`. For performance, cache results if commands rely on heavy queries. Test edge cases like guest users or role changes during sessions.
- Is Alpine.js required, and how do I bundle it instead of using a CDN?
- Alpine.js is required for Livewire v2 (v3 may handle it differently). To bundle it, install via npm (`npm install alpinejs`), then import it in your JS entry file (e.g., `resources/js/app.js`). This avoids CDN latency and reduces HTTP requests, though it adds ~10KB to your asset bundle.
- Can I style Spotlight to match my Tailwind/Bootstrap theme?
- Yes, override the default views by publishing them (`php artisan vendor:publish --tag=livewire-ui-spotlight-views`) and customize the Blade templates. Use Tailwind/Bootstrap classes directly in the published files. For CSS, target the `.livewire-ui-spotlight` class or extend the package’s styles.
- What are the performance implications of many commands in Spotlight?
- Spotlight uses Fuse.js for fuzzy search, which is lightweight but not instant for thousands of commands. Optimize by lazy-loading commands or implementing server-side filtering. Test search latency in your staging environment, especially if commands include heavy Eloquent queries or API calls.
- Are there alternatives to Livewire Spotlight for Laravel?
- Alternatives include Laravel Scout (for search-focused apps) or custom-built solutions using Laravel Echo + Vue/React for command palettes. However, Spotlight is uniquely optimized for Livewire, offering seamless reactivity and minimal setup. If you’re not using Livewire, consider Laravel Nova’s built-in search or third-party packages like `spatie/laravel-searchable`.
Weaver
How can I help you explore Laravel packages today?