Livewire v3 changes

README.md

@@ -40,7 +40,7 @@ Add the Livewire directive `@livewire('livewire-ui-spotlight')`:
 </html>
 ```
 
-## Alpine
+## Alpine (only when using Livewire v2)
 
 Spotlight requires [Alpine](https://github.com/alpinejs/alpine). You can use the official CDN to quickly include Alpine:
 
@@ -59,10 +59,14 @@ To open the Spotlight input bar you can use one of the following shortcuts:
 
 You can customize the keybindings in the configuration file (see below). It's also possible to toggle Spotlight from any other Livewire component or via Javascript.
 
-In any Livewire component you can use the `dispatchBrowserEvent` helper.
+In any Livewire component you can use the `dispatchBrowserEvent` or `dispatch` helper.
 
 ```php
+// Livewire v2
 $this->dispatchBrowserEvent('toggle-spotlight');
+
+// Livewire v3
+$this->dispatch('toggle-spotlight');
 ```
 
 You can also use the `$dispatch` helper from Alpine to trigger the same browser event from your markup.

composer.json

@@ -6,19 +6,19 @@
         "laravel",
         "spotlight"
     ],
-    "homepage": "https://github.com/livewire-ui/spotlight",
+    "homepage": "https://github.com/wire-elements/spotlight",
     "license": "MIT",
     "authors": [
         {
             "name": "Philo Hermans",
-            "email": "[email protected]",
+            "email": "[email protected]",
             "role": "Developer"
         }
     ],
     "require": {
-        "php": "^8.0",
+        "php": "^8.1",
         "illuminate/contracts": "^8.0|^9.0|^10.0",
-        "livewire/livewire": "^2.4",
+        "livewire/livewire": "^3.0",
         "spatie/laravel-package-tools": "^1.4.3"
     },
     "require-dev": {

resources/views/spotlight.blade.php

@@ -7,7 +7,7 @@
     @endisset
 
     <div x-data="LivewireUISpotlight({
-        componentId: '{{ $this->id }}',
+        componentId: '{{ $this->id() }}',
         placeholder: '{{ trans('livewire-ui-spotlight::spotlight.placeholder') }}',
         commands: @js($commands),
         showResultsWithoutInput: '{{ config('livewire-ui-spotlight.show_results_without_input') }}',