Laravel + Vue.jsの導入方法 #JavaScript

LaravelのBladeにVueコンポーネントを組み込む方法をまとめます。

環境

laradock
php: 7.3
Laravel: 7.2

Vue.jsをインストールする

laravel/package.json

"vue": "^2.6.11", 
"vue-template-compiler": "^2.6.11"

$ docker-compose exec workspace npm install

Vueコンポーネントを作成する

試しにハートボタンを作成します。

laravel/resources/js/components/SampleLike.vue

<template>
  <div>
    <button
      type="button"
      class="btn m-0 p-1 shadow-none"
    >
      <i class="fas fa-heart mr-1"
      />
    </button>
    10
  </div>
</template>

<script>
</script>

app.jsを編集

laravel/resources/js/app.js

import Vue from 'vue'
import Samplelike from './components/SampleLike'

const app = new Vue({
  el: '#app',
  components: {
    SampleLike,
  }
})

laravelの全画面で使用できるようにここで読み込みます。

Laravel Mixを編集

laravel/webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .version();

上記はresources/js/app.jsをトランスパイルしてpublic/jsのapp.jsというファイルで保存されるよというソースです。
.version()はトランスパイルされる時に毎回idを採番する役割ですが、これは同じidの古いjavascriptをブラウザキャッシュに残さないためです。

.gitignoreを編集

下記はjavascriptが編集される都度トランスパイルされてファイルが作成・更新されていくため、
管理対象から外しておきます。

laravel/.gitignore

/node_modules
/public/css　# 追加
/public/hot
/public/js  # 追加
/public/mix-manifest.json　# 追加

トランスパイルの実行

$ docker-compose exec workspace npm run watch-poll

DONE Compiled successfullyと表示されればトランスパイル成功です。
上記のコマンドはjavascriptが編集されたら自動でトランスパイルしてくれます。

app.blade.phpを編集

laravel/resources/views/app.blade.php

{{--省略--}}
<body>
  <div id="app"> {{--追加--}}
    @yield('content')
  </div> {{--追加--}}

  <script src="{{ mix('js/app.js') }}"></script> {{--追加--}}
{{--省略--}}
</body>

BladeにVueコンポーネントを組み込む

laravel/resources/views/posts/index.blade.php

<div class="card-body pt-0 pb-2 pl-3">
    <div class="card-text">
      <sample-like>
      </sample-like>
    </div>
  </div>

組み込むときはケバブケースで記述する。

これでハートボタンとダミーの10が表示でき、Vueコンポーネントを組み込めたかと思います。