ホーム

転職ドラフト(次回12/15)

Nuxt3とLaravel8(API)の環境構築をしてデータを取得する方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

⇨ Vue 記事の目次はこちら

Nuxt3 を触ってみています。

Laravel8 の Sanctum も使ったことがないので、試しに環境構築をしてみようと思います。

自分の備忘録的に書いていきますが、誰かの参考になればと思います。

環境
node --version v16.13.0
Nuxt3

PHP7.4
Laravel8

目次

  1. Nuxt の環境構築をする
  2. Laravel の環境構築をする
  3. Laravel の CORS を設定する
  4. 表示するための API を作成する
  5. Nuxt で表示する

Nuxt の環境構築をする

npx nuxi init poppotennis-nuxt
cd poppotennis-nuxt
yarn install
yarn dev

詳細は以下の記事にあります。

⇨Nuxt3 のプロジェクトを作成する方法(コマンドだけ)

Laravel の環境構築をする

composer create-project laravel/laravel poppotennis-laravel
npm install
php artisan serve

データベースの接続をする

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=poppotennis
DB_USERNAME=root
DB_PASSWORD=root

.env の変更を反映させる

php artisan config:cache

データベース作成

php artisan migrate

⇨ Laravel でデータベースを作成する方法(マイグレーション)

⇨ 環境構築の詳細は、こちらの記事

最終的に表示する予定のユーザーたちのテストデータを入れる

databases/seeders/DatabaseSeeder.php

    public function run()
    {
      //8だと初期状態のコメントアウト外すだけ
        \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/UserController

routes/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>

できました!

NuxtLaraveAPI連携画像

⇨Laravel の API の baseURL を env で管理したい(デプロイ時簡単に切り替えられるようにしたい)

まとめ

以上、Laravel と Nuxt で連携してデータの表示までやってみました!!!

認証とかまでやる体力がありませんでした!

次回頑張ります!

苦情・質問は TwitterDM までお願いします!それでは!