Can't get 0.0.9's ion-vue-router to work with tabs

I’m building an app with Ionic 4 + Vue 0.0.9, and I’ve been looking at the conference app to see how things work, as the Ionic docs aren’t always clear. In the app they use ion-vue-router to display the contents of the various tabs, but when I try it, I get nothing.

In order to get tabs working, I have to replace <ion-vue-router> with my component (e.g. <Home />), then my tabs work as intended.

I have an <ion-vue-router> in App.vue which renders everything, and that works fine, but it’s just trying to use <ion-vue-router> in sub-views that is causing me grief.

Has anyone had any success in using the router?

I have updated and tested my example code, let me know if it works for you

2 Likes

Hey @aaronksaunders. I’ve downloaded and played with your demo. Everything works, but when I try to pass props down things don’t work. I’m probably doing it wrong. Do you have an example of this working with ion-view-router and tabs working together?

can you post some code so I have an understanding of what you are trying to do? Also I would recommend that you use some sort of state management library

Actually, you’re quite right. I do need some sort of state management library. I was hoping to somehow keep state at the bottom most file like App.vue and then push state through the various views/components as props. Can you show off an example of this happening? I suppose Vuex is the state management library of choice? Any examples would be great cause right now my project is essentially your project, except like I said, I’m trying to push props down stream to views/compoents.

here is an older project - need to go back through and update alot of the vue stuff - ionic-meetup-vue2

Let me know if you get blocked

Thanks dude! I’ve been studying up your code. That project is actually a big help. I think the VeeValidate stuff changed significantly so I’m unable to get that part up and running so I’ve skipped it for now. But thank you either way!

Which link / project are you using? I will try and get it updated.

This one: https://github.com/aaronksaunders/ionic-meetup-vue2

It’s the perfect mix of Ionic, Vue, Firebase, etc. which I’m using in my current project. Ultimately I’m also trying to use Vuex, IonVueRouter, and Ionic tabs for my app. That project has the majority and has been quite helpful!

1 Like

Thanks Aaron! This really helped me out, I was struggling with tabs, ionic and vue. Your vue-tabs example saved the day!

1 Like

Glad I could help, it is still beta so it’s not perfect… more vue content here https://www.youtube.com/playlist?list=PL2PY2-9rsgl2bgNTX9omlDisiWh1NYInz