Zenn
🥦

Inertiaを使ってLaravelにVueを導入する

2024/10/09に公開
Laravel
Vue.js
inertia
tech

これまでLaravelのフロントエンドはBladeを使っていたのですが、Vue.jsを取り入れてみることにしました。

Laravel+Vueの構築にはAPIで結合するのが一般的なようですが、Inertiaを使ってLaravel+Vueを実現するというものをUdemyで見つけましたので、Inertiaを使ってみることにしました。

今回はローカルでLaravelの新規プロジェクト作成し、Inertiaを導入し、Vueバージョンのダッシュボードを表示するまでの手順をまとめていきます。

Laravelの新規プロジェクト作成

composer create-project "laravel/laravel=9.*" project-name

※project-nameには作成したいプロジェクト名を設定します。

次にLaravelの初期設定を行います。
主要な設定項目は以下のとおりです。

.envファイル

  • DB_DATABASE
  • DB_USERNAME
  • DB_PASSWORD

config/app.php

  • 'timezone' => 'Asia/Tokyo'
  • 'locale' => 'ja'
  • 'faker_locale' => 'ja_JP'

デバッグバーのインストール

composer require barryvdh/laravel-debugbar

BreezeとVueのインストール

Breezeはログイン機能などを実装してくれるとても便利なパッケージです。
そして、BreezeをインストールするときにフロントエンドとしてVueもインストールします。

ちなみに、Inertiaはパッケージやフレームワークではなく、バックエンド(Laravel)とフロントエンド(Vue)を繋ぐ仕組みのことで、Inertiaをインストールする工程はありません。

以下のコマンドでBreezeとVueをインストールすることができます。

Breezeのインストール

composer require laravel/breeze --dev

Vueのインストール

php artisan breeze:install vue

その他コマンド

php artisan migrate
npm install
npm run dev

サーバーの起動とダッシュボードの表示

ここまで完了したらphp artisan serveでローカルサーバーを起動し、アクセスしてみます。
以下のようなVueバージョンのダッシュボードが表示されていたら完了です。

テストユーザーの作成（おまけ）

ここまででプロジェクトの作成は完了したのですが、ここからをプロジェクトを更新していくにあたり、データベースをリセットすることがよくあります。

リセットするたびにログイン用のユーザーが消えてしまうので、新規登録し直す必要があるのですが、結構めんどくさいです。

そこで、Laravelのシーディングを使って、データベースリセットのコマンド実行したときに、テスト用ユーザーが自動で作成されるようにしておくと便利です。

php artisan make:seeder UserSeeder
UserSeeder.php
<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Hash;

class UserSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        DB::table('users')->insert([
            'name' => 'Test User',
            'email' => 'test@test.com',
            'password' => Hash::make('password'),
        ]);
    }
}
DatabaseSeeder.php
<?php

namespace Database\Seeders;

// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {

        $this->call([
            UserSeeder::class,
        ]);
        // \App\Models\User::factory(10)->create();

        // \App\Models\User::factory()->create([
        //     'name' => 'Test User',
        //     'email' => 'test@example.com',
        // ]);
    }
}

データベースリセットを実行する

php artisan migrate:refresh --seed

今後の記事について

現在、個人で受注している動的LP制作案件でInertiaを使おうと思っていて、備忘録も兼ねて都度都度Zennにまとめていく予定です。

数名のLaravelエンジニアさんにお聞きしたところ、Inertiaはあまり使われていないようなのですが、個人で受注している案件レベルならAPI接続とかも考えなくていいので、結構いいんじゃないかと思っています。

Vueの勉強をしたいと思ってたのですが、Inertiaは基本の構成はLaravelなので理解しやすくて勉強にもちょうどいい気がします。

Discussion