はじめに
LaravelとVueを使用して開発を進めていく際に、色々自由度がありすぎて決まらずいったん整理した。本記事は、その備忘録となる。
開発パターン
以下のパターンを特定した：
- パターン１：Laravelをメインに使用
-
パターン２：LaravelをAPIとして使用し、フロントエンドはVueで対応
- 2-1: Laravel Mix等を使用し、LaravelにVueコンポーネントを記載
- 2-2: webpackを主体とし、Vueを組み込む
- 2-3: LaravelとVueを完全に分離
- パターン３：LaravelをAPIとして使用し、フロントエンドを別のプロジェクトで対応
- パターン４：Inertia.jsを使用し、バックエンド主体でフロントエンドはVueに対応
考慮すべきポイント
LaravelとVueのバージョンアップを考慮するときに、以下のポイントを考慮する：
- ViteかWebpackを使用するか
- Laravel Mixを使用するか
- Vue2を使用するか、それともVue3に移行するか
進め方の方針
この中で進め方は、"パターン2-3：LaravelとVueを完全に分離"することにした。
プロジェクトは１つで進める。次に"パターン4：Inertia.jsを使用し、バックエンド主体でフロントエンドはVueに対応"を検討する。
Laravel Mix、Webpack、Vue2の場合は、直近に合わせる：
- Laravel Mix：使用しない
- Webpack：代わりにViteを使用
- Vue2：Vue3に置き換える
以上の方針で、LaravelとVueの開発を進めていく。
終わりに
とりあえず前に進めていきたい。
参考文献
(パターン３:LaravelをAPIとして使用、フロントを違うプロジェクト)
フロントエンド、バックエンドを個別に構築して相互連携させる開発手法について語る
(パターン2-3:完全にlaravelとvueを分離)
Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編
(パターン2-1:vueのlaravel-mix等使用(laravelにvueコンポーネントを記載))
Laravel と Vue と Docker でシンプルな SPA を作る ①【フロントエンド】
(パターン2-2:webpackを主体とし、vueを組み込む)
Vue.jsのSFC（単一ファイルコンポーネント）＋PHPでWebアプリケーションを構築する - フロントエンド環境編