Vue.jsは相性が良い(定義あやふや?)と言われていますが、自由度が高すぎて構築するのに面倒だと思うことあるかもしれません。自由度が高いとは言っても、組み合わせのパターンは3種類ぐらいだと個人的に思ってます。そのパターンを備忘録がてらに紹介していきます。Vue.js(部分的に使用)LaravelのBladeにVue.jsのコンポーネントを設置して、Vue.jsのpropsにjsonを渡す。既存アプリのjQueryからVue.jsへ移行する際にもっとも難易度が低いと思います。Laravelの認証機能も特殊なやり方をそのまま使えるため、Vue.jsへの知見があまりなくても、すんなり組みやいです。一方で、Bladeの中にVue.jsのコンポーネントを配置するパターンは異質感があるので、人によってはアレルギー出るかもしれません。Vue.js(ほぼSPA)認証のみLaravelのAuthを使ってその他はAPI、Vue.jsはほぼSPAのパターン。SPAは認証設定のみ面倒臭いので、Laravel側の認証だけを利用してその他はAPIにするので、認証が絡んだ時だけ画面遷移して、他の動作はSPAと若干キメラちっくなパターンですが、SPAの入門には良いかもしれません。認証用のapi_tokenがどこかで必要になるので、api_tokenはLaravelのセッションに持たせるか、Cookieに持たせるかなど選択肢は幅広くなります。Vuex使う/使わないなど、悩ましい問題が山積み。Vue.js2(TypeScript)のSPAでシンプルなAPI認証を実装するにて解説しています。この記事もどこかのタイミングでZennに移行します。Vue.js(完全SPA)表題と通り、LaravelはAPIのみでVue.jsは完全SPAです。Bladeにコンポーネントを組み込むなどもしないため、上記2つとは違って、フロントエンドとバックエンドのキメラちっくな融合がなくなり、設計もシンプルになります。Passportである程度は回避できます。Vuexなどを結構使う必要が出てきたりと、Vue.js側の識者も必要で、従来のWebアプリから移行する場合は、結構苦労するかも。ここまでくるとVue.js使うよりNuxt.js使った方が良いのでは・・・?と思った入りして、微妙と思える点も。Vue.js(完全SPA)M2PHPとかJavaScriptとかバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。