[Vue warn]: Failed to resolve component

Question

This is my code:

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

This is my template:

<head>
     <script type="text/x-template" id="home-template">
      <div class="banner dark">
        <div class="content">says some shit</div>
      </div>
      <div class="banner light">
        <div class="content">says some other shit</div>
      </div>
    </script>
</head>

When I load the page I get this warning:

[Vue warn]: Failed to resolve component: home

and this error:

Uncaught TypeError: Cannot read property '_refID' of undefined

What am I doing wrong?

Answer 1

You have to either create your Vue.component before the creation of the Vue ViewModel, that is before the new Vue({}) , or create your Vue.component inside the ViewModel in created event.

Here is jsfiddle with the first approach and here is jsfiddle showing the second approach.

[Vue warn]: Failed to resolve component

Question

1 answers

solution1
2 2015-04-21 17:08:22

[Vue warn]: Failed to resolve component

Question

1 answers

solution1 2 2015-04-21 17:08:22

solution1
2 2015-04-21 17:08:22