[Vue warn]: Cannot find element: #app

[pappycami]

After installing I have this error in the console [Vue warn]: Cannot find element: #app and I get white page

[b3nissa]

Same issue here

[MohammaddReza]

and me ...!

[alexeycrystal]

Hi guys, sorry for such a late answer (have no free second to process your issues last time).

I have pushed a possible fix for all of your issues Issue fix.

If the issue wil happen again, please provide some more details:

• provide details about what steps have you made before the project deploy on local machine.
• have you done all the steps from the readme.md
• what browser are you using

[eAvio]

Same issue.

Safari, Chrome, Firefox.

I did all the steps.

I'm using npm version 6.14.8.

If I open url, blank page appears with error in console [Vue warn]: Cannot find element: #app.

I also get warnings when running npm run watch, and many warnings about deprecation when doing npm install

       Asset      Size   Chunks             Chunk Names
/css/app.css   260 KiB  /js/app  [emitted]  /js/app
  /js/app.js  4.29 MiB  /js/app  [emitted]  /js/app

WARNING in ./resources/js/router/index.js 13:15-18
"export 'default' (imported as 'App') was not found in '../App'
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

WARNING in ./resources/js/app.js 15:13-16
"export 'default' (imported as 'App') was not found in './App'
 @ multi ./resources/js/app.js ./resources/sass/app.scss

WARNING in ./resources/js/App.js 15:13-16
"export 'default' (imported as 'App') was not found in './App'
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

WARNING in ./resources/js/App.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Projects/laravel-passport-vue-authentication/node_modules/babel-loader/lib/index.js??ref--4-0!/
/Projects/laravel-passport-vue-authentication/resources/js/App.js
    Used by 6 module(s), i. e.
    /Projects/laravel-passport-vue-authentication/node_modules/babel-loader/lib/index.js??ref--4-0!/
Projects/laravel-passport-vue-authentication/resources/js/app.js
* Projects/laravel-passport-vue-authentication/node_modules/babel-loader/lib/index.js??ref--4-0!
Projects/laravel-passport-vue-authentication/resources/js/app.js
    Used by 1 module(s), i. e.
    multi /Projects/laravel-passport-vue-authentication/resources/js/app.js
Projects/laravel-passport-vue-authentication/resources/sass/app.scss
 @ ./resources/js/App.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss```

[dbulan]

Koroche, guys. I had able to solve that problem, but faced with another.

To fix [Vue warn]: Cannot find element: #app:

1. in js/app.js change second line like this: import App from './App.vue';
2. in js/route/index.js change 6-th line also like this import App from '../App.vue'; Profit! Reload your page and you will see double headers :)

Another problems with authentication:

1. I don't know why, but rule alpha_num not working for me and I just removed it in Login.vue and Register.vue
2. Change API_URL variable in: js/common/config.js
3. Also I receive many 500 errors during sign-in and sign-up process, so

• Remove protected AuthenticationServiceInterface $authenticationService; in LoginController.php
• Remove protected RegistrationServiceInterface $service; in RegisterController.php
• Delete types (string / int) declarations for $token, $user_id, $status properties in LoggedUserResponseEntity.php, LoginResponseEntity.php and RegistrationResponseEntity.php

Now, this magic app will works correctly!

Bonus: Vnutri net funkcionala :DDD

[alexeycrystal]

Koroche, guys. I had able to solve that problem, but faced with another.

To fix [Vue warn]: Cannot find element: #app:

1. in js/app.js change second line like this: import App from './App.vue';
2. in js/route/index.js change 6-th line also like this import App from '../App.vue'; Profit! Reload your page and you will see double headers :)

Another problems with authentication:

1. I don't know why, but rule alpha_num not working for me and I just removed it in Login.vue and Register.vue
2. Change API_URL variable in: js/common/config.js
3. Also I receive many 500 errors during sign-in and sign-up process, so

• Remove protected AuthenticationServiceInterface $authenticationService; in LoginController.php
• Remove protected RegistrationServiceInterface $service; in RegisterController.php
• Delete types (string / int) declarations for $token, $user_id, $status properties in LoggedUserResponseEntity.php, LoginResponseEntity.php and RegistrationResponseEntity.php

Now, this magic app will works correctly!

Bonus: Vnutri net funkcionala :DDD

Thank you for this fast solution and your comment. I don't have no time to fix this issue (aparently I have no issue at all after all this steps so there was a problem to reproduce this). I have used the PHP 7.4 for this example, so possibly a part of your errors is about that. About the bonus: This application was created to show a small hello-world example with the simpliest logic and how to use Vue js with PHP with a small amount of code without any serious logic.