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/