Vue-Material navbar, Missing required prop: "to"

Question

So the Vue-Material docs (https://vuematerial.io/components/bottom-bar) says it is possible to create a md-bottom-bar stuffed with md-bottom-bar-item, while being able to make md-bottom-bar-item act like a <router-link>

Their code can be seen right below "Seamless integration with Vue Router" (this is exactly what it's meant for by the way ^^), and my code looks like this :

<md-bottom-bar-item
    id="messageRoute"
    to="/Messages"
    @click="stuff"
    md-label="Notifications"
    md-icon="message">
</md-bottom-bar-item>

<md-bottom-bar-item
    id="settingsRoute"
    to="/Settings"
    @click="stuff"
    md-label="Options"
    md-icon="settings">
</md-bottom-bar-item>

These are tabs to a notifications list, and the settings page for my app.

The error I got when I click on an item is literally this (I got it 5 times though, beucause there's 5 items in my navbar) :

[Vue warn]: Missing required prop: "to"

found in

---> <MdButton> at src/components/MdButton/MdButton.vue
       <MdBottomBarItem> at src/components/MdBottomBar/MdBottomBarItem.vue
         <MdRipple> at src/components/MdRipple/MdRipple.vue
           <MdBottomBar> at src/components/MdBottomBar/MdBottomBar.vue
             <NavBar> at src\components\NavBar.vue
               <App> at src\App.vue
                 <Root>

I got the same error without the @click='stuff' by the way, nothing to do with it.... I guess...

Is it about [email protected] (the one I'm using) being in beta or ? It feels like I'm doing what is showed in the doc, I even copy-pasted it and changed things so it would fit in my app.

For now I just did a goTo(path) methods, that just do this.$router.replace(path), but the bottom bar is not sync with Vue's router, with the md-sync-route attribute, like so :

<md-bottom-bar md-sync-route>
    <!-- stuff -->
</md-bottom-bar>

Not a critical problem, but damn, why Vue.js, why ??? ^^'

And, what a troll :

Pierre Lartigau Pierre Lartigau · Accepted Answer · 2017-12-19T11:56:57

Ok, this is interesting.

As the issue you gave me pointed out, this might be a version problem, but my vue version is 2.9.2 (checked it with vue -V). Nevermind, I still ran npm update -g vue, and the answer I got from the terminal... well :

+ [email protected]
updated 1 package in 0.626s

Now everything works fine (router, to, etc...).

But why though ? Does vue-material uses a slightly different vue, or there's some parts that are redefined, like router link's behavior on certain element like md-bottom-bar-item ?

And why npm install couldn't fix that ? Well anyway, now it works, and my last questions exists probably because this framework is a beta and few things have to be done... or because I'm starting to do stuff with npm etc ^^

If you know something it would be helpful for me to know, feel free to tell me, I'd be glad to hear...

Vue-Material navbar, Missing required prop: "to"

2 Answers