Performant navigator for OnsenUI with Vue

PerformantNavigator.vue

<template>
  <div class="navigation">
    <!-- Unbinded ons-navigator (not v-ons-navigator) -->
    <ons-navigator>
      <transition :name="transition">
        <component :is="currentPage"></component>
      </transition>
    </ons-navigator>

    <button @click="pageI -= 1">Back</button>
    <button @click="pageI += 1">Next</button>
  </div>
</template>

<script>
// PageA-PageD components have a <v-ons-page> as their root element
import PageA from './PageA'
import PageB from './PageB'
import PageC from './PageC'
import PageD from './PageD'

const components = { PageA, PageB, PageC, PageD }

export default {
  components,
  
  data () {
    const pages = Object.keys(components)
    
    return {
      pageI: 0,
      pages,
      transition: 'page-next',
      currentPage: pages[0]
    }
  },

  watch: {
    pageI (pageI, oldPageI) {
      // Enforce pageI limits
      if (pageI < 0) return this.pageI = 0
      if (pageI >= this.pages.length) return this.pageI = this.pages.length - 1

      // Set transition based on pageI
      this.transition = pageI < oldPageI ? 'page-back' : 'page-next'
      this.currentPage = pages[pageI]
    }
  }
}
</script>

<style scoped>
.page-next-enter-active,
.page-next-leave-active,
.page-back-enter-active,
.page-back-leave-active {
  transition: transform .22s ease-out;
}

.page-next-enter {
  transform: translate3d(100%, 0, 0);
}

.page-next-leave-to {
  transform: translate3d(-25%, 0, 0);
}

.page-back-enter {
  transform: translate3d(-100%, 0, 0);
}

.page-back-leave-to {
  transform: translate3d(100%, 0, 0);
}
</style>