Livewire 2.x インストール

{video} 細かに説明したスクリーンキャストを用意している、Livewireに驚いてください。

動作要件

  1. PHP7.2.5以上
  2. Laravel7.0以上

パッケージ要件の完全なリストについては、Github上のcomposer.jsonファイルをご覧ください。

パッケージのインストール

composer require livewire/livewire

アセットの取り込み

次のBladeディレクティブをテンプレートのheadタグと、bodyタグ終わりの直前に追加します。

<html>
<head>
    ...
    @livewireStyles
</head>
<body>
    ...
    @livewireScripts
</body>
</html>

タグ記法でも使用できます。

<livewire:styles />
...
<livewire:scripts />

これだけです。これがLivewireを使用開始するのに必要なことのすべてです。このページの他の部分はすべてオプションです。

設定ファイルのリソース公開

Livewireは、そのまま使用できる「ゼロ設定」を目指していますが、一部のユーザーには設定オプションが必要でしょう。

Livewireの設定ファイルは、次のArtisanコマンドによりリソース公開できます。

php artisan livewire:publish --config

フロントエンドのアセットの公開

Laravelを通さずに、WebサーバへJavaScriptのアセットをホストする方法がお好みでしたら、livewire:publishコマンドを使ってください。

php artisan livewire:publish --assets

将来のアップデートにより問題が起きるのを防ぐために、composer.jsonファイルのpost-autoload-dumpスクリプトへコマンドを追加しておくことを強く推奨します。

{
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi",
            "@php artisan vendor:publish --force --tag=livewire:assets --ansi"
        ]
    }
}

アセットのベースURLの設定

デフォルトでLivewireは、アプリの/livewire/livewire.jsルートからJavaScript（livewire.js）を提供します。

生成される実際のスクリプトタグは、デフォルトで<script src="/livewire/livewire.js"></script>です。

このデフォルト動作が機能しなくなるシナリオが２つあります。

  1. Livewireのアセットを公開し、"assets"のようなサブフォルダーから提供する場合。

  2. アプリをドメインルート以外のパスでホストする場合。たとえば、https://your-laravel-app.com/applicationのURL。この場合、実際のアセットは/application/livewire/livewire.jsで提供されますが、生成するスクリプトタグは/livewire/livewire.jsから取得しようとします。

どちらかの問題を解決するには、config/livewire.phpの"asset_url"を設定し、src=""属性の先頭部分に追加する内容をカスタマイズします。

たとえば、Livewireの設定ファイルをリソース公開した後、上記の２つの問題を修正する設定は次のようになります。

  1. 'asset_url' => '/assets'
  2. 'asset_url' => '/application'

ドキュメント章別ページ

概要
クイックスタート リファレンス 1.xからのアップグレード
基本
インストール コンポーネントの作成 コンポーネントのレンダー プロパティ アクション イベント ライフサイクルのフック コンポーネントのネスト
コンポーネントの機能
バリデーション ファイルアップロード ファイルダウンロード クエリ文字列 認可 ペジネーション リダイレクト フラッシュメッセージ トレイト
UIの詳細
ロード状況 ポーリング プリフェッチ オフライン状況 ダーティな状況 遅延ローディング
JSとの統合
AlpineJS Laravel Echo インラインスクリプト
その他
テスト セキュリティ トラブルシューティング パッケージ開発 Artisanコマンド

ヘッダー項目移動

注目：アイコン：ページ内リンク設置（リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

リンク
サイトホーム ページ上部へ
言語
バージョン
2.x

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

P／D／C

ページ（章）移動の左オフキャンバスオープン

H／A

ヘッダー移動モーダルオープン

M／S

移動／設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

N／J

次ヘッダー(H2〜H4)へ移動

B／K

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる