Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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

  • 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
        - components
            - Home.vue
            - Main.vue
            - Swipenav.vue
            - Toolbar.vue
        - App.vue
        - main.js


        <v-ons-navigator swipeable :page-stack="pageStack" @push-page="pageStack.push($event)">
                    <v-ons-splitter-side swipeable
                        width="150px" collapse="" side="left"
                                <v-ons-list-item v-for="page in pages" :key="" tappable modifier="chevron" @click="currentPage =; openSide = false"
                                    <div class="center">{{ page.title }}</div>
                        <component :is="currentPage" :toggle-menu="() => openSide = !openSide"></component>
    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


          <div class="center">Main</div>
        <p style="text-align: center">
          main page
          <v-ons-button @click="push_signin">Push signin</v-ons-button>
    import signin_tpl from './Signin.vue';
    export default {
      name : 'mainpage_comp',
      methods : {

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

  • administrators

    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:

    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.