LaravelにInertiaをインストールする方法:LaravelとVue3を便利に連携させよう

Laravel Breeze

Laravelでは、Inertiaを使うとVue3を便利に使うことができます。Inertiaは、LaravelとVueを結ぶ接着剤のような役割を果たします。

今回は、Laravel BreezeにVue3をいれて、そのあとInertiaをいれていく手順を解説します。

既存のLaravelプロジェクトの一部で、Vue3を使いたいときに便利な方法です。

もし「認証機能まで含めて、すべてVueで作りたい!」という場合は、下記の記事で方法を解説しています。

LaravelにInertiaをインストールする方法

環境はLaravel9 Breezeパッケージを使っていきます。

まずは、普通通りLaravel Breezeでプロジェクトを作り、そのあとにInertiaを入れていきましょう

 

Junko
Junko

環境準備・インストールまでの方法・初期設定は、別記事にて詳しく解説しています。

「Laravelプロジェクトに慣れていない」という場合は、こちらも併せて参考にしてください。

 

Laravel Breezeでプロジェクトを作成

①プロジェクト作成

まずは普通にLaravelのプロジェクトを作ります。

②Breezeパッケージ追加

③ Breezeインストール

④ npmインストール

⑤ npm run dev実施

Inertiaのインストール(サーバーサイド)

次にInertiaを入れていきます。まずはサーバーサイド(バックエンド)側の設定です。

① サーバーサイド側のInertiaアダプタをいれます。

② Inertia用ミドルウェアを追加します。

追加後、app/Http/Middlewareを見ると、HandleInertiaRequest.phpファイルが入っています。

③ Inerita用ミドルウェアをKernel.phpに追加

app/Http/Kernel.phpを開き、webの中に、下記を追加します。

【追加した後のスクショ】

④ テンプレートファイルの作成

デフォルトのままの設定だと、resources/viewsの直下にapp.blade.php を作り、このファイルをルートテンプレートファイルとして使うことになります。

resources/viewsの中にapp.blade.phpファイルを作り、その中に、下記コードをいれます。

(通常のテンプレートファイルは、resources/views/layoutsの中に入っていますが、これとは別に、inertia用のテンプレートファイルを作成します。)

もしテンプレートファイルの場所や名前を変えたい場合には、app/Http/Middleware/HandleInertiaRequests.phpの下記部分も変更しておきましょう。

例えば、resources/views/testフォルダの中に移動させるのであれば、次のように記述します。

Inertiaのインストール(クライアントサイド)

次にクライアントサイド(フロントエンド)側の設定です。

①プロジェクトにVue3と必要なものを入れます。

次に、クライアントサイド用のInertiaアダプタをいれます。

npm run devを実行します。

②Inertiaアプリを起動するための設定を行います。

resources/js/app.jsファイルを開き、下記を追加します。

コードをいれた後のファイルは、次のようになります。

Junko
Junko

既にあるコードを削除すると、blade.phpファイルが正常に動かなくなったりするのでご注意を。

【編集後のapp.js】

③ Pagesフォルダ作成

上記のように設定すると、Vueファイルは resources/js/Pages/に入れていくことになります。resources/jsの中にPagesフォルダも作っておきましょう。

④ webpackの設定

webpack.mix.jsファイルを開き、.vue() を追加します。aliasも追加しておくと便利です。

⑤ Tailwindの設定

VueでもTailwind CSSを使いたい場合は、tailwind.config.jsファイルを開き、module.exportsに下記を追加します。

【編集後のtailwind.config.js】

ルート設定

ここまでで、インストール完了です。

次に、Vueでルート設定が使えるようにしていきます。

① ziggyをインストール

LaravelのルートをVueページでも使えるようにするため、Ziggyをインストールします。

② app.jsファイル編集

createInertiaAppの中に、下記コードを一行追加します。

③ app.blade.phpの中に、@routesコードを一行追加します。

テストしてみる

これで設定は完了です。テストしてみましょう。

まず、最初のページを作ってみます。

①resources/js/Pagesの中に Test.vueファイルを作ります。

ファイルの中に、下記のようにいれておきます。

②routes/web.phpファイルに、Test.vue用のルートを作ります。

【編集後のweb.php】

③ コンパイル実施

Vueファイルをコンパイルるすために、npm run devを実行します。ファイルに変更を加えるたびに npm run devを実行する必要があります。

ちょっと面倒なので、ファイル保存時に自動でコンパイルを行いたい場合は、npm run watchを実行しましょう。

watchを行うと、対象ファイルを監視してくれて、変更があると、ファイルをコンパイルしてくれます。

Junko
Junko

ただnpm run watchを実行してしまうと、他のコマンドは入れられなくなりますのでご注意を。

④ サーバー立ち上げ

プロジェクト内で下記を実行して、ローカルサーバーを立ち上げてください。

⑤ 画面表示

ブラウザに http://127.0.0.1:8000/topをいれて、下記が表示されれば成功です!

さいごに

以上となります。結構、設定が盛沢山でしたね^^;

なお前回の記事では、Breezeを入れるときにInertiaをインストールしてしまう方法を解説しました。この方法だと、今回お伝えした設定はすべて自動で行ってくれるので便利です。

併せて参考にしてください。

https://biz.addisteria.com/laravel_vue_install/

「実際に、LaravelとInertiaとVue3で、どんなものが作れるのかな」と思ったらら、下記のサイトをクリックしてみてください。

URL:https://quiz.createmore-prj.com/play/quiz

Junko
Junko
こちら、LaravelとInertiaとVue3 を使って開発したクイズサイトです。よかったら、クイズもお試しください♪
Laravel Breeze LaravelとVue連携

【Laravelの教科書・無料プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

「Laravelで業務効率化用のWebアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Laravelを使ったWebアプリ開発のご相談承り中
Zoomでのお打ち合わせも承っています♪
お問い合わせはこちら
Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました