インストール
LivewireはLaravelのパッケージなので、Livewireをインストールして使用する前に、Laravelアプリケーションが起動して実行されている必要があります。新しいLaravelアプリケーションのセットアップについてサポートが必要な場合は、公式Laravelドキュメントを参照してください。Livewire is a Laravel package, so you will need to have a Laravel application up and running before you can install and use Livewire. If you need help setting up a new Laravel application, please see the official Laravel documentation[https://laravel.com/docs/installation].
Livewireをインストールするには、ターミナルを開き、Laravelアプリケーションのディレクトリに移動して、次のコマンドを実行します。To install Livewire, open your terminal and navigate to your Laravel application directory, then run the following command:
composer require livewire/livewire
これだけです。本当に。さらにカスタマイズオプションが必要な場合は、読み続けてください。それ以外の場合は、Livewireをすぐに使ってみることができます。That's it — really. If you want more customization options, keep reading. Otherwise, you can jump right into using Livewire.
Warning!
/livewire/livewire.jsが404ステータスコードを返す： Livewireはデフォルトで、JavaScriptのアセットを提供するために、アプリケーション内のルートを/livewire/livewire.jsから公開しています。これはほとんどのアプリケーションで問題になりませんが、カスタム構成でNginxを使用している場合は、このエンドポイントから404を受け取る可能性があります。この問題を解決するには、LivewireのJavaScriptアセットを自分でコンパイルするか、Nginxを設定してこれを許可してください。[!warning]/livewire/livewire.jsreturning a 404 status code By default, Livewire exposes a route in your application to serve its JavaScript assets from:/livewire/livewire.js. This is fine for most applications, however, if you are using Nginx with a custom configuration, you may receive a 404 from this endpoint. To fix this issue, you can either compile Livewire's JavaScript assets yourself[#manually-bundling-livewire-and-alpine], or configure Nginx to allow for this[https://benjamincrozat.com/livewire-js-404-not-found].
設定ファイルのリソース公開Publishing the configuration file
Livewireは「ゼロ設定」で動き、規約に従うことにより、追加の設定なしで使用できます。ただし、必要に応じて、以下のArtisanコマンドを実行して、Livewireの設定ファイルをリソース公開し、カスタマイズできます。Livewire is "zero-config", meaning you can use it by following conventions, without any additional configuration. However, if needed, you can publish and customize Livewire's configuration file by running the following Artisan command:
php artisan livewire:publish --config
これにより、Laravelアプリケーションのconfigディレクトリへ新しいlivewire.phpファイルを生成します。This will create a new livewire.php file in your Laravel application's config directory.
Livewireのフロントエンドアセットの手作業取り込みManually including Livewire's frontend assets
Livewireはデフォルトで、Livewireコンポーネントを含む各ページに必要なJavaScriptおよびCSSアセットを挿入します。By default, Livewire injects the JavaScript and CSS assets it needs into each page that includes a Livewire component.
この動作をより細かく制御したい場合は、以下のBladeディレクティブを使用して、ページへアセットを手作業で含められます。If you want more control over this behavior, you can manually include the assets on a page using the following Blade directives:
<html>
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
こうしたアセットをページへ手作業で挿入することにより、Livewireはアセットを自動的に挿入しないことを認識します。By including these assets manually on a page, Livewire knows not to inject the assets automatically.
Warning! AlpineJSはLivewireにバンドルされています。 AlpineはLivewireのJavaScriptアセットにバンドルされているため、Alpineを使用するすべてのページに@verbatim
@livewireScripts@endverbatimを含める必要があります。たとえ、そのページでLivewireを使用していない場合でもです。[!warning] AlpineJS is bundled with Livewire Because Alpine is bundled with Livewire's JavaScript assets, you must include @verbatim@livewireScripts@endverbatim on every page you wish to use Alpine. Even if you're not using Livewire on that page.
ほとんど必要ありませんが、アプリケーションのconfig/livewire.phpファイルのinject_assets設定オプションを更新し、Livewireの自動アセット挿入動作を無効にできます。Though rarely required, you may disable Livewire's auto-injecting asset behavior by updating the inject_assets configuration option[#publishing-the-configuration-file] in your application's config/livewire.php file:
'inject_assets' => false,
Livewireに単一のページ、もしくは複数のページへアセットを強制的に挿入したい場合は、現在のルートまたはサービスプロバイダーから以下のグローバルメソッドを呼び出してください。If you'd rather force Livewire to inject its assets on a single page or multiple pages, you can call the following global method from the current route or from a service provider.
\Livewire\Livewire::forceAssetInjection();
Livewireのアップデートエンドポイントの設定Configuring Livewire's update endpoint
Livewireコンポーネントのすべてのアップデートは、次のエンドポイントでサーバにネットワークリクエストを送信します。https://example.com/livewire/updateEvery update in a Livewire component sends a network request to the server at the following endpoint: https://example.com/livewire/update
これは、ローカリゼーションまたはマルチテナントを使用する一部のアプリケーションでは問題になる可能性があります。This can be a problem for some applications that use localization or multi-tenancy.
そのような場合は、好きなように独自のエンドポイントを登録できます。Livewire::setUpdateRoute()内で実行する限り、Livewireはこのエンドポイントをすべてのコンポーネントアップデートに使用することを認識します。In those cases, you can register your own endpoint however you like, and as long as you do it inside Livewire::setUpdateRoute(), Livewire will know to use this endpoint for all component updates:
Livewire::setUpdateRoute(function ($handle) {
return Route::post('/custom/livewire/update', $handle);
});
これで、/livewire/updateを使用する代わりに、Livewireはコンポーネントアップデートを/custom/livewire/updateへ送信するようになります。Now, instead of using /livewire/update, Livewire will send component updates to /custom/livewire/update.
Livewireは、独自のアップデートルートの登録を許しているため、setUpdateRoute()内でLivewireが使用する追加のミドルウェアを直接宣言できます。Because Livewire allows you to register your own update route, you can declare any additional middleware you want Livewire to use directly inside setUpdateRoute():
Livewire::setUpdateRoute(function ($handle) {
return Route::post('/custom/livewire/update', $handle)
->middleware([...]); // [tl! highlight]
});
アセットURLのカスタマイズCustomizing the asset URL
Livewireはデフォルトで、https://example.com/livewire/livewire.jsのURLからJavaScriptアセットを提供します。さらに、Livewireはこのアセットを以下のようなスクリプトタグから参照します。By default, Livewire will serve its JavaScript assets from the following URL: https://example.com/livewire/livewire.js. Additionally, Livewire will reference this asset from a script tag like so:
<script src="/livewire/livewire.js" ...
アプリケーションにローカリゼーションまたはマルチテナントが原因でグローバルルートプレフィックスがある場合は、LivewireがJavaScriptのフェッチ時に内部的に使用する独自のエンドポイントを登録できます。If your application has global route prefixes due to localization or multi-tenancy, you can register your own endpoint that Livewire should use internally when fetching its JavaScript.
カスタムJavaScriptアセットエンドポイントを使用するには、Livewire::setScriptRoute()内で独自のルートを登録してください。To use a custom JavaScript asset endpoint, you can register your own route inside Livewire::setScriptRoute():
Livewire::setScriptRoute(function ($handle) {
return Route::get('/custom/livewire/livewire.js', $handle);
});
これで、Livewireは次のようにJavaScriptをロードするようになります。Now, Livewire will load its JavaScript like so:
<script src="/custom/livewire/livewire.js" ...
LivewireとAlpineの手作業バンドルManually bundling Livewire and Alpine
デフォルトでは、AlpineとLivewireを<script src="livewire.js">タグを使用してロードします。これは、これらのライブラリがロードされる順序を制御できないことを意味します。その結果、以下の例に示すように、Alpineプラグインをインポートして登録することはできなくなります。By default, Alpine and Livewire are loaded using the <script src="livewire.js"> tag, which means you have no control over the order in which these libraries are loaded. Consequently, importing and registering Alpine plugins, as shown in the example below, will no longer function:
// 注意：このスニペットはしてはいけないことを示している
import Alpine from 'alpinejs'
import Clipboard from '@ryangjchandler/alpine-clipboard'
Alpine.plugin(Clipboard)
Alpine.start()
この問題に対処するには、ESM（ECMAScriptモジュール）バージョンを自分で使用することをLivewireに通知し、livewire.jsスクリプトタグの挿入を防ぐ必要があります。これを行うには、@livewireScriptConfigディレクティブをレイアウトファイル（resources/views/components/layouts/app.blade.php）へ追加する必要があります。To address this issue, we need to inform Livewire that we want to use the ESM (ECMAScript module) version ourselves and prevent the injection of the livewire.js script tag. To achieve this, we must add the @livewireScriptConfig directive to our layout file (resources/views/components/layouts/app.blade.php):
<html>
<head>
<!-- ... -->
@livewireStyles
@vite(['resources/js/app.js'])
</head>
<body>
{{ $slot }}
@livewireScriptConfig <!-- [tl! highlight] -->
</body>
</html>
Livewireが@livewireScriptConfigディレクティブを検出すると、LivewireおよびAlpineスクリプトの挿入を控えます。@livewireScriptsディレクティブを使用してLivewireを手作業でロードする場合は、必ず削除してください。@livewireStylesディレクティブがまだ存在していない場合は、必ず追加してください。When Livewire detects the @livewireScriptConfig directive, it will refrain from injecting the Livewire and Alpine scripts. If you are using the @livewireScripts directive to manually load Livewire, be sure to remove it. Make sure to add the @livewireStyles directive if it is not already present.
最後のステップは、app.jsファイルでAlpineとLivewireをインポートすることです。これにより、カスタムリソースを登録し、最終的にLivewireとAlpineを開始できます。The final step is importing Alpine and Livewire in our app.js file, allowing us to register any custom resources, and ultimately starting Livewire and Alpine:
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import Clipboard from '@ryangjchandler/alpine-clipboard'
Alpine.plugin(Clipboard)
Livewire.start()
Tip: composer update後にアセットを再構築してください。 LivewireとAlpineを手作業でバンドルする場合は、
composer updateを実行するたびにアセットを再構築してください。[!tip] Rebuild your assets after composer update Make sure that if you are manually bundling Livewire and Alpine, that you rebuild your assets whenever you runcomposer update.
Warning! Laravel Mixとの互換性はありません。 LivewireとAlpineJSを手作業でバンドルする場合、Laravel Mixは機能しません。代わりに、Viteへの切り替えをお勧めします。[!warning] Not compatible with Laravel Mix Laravel Mix will not work if you are manually bundling Livewire and AlpineJS. Instead, we recommend that you switch to Vite[https://laravel.com/docs/vite].
Livewireのフロントエンドアセットのリソース公開Publishing Livewire's frontend assets
Warning! アセットのリソース公開は必要ありません。 Livewireを実行するためにLivewireのアセットを公開する必要はありません。特定のニーズがある場合にのみ、行ってください。[!warning] Publishing assets isn't necessary Publishing Livewire's assets isn't necessary for Livewire to run. Only do this if you have a specific need for it.
JavaScriptアセットをLaravelを通さず、Webサーバから提供するのがお好みであれば、livewire:publishコマンドを使用してください。If you prefer the JavaScript assets to be served by your web server not through Laravel, use the livewire:publish command:
php artisan livewire:publish --assets
アセットを最新の状態に保ち、将来のアップデートで問題が発生しないようにするために、次のコマンドをcomposer.jsonファイルに追加することを強くお勧めします。To keep assets up-to-date and avoid issues in future updates, we strongly recommend that you add the following command to your composer.json file:
{
"scripts": {
"post-update-cmd": [
// 他のスクリプト
"@php artisan vendor:publish --tag=livewire:assets --ansi --force"
]
}
}