Monaca Onsen UI Discord Chat Github Repo

Navigator issues with Vue JS



  • Hi, I’ve recently set up a project using the Vue CLI 3.x command and I’m trying to get the Onsen UI navigator (https://onsen.io/v2/api/vue/v-ons-navigator.html) to work inside my .vue files.

    I have a views/Home.vue file which comes with the project by default, and am trying to get the navigator to work with another page (e.g: views/About.vue).

    I’ve tried linking to another page, the function is working and the new page is loading however there is no animation. Here’s my code:

    This is my vue file:

    <template id="main">
      <v-ons-navigator swipeable
        :page-stack="pageStack"
        @push-page="pageStack.push($event)"
      ></v-ons-navigator>
    </template>
    
    <template id="page1">
      <v-ons-page>
        <v-ons-toolbar>
          <div class="center">Page 1</div>
        </v-ons-toolbar>
        <p style="text-align: center">
          This is the first page
          <v-ons-button @click="push">Push Page 2</v-ons-button>
        </p>
      </v-ons-page>
    </template>
    
    <template id="page2">
      <v-ons-page>
        <v-ons-toolbar>
          <div class="left">
            <v-ons-back-button>Page 1</v-ons-back-button>
          </div>
          <div class="center">Page 2</div>
        </v-ons-toolbar>
        <p style="text-align: center">This is the second page</p>
      </v-ons-page>
    </template>
    
    <script>
      const page2 = {
        key: 'page2',
        template: '#page2'
      };
    
      const page1 = {
        key: 'page1',
        template: '#page1',
        methods: {
          push() {
            this.$emit('push-page', page2);
          }
        }
      };
      export default {
        name: 'dashboard',
        template: '#main',
        data() {
          return {
            pageStack: [page1]
          };
        }
      }
    </script>