Livewire でフラッシュメッセージを使うには?

ショコラ
ショコラ

Livewire でフラッシュメッセージを使うには?

通常のララベルのフラッシュメッセージと同じに使えます。というだけの話。
フラッシュメッセージを登録するには、
「session()->flash({フラッシュメッセージのキー},{メッセージ});」です。

もっさん先輩
もっさん先輩

手順

Laravel と Livewire をインストールして、フラッシュメッセージのサンプルプログラムを作成する手順。

  1. プロジェクト名(flash)を決めて以下のコマンドを実行します。
curl -s https://laravel.build/flash | bash

インストール時にプロジェクト名のディレクトリが作成されます。

  1. インストールの最後に sudo でパスワードの入力を求められます。

↓下のメッセージが表示されてインストールは終わります。

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them

Get started with: cd flash && ./vendor/bin/sail up
  1. sail のエイリアスを定義します。
echo "alias sail='[ -f sail ] && sh sail || sh vendor/bin/sail'" >> ~/.bashrc
source ~/.bashrc

Laravel のインストールはここまで。

  1. 「sail up」でコンテナを起動します。
cd flash && sail up -d
  1. ララベルのトップディレクトリで、Livewireパッケージ をインストールします。
sail composer require livewire/livewire
  1. 次のコマンドを実行して、flashコンポーネント を生成します。
sail artisan make:livewire flash
$ sail artisan make:livewire flash
 COMPONENT CREATED  ?

CLASS: app/Http/Livewire/Flash.php
VIEW:  resources/views/livewire/flash.blade.php

次の 2つ のファイルが生成されます。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Flash extends Component
{
    public function render()
    {
        return view('livewire.flash');
    }
}
<div>
    {{-- Because she competes with no one, no one can compete with her. --}}
</div>

※因みに、render メソッド を定義しなくても livewire.flashは呼び出されます。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Flash extends Component
{
}
  1. 生成された flashコンポーネント のクラスとビューを次のように置き換えます。
<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Flash extends Component
{
  public function flash() {
    session()->flash('message','Post successfully updated.');
  }
  public function reload() {
  }
}
<div>
  <button type="button" wire:click="flash">flash message</button>
  <button type="button" wire:click="reload">reload</button>
  @if (session()->has('message'))
    <div class="alert alert-success">
      {{ session('message') }}
    </div>
  @endif
</div>

「@if (session(‘message’))」と書いても問題ないです。

  1. resources/views/layouts/app.blade.phpファイル を作る為に、layoutディレクトリ を作成します。

「フルページコンポーネントは resources/views/layouts/app.blade.php の {{ $slot }} にレンダーされる」と見かけましたが、ここまでの手順で app.blade.phpファイル はできていませんでしたので作成します。

mkdir resources/views/layouts/
  1. resources/views/layouts/app.blade.phpファイル を作成します。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <livewire:styles />
  </head>
  <body>
    {{ $slot }}
    <livewire:scripts />
  </body>
</html>
  1. web.php に Livewireコンポーネント のルートを追加します
Route::get('/',App\Http\Livewire\Flash::class);
  1. ブラウザで確認します。

「flash message」ボタンを押すと、フラッシュメッセージを登録します。リロードボタンを押すと、フラッシュメッセージは消えます。

以上

Scroll to Top