vuejs onsen app using both splitter and push page navigator, push page not working

[mejuliver]

I’m trying to create an onsen app using vuejs but I’m stuck on push page navigator where only splitter is working, push page is not working. below is what I’ve tried. (I’m using vue cli)

files structure

src
    - components
        - Home.vue
        - Main.vue
        - Swipenav.vue
        - Toolbar.vue

    - App.vue
    - main.js

Swipenav.vue

<template>
    <v-ons-navigator swipeable :page-stack="pageStack" @push-page="pageStack.push($event)">
        <v-ons-page>
            <v-ons-splitter>
                <v-ons-splitter-side swipeable
                    width="150px" collapse="" side="left"
                :open.sync="openSide"
                >
                    <v-ons-page>
                        <v-ons-list>
                            <v-ons-list-item v-for="page in pages" :key="page.id" tappable modifier="chevron" @click="currentPage = page.name; openSide = false"
                            >
                                <div class="center">{{ page.title }}</div>
                            </v-ons-list-item>
                        </v-ons-list>
                    </v-ons-page>
                </v-ons-splitter-side>

                <v-ons-splitter-content>
                    <component :is="currentPage" :toggle-menu="() => openSide = !openSide"></component>
                </v-ons-splitter-content>

            </v-ons-splitter>
        </v-ons-page>
    </v-ons-navigator>
</template>


<script>
import main_tpl from './Main.vue'
import home_tpl from './Home.vue'
export default {
    name : "swipenav",
    data() {
        return {
            pageStack: [main_tpl],
            pages : [
                { name : 'main_tpl', title : 'Main' },
                { name : 'home_tpl', title : 'Home' },
            ],
            currentPage : 'home_tpl',
            openSide : false
        };
    },
    components : {
        home_tpl : home_tpl,
        main_tpl : main_tpl
    }
}
</script>

Main.vue

<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Main</div>
    </v-ons-toolbar>
    <p style="text-align: center">
      main page
      <v-ons-button @click="push_signin">Push signin</v-ons-button>
    </p>
  </v-ons-page>
</template>

<script>
import signin_tpl from './Signin.vue';
export default {
  name : 'mainpage_comp',
  methods : {
    push_signin(){
      console.log('working');
      this.$emit('push-page',signin_tpl)
    }
  }
}
</script>

I can confirm this push_signin() method is working but seems this.$emit(‘push-page’,signin_tpl) is not working. Any help, ideas please?

[emccorson]

It might be to do with having defined both page-stack and a child page on the navigator. If you look at the example here you can see it doesn’t define any child elements: https://onsen.io/playground/?framework=vue&category=reference&module=navigator

Do you have this in a git repo or something like that? If you can give a link to that, I’ll clone it and debug the problem.