【Laravel7】Vue.jsでコンポーネントを組み込む

試しにvueファイルをviewで表示しようとしたら、どのファイルが必要なのかわからなくなるので、組み込む際に必要なファイルを挙げていく

参考：

https://qiita.com/shonansurvivors/items/1715a483ac4298162ccd

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

resources/js/componentsディレクトリにファイルを作成

例：resources/js/components/OriginalCompnent.vue

<template>
 <!-- 略 -->   
</template>
<script>
 // 略
</script>

app.jsの編集

Laravelで共通で使用されるjavascriptであるapp.jsを編集して、

・Vue.js
・Vueコンポーネント

の使用定義をする。

resources/js/app.js

import './bootstrap'
import Vue from 'vue'
import FooBar from './components/FooBar'
const app = new Vue({
 el: '#app',
 components: {
   FooBar,
 }
})

Laravel Mixの設定

webpack.mix.js

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
 .sass('resources/sass/app.scss', 'public/css')
 .version();

mix.js('resources/js/app.js', 'public/js')

resources/js/app.jsがコンパイルされたあと、public/jsディレクトリに同じapp.jsというファイル名で保存される。

ブラウザで読み込まれて使用されるのは、public/js/app.jsの方。

実際に動かす

npm run watch-poll

・JavaScriptがLaravel Mixにより自動コンパイルされるようになる。(JavaScriptの状態を定期的に監視し、保存すると自動でコンパイルしてくれる)