Tobilog-Selection
こんにちは!とびろぐ管理人のとびうおです。
今回は、Laravel10にてlaravel/uiをインストールする方法について解説していきたいと思います。
composerを使用する
compserを使用して、laravel/uiをインストールしていきます。
(※筆者はsailを使用しています)
./vendor/bin/sail up -d
をしている状態で、
./vendor/bin/sail composer require laravel/ui
とうちます。
![Laravel 10 にてlaravel/uiを使用する](https://i0.wp.com/tobilog.net/wp-content/uploads/2023/04/image-15.png?resize=840%2C450&ssl=1)
インストールしたlaravel/uiを有効化させる
先ほどインストールしたlaravel/uiを読み込みます。
./vendor/bin/sail php artisan ui bootstrap --auth
を打ちます。
![Laravel 10 にてlaravel/uiを使用する](https://i0.wp.com/tobilog.net/wp-content/uploads/2023/04/image-16.png?resize=840%2C156&ssl=1)
そしれ、WARNにあるように、「npm install && npm run dev」を打っていきます。
./vendor/bin/sail npm install
./vendor/bin/sail npm run dev
と打ちます。
最後にこのように表示されればOKです
![Laravel 10 にてlaravel/uiを使用する](https://i0.wp.com/tobilog.net/wp-content/uploads/2023/04/image-17.png?resize=610%2C496&ssl=1)
![とびうおくん](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
とびうおくん
sailを使っている場合は、最初に
./vendor/bin/sail
をつけましょう!
ブラウザを確認してみる
ここまできたら、ブラウザを確認してみましょう。
![Laravel 10 にてlaravel/uiを使用する](https://i0.wp.com/tobilog.net/wp-content/uploads/2023/04/image-18.jpg?resize=1024%2C565&ssl=1)
![とびうおくん](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
とびうおくん
右上の方に
Log inとRegisterが
表示されていることがわかります!
しかし、この状態でregisterをしてみても、。
![Laravel 10 にてlaravel/uiを使用する](https://i0.wp.com/tobilog.net/wp-content/uploads/2023/04/image-18-1.jpg?resize=1024%2C674&ssl=1)
このように表示されてしまい、登録ができません。
エラー文を見ると、「Base table or view not found:」と書いてあるので、tableがないことが分かります。
なので、tableを作るためにmigrateを実行します。
![Laravel 10 にてlaravel/uiを使用する](https://i0.wp.com/tobilog.net/wp-content/uploads/2023/04/image-18.png?resize=1024%2C394&ssl=1)
このようにして、テーブルを追加することができました。
そして、再度登録をすると、
![Laravel 10 にてlaravel/uiを使用する](https://i0.wp.com/tobilog.net/wp-content/uploads/2023/04/image-19.png?resize=1024%2C232&ssl=1)
このように無事表示することができました。
![](https://i0.wp.com/www12.a8.net/0.gif?resize=1%2C1&ssl=1)
![](https://i0.wp.com/www19.a8.net/0.gif?resize=1%2C1&ssl=1)
![](https://i0.wp.com/www16.a8.net/0.gif?resize=1%2C1&ssl=1)
これ以外にも
これ以外にも、Laravel 10ではbreezeというのを使ってログイン画面を簡単に実装することができます。
↓の記事でその紹介をしているので、ぜひ参考にしてみてください!
![](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/テクノロジー単発記事.png?resize=320%2C180&ssl=1)
Laravel10でログイン画面を実装してみる
こんにちは!とびろぐ管理人のとびうおです。今回は最近リリースされたLaravel10にてログイン画面を実装していこうと思います!Laravel10でログイン画面を実装してみるスターターキットを利用してみるL...
![とびうおくん](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
とびうおくん
かなり簡単にログインを実装することができますね!
その他のLaravelの記事
とびろぐではこれ以外にもLaravelの記事を多く書いているので、ぜひみてみてください!
![](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/81868173-E931-44CF-9D78-6BC5E095F433-2-scaled.jpg?resize=160%2C90&ssl=1)
Laravel
「Laravel」の記事一覧です。
コメント