今回は、LaravelのviewでVue.jsを利用してみます。
Composerでcreate-projectした際にライブラリ自体は導入されています。
Vue.jsを利用するために実装することは、以下の3つです。
コンポーネントファイルを作成しない場合は、一番最後のapp.jsをviewファイルに読み込ませるだけでいいです。
まず、vueファイル作成からです。
vueファイルは、「resources\assets\js\components」内に作成します(ここでは、vueファイルの内容は割愛します)。
次に、app.jsファイルへの定義です。
app.jsは「resources\assets\js」配下にありますので、以下のように定義しておきます。
定義方法は、「ExampleComponent」がデフォルトで定義してあると思いますので、それを参考にしてください。
Vue.component('作成したコンポーネントタグ', require('作成したコンポーネントファイル'));
const app = new Vue({
el: '#app'
});
最後に、viewファイルでの読み込みです。
対象のblade.phpファイルで、以下のように読み込んでください。
<html>
// ヘッダ内容
<body>
// 画面の表示内容
<script src="{{ mix('/js/app.js') }}"></script>
</body>
</html>
上記のようにすることで、LaravelのviewでVue.jsが利用できるようになります。
うまく再描画できない場合は、キャッシュを削除してみてください。