[Vue warn]: Cannot find element

Question

I'm using Vuejs. This is my markup:

<body>
  <div id="main">
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
  </div>
</body>

This is my code:

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
})
;

When I load the page I get this warning:

[Vue warn]: Cannot find element: #main

What am I doing wrong?

the ready handler was the issue. seems silly that vue doesnt include this... @ArunPJohny - if you submit an answer with a snippet ill mark it as correct. — dopatraman, Apr 07 '15 at 05:38
Why is this not included in the Vue docs? I had the same issue but this worked. — pythonNovice, Apr 23 '21 at 17:42

score 369 · Accepted Answer · answered Apr 07 '15 at 05:45

369

I think the problem is your script is executed before the target dom element is loaded in the dom... one reason could be that you have placed your script in the head of the page or in a script tag that is placed before the div element #main. So when the script is executed it won't be able to find the target element thus the error.

One solution is to place your script in the load event handler like

window.onload = function () {
    var main = new Vue({
        el: '#main',
        data: {
            currentActivity: 'home'
        }
    });
}

Another syntax

window.addEventListener('load', function () {
    //your script
})

answered Apr 07 '15 at 05:45

Arun P Johny

384,651
66
527
531

4

hey thanks, sorry for comment here why vue js need to be load it, in the doc there is no telling, thanks – Freddy Sidauruk Mar 18 '16 at 04:55
11

Also to note, the `addEventListener` method is "technically" a more maintainable approach because it isn't overriding the global `window.onload` property. – joshwhatk Jan 06 '17 at 22:11
Including the Webpack bundle script in the `` section is what caused me the error. Waiting for the window to be loaded is working. – Amin NAIRI Aug 29 '17 at 10:02
3

No warning in console that script statements containing references to DOM elements are being evaluated before the DOM is loaded? How can this be a difficult warning to implement? – Tom Russell Sep 10 '18 at 22:04

score 85 · Answer 2 · answered Aug 20 '17 at 10:06

85

I've solved the problem by add attribute 'defer' to the 'script' element.

answered Aug 20 '17 at 10:06

Su Chuan

851
6
3

Is there any side-effect with using defer? – Mohammad Ali Akbari Sep 21 '18 at 16:51
1

You can read more about how the script tag's `defer` attribute works [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer). It will delay running the JS code until after the DOM has parsed, but *before* the window `onload` event is fired. – TechPrime Mar 02 '20 at 17:38

score 59 · Answer 3 · answered Nov 14 '16 at 16:44

59

I get the same error. the solution is to put your script code before the end of body, not in the head section.

answered Nov 14 '16 at 16:44

li bing zhao

1,388
13
12

before the end of body but not in the head? what does that mean exactly? – daslicious Nov 14 '16 at 19:10
7

– li bing zhao Nov 16 '16 at 15:22
4

put your vue.js code before the
, the browsers will load the body content first,then load the vue.js code, it will work.
– li bing zhao Nov 16 '16 at 15:25
2

Ran into this issue while using Laravel and its accompanying laravel-mix. Moving the loading of the js to after the body resolved it. – john Mar 02 '19 at 03:05

score 30 · Answer 4 · answered Oct 01 '17 at 16:42

The simple thing is to put the script below the document, just before your closing </body> tag:

<body>
   <div id="main">
      <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
   </div>
   <script src="app.js"></script>
</body>

app.js file:

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
});

score 2 · Answer 5 · answered Jun 05 '20 at 21:34

You can solve it in two ways.

Make sure you put the CDN into the end of html page and place your own script after that. Example:

    <body>
      <div id="main">
        <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
      </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="js/app.js"></script>

where you need to put same javascript code you wrote in any other JavaScript file or in html file.

Use window.onload function in your JavaScript file.

score 0 · Answer 6 · answered Jun 06 '20 at 13:48

I think sometimes stupid mistakes can give us this error.

<div id="#main"> <--- id with hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>

To

<div id="main"> <--- id without hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>

[Vue warn]: Cannot find element

6 Answers6

Linked