Upgrade guide

Upgrading from v3 to v4

To install the Wire Elements v4, update your composer.json to "wire-elements/pro": "^4.0" and run composer update wire-elements/pro to update to v4.

Requirements for Livewire v3

Remove AlpineJS

Livewire v3 now includes AlpineJS and all Alpine plugins by default. To avoid conflicts, remove any manual references to AlpineJS.

Breaking changes

The upgrade from v3 to v4 introduces a few breaking changes if you have previously published the views. To re-publish your views run the following command:

1php artisan vendor:publish --tag=wire-elements-pro-views --force

If you already upgraded your application to Livewire v3 you can run the following command to review each upgrade step

1php artisan livewire:upgrade –run-only wire-elements-pro-upgrade

The most significant change relates to dispatching events:

$dispatch('modal.open', 'component-name', {user: 1}) 
$dispatch('modal.open', {component: 'component-name', arguments: {user: 1}}) 
 
Livewire.dispatch('modal.open', 'component-name', {user: 1}) 
Livewire.dispatch('modal.open', {component: 'component-name', arguments: {user: 1}})

$this->dispatch('modal.open', 'component-name', ['user' => 1]) 
$this->dispatch('modal.open', component: 'component-name', arguments: ['user' => 1]]) 
 
$this->close(
    andEmit: []  
    andDispatch: [] 
);
 
InsertQueryResult::make(
    emit: $command['emit'], 
    dispatch: $command['dispatch'], 
);
 
SpotlightResult::make()
    ->setTitle('Pull Requests')
    ->setAction('emit_event', ['name' => 'slide-over.open', 'data' => ['component' => 'dummy-slide-over']]) 
    ->setAction('dispatch_event', ['name' => 'slide-over.open', 'data' => ['component' => 'dummy-slide-over']])

Upgrading from v2 to v3

The upgrade from v2 to v3 introduces a few breaking changes if you have previously published the views for the Spotlight component. To re-publish your views run the following command:

1php artisan vendor:publish --tag=wire-elements-pro-views --force

The following Blade files have been changed:

resources/views/spotlight/component.blade.php
resources/views/components/spotlight-item.blade.php
resources/views/spotlight/item.blade.php

Also, make sure to recompile your Javascript as the Spotlight component has been changed:

resources/js/spotlight-component.js

Upgrading from v1 to v2

Global changes

Update the Wire Elements Config file to the latest version.

1php artisan vendor:publish --tag=wire-elements-pro-config --force

You are now required to register the service provider for each component you want to use. This will ensure resources are only allocated for components you use. You can register the components by adding the service providers to your app.php:

 1[
 2    'providers' => [
 3        // ...
 4 
 5        /*
 6         * Package Service Providers...
 7         */
 8 
 9        \WireElements\Pro\Components\Spotlight\SpotlightServiceProvider::class,
10        \WireElements\Pro\Components\Modal\ModalServiceProvider::class,
11        \WireElements\Pro\Components\SlideOver\SlideOverServiceProvider::class,
12        \WireElements\Pro\Components\Insert\InsertServiceProvider::class,
13    ]
14]

Insert component changes

@insert has been deprecated and will be removed in a future release in favor of wep_insert:

1<!-- Before -->
2<textarea @insert(user,command)></textarea>
3 
4<!-- After -->
5<textarea {{ wep_insert(['user', 'command']) }}></textarea>
6<!-- Adding data is only supported by using the wep_insert function -->
7<textarea {{ wep_insert(['user', 'command'], [1,2,3]) }}></textarea>

Modal component changes

The modal component templates have been updated to fix a bug where the modal would disappear when resizing the window and to support a new fullscreen size. If you made any changes you will need to re-publish these view files and make your changes again.

resources/views/components/tailwind/modal.blade.php
resources/views/modal/component.blade.php

Also, make sure to update your CSS, changes have been made to:

resources/css/bootstrap/overlay-component.css
resources/css/tailwind/overlay-component.css

To use the new fullscreen size you can the attributes method on your modal:

1public static function attributes(): array
2{
3    return [
4        'size' => 'fullscreen',
5    ];
6}