monteecristoo’s blog

https://twitter.com/irakaarozo

Laravel5.4 と Vue2 のcomponentsの連携

環境:cloud9上にPHP7、laravel5.4をインストール。laravel内に設置したvueファイルの表示に関して。

vueファイル内にlaravelのdirectiveは混ぜられない(コンパイル時エラーが発生する)

 

 vueで作成したファイル内にlaravelのmiddlewareやproviderを通したデータを挿入したい場合、例えば…

 

  • 方法1

laravel側

Route::get('/user', function(){
  return Auth::user();
})->middleware('auth');

vue側

const app = new Vue({
  el: '#app',
  store,
  router: router,
  created() {
    axios.get('/user').then(response => {

      console.log(response);  

    })

  }
});

vueインスタンス生成時(created)にaxios経由でサーバーにリクエストを送り、laravel側で加工したデータを受け取る。

参考:

https://youtu.be/8aTfMHg3V1Q?list=PLXsbBbd36_uVjOFH_P25__XAyGsohXWlv&t=447

 

  • 方法2

同一ページ内にlaravel blade templateで作成したcomponentがある場合、vueファイル上で$('hoge').text()などで直接jsで加工済みの値を取得する。

 

参考:

https://youtu.be/8aTfMHg3V1Q?list=PLXsbBbd36_uVjOFH_P25__XAyGsohXWlv&t=802