Laravel で Vue.jsを利用する方法

今回はLaravel でVue.jsを利用する方法を簡単に記載します。

laravel/resources/js/app.js に追記

まずはlaravel/resources/js/app.js に１行追記します。

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
// 下記を追加
Vue.component('test-component', require('./components/TestComponent.vue').default);

Componentsディレクトリにvueファイル作成

resources/js/components/ ディレクトリに「TestComponent.vue」を作成します。今回は下記のように作成します。

<template>
   <div class="container">
       <div class="row justify-content-center">
           <div class="col-md-8">
               <div class="card">
                   <div class="card-header">Test Component</div>
                   <div class="card-body">
                       test用のcomponentです。
                   </div>
               </div>
           </div>
       </div>
   </div>
</template>
<script>
   export default {
       mounted() {
           console.log('Component mounted.')
       }
   }
</script>

bladeファイルに追記。

vueを表示させるbladeファイルに下記追記します。

<div id="app">
   <example-component></example-component>
</div>
<script src="{{ asset('/js/app.js') }}"></script>

ビルドする

下記でビルドします。

npm run dev

※laradockの場合は下記でビルドできます。

docker-compose exec workspace npm run dev

キャッシュ削除リロード

ビルドしたら対応可能なのですが、ブラウザによってはキャッシュが残ってしまい確認できない場合があります。

その場合は、ブラウザ上で下記コマンドを実行してキャッシュを削除しページリロードしてください。

Shift + command + R

以上で完了です。