DeveloperBreeze

Livewire Development Tutorials, Guides & Insights

Unlock 5+ expert-curated livewire tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your livewire skills on DeveloperBreeze.

Livewire Cheat Sheet: PHP & JavaScript Tips

Tutorial October 24, 2024

   $this->emit('eventName', $optionalData);
  • Target a specific component by passing its name or ID:

Managing WYSIWYG Editors with Livewire: A Step-by-Step Guide

Tutorial August 14, 2024
javascript php

Include the following JavaScript in your Blade file or in a separate JavaScript file:

    document.addEventListener('livewire:load', function() {
        Livewire.on('elementAdded', (data) => {
            $('.custom-editor').summernote({
                height: 200,
                callbacks: {
                    onPaste: function(contents, $editable) {
                        var pastedText = contents;
                        var wireId = $(this).data('wire-id');
                        if (wireId) {
                            Livewire.emit('updateContent', wireId, pastedText);
                        }
                        return false;
                    },
                    onChange: function(contents, $editable) {
                        var typedText = contents;
                        var wireId = $(this).data('wire-id');
                        if (wireId) {
                            Livewire.emit('updateContent', wireId, typedText);
                        }
                    }
                }
            });
        });
    });

Implementing Real-Time Search with Livewire in Laravel

Tutorial August 14, 2024
javascript php

Run the following command to generate a Livewire component:

php artisan make:livewire SearchPosts

Dynamically Updating Form Fields with Livewire in Laravel

Tutorial August 14, 2024
php

  • Category Selection: The selectedCategory property is bound to the category dropdown. When a category is selected, the updatedSelectedCategory method is triggered.
  • Dynamic Subcategory Loading: The updatedSelectedCategory method calls getSubcategories to fetch the corresponding subcategories based on the selected category. The subcategories property is then updated, which dynamically updates the subcategory dropdown in the view.
  • Livewire Magic: Livewire automatically listens to the changes in the selectedCategory property and re-renders the relevant parts of the view without a full page reload.

Using Livewire to create dynamic forms is a powerful way to improve user experience by updating form fields in real-time based on user input. This tutorial demonstrated how to set up a dynamic dropdown menu in Laravel using Livewire, but the principles can be applied to any form field.

Managing Modals with Livewire and JavaScript

Tutorial August 14, 2024
javascript php

  • Custom Events: We use Livewire's dispatchBrowserEvent to emit a custom event open-modal with the modalId as a parameter.
  • JavaScript Listener: A listener is set up for the open-modal event to open the specified modal by removing the hidden class. This ensures that JavaScript functions properly even after Livewire re-renders parts of the page.
  • Close Logic: We add listeners for buttons that hide the modals, ensuring a full modal lifecycle.

By using Livewire's event dispatching capabilities in combination with JavaScript, you can manage modals effectively even when Livewire re-renders the DOM. This approach provides a seamless user experience for modal interactions.