Nuxt3とLaravel8（API）の環境構築をしてデータを取得する方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
Nuxt3 と Laravel8（API）の環境構築をしてデータを取得する方法について書きました。
Laravel8 の Sanctum も使ったことがないので、試しに環境構築をしてみようと思います。
自分の備忘録的に書いていきますが、誰かの参考になればと思います。
環境
node --version v16.13.0
Nuxt3
PHP7.4
Laravel8Nuxt の環境構築をする
npx nuxi init laravel-test-nuxt
cd laravel-test-nuxt
yarn install
yarn dev詳細は以下の記事にあります。
Laravel の環境構築をする
composer create-project laravel/laravel laravel-test-laravel
npm install
php artisan serveデータベースの接続をする
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel-test
DB_USERNAME=root
DB_PASSWORD=root.env の変更を反映させる
php artisan config:cacheデータベース作成
php artisan migrate⇨ Laravel でデータベースを作成する方法（マイグレーション）
最終的に表示する予定のユーザーたちのテストデータを入れる
databases/seeders/DatabaseSeeder.php
public function run()
{
//８だと初期状態のコメントアウト外すだけ
\App\Models\User::factory(10)->create();
}php artisan db:seed下準備が終わりました！
⇨Laravel でテストデータを用意する方法（Seeder の使い方）
Laravel の CORS を設定する
CORS とは？
「クロスオリジンといって別ドメイン間で通信する時に設定するやつ」という感覚で良いと思います。
Laravel では、最初この設定が全開放（どこからでもアクセスできる）になっているため、今回は Nuxt からの通信だけ許可するように設定します。
config/cors.php を編集する
'allowed_origins' => [env('HOST_URL')],allowed_origin の項目を修正します。
.env に追記
HOST_URL=http://localhost:3000コマンドで変更を反映させます。
php artisan config:cache⇨Laravel の Cors で特定のオリジンを許可する方法
表示するための API を作成する
Laravel 側の作業です。
php artisan make:controller Api/UserControllerroutes/api.php
use App\Http\Controllers\Api\UserController;
Route::get('/users', [UserController::class,'index']);UserController.php
<?php
namespace App\Http\Controllers\Api;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
public function index()
{
$users = User::all();
return response()->json(compact('users'),200);
}
}
試しに
http://127.0.0.1:8000/api/users
にアクセスして、データ（文字列だけ）が表示されるか確認する。
Nuxt で表示する
最初の画面に users のデータ一覧を表示してみます。
app.vue
<template>
<table>
<tbody>
<tr class="" v-for="user in data.users" :key="user.id">
<th>{{ user.name }}</th>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</template>
<script setup>
const { data } = await useFetch("http://127.0.0.1:8000/api/users");
</script>
<style scoped>
table {
width: 300px;
border: 1px solid #ddd;
}
th {
width: 30%;
background: #ddd;
}
td {
border-top: 1px solid #ddd;
width: 70%;
}
</style>できました！
⇨Laravel の API の baseURL を env で管理したい（デプロイ時簡単に切り替えられるようにしたい）
まとめ
以上、Laravel と Nuxt で連携してデータの表示までやってみました！！！
認証とかまでやる体力がありませんでした！
次回頑張ります！
苦情・質問は TwitterDM までお願いします！それでは！
