これの続きです。

https://blog.logicky.com/2024/07/07/174326 — blog.logicky.com

Windows11でLaravelを動かせたので、LivewireとTailwindとdaisyUIを入れて、実際の画面をちょっと作ってみます。 daisyUIについては、今回は、daisyUIを使ってLivewire用のコンポーネントにしてある、maryUIというのを入れてみようと思っています。

Livewireを入れる

https://livewire.laravel.com/docs/quickstart — livewire.laravel.com

composer require livewire/livewire
php artisan livewire:layout
php artisan make:livewire Top

上記の、livewire:layout で、resources/views/components/layouts/app.blade.php が作成されます。 make:livewire Top で、app/Livewire/Top.php と、 resources/views/livewire/top.blade.php が作成されます。

top.blade.php を適当に下記のような内容にしておきます。

<div>
    <p>Hoge!</p>
</div>

あとは、ルーティング設定をします。 routes/web.php を下記のようにします。

<?php
use App\Livewire\Top;

Route::get('/', Top::class);

pnpm入れてみる

WSL2では最近pnpmを使っていましたので、入れてみます。 そもそも、Windows11での、Node.jsやnpmは、下記投稿のnvm-windowsを使っています。

https://blog.logicky.com/2024/07/02/162054 — blog.logicky.com

npmでのインストールではなく、chocoでもできるらしいのでやってみます。

choco install pnpm -y

pnpm 9.4.0が入りました。

maryUIを入れてみる

これです。前はこれを入れずに、直接daisyUIを入れて、都度必要に応じてコンポーネントを作ったりしていたのですが、何気にめんどうでした。でもTailwindとdaisyUIは気に入っているので入れたいのです。ということで、これを試してみることにしました。

https://mary-ui.com/ — mary-ui.com

composer require robsontenorio/mary
php artisan mary:install
pnpm dev

ルーティング設定が変更されて、一部のファイルが追加されて、localhost:8000にアクセスすると下記画面が表示されるようになりました。

ちなみに、maryUIのインストール時に、voltというのも一緒にインストールされました。（インストール時にvoltも入れるかと聞かれてYESと答えたからです） voltはこれです。使ったことないですが、便利そうなので後で使ってみようと思います。

https://livewire.laravel.com/docs/volt — livewire.laravel.com

ルーティングのファイルはどうなってるか？

routes/web.php

<?php

use Livewire\Volt\Volt;

Volt::route('/', 'users.index');

こんな感じで、ガッツリVoltでした。まあ、インストール時にVolt入れると答えてますので、こうなったのだと思います。 resources/views/components/layouts/app.blade.php も変わってますね。 resources/views/livewire/users/index.blade.php が追加されていて、Volt仕様のファイルになっていました。 PHPロジックとBladeテンプレートが共存して、ぱっと見は、VueとかSvelteKitのようになっています。