LaravelのVueのインポート方法についてになります

Question

Laravelの中でVue.jsを利用しています。
3枚の（a.js, b.js, c.js）jsファイルがあり、それぞれ、

import Vue from "vue/dist/vue.esm.js";

new Vue({
...
});

という形で利用しております。
この「import Vue from "vue/dist/vue.esm.js";」の読み込み部分のインポートなのですが、
3枚の（a.js, b.js, c.js）ファイルの全てに記載しており、
「npm run dev」すると、webpackが、3ファイルともにVueコードを生成しているようです。
app.jsなどに一括で読み込んで、3ファイルそれぞれの「import Vue from "vue/dist/vue.esm.js";」の記述は削除する形で運用できるのではと考えているのですが、「not defined」エラーなどが出てうまくいかない状況です。
初心者の質問ですみません、解決策をご存じの方がおられましたらご教示いただけませんでしょうか。

Laravelのバージョンは「Laravel Framework 8.38.0」になります。
よろしくお願いいたします。

Answer 1

3ファイルでそれぞれnew Vue()がしたいというのは、具体的にどのような目的のためでしょうか？
VueでSPAを構築するというのではなく、ページごとにBladeを分けるけどUI構築自体はVueを使いたい（＝MPA）、という感じでしょうか？

Comments

[joeast]

はい、３ファイルそれぞれbladeを利用しますが、Vueの動作がそれぞれ違うものになります。
やはりそれぞれ３つのコンポーネントを作成するのが正しいのかな、とは思うのですが、
今触っているパッケージがそれぞれJSファイルを読み込む形になっているので、、
app.jsに一か所だけVueの読み込みを記載して、それぞれのJSでVueを利用できる形にならないかな、と考えています。

[退会済みユーザー]

https://qiita.com/nunulk/items/a16e8ddd78a92003dae4
こちらの記事の「ステップ1: Vue.js を MPA で使えるようにする」の実装例だと、その要件に合いそうですがいかがでしょうか？

[joeast]

なるほど、上記のような方法があるんですね、こちらでできそうです、ありがとうございます！

Answer 2

Laravel8ではもうuiは使わないけどまだ参考にはできる。
自分でnew Vueを書くことはない。全部Vueコンポーネントとして作る。
https://github.com/laravel/ui/blob/3.x/src/Presets/vue-stubs/app.js
一旦別の新規プロジェクトを作ってlaravel/uiをインストールして
「Laravelでの標準的なVueの使い方」を調べたほうがいい。

---

Laravel8ならJetstreamやBreezeのInertia版も参考。
https://github.com/laravel/jetstream/tree/2.x/stubs/inertia
https://github.com/laravel/breeze/tree/1.x/stubs/inertia

---

標準以外の独自の使い方するなら自己責任。
Laravel関連は便利に使えるように最初から用意されてる標準機能を無視して意味不明な使い方してる人が多いので変なブログを見てはいけない。

Comments

[joeast]

上記全てコンポーネントを利用すればよい、という事で、教えていただきありがとうございます。
ただ今回は上記のようにそれぞれのjsファイルについて、Vueを利用したいのですが、その場合何か解決方法はありますでしょうか？