Laravel8にVue.js導入時のエラー改修

Laravel8にVue.js導入

参考 ：https://migisanblog.com/laravel-vue-install/#Vuejsをインストールする

とりあえず、「app.blade.php」に以下記述
参考：https://biz.addisteria.com/laravel8_vue_install/#toc9

app.blade.php

<div id="app">
    <example-component></example-component>
</div>

<script src="{{ mix('js/app.js') }}"></script>

chromeのデベロッパーツールを見るとコンソールでエラー

ERROR in ./resources/js/components/ExampleComponent.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
 <template>
     <div>
     <button type="button" class="btn m-0 p-1 shadow-none">

webpack.mix.jsを修正

で以下参考に修正
https://zakkuri.life/laravel-mix-npmのパッケージをupgradeしたらコンパイルできなく/

mix.js('resources/js/app.js', 'public/js').vue()  ← 「.vue()」を追記する
    .sass('resources/sass/app.scss', 'public/css');

でnpm run dev実行

Additional dependencies must be installed. This will only take a moment.

Running: npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps

Finished. Please run Mix again.

「npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps」実行する

再びnpm run dev

でLaravel8にVue.js環境整った

参考
https://zakkuri.life/laravel-mix-npmのパッケージをupgradeしたらコンパイルできなく/
https://blog.maro.style/post-1526/