[Vue warn]: Cannot find element: #app about avoriaz

[mboullouz]

Hi @eddyerburgh ,
we work on a "classical" web app where most views are generated in the server side, we added Vue to enhance user experience, we have all components bundled in one webpack big file that is included in every page (and obviously most components are not in the 'current' page).
My question: does it impact perfs or just Vue warn and ignore ?

[eddyerburgh]

Can you post a minimal failing example that doesn't have any dependencies?

Then I can use it as a test case and write a fix that will let you mount it to a custom element ( I think that should fix the issue).

It's important I have a minimal example to find out what's causing the error and how to fix 👍

[eddyerburgh]

HI @jacklp, I'm closing this issue but happy to reopen if you can provide more detail.

What I think is happening is that you were trying to test a component that was had the $el option (aka the root component) set to '#app'. As this doesn't exist on the DOM you were testing on, it threw an error.

This could be solved by adding an element with an id of app to the body.

I don't think any feature should be added to avoriaz to support this, as the root element should really be logic less. Although I'm happy to discuss this if anyone disagrees

[MetalNose]

@mboullouz I'm having the same issue :/

[paulvonber]

@eddyerburgh same here

[wbarnard81]

Hi guys, came across this site via a google search. Even though I am not using this app, I am getting the same issue and I know why as well, but I am not sure how to resolve it yet.

I built my own app, using Laravel. One component that I want to use is DataTables. To get this working, I had to remove 'deferred' from [code]<script src="{{ asset('js/app.js') }}"></script>[/code] and since then, I am getting this error. Obviously, if I put deferred back, I don't get this error anymore, but then my datatables don't work anymore.

[crocodilered]

Same bug.

[antangible]

Same error.

[milad-4274]

same warn

[Alwongs]

Put the <script> in the bottom of body teg. For me, it helped