Navigator issues with Vue JS

[sts-ryan-holton]

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>