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 https://webpack.js.org/concepts#loaders

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

then

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'
createApp(App).mount("#app")

Follow TechBiriyani on FacebookTwitter to get all the latest updates.

By Shahas Nizar

A passionate blogger and a tech enthusiast who is always keen and awaiting to know about fully fledged new technologies who's currently using iPhone 12 as a part of daily routine. You can spot me @ #facebook, #twitter & #Google +

Leave a Reply