Livewire 2.x インストール

深く掘り下げたスクリーンキャストがある、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>です。

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

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

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

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

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

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

ドキュメント章別ページ

ヘッダー項目移動

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

移動

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

言語
バージョン

設定

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

カラーテーマ
和文指定 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によるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

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

オープン操作

PDC

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

HA

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

MS

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

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

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

BK

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

その他

?

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