Laravel Mix Vuejs component Syntax error

Laravel Mix Vuejs component Syntax  error on <template/>

Module not found: Error: Can’t resolve ‘./components/ExampleComponent.vue’

error in ./resources/js/components/ExampleComponent.vue

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See

These issues were caused by your laravel mix version. If you are using mix of version other than 6 you will be hit with the above errors.

Now with laravel-mix v6 you could run Vue 3 code in Laravel App:

Also read: How to Restore the Mysql databases from FRM and IBD files

1. Installation :

before doing that try to remove the following dependencies from package.json which some of them are added by php artisan ui vue :

  • vue
  • vue-template-compiler
  • laravel-mix

Now enter the commands below

npm i -D laravel-mix@next vue@next @vue/compiler-sfc vue-loader@next


npm i

2. Config:

in the package.json change the scripts to the following ones:

"scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"

webpack.mix.js should contain :

note that .vue() should added to the end,

const mix = require('laravel-mix');

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

The minimum content of resources/js/app.js

import { createApp } from 'vue';
import App from './components/App.vue'

Follow TechBiriyani on FacebookTwitter to get all the latest updates.

Leave a Reply

Your email address will not be published. Required fields are marked *