Vue - Cannot Find Element

  • Estimated read time: 3 min read
  • Written by Chad Campbell on Jan 30th 2017

If you're new to Vue.js, you may experience some errors that you're unfamiliar with. In fact, I saw an error when creating my delimiter app that I wasn't familiar with. For example, you may see an error in your Vue that says "Cannot find element". In Google Chrome, you'll see this error in your console window, like this:

Cannot find element
Cannot find element

This error happens because you're instantiating Vue too early. Often times, you'll see this error because the HTML element you're mounting Vue on hasn't loaded into the DOM. This can happen if you're instantiating a Vue in the head of your HTML page, like this.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue.js!'
          }
        });
    </script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
  </body>
</html>
This is not how you should instantiate a Vue app. Do not do this.

Or if you're importing your app using an external JavaScript file like this:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="/path/to/app/app.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
  </body>
</html>
This is not how you should instantiate a Vue app. Do not do this.

These two approaches load the JavaScript before the DOM has fully loaded. For that reason, you should strive to initialize your Vue object after the HTML DOM has loaded. You can do this by placing Vue related scripts just before end of your body tag. This means that a skeleton template for your HTML pages could look like this:

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue.js!'
          }
        });
    </script>
  </body>
</html>
This is a better way to instantiate a Vue app.

The approach above is a recommended approach. In fact, it's consistent with the W3C HTML 4 spec. Once you've updated your HTML such that your Vue code is instantiated after the rest of the DOM, you should be good to go. The cannot find element error will disappear and you can move forward with your app.

I hope you found this post helpful. If you'd like to learn more about Vue, I hope you'll check out my Vue.JS: Getting Started training course on Pluralsight. If you don't have a Pluralsight subscription, I'd like to offer you a free trial. The course helps you get going with Vue.js. If nothing else, I believe it's worth your time to read more about what the Vue training course provides.

If there are other topics you're curious about, please feel free to mention them in the comments below. Thanks for reading.


Comments

comments powered by Disqus

Chad Campbell
Chad Campbell

Chad is an independent software professional. He has been named a Microsoft MVP five times. His books have been translated into multiple languages and distributed worldwide. He holds a computer science degree from Purdue University, where he also studied psychology.

Chad has built sites, apps, frameworks, libraries, and platforms using Java, .NET, and Node. He's ran his own startups and has created software for Fortune 100 companies. In short, Chad knows how to create software. From ideation to delivery. From start-to-finish.


Related Content

Follow Chad Online