203

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?

4
  • 2
    Doing this in the footer, or header? Apr 7, 2015 at 5:33
  • 7
    move your script to a window ready handler Apr 7, 2015 at 5:35
  • 2
    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 7, 2015 at 5:38
  • Why is this not included in the Vue docs? I had the same issue but this worked. Apr 23, 2021 at 17:42

6 Answers 6

368

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
})
4
  • 4
    hey thanks, sorry for comment here why vue js need to be load it, in the doc there is no telling, thanks Mar 18, 2016 at 4: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 6, 2017 at 22:11
  • Including the Webpack bundle script in the <head></head> section is what caused me the error. Waiting for the window to be loaded is working.
    – Amin NAIRI
    Aug 29, 2017 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? Sep 10, 2018 at 22:04
85

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

2
  • Is there any side-effect with using defer? Sep 21, 2018 at 16:51
  • 1
    You can read more about how the script tag's defer attribute works here. It will delay running the JS code until after the DOM has parsed, but before the window onload event is fired.
    – TechPrime
    Mar 2, 2020 at 17:38
59

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

4
  • before the end of body but not in the head? what does that mean exactly?
    – daslicious
    Nov 14, 2016 at 19:10
  • 7
    <script src="index.js"></script> </body> Nov 16, 2016 at 15:22
  • 4
    put your vue.js code before the </body>, the browsers will load the body content first,then load the vue.js code, it will work. Nov 16, 2016 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 2, 2019 at 3:05
30

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'
    }
});
2

You can solve it in two ways.

  1. 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.

  1. Use window.onload function in your JavaScript file.
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.