カテゴリー
Linux

Laravel 8 で Vue.js 3 を SPA として使えるようにした記録メモ

Laravel 8 で Vue.js 3 を SPA として使えるようにしたページ

どの状態から始めたか?

Laravel 8 をインストールした直後に Vue.js 3 を SPA として最低限使えるようにしました。

Vue.js 3 を追加して確認

次を読んで全体像を把握しました。

以下の作業を行なったコミット → chore: Vue.js 3 を追加する · oki2a24/laravel8-boilerplate@7b17807

Vue.js 3 を追加しました。

npm install --save-dev vue@next

laravel/webpack.mix.js に .vue() を追加しました。

# 次を実行で自動的に依存パッケージが追加された
npm run dev

Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 を参考に、 laravel/resources/js/app.js を修正し、 Vue.js 3 を使うようにしました。

確認として、 laravel/resources/js/components/ExampleComponent.vue を用意し、 laravel/resources/views/welcome.blade.php から呼び出すことで Vue.js 3 が動いていることを確かめました。

この時点での laravel/package.json の差分↓

❯ git diff laravel/package.json
diff --git a/laravel/package.json b/laravel/package.json
index 00c6506..4609950 100644
--- a/laravel/package.json
+++ b/laravel/package.json
@@ -10,9 +10,12 @@
         "production": "mix --production"
     },
     "devDependencies": {
+        "@vue/compiler-sfc": "^3.2.6",
         "axios": "^0.21",
         "laravel-mix": "^6.0.6",
         "lodash": "^4.17.19",
-        "postcss": "^8.1.14"
+        "postcss": "^8.1.14",
+        "vue": "^3.2.6",
+        "vue-loader": "^16.5.0"
     }
 }

Vue.js 3 の SPA の形を整える

次のページをそのまま行いました。

その時のコミット → chore: Vue.js 3 の SPA の形を整える · oki2a24/laravel8-boilerplate@5a5b7c8

以下、修正の概要です。

  • laravel/routes/web.php を修正し、 Laravel にやってきたフロントのどんな URL でも laravel/resources/views/app.blade.php ビューを返すようにした。
  • laravel/resources/views/app.blade.php を追加した。

SPA 内の通信ではヘッダに CSRF Token を扱うので HTML では不要なのでは ? と思い、一旦外してみたもの↓ (確信はない。実験的なので本当は必要なら元に戻す)

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

Vue Router を追加する

Laravel 6 、 Vue.js 3 のプロジェクトに Vue Router を追加するメモ – oki2a24 を読んで進めていきました。

結果は次のコミット → chore: Vue Router を追加し、動作確認する · oki2a24/laravel8-boilerplate@0d6e904

npm install --save-dev vue-router@4

以下、修正の概要です。

  • laravel/resources/js/app.js を修正し Vue Router を読み込む。お試しとしてこのファイルで Vue Router の動作を確認しました。

Vue.js アプリの構成を整える

コミット → chore: Vue.js アプリの構成を整える · oki2a24/laravel8-boilerplate@50e9e37

  • 動作確認用のコードを取り除く。
    • laravel/resources/views/welcome.blade.php
    • laravel/resources/js/components/ExampleComponent.vue
  • Vue.js アプリとしての構成を行う。
    • router/index.js を追加し、 Vue Router の内容を切り出す。
    • App.vue を追加し、アプリの起点とする。
    • views/Home.vue を追加し、仮のホームページとする。

動作確認

npm run watch

http://localhost にアクセスしてページが表示されたら OK です♪

Eslint と Prettier を導入

Larvel 6 に入れた Vue.js 3 の環境で、 ESLint と Prettier を使う方法 – oki2a24

コミット →

おわりに

以前、 Laravel 6 で Vue.js 3 の SPA を導入をノートいたしました。それを活用して、今回は Laravel 8 で同じことを行いました。 ほとんど同じことを行なっただけですけれども、もうすぐ Laravel 9 がリリースされ同じことを行うでしょうし、メモでも残すことといたしました。

以上です。

コメントを残す