プロさんのおうち   ~プログラムのサンプル置き場~


Vue.jsを利用する


今回は、LaravelのviewでVue.jsを利用してみます。

Composerでcreate-projectした際にライブラリ自体は導入されています。

Vue.jsの利用方法

Vue.jsを利用するために実装することは、以下の3つです。

  • コンポーネントとなるvueファイルを作成する
  • app.jsに作成したコンポ―ネントを定義する
  • viewファイルでapp.jsを読み込む

コンポーネントファイルを作成しない場合は、一番最後の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が利用できるようになります。

うまく再描画できない場合は、キャッシュを削除してみてください。



メニューに戻る


CopyRight 2019 株式会社PUreatio