Livewire Cheat Sheet: PHP & JavaScript Tips

PHP Side (Server-Side)

1. Refresh Components

• Use $refresh to reload or refresh a component in PHP.

   protected $listeners = ['refreshComponent' => '$refresh'];

• Emit the event to trigger a refresh from another part of the code:

   $this->emit('refreshComponent');

1. Emit Event from Server to Client

• To emit a custom event from the PHP side:

   $this->emit('eventName', $optionalData);

1. Emit to Specific Components

• Target a specific component by passing its name or ID:

   $this->emitTo('componentName', 'eventName', $optionalData);

1. Emit Event to Ancestor Components

• Emit an event upwards to a parent or ancestor component:

   $this->emitUp('eventName', $optionalData);

1. Listeners in PHP

• Listen to events within the same component:

   protected $listeners = ['eventName' => 'methodToCall'];

1. Dispatch Browser Events (PHP to JS)

• Dispatch a custom browser event that can be listened to by JavaScript:

   $this->dispatchBrowserEvent('eventName', ['key' => 'value']);

JavaScript Side (Client-Side)

1. Trigger PHP Events from JS

• Emit events from JavaScript to trigger Livewire actions:

   Livewire.emit('eventName', optionalData);

1. Trigger a Livewire Component Refresh (JS)

• Refresh a component from JavaScript:

   Livewire.emit('refreshComponent');

1. Emit to Specific Components (JS)

• Target a specific component for an event:

   Livewire.emitTo('componentName', 'eventName', optionalData);

1. Listening for Events in JS

• Listen for Livewire events in JavaScript:

   Livewire.on('eventName', (data) => {
       console.log('Event received:', data);
   });

1. Listening to Custom Browser Events (Dispatched from PHP)

• Capture browser events dispatched from the Livewire PHP side:

   window.addEventListener('eventName', event => {
       console.log('Browser event received:', event.detail);
   });

1. Trigger File Uploads from JavaScript

• Call Livewire's file upload from the JavaScript side:

   document.querySelector('input[type="file"]').addEventListener('change', function (e) {
       Livewire.upload('uploadName', this.files[0], (uploadedFilename) => {
           console.log('File uploaded:', uploadedFilename);
       });
   });

Common Scenarios

1. Emit Event After Form Submission (PHP)

• PHP:

   public function submitForm()
   {
       // Perform form logic
       $this->emit('formSubmitted');
   }

• JavaScript:

   Livewire.on('formSubmitted', () => {
       console.log('Form successfully submitted');
   });

1. Using wire:click to Emit an Event (PHP)

• In Blade:

   <button wire:click="$emit('buttonClicked')">Click Me</button>

• In JavaScript:

   Livewire.on('buttonClicked', () => {
       console.log('Button was clicked!');
   });

Tips

• Emit without Reloading the Whole Page: Use Livewire emit to target specific parts of the application instead of refreshing the entire page.
• Combine PHP and JS Events: Use $emit in PHP and Livewire.emit in JS to create seamless interactions between backend and frontend.
• Browser Event Dispatching: Use dispatchBrowserEvent in PHP to trigger JS behavior without needing heavy front-end frameworks.

This cheat sheet provides a quick reference for common Livewire interactions, helping you efficiently bridge PHP and JavaScript in your Livewire applications.