Zenn
🦔

Laravel x Vue.jsの組み合わせのパターン紹介

2020/12/31に公開
Laravel
Vue.js
tech

概要

Laravel x Vue.jsは相性が良い（定義あやふや？）と言われていますが、自由度が高すぎて構築するのに面倒だと思うことあるかもしれません。自由度が高いとは言っても、組み合わせのパターンは３種類ぐらいだと個人的に思ってます。そのパターンを備忘録がてらに紹介していきます。

想定環境

  • Laravel5.5以降
  • Vue.js2以降

目次

  • Laravel（メイン） x Vue.js（部分的に使用）
  • Laravel(認証のみ使用で他はAPI) x Vue.js(ほぼSPA)
  • Laravel（APIのみ） x Vue.js(完全SPA)

Laravel（メイン） x Vue.js（部分的に使用）

LaravelのBladeにVue.jsのコンポーネントを設置して、Vue.jsのpropsにjsonを渡す。
既存アプリのjQueryからVue.jsへ移行する際にもっとも難易度が低いと思います。
またLaravelの認証機能も特殊なやり方をそのまま使えるため、Vue.jsへの知見があまりなくても、すんなり組みやいです。
一方で、Bladeの中にVue.jsのコンポーネントを配置するパターンは異質感があるので、人によってはアレルギー出るかもしれません。

具体例

<!-- hoge.blade.php -->
  <div id="app">
    <hoge-component :requests="@json($requests)"></hoge-component>
  </div>

Laravel(認証のみ使用で他はAPI) x Vue.js(ほぼSPA)

認証のみLaravelのAuthを使ってその他はAPI、Vue.jsはほぼSPAのパターン。
SPAは認証設定のみ面倒臭いので、Laravel側の認証だけを利用してその他はAPIにするので、認証が絡んだ時だけ画面遷移して、他の動作はSPAと若干キメラちっくなパターンですが、SPAの入門には良いかもしれません。
認証用のapi_tokenがどこかで必要になるので、api_tokenはLaravelのセッションに持たせるか、Cookieに持たせるかなど選択肢は幅広くなります。またVuex使う/使わないなど、悩ましい問題が山積み。
こちらの詳細の方法は
Qiita Laravel6.x + Vue.js2(TypeScript)のSPAでシンプルなAPI認証を実装するにて解説しています。
この記事もどこかのタイミングでZennに移行します。

Laravel（APIのみ） x Vue.js(完全SPA)

表題と通り、LaravelはAPIのみでVue.jsは完全SPAです。
Bladeにコンポーネントを組み込むなどもしないため、上記2つとは違って、フロントエンドとバックエンドのキメラちっくな融合がなくなり、設計もシンプルになります。
懸念となる認証もLaravel Passportである程度は回避できます。
ただVuexなどを結構使う必要が出てきたりと、Vue.js側の識者も必要で、従来のWebアプリから移行する場合は、結構苦労するかも。
ただここまでくるとVue.js使うよりNuxt.js使った方が良いのでは・・・？と思った入りして、微妙と思える点も。

まとめ

  • 従来のWebアプリから移行しやすい Laravel（メイン） x Vue.js（部分的に使用）
  • 認証だけLaravel任せでSPA入門しやすいが、選択肢が幅広く悩ましい問題が山済みの Laravel(認証のみ使用で他はAPI) x Vue.js(ほぼSPA)
  • フロントエンドとバックエンドの完全分離だが、Nuxt.jsの方が良いのでは Laravel（APIのみ） x Vue.js(完全SPA)

Discussion