Weave Code
Spotlight Laravel Package
wire-elements/spotlight
Wire Elements Spotlight adds a Spotlight/Alfred-style command palette to Laravel via Livewire. Open with Ctrl/Cmd+K (or customize), search and run actions, and toggle from Livewire or JavaScript. Works with Alpine when using Livewire v2.
Livewire component that provides Spotlight/Alfred-like functionality to your Laravel application.
Frequently asked questions about Spotlight
- How do I install Wire Elements Spotlight in a Laravel project?
- Run `composer require wire-elements/spotlight`, then add `@livewire('livewire-ui-spotlight')` to your layout. For Livewire v2, include Alpine.js via CDN or npm. No additional routes or controllers are needed.
- Does Spotlight work with Livewire v3?
- Yes, Spotlight supports both Livewire v2 and v3. The main difference is the event dispatching method: use `dispatch()` in v3 and `dispatchBrowserEvent()` in v2. The package handles both automatically.
- Can I customize the keyboard shortcuts for Spotlight?
- Absolutely. Spotlight allows you to configure keybindings in the config file. Defaults are `Ctrl/Cmd+K` and `Ctrl/Cmd+/`, but you can override them to match your app’s workflow.
- How do I add custom commands to Spotlight?
- Extend the `SpotlightCommand` class and register your commands in the `SpotlightServiceProvider`. Each command can include logic like search queries, authentication checks, or dynamic results via the `shouldBeShown()` method.
- Will Spotlight slow down my Laravel application if I have many commands?
- Spotlight is optimized for performance, but heavy command registries may impact response times. Use debouncing for search queries and cache results where possible. Test with your full command set in a staging environment.
- Does Spotlight support role-based or conditional command visibility?
- Yes. Use the `shouldBeShown()` method in your command class to enforce role-based access or other conditions. You can leverage Laravel’s gates, policies, or direct user checks for granular control.
- Can I use Spotlight without Alpine.js?
- No, Alpine.js is required for Livewire v2 compatibility. If you’re not using Livewire v2, ensure Alpine is included via CDN or npm. For Livewire v3, Alpine is optional but recommended for full functionality.
- How do I test Spotlight commands in Laravel?
- Test commands using Laravel’s Livewire testing utilities. Mock dependencies like the `Request` object or `Spotlight` service, then assert command visibility and behavior. Feature tests can verify UI interactions via browser events.
- Is there a way to trigger Spotlight programmatically from JavaScript?
- Yes. Dispatch the `toggle-spotlight` event from any Livewire component or JavaScript. For Livewire v2, use `window.Livewire.dispatch('toggle-spotlight')`, and for v3, use `this.dispatch('toggle-spotlight')`.
- What are the alternatives to Wire Elements Spotlight for Laravel?
- For Livewire apps, consider `livewire-ui/spotlight` (a fork with similar features) or build a custom solution using Livewire + Alpine. For non-Livewire projects, explore Inertia.js with Alpine or vanilla JS libraries like Fuse.js for search functionality.
Weaver
How can I help you explore Laravel packages today?