I have a fresh Laravel installation. On compiling files using npm run dev VUE I get a file error
"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"
Laravel Verion: "^8.12"
Package.json
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"vue": "^2.5.17",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.10"
}
blade file
<div id="app">
<hello></hello>
</div>
<script src="{{mix('js/app.js')}}"></script>
app.js
require('./bootstrap');
import Vue from 'vue'
Vue.component('hello', require('./hello.vue').default);
const app = new Vue({
el: '#app'
});
Hello.vue
<template>
<div>
Hello World!
</div>
</template>
<script>
export default {
}
</script>
npm run dev
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>
| Hello World!
as your using laravel-mix 6 it have different config for webpack.mix.js
use .vue()
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);