laravel - How to fix the error "You may need an appropriate loader to handle this file type"

Question

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!

Answer 1

as your using laravel-mix 6 it have different config for webpack.mix.js

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', [
        //
    ]);

ref link https://laravel-mix.com/docs/6.0/upgrade