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

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

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

⇨ Vue 記事の目次はこちら

Nuxt3 と Laravel8(API)の環境構築をしてデータを取得する方法について書きました。

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

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

環境
node --version v16.13.0
Nuxt3

PHP7.4
Laravel8

Nuxt の環境構築をする

npx nuxi init laravel-test-nuxt
cd laravel-test-nuxt
yarn install
yarn dev

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

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

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()
    {
      //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 までお願いします!それでは!