Laravel8でフロント部分をbladeを使わずにVue3だけで書く方法（Inertia.js使用）

15271 ワード
laravel8 inertia Vue.js Laravel Vue3 Laravel テキストリンク

皆さんこんにちはー
僕は現在LaravelとVueでシステム開発を行っています。
あまり記述の仕方がわかっていなかったので備忘録も兼ねて記事にしていきます。

Laravel8とVue3自体比較的新しいため新機能の情報自体少ないです。
そのため、今回紹介する記述の方法がQiitaには掲載がなかったので投稿しようと思いました。

間違っている箇所があったら指摘していただけると幸いです。

では参りましょう！！

初期設定

PHPのバージョン
$ php -v
PHP 8.0.9 (cli) (built: Jul 29 2021 17:21:21) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.9, Copyright (c) Zend Technologies
with Zend OPcache v8.0.9, Copyright (c), by Zend Technologies
Laravelのバージョン
$ php artisan --version
Laravel Framework 8.56.0
vueのバージョン
"vue": "^3.0.5", //package.json

こんな感じです。
ではこの状態からreaddubleを見ながらLaravelスタートさせましょう！
今回は、LaravelパッケージのBreezeを利用します。

【インストール】

公式サイトを見ながらインストールしてきます。
composerが入っていない場合、事前にインストールをしておいて下さい。

composer create-project laravel/laravel example-app

cd example-app

php artisan serve

ローカル環境で接続確認します。

http://127.0.0.1:8000/

Breezeのインストール

【breezeとは】
Laravelパッケージのjetstreamより軽量かつ、簡単にログイン機能が導入できるLaravelパッケージです。
Laravel/uiの代わりとしてLaravel８から導入されているようです。

全部で３種類あり、viewの実装方法で別れています。
１．bladeを利用して表示させる
２．Vue.jsを利用して表示させる
３．React.jsを利用して表示させる

の３つです。
それぞれLinuxコマンドが違うので紹介していきます。
ちなみに今回はタイトル通り２番のVue.jsをつかうやーつです。
２番（vue.js）と３番（react.js）のどちらかをインストールすることによって、同時にInertia.jsもインストールされます。
それではコマンドぽちぽちします。

blade_ver
composer require laravel/breeze --dev
php artisan breeze:install //ここだけ違う
npm install
npm run dev
php artisan migrate
vue_ver
composer require laravel/breeze --dev
php artisan breeze:install vue //ここだけ違う
npm install
npm run dev
php artisan migrate
react_ver
composer require laravel/breeze --dev
php artisan breeze:install react //ここだけ違う
npm install
npm run dev
php artisan migrate

お尻に追加するだけですね。
reddubleにも同様のことが書かれています。

再度ローカル環境で確認すると、右上にlog inとRegisterという項目が追加されています。
これでログイン機能の完成です。

次はファイル構造とルーティングを確認してみましょう。

どこからファイルを呼び出しているのか？

ルーティングを確認してみましょう！

routes/web.php

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

require __DIR__.'/auth.php';

全体的にBreezeによって手が加えられています。

routes/web.php

Route::get('/', function () {
    return Inertia::render('Welcome' 　//←ここが作用しています

このInertia::renderがvueファイルへ直接呼び出しています。

Laravelだと、初期設定のルーティングでresources/views/**.blade.phpを参照しますが、
Inertia::renderと記述するとresources/js/Pages/**.vueを参照するようになります。

bladeファイルは全スルーされます。
Inertiaのルーティングを説明してきます。

例
Inertia::render（
// '第一引数'、[
//      第二引数
//]
）；

// 第一引数：　resources/js/Pages/の呼び出したいファイル名
// 第二引数:　渡したいデータを記述

というわかりやすい使い方です。

Vue.jsにはどのようにデータを渡すのか

ではVue.jsではどのようにデータが渡るのでしょうか。
その点見てみましょう。

routes/web.php
// ここを例に見ていきます
Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

return Inertia::render('Welcome'と記載があるので、
Welcome.vueを見てみます。

resources/js/Pages/Welcome.vue

<!-- 重要なところがscriptタグ内なので、templateタグとstyleタグは省略しています。 -->
<script>
import { Head, Link } from '@inertiajs/inertia-vue3';

export default {
    components: {
      Head,
      Link,
    },
    props: {
        canLogin: Boolean,
        canRegister: Boolean,
        laravelVersion: String,
        phpVersion: String,
    },
}
</script>

ルーティング側から渡っているデータは

routes/web.php
'canLogin''canRegister''laravelVersion''phpVersion'

です。
Vue側ではpropsで受け取っているだけです。
なんて簡単な・・・。

resources/js/Pages/Welcome.vue

<!-- 重要なところがscriptタグ内なので、templateタグとstyleタグは省略しています。 -->
<script>
import { Head, Link } from '@inertiajs/inertia-vue3';

export default {
    components: {
      Head,
      Link,
    },
    props: {
        canLogin: Boolean,　　　←ここ
        canRegister: Boolean,　　　←ここ
        laravelVersion: String,　　　←ここ
        phpVersion: String,　　　←ここ
    },
}
</script>

propsを書くだけで、Laravelからデータ受け取れます。
これでblade.phpとはおさらば？ですかね。

終わりに

以上が、Laravel8でフロント部分をbladeを使わずにVue3だけで書く方法（Inertia.js使用）です。
これからの開発の参考になれば幸いです。

ありがとうございました！！！