Laravel10とNuxt3の組み合わせで、簡単なものでも取りあえず動くものを開発してみようと思いました。
今回は会員登録、ログイン、ログアウト周辺までの手順を整理します。
フロントエンド（Nuxt3）
https://github.com/pdTrade/simple-kbn-board-fe.git
バックエンド（Laravel）
https://github.com/pdTrade/tut-nuxt3-laravel-auth-be
目次
Laravel側の設定
プロジェクト作成
composer create-project laravel/laravel <プロジェクト名>
この時点でプロジェクトのディレクトリに移動して、Atrisanのserveコマンドでローカルの開発サーバを起動すれば、Laravelの画面を確認できるはずです。
cd <プロジェクト名>
php artisan serve
ターミナル表示されている通りに、ブラウザで「http://localhost:8000」にアクセスしてみます。
次のような画面が表示されるはずです。
今回は認証でBreezeパッケージを使いますので、インストールしていきます。
composer require laravel/breeze –dev
php artisan breeze:install api
次のDBの接続設定をしていきます。
今回は簡単のためにsqliteを使うことにします。
ルートディレクトリの.envファイルを開いて次のように編集します。
DB_CONNECTION=sqlite
他にもDB_xxxxxという変数がありますが、sqliteの場合には設定不要なので、削除するか#でコメントアウトしてしまって問題ありません。
設定が完了してから、マイグレーションを実行します。
php artisan migrate
コマンドを実行すると、database.sqliteがないのでファイルを作成するか選択することになります。私の場合は「yes」を選択して、そのまま作成しました。
sqliteに接続して、テーブルが作成されているか確認しておきます。
sqlite3 database/database.sqlite
接続後に次のコマンドでテーブル一覧を確認すると、無事テーブルが作成されていることが確認できます。
.table
usersテーブルの中を確認しておきます。
select * from users;
今の時点でユーザーが誰も登録されていないことが分かります。
次のコマンドでいったんsqliteから出ておきます。
.q
テスト用のユーザをtinkerコマンドで作ってみます。
次のコマンドでtinkerを起動します。
php artisan tinker
テスト用のユーザを追加してみます。
パスワードを暗号化するように、bcryptを使っています。
App\Models\User::create([“name”=>”admin”, “email”=>”admin@xxx.com”, “password”=>bcrypt(“pass1234”)]);
追加が完了したら、exitコマンドでtinkerを終了します。
exit
再度sqliteに接続して、usersテーブルのレコードを確認してみます。
ユーザーが登録されているはずです。
バックエンド側の設定はここまでにしておきます。
Laravel10だとLangフォルダが存在しなかったので、下記を実行
php artisan lang:publish
Nuxt側の設定
Nuxtのプロジェクト作成
npx nuxi@latest init <project-name>
実行
npm run dev
追加でTailwind CSSをインストールしておきます。
認証の機能自体に必要というわけではありませんが、手軽に見た目を整えることができるので、インストールしておきます。
npm install -D tailwindcss
npm install pinia @pinia/nuxt
prettier
npm install -D prettier prettier-plugin-tailwindcss
コメントを残す