Bind JavaScript widgets such as Select2 to Livewire components.

Discovery, component ownership, a component bridge, and the mount, update, and cleanup lifecycle.

Installation

composer require pharaonic/livewire-assistant

The service provider is registered automatically. Load the runtime once in your layout, before or after Livewire's scripts:

@livewireScripts
@livewireAssistantScripts

No Node build is needed. The 4.x line supports Livewire 4.3.4+ on Laravel 10.16+, 11, 12, and 13 with PHP 8.1 to 8.5. For Livewire 1, 2, or 3, use the 1.x, 2.x, or 3.x line.

Laravel 10 and 11 no longer receive security fixes, so recent Composer versions refuse to install or update them until you allow laravel/framework; see the installation guide.

Usage

<div wire:ignore>
    <select data-pharaonic="select2" data-property="country_id">
        <option value="">Choose a country</option>
        <option value="1">Egypt</option>
    </select>
</div>

Pharaonic.assistant.register('select2', {
    mount({ element, property, options, component }) {
        const $element = jQuery(element).select2(options)

        $element.val(component.get(property) ?? '').trigger('change.select2')
        $element.on('change.pharaonicAssistant', () => component.set(property, $element.val()))
        component.watch(property, (value) => $element.val(value ?? '').trigger('change.select2'))

        return () => $element.off('.pharaonicAssistant').select2('destroy')
    },
})

Load this script after @livewireAssistantScripts, or register through window.PharaonicAssistantQueue so the order does not matter. jQuery and Select2 are your application's dependencies. The documentation has the complete Select2 integration, including loop prevention.

Documentation

Read the full Livewire Assistant documentation for installation, writing integrations, the component bridge, and examples.

Support & Security

See SUPPORT.md and SECURITY.md.

License

MIT. See LICENSE.