Livewire v3 アップグレードガイド

自動アップグレードツールAutomated upgrade tool

アップグレードにかかる時間を節約するため、アップグレードプロセスの可能な限り多くの部分を自動化する、Artisanコマンドを用意しています。To save you time upgrading, we've included an Artisan command to automate as many parts of the upgrade process as possible.

Livewireバージョン3のインストール後、以下のコマンドを実行すると、各破壊的変更を自動的にアップグレードするためのプロンプトを表示します。After installing Livewire version 3[/docs/upgrading#update-livewire-to-version-3], run the following command, and you will receive prompts to upgrade each breaking change automatically:

php artisan livewire:upgrade

上記コマンドで、アプリケーションの多くの部分をアップグレードできますが、このページのステップごとのガイドに従うのが、完全なアップグレードを確実に行う唯一の方法です。Although the above command can upgrade much of your application, the only way to ensure a complete upgrade is to follow the step-by-step guide on this page.

lightbulb Tip: アプリのアップグレードを依頼する： 大規模なLivewireアプリケーションをお持ちの場合、またはバージョン2から3へのアップグレードに対処したくない場合、弊社に処理を依頼できます。アップグレードサービスの詳細はこちらをご覧ください。[!tip] Hire us to upgrade your app instead If you have a large Livewire application or just don't want to deal with upgrading from version 2 to version 3, you can hire us to handle it for you. Learn more about our upgrade service here.[/jumpstart]

PHPのアップグレードUpgrade PHP

Livewireは、アプリケーションをPHPバージョン8.1以上で実行する必要があります。Livewire now requires that your application is running on PHP version 8.1 or greater.

Livewireバージョン3へアップデートUpdate Livewire to version 3

以下の composerコマンドを実行し、アプリケーションのLivewire依存パッケージ関係をバージョン2から3へアップグレードします。Run the following composer command to upgrade your application's Livewire dependency from version 2 to 3:

composer require livewire/livewire "^3.0"

warning Warning! Livewire3パッケージの互換性： ほとんどの主要なサードパーティLivewireパッケージは、現在Livewire3をサポートしているか、すでにサポートに取り組んでいます。ただし、Livewire3のサポートをリリースするのに時間がかかるパッケージがどうしても出てくるでしょう。[!warning] Livewire 3 package compatibility Most of the major third-party Livewire packages either currently support Livewire 3 or are working on supporting it soon. However, there will inevitably be packages that take longer to release support for Livewire 3.

ビューキャッシュのクリアClear the view cache

アプリケーションのルートディレクトリで以下のArtisanコマンドを実行し、キャッシュ/コンパイル済みのBladeビューをクリアし、LivewireがそれらをLivewire3と互換性があるように再コンパイルさせます。Run the following Artisan command from your application's root directory to clear any cached/compiled Blade views and force Livewire to re-compile them to be Livewire 3 compatible:

php artisan view:clear

新しい設定のマージMerge new configuration

Livewire3では、複数の設定オプションを変更しました。アプリケーションへリソース公開した設定ファイル（config/livewire.php）がある場合は、以下の変更を考慮して修正する必要があります。Livewire 3 has changed multiple configuration options. If your application has a published configuration file (config/livewire.php), you will need to update it to account for the following changes.

新しい設定New configuration

以下の設定キーをバージョン3で導入しました。The following configuration keys have been introduced in version 3:

'legacy_model_binding' => false,

'inject_assets' => true,

'inject_morph_markers' => true,

'navigate' => false,

'pagination_theme' => 'tailwind',

追加のオプションの説明とコピー＆ペースト可能なコードについては、GitHubの新しいLivewire設定ファイルを参照してください。You can reference Livewire's new configuration file on GitHub[https://github.com/livewire/livewire/blob/master/config/livewire.php] for additional option descriptions and copy-pastable code.

変更された設定Changed configuration

以下の設定項目が新しいデフォルト値で更新されました。The following configuration items have been updated with new default values:

新しいクラス名前空間New class namespace

Livewireのデフォルトclass_namespaceをApp\Http\LivewireからApp\Livewireへ変更しました。古い名前空間設定値を保持することもできますが、設定を新しい名前空間に更新することを選択した場合は、Livewireコンポーネントをapp/Livewireへ移動する必要があります。Livewire's default class_namespace has changed from App\Http\Livewire to App\Livewire. You are welcome to keep the old namespace configuration value; however, if you choose to update your configuration to the new namespace, you will have to move your Livewire components to app/Livewire:

'class_namespace' => 'App\\Http\\Livewire', // [tl! remove]
'class_namespace' => 'App\\Livewire', // [tl! add]

新しいレイアウトビューパスNew layout view path

バージョン2でフルページのコンポーネントをレンダリングする場合、Livewireはresources/views/layouts/app.blade.phpをデフォルトのレイアウトBladeコンポーネントとして使用していました。When rendering full-page components in version 2, Livewire would use resources/views/layouts/app.blade.php as the default layout Blade component.

コミュニティでは、匿名Bladeコンポーネントに対する嗜好が高まっているため、Livewire3では、resources/views/components/layouts/app.blade.phpをデフォルトの場所へ変更しました。Because of a growing community preference for anonymous Blade components, Livewire 3 has changed the default location to: resources/views/components/layouts/app.blade.php.

'layout' => 'layouts.app', // [tl! remove]
'layout' => 'components.layouts.app', // [tl! add]

削除した設定Removed configuration

Livewireは、以下の設定項目を認識しなくなりました。Livewire no longer recognizes the following configuration items.

app_urlapp_url

アプリケーションをルート以外のURIで提供している場合、Livewire2では app_url設定オプションを使用して、LivewireがAJAXリクエストを行うために使用するURLを設定できました。If your application is served under a non-root URI, in Livewire 2 you could use the app_url configuration option to configure the URL Livewire uses to make AJAX requests to.

このケースにおいて、文字列設定は柔軟性に欠けることがわかりました。そのため、Livewire3では、代わりにランタイム設定を使用することにしました。詳細は、Livewireの更新エンドポイントの設定に関するドキュメントを参照してください。In this case, we've found a string configuration to be too rigid. Therefore, Livewire 3 has chosen to use runtime configuration instead. You can reference our documentation on configuring Livewire's update endpoint[/docs/installation#configuring-livewires-update-endpoint] for more information.

asset_urlasset_url

Livewire2では、アプリケーションをルート以外のURIで提供している場合、asset_url設定オプションを使用して、LivewireがJavaScriptアセットを提供するために使用するベースURLを設定していました。In Livewire 2, if your application was served under a non-root URI, you would use the asset_url configuration option to configure the base URL that Livewire uses to serve its JavaScript assets.

Livewire3では、代わりにランタイム設定戦略を選択しました。詳細は、Livewire のスクリプトアセットエンドポイントの設定に関するドキュメントを参照してください。Livewire 3 has instead chosen a runtime configuration strategy. You can reference our documentation on configuring Livewire's script asset endpoint[/docs/installation#customizing-the-asset-url] for more information.

middleware_groupmiddleware_group

Livewireは、更新エンドポイントをカスタマイズするためのより柔軟な方法を公開したため、middleware_group設定オプションを削除しました。Because Livewire now exposes a more flexible way to customize its update endpoint, the middleware_group configuration option has been removed.

Livewireリクエストへカスタムミドルウェアを適用する方法の詳細は、Livewireの更新エンドポイントのカスタマイズに関するドキュメントを参照してください。You can reference our documentation on customizing Livewire's update endpoint[/docs/installation#configuring-livewires-update-endpoint] for more information on applying custom middleware to Livewire requests.

manifest_pathmanifest_path

Livewire3では、コンポーネントの自動ロードにマニフェストファイルを使用しなくなりました。したがって、manifest_path設定は不要です。Livewire 3 no longer uses a manifest file for component autoloading. Therefore, the manifest_path configuration is no longer necessary.

back_button_cacheback_button_cache

Livewire3では、wire:navigateを使用してアプリケーションへSPAエクスペリエンスを提供するため、back_button_cache設定は不要です。Because Livewire 3 now offers an SPA experience for your application using wire:navigate[/docs/navigate], the back_button_cache configuration is no longer necessary.

Livewireアプリの名前空間Livewire app namespace

バージョン2では、LivewireコンポーネントはApp\Http\Livewire名前空間の下で、自動的に生成／認識していました。In version 2, Livewire components were generated and recognized automatically under the App\Http\Livewire namespace.

Livewire3では、このデフォルトをApp\Livewireへ変更しました。Livewire 3 has changed this default to: App\Livewire.

すべてのコンポーネントを新しい場所に移動するか、アプリケーションのconfig/livewire.php設定ファイルに次の設定を追加してください。You can either move all of your components to the new location or add the following configuration to your application's config/livewire.php configuration file:

'class_namespace' => 'App\\Http\\Livewire',

ディスカバリーDiscovery

Livewire3では、マニフェストが存在せず、したがってLivewireコンポーネントに関連して「発見(discover)」するものが何もないため、ビルドスクリプトからlivewire:discoverの参照を問題なく安全に削除できます。With Livewire 3, there is no manifest present, and there is therefore nothing to “discover” in relation to Livewire Components, and you can safely remove any livewire:discover references from your build scripts without issue.

ページコンポーネントのレイアウトビューPage component layout view

次のような構文を使用してLivewireコンポーネントをフルページとしてレンダーする場合：When rendering Livewire components as full pages using a syntax like the following:

Route::get('/posts', ShowPosts::class);

Livewireがコンポーネントをレンダーするために使用するBladeレイアウトファイルをresources/views/layouts/app.blade.phpから、resources/views/components/layouts/app.blade.phpへ変更しました。The Blade layout file used by Livewire to render the component has changed from resources/views/layouts/app.blade.php to resources/views/components/layouts/app.blade.php:

resources/views/layouts/app.blade.php #[tl! remove]
resources/views/components/layouts/app.blade.php #[tl! add]

レイアウトファイルを新しい場所に移動するか、アプリケーションのconfig/livewire.php設定ファイル内で次の設定を適用してください。You can either move your layout file to the new location or apply the following configuration inside your application's config/livewire.php configuration file:

'layout' => 'layouts.app',

詳細は、ページコンポーネントのレイアウトの作成と使用に関するドキュメントを確認してください。For more information, check out the documentation on creating and using a page-component layout[/docs/components#layout-files].

Eloquentモデル結合Eloquent model binding

Livewire2は、Eloquentモデルプロパティへのwire:model結合を直接サポートしていました。たとえば、以下は一般的なパターンでした。Livewire 2 supported wire:model binding directly to Eloquent model properties. For example, the following was a common pattern:

public Post $post;

protected $rules = [
    'post.title' => 'required',
    'post.description' => 'required',
];

<input wire:model="post.title">
<input wire:model="post.description">

Livewire3では、Eloquentモデルへの直接結合を無効にし、個々のプロパティを使用するか、フォームオブジェクトを抽出することを推奨しています。In Livewire 3, binding directly to Eloquent models has been disabled in favor of using individual properties, or extracting Form Objects[/docs/forms#extracting-a-form-object].

ただし、この動作はLivewireアプリケーションで非常に強く関連しているため、バージョン3ではconfig/livewire.phpの設定項目を介してこの動作のサポートを維持しています。However, because this behavior is so heavily relied upon in Livewire applications, version 3 maintains support for this behavior via a configuration item in config/livewire.php:

'legacy_model_binding' => true,

legacy_model_bindingをtrueへ設定すると、Livewireはバージョン2と完全に同じようにEloquentモデルプロパティを処理します。By setting legacy_model_binding to true, Livewire will handle Eloquent model properties exactly as it did in version 2.

AlpineJSAlpineJS

Livewire3には、AlpineJSがデフォルトで付属しています。Livewire 3 ships with AlpineJS[https://alpinejs.dev] by default.

LivewireアプリケーションにAlpineを手作業で含める場合は、Livewireの組み込みバージョンと競合しないように、削除する必要があります。If you manually include Alpine in your Livewire application, you will need to remove it, so that Livewire's built-in version doesn't conflict.

スクリプトタグを介するAlpineの取り込みIncluding Alpine via a script tag

以下のようなスクリプトタグを介し、Alpineをアプリケーションへ取り込む場合は完全に削除でき、代わりにLivewireが内部バージョンをロードします。If you include Alpine into your application via a script tag like the following, you can remove it entirely and Livewire will load its internal version instead:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <!-- [tl! remove] -->

スクリプトタグを介するプラグインの取り込みIncluding plugins via a script tag

Livewire3では、以下のAlpineプラグインをすぐに使用できるように、付属しています。Livewire 3 now ships with the following Alpine plugins out-of-the-box:

• AnchorAnchor[https://alpinejs.dev/plugins/anchor]
• CollapseCollapse[https://alpinejs.dev/plugins/collapse]
• FocusFocus[https://alpinejs.dev/plugins/focus]
• IntersectIntersect[https://alpinejs.dev/plugins/intersect]
• MaskMask[https://alpinejs.dev/plugins/mask]
• MorphMorph[https://alpinejs.dev/plugins/morph]
• PersistPersist[https://alpinejs.dev/plugins/persist]

新しいAlpine ラグインを追加する可能性があるため、package.jsonファイルの変更に注意するのは、重要です。It is worth keeping an eye on changes to the package.json[https://github.com/livewire/livewire/blob/main/package.json] file, as new Alpine plugins may be added!

以前にこれらのいずれかを次のような<script>タグを介してアプリケーションへ取り込んでいる場合は、Alpine のコアと一緒に削除する必要があります。If you have previously included any of these in your application via <script> tags like below, you should remove them along with Alpine's core:

<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script> <!-- [tl! remove:1] -->
<!-- ... -->

スクリプトタグを介するAlpineグローバルへのアクセスAccessing the Alpine global via a script tag

以下のように、スクリプトタグからAlpineグローバルオブジェクトへ、現在アクセスしている場合は：If you are currently accessing the Alpine global object from a script tag like so:

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data(...)
    })
</script>

Livewireは内部的に Alpine のグローバルオブジェクトを以前のように取り込み、登録しているため、引き続き実行できます。You may continue to do so, as Livewire internally includes and registers Alpine's global object like before.

JSバンドルを介する取り込みIncluding via JS bundle

以下のように、NPMを介してAlpineまたは上記の一般的なコアAlpineプラグインをアプリケーションのJavaScriptバンドルへ取り込んでいる場合は：If you have included Alpine or any of the popular core Alpine plugins mentioned above via NPM into your applications JavaScript bundle like so:

// 注意：このスニペットはLivewire2のAppine取り込みアプローチ

import Alpine from 'alpinejs'
import intersect from '@alpinejs/intersect'

Alpine.plugin(intersect)

Alpine.start()

Livewireには、Alpineと多くの一般的なAlpineプラグインをデフォルトで取り込み済みなため、完全に削除できます。You can remove them entirely, because Livewire includes Alpine and many popular Alpine plugins by default.

JSバンドルを介するAlpineへのアクセスAccessing Alpine via JS bundle

次のように、カスタムAlpineプラグインまたはコンポーネントをアプリケーションのJavaScriptバンドル内で登録している場合は：If you are registering custom Alpine plugins or components inside your application's JavaScript bundle like so:

// 注意：このスニペットはLivewire2のAppine取り込みアプローチ

import Alpine from 'alpinejs'
import customPlugin from './plugins/custom-plugin'

Alpine.plugin(customPlugin)

Alpine.start()

バンドルへLivewireコアESMモジュールを取り込み、そこからAlpineへアクセスすることで、これを引き続き実行できます。You can still accomplish this by importing the Livewire core ESM module into your bundle and accessing Alpine from there.

Livewireをバンドルへ取り込むするには、最初にLivewireの通常のJavaScriptインジェクションを無効にし、アプリケーションのプライマリレイアウトで@livewireScriptsを@livewireScriptConfigに置き換え、Livewireへ必要な設定を提供する必要があります。To import Livewire into your bundle, you must first disable Livewire's normal JavaScript injection and provide the necessary configuration to Livewire by replacing @livewireScripts with @livewireScriptConfig in your application's primary layout:

    <!-- ... -->

    @livewireScripts <!-- [tl! remove] -->
    @livewireScriptConfig <!-- [tl! add] -->
</body>

これで、以下のように、AlpineとLivewireをアプリケーションのバンドルへ取り込めます。Now, you can import Alpine and Livewire into your application's bundle like so:

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import customPlugin from './plugins/custom-plugin'

Alpine.plugin(customPlugin)

Livewire.start()

Alpine.start()を呼び出す必要がなくなったことに注意してください。LivewireがAlpineを自動的に起動します。Notice you no longer need to call Alpine.start(). Livewire will start Alpine automatically.

詳細は、LivewireのJavaScript手作業バンドルに関するドキュメントを参照してください。For more information, please consult our documentation on manually bundling Livewire's JavaScript[/docs/installation#manually-bundling-livewire-and-alpine].

wire:modelwire:model

Livewire3では、（wire:model.deferの代わりに）wire:modelはデフォルトで「遅延」しています。Livewire2のwire:modelと同じ動作を実現するには、wire:model.liveを使用する必要があります。In Livewire 3, wire:model is "deferred" by default (instead of by wire:model.defer). To achieve the same behavior as wire:model from Livewire 2, you must use wire:model.live.

アプリケーション動作の一貫性を維持するために、テンプレートで必要な置換のリストを以下に示します。Below is a list of the necessary substitutions you will need to make in your templates to keep your application's behavior consistent:

<input wire:model="..."> <!-- [tl! remove] -->
<input wire:model.live="..."> <!-- [tl! add] -->

<input wire:model.defer="..."> <!-- [tl! remove] -->
<input wire:model="..."> <!-- [tl! add] -->

<input wire:model.lazy="..."> <!-- [tl! remove] -->
<input wire:model.blur="..."> <!-- [tl! add] -->

@entangle@entangle

wire:modelの変更と同様に、Livewire3ではデフォルトで全てのデータバインディングを遅延します。この動作に合わせ、@entangleも更新されました。Similar to the changes to wire:model, Livewire 3 defers all data binding by default. To match this behavior, @entangle has been updated as well.

アプリケーションが期待通りに動作するように、以下の@entangleの置換を行ってください。To keep your application running as expected, make the following @entangle substitutions:

@entangle(...) <!-- [tl! remove] -->
@entangle(...).live <!-- [tl! add] -->

@entangle(...).defer <!-- [tl! remove] -->
@entangle(...) <!-- [tl! add] -->

イベントEvents

Livewire2では、イベントを発行するために２つの異なるPHPメソッドがありました。In Livewire 2, Livewire had two different PHP methods for triggering events:

• emit()emit()
• dispatchBrowserEvent()dispatchBrowserEvent()

Livewire3では、これら２つのメソッドを単一メソッドへ統合しました。Livewire 3 has unified these two methods into a single method:

• dispatch()dispatch()

以下は、Livewire3におけるイベントの発行とリッスンに関する基本的な例です。Here is a basic example of dispatching and listening for an event in Livewire 3:

// 発行
class CreatePost extends Component
{
    public Post $post;

    public function save()
    {
        $this->dispatch('post-created', postId: $this->post->id);
    }
}

// リッスン
class Dashboard extends Component
{
    #[On('post-created')]
    public function postAdded($postId)
    {
        //
    }
}

Livewire2からの、主な変更点は以下の３つです。The three main changes from Livewire 2 are:

1. emit()をdispatch()へ名前変更しました。（同様に、emitTo()とemitSelf()は、それぞれdispatchTo()とdispatchSelf()になりました。）emit() has been renamed to dispatch() (Likewise emitTo() and emitSelf() are now dispatchTo() and dispatchSelf())
2. dispatchBrowserEvent()をdispatch()へ名前変更しました。dispatchBrowserEvent() has been renamed to dispatch()
3. 全てのイベントパラメータは名前付きにする必要があります。All event parameters must be named

詳細は、新しいイベントのドキュメントページを参照してください。For more information, check out the new events documentation page[/docs/events].

以下は、アプリケーションに適用する必要がある「検索と置換」の差分です。Here are the "find and replace" differences that should be applied to your application:

$this->emit('post-created'); // [tl! remove]
$this->dispatch('post-created'); // [tl! add]

$this->emitTo('foo', 'post-created'); // [tl! remove]
$this->dispatch('post-created')->to('foo'); // [tl! add]

$this->emitSelf('post-created'); // [tl! remove]
$this->dispatch('post-created')->self(); // [tl! add]

$this->emit('post-created', $post->id); // [tl! remove]
$this->dispatch('post-created', postId: $post->id); // [tl! add]

$this->dispatchBrowserEvent('post-created'); // [tl! remove]
$this->dispatch('post-created'); // [tl! add]

$this->dispatchBrowserEvent('post-created', ['postId' => $post->id]); // [tl! remove]
$this->dispatch('post-created', postId: $post->id); // [tl! add]

<button wire:click="$emit('post-created')">...</button> <!-- [tl! remove] -->
<button wire:click="$dispatch('post-created')">...</button> <!-- [tl! add] -->

<button wire:click="$emit('post-created', 1)">...</button> <!-- [tl! remove] -->
<button wire:click="$dispatch('post-created', { postId: 1 })">...</button> <!-- [tl! add] -->

<button wire:click="$emitTo('foo', post-created', 1)">...</button> <!-- [tl! remove] -->
<button wire:click="$dispatchTo('foo', 'post-created', { postId: 1 })">...</button> <!-- [tl! add] -->

<button x-on:click="$wire.emit('post-created', 1)">...</button> <!-- [tl! remove] -->
<button x-on:click="$dispatch('post-created', { postId: 1 })">...</button> <!-- [tl! add] -->

emitUp()emitUp()

emitUpの概念は完全に取り除きました。イベントはブラウザイベントを使用して発行するようになったため、デフォルトで「バブルアップ」します。The concept of emitUp has been removed entirely. Events are now dispatched using browser events and therefore will "bubble up" by default.

コンポーネントから、$this->emitUp(...)や$emitUp(...) のインスタンスを削除できます。You can remove any instances of $this->emitUp(...) or $emitUp(...) from your components.

イベントのテストTesting events

Livewireはイベント発行に関する、新しい統一した用語に合わせて、イベントのアサートも変更しました。Livewire has also changed event assertions to match the new unified terminology regarding dispatching events:

Livewire::test(Component::class)->assertEmitted('post-created'); // [tl! remove]
Livewire::test(Component::class)->assertDispatched('post-created'); // [tl! add]

Livewire::test(Component::class)->assertEmittedTo(Foo::class, 'post-created'); // [tl! remove]
Livewire::test(Component::class)->assertDispatchedTo(Foo:class, 'post-created'); // [tl! add]

Livewire::test(Component::class)->assertNotEmitted('post-created'); // [tl! remove]
Livewire::test(Component::class)->assertNotDispatched('post-created'); // [tl! add]

Livewire::test(Component::class)->assertEmittedUp() // [tl! remove]

URLクエリ文字列URL query string

以前のバージョンのLivewireでは、プロパティをURLのクエリ文字列へバインドした場合、exceptオプションを使用しない限り、プロパティの値は常にクエリ文字列に存在していました。In previous Livewire versions, if you bound a property to the URL's query string, the property value would always be present in the query string, unless you used the except option.

Livewire3では、クエリ文字列へバインドした全てのプロパティは、ページロード後に値が変更された場合にのみ表示します。このデフォルトにより、exceptオプションは不要になりました。In Livewire 3, all properties bound to the query string will only show up if their value has been changed after the page load. This default removes the need for the except option:

public $search = '';

protected $queryString = [
    'search' => ['except' => ''], // [tl! remove]
    'search', // [tl! add]
];

値に関係なく、常にクエリ文字列にプロパティを表示するLivewire2の動作へ戻したい場合は、keepオプションを使用します。If you'd like to revert back to the Livewire 2 behavior of always showing a property in the query string no matter its value, you can use the keep option:

public $search = '';

protected $queryString = [
    'search' => ['keep' => true], // [tl! highlight]
];

ペジネーションPagination

ペジネーションシステムは、Livewire3で更新され、同じコンポーネント内の複数のページネータをより適切にサポートするようになりました。The pagination system has been updated in Livewire 3 to better support multiple paginators within the same component.

リソース公開したペジネーションビューの更新Update published pagination views

Livewireのペジネーションビューをリソース公開している場合は、GitHub のペジネーションディレクトリにある新しいビューを参照し、それに応じてアプリケーションを更新してください。If you've published Livewire's pagination views, you can reference the new ones in the pagination directory on GitHub[https://github.com/livewire/livewire/tree/master/src/Features/SupportPagination/views] and update your application accordingly.

$this->pageへの直接アクセスAccessing $this->page directly

Livewireがコンポーネントごとに複数のページネータをサポートするようにしたため、コンポーネントクラスから$pageプロパティを削除し、ページネータの配列を格納する$paginatorsプロパティへ置き換えました。Because Livewire now supports multiple paginators per component, it has removed the $page property from the component class and replaced it with a $paginators property that stores an array of paginators:

$this->page = 2; // [tl! remove]
$this->paginators['page'] = 2; // [tl! add]

ただし、現在のページを変更およびアクセスするには、提供している getPageおよびsetPageメソッドを使用することをお勧めします。However, it is recommended that you use the provided getPage and setPage methods to modify and access the current page:

// ゲッター
$this->getPage();

// セッター
$this->setPage(2);

wire:click.prefetchwire:click.prefetch

Livewireのプリフェッチ機能（wire:click.prefetch）は完全に取り除きました。この機能に依存していた場合、アプリケーションは引き続き動作しますが、以前に.prefetchから恩恵を受けていたインスタンスでは、パフォーマンスがわずかに低下します。Livewire's prefetching feature (wire:click.prefetch) has been removed entirely. If you depended on this feature, your application will still work, it will just be slightly less performant in the instances where you were previously benefiting from .prefetch.

<button wire:click.prefetch=""> <!-- [tl! remove] -->
<button wire:click="..."> <!-- [tl! add] -->

コンポーネントクラスの変更Component class changes

以下の変更をLivewireのベースLivewire\Componentクラスに加えました。アプリケーションのコンポーネントが依存していた可能性があります。The following changes have been made to Livewire's base Livewire\Component class that your application's components may have relied on.

コンポーネントの$idプロパティThe component $id property

$this->idを介してコンポーネントのIDに直接アクセスした場合は、代わりに$this->getId()を使用する必要があります。If you accessed the component's ID directly via $this->id, you should instead use $this->getId():

$this->id; // [tl! remove]

$this->getId(); // [tl! add]

メソッドとプロパティの重複名Duplicate method and property names

PHPでは、クラスプロパティとメソッドの両方に同じ名前を使用できます。Livewire3では、wire:clickを介してフロントエンドからメソッドを呼び出す際に問題が発生します。PHP allows you to use the same name for both a class property and method. In Livewire 3, this will cause problems when calling methods from the frontend via wire:click.

コンポーネント内の全てのパブリックメソッドとプロパティに異なる名前を使用することを強くお勧めします。It is strongly recommended that you use distinct names for all public methods and properties in a component:

public $search = ''; // [tl! remove]

public function search() {
    // ...
}

public $query = ''; // [tl! add]

public function search() {
    // ...
}

JavaScript APIの変更JavaScript API changes

livewire:loadlivewire:load

以前のバージョンのLivewireでは、livewire:loadイベントをリッスンして、Livewireがページを初期化する直前に、JavaScriptコードを実行できました。In previous versions of Livewire, you could listen for the livewire:load event to execute JavaScript code immediately before Livewire initialized the page.

Livewire3では、Alpineのalpine:init に合わせて、そのイベント名をlivewire:initへ変更しました。In Livewire 3, that event name has been changed to livewire:init to match Alpine's alpine:init:

document.addEventListener('livewire:load', () => {...}) // [tl! remove]
document.addEventListener('livewire:init', () => {...}) // [tl! add]

ページ有効期限切れフックPage expired hook

バージョン2で、Livewireはページ有効期限切れの動作をカスタマイズするための専用JavaScriptメソッド、Livewire.onPageExpired()を提供していました。このメソッドは、より強力なrequestフックを直接使用するために削除しました。In version 2, Livewire exposed a dedicated JavaScript method for customizing the page expiration behavior: Livewire.onPageExpired(). This method has been removed in favor of using the more powerful request hooks directly:

Livewire.onPageExpired(() => {...}) // [tl! remove]

Livewire.hook('request', ({ fail }) => { // [tl! add:8]
    fail(({ status, preventDefault }) => {
        if (status === 419) {
            preventDefault()

            confirm('カスタムのページ有効期限切れ動作…)
        }
    })
})

新しいライフサイクルフックNew lifecycle hooks

Livewireの内部JavaScriptライフサイクルフックの多くをLivewire3で変更しました。Many of Livewire's internal JavaScript lifecycle hooks have been changed in Livewire 3.

以下は、アプリケーションで検索/置換するための古いフックと新しい構文の比較です。Here is a comparison of the old hooks and their new syntaxes for you to find/replace in your application:

Livewire.hook('component.initialized', (component) => {}) // [tl! remove]
Livewire.hook('component.init', ({ component, cleanup }) => {}) // [tl! add]

Livewire.hook('element.initialized', (el, component) => {}) // [tl! remove]
Livewire.hook('element.init', ({ el, component }) => {}) // [tl! add]

Livewire.hook('element.updating', (fromEl, toEl, component) => {}) // [tl! remove]
Livewire.hook('morph.updating', ({ el, toEl, component }) => {}) // [tl! add]

Livewire.hook('element.updated', (el, component) => {}) // [tl! remove]
Livewire.hook('morph.updated', ({ el, component }) => {}) // [tl! add]

Livewire.hook('element.removed', (el, component) => {}) // [tl! remove]
Livewire.hook('morph.removed', ({ el, component }) => {}) // [tl! add]

Livewire.hook('message.sent', (message, component) => {}) // [tl! remove]
Livewire.hook('message.failed', (message, component) => {}) // [tl! remove]
Livewire.hook('message.received', (message, component) => {}) // [tl! remove]
Livewire.hook('message.processed', (message, component) => {}) // [tl! remove]

Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => { // [tl! add:14]
    // 'message.sent'と同値

    succeed(({ snapshot, effects }) => {
        // 'message.received'と同値

        queueMicrotask(() => {
            // 'message.processed'と同値
        })
    })

    fail(() => {
        // 'message.failed'と同値
    })
})

新しいフックシステムのより詳細に理解するには、新しいJavaScriptフックドキュメントを参照してください。You may consult the new JavaScript hook documentation[/docs/javascript] for a more thorough understanding of the new hook system.

ローカライズLocalization

アプリケーションがhttps://example.com/en/...のようにURIにロケールプレフィックスを使用している場合、Livewire2は https://example.com/en/livewire/updateを介してコンポーネントの更新を行う際に、このURLプレフィックスを自動的に保持していました。If your application uses a locale prefix in the URI such as https://example.com/en/..., Livewire 2 automatically preserved this URL prefix when making component updates via https://example.com/en/livewire/update.

Livewire3では、この動作の自動サポートを停止しました。代わりに、必要なURIプレフィックスを使用して、Livewireの更新エンドポイントをsetUpdateRoute()でオーバーライドできます。Livewire 3 has stopped supporting this behavior automatically. Instead, you can override Livewire's update endpoint with any URI prefixes you need using setUpdateRoute():

Route::group(['prefix' => LaravelLocalization::setLocale()], function ()
{
    // その他のローカライズしたルート…

    Livewire::setUpdateRoute(function ($handle) {
        return Route::post('/livewire/update', $handle);
    });
});

詳細は、Livewireの更新エンドポイントの設定に関するドキュメントを参照してください。For more information, please consult our documentation on configuring Livewire's update endpoint[/docs/installation#configuring-livewires-update-endpoint].