Combining Laravel + Vue.js got Error ( Module not found: Error: Can't resolve './vue/App' in 'C:\xampp\htdocs\todolist\resources\js' )

Question

So I did everything like this video https://www.youtube.com/watch?v=UHSipe7pSac but after that I got this error :

:( "ERROR in ./resources/js/app.js 4:0-28 Module not found: Error: Can't resolve './vue/app'

this is my /resources/js/app.js file

require('./bootstrap');

import Vue from 'vue';

import App from './vue/App';

const app = new Vue(
    {
        el: '#app',
        components: { app }
    }
);

and this is my webpack.mix.js file

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

What is the path to your App.vue file?

Rwd
– Rwd

2021-09-08 11:12:39 +00:00
Commented Sep 8, 2021 at 11:12 — Rwd
– Rwd, Commented Sep 8, 2021 at 11:12
What is here resources/js/vue/App.js?

Ben Gooding
– Ben Gooding

2021-09-08 11:35:19 +00:00
Commented Sep 8, 2021 at 11:35 — Ben Gooding
– Ben Gooding, Commented Sep 8, 2021 at 11:35
Also you shouldn't mix using imports and requires

Ben Gooding
– Ben Gooding

2021-09-08 11:35:31 +00:00
Commented Sep 8, 2021 at 11:35 — Ben Gooding
– Ben Gooding, Commented Sep 8, 2021 at 11:35

Stan Smulders · Accepted Answer · 2021-09-08 12:57:17Z

1

You're using the Vue const itself as a component. (Aside from the other correct comments on your question)

import App from './vue/App'; <----- Uppercase App

const app = new Vue( <----- Lowercase app
    {
        el: '#app',
        components: { app } <------- Lowercase app
    }
);

Try changing those up. But even better, improve your naming. Like Home.vue

Happy coding!

answered Sep 8, 2021 at 12:57

Stan Smulders

6,2371 gold badge30 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Combining Laravel + Vue.js got Error ( Module not found: Error: Can't resolve './vue/App' in 'C:\xampp\htdocs\todolist\resources\js' )

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related