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:
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.
body tag. This means that a skeleton template for your HTML pages could look like this:
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.