Vue: <router-view> can only be used inside a router-enabled app.

[NaderIkladious]

I have this warning although routing is working fine but I cant get rid of it

Here is the app.js

Vue.http.options.root = '/api/v1';
Vue.config.debug = true;

var App = new Vue({
  el: '#app'
})

Vue.filter('int', function(value) {
  return parseInt(value);
})

var router = new VueRouter()

router.map({
  '/report': {
        component: require('./components/report.vue')
    },
    '/': {
        component: require('./components/selection.vue')
    }
})


router.start(App, '#app')

and here is the index.html

<div id="app">
    <router-view></router-view>
</div>

And when I turn on the debug mode
this additional warning appears

Error: warning stack trace:
    at warn (vue-router.js:729)
    at Directive.bind (vue-router.js:1765)
    at Directive._bind (vue.js:7607)
    at linkAndCapture (vue.js:6321)
    at compositeLinkFn (vue.js:6299)
    at Vue._compile (vue.js:7885)
    at Vue.$mount (vue.js:8822)
    at Vue._init (vue.js:2355)
    at Vue._init (vue-router.js:1705)
    at new Vue (vue.js:8881)

How can I get rid of it and make sure everything working fine.

Thanks in advance.

[posva]

Ask questions on the forum http://forum.vuejs.org
This seems more related to vue-router to me :stuck_out_tongue:

[yyx990803]

You forgot to call Vue.use(VueRouter).

[NaderIkladious]

I have already included the file in the HTML

Although I've tried that now and nothing changed

Please note that the router is fully functioning as far as I can see, but it say this warning.

Thanks for the prompt response.

[yyx990803]

Hmm, please provide a live repro if possible.

[NaderIkladious]

Here is a sample code that have the same warnings

Check it on bitbucket
https://bitbucket.org/silveryblood/vue-router-issue

[yyx990803]

Ah, your App should be a component constructor, not an instance:

var App = Vue.extend({})

instead of

var App = new Vue({ ... })

[xiaoppp]

It is a little weird why I can't use new Vue() but instead of Vue.extend({})

Why should use component constructor not using new Vue()?
For new guys, the first thought is using new Vue() ...

[simplesmiler]

@xiaoppp if you are familiar with OOP terms, new makes an instance of certain class, and extend makes a subclass of certain class.