Vue warn Cannot find element

Question

I m using Vuejs  This is my markup    lt body gt     lt div id  main  gt       lt div id  mainActivity  v-component    currentActivity    class  activity  gt  lt  div gt     lt  div gt   lt  body gt    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

User · Accepted Answer

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
})

User · Answer

I think sometimes stupid mistakes can give us this error    lt div id   main  gt   lt --- id with hashtag      lt div id  mainActivity  v-component    currentActivity    class  activity  gt  lt  div gt   lt  div gt    To   lt div id  main  gt   lt --- id without hashtag      lt div id  mainActivity  v-component    currentActivity    class  activity  gt  lt  div gt   lt  div gt

User · Answer

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

User · Answer

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

User · Answer

The simple thing is to put the script below the document  just before your closing  lt  body gt  tag    lt body gt      lt div id  main  gt         lt div id  mainActivity  v-component    currentActivity    class  activity  gt  lt  div gt      lt  div gt      lt script src  app js  gt  lt  script gt   lt  body gt    app js file    var main   new Vue       el    main       data            currentActivity   home

User · Answer

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         lt body gt         lt div id  main  gt           lt div id  mainActivity  v-component    currentActivity    class  activity  gt  lt  div gt         lt  div gt       lt  body gt       lt script src  https   cdn jsdelivr net npm vue 2 6 11  gt  lt  script gt       lt script src  js app js  gt  lt  script gt    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

[javascript] [Vue warn]: Cannot find element

Examples related to javascript

Examples related to mvvm

Examples related to vue.js