diff --git a/vue/src/components/ion-vue-router.ts b/vue/src/components/ion-vue-router.ts
index cea914156f..30f7b31b52 100644
--- a/vue/src/components/ion-vue-router.ts
+++ b/vue/src/components/ion-vue-router.ts
@@ -1,4 +1,5 @@
 import Vue, { CreateElement, RenderContext, VNodeData } from 'vue';
+import { NavDirection } from '@ionic/core';
 
 type TransitionDone = () => void;
 interface Props {
@@ -69,7 +70,7 @@ function catchIonicGoBack(parent: Vue, event: Event): void {
   let defaultHref: string;
 
   // Explicitly override router direction to always trigger a back transition
-  $router.directionOverride = -1;
+  $router.directionOverride = 'back';
 
   // If we can go back - do so
   if ($router.canGoBack()) {
@@ -127,8 +128,8 @@ function transition(parent: Vue, props: Props, leavingEl: HTMLElement) {
   return ionRouterOutlet.componentOnReady().then((el: HTMLIonRouterOutletElement) => {
     return el.commit(enteringEl, leavingEl, {
       deepWait: true,
-      duration: !props.animated ? 0 : undefined,
-      direction: parent.$router.direction === 1 ? 'forward' : 'back',
+      duration: !props.animated || parent.$router.direction === 'root' ? 0 : undefined,
+      direction: parent.$router.direction as NavDirection,
       showGoBack: parent.$router.canGoBack(),
     });
   }).catch(console.error);
diff --git a/vue/src/interfaces.ts b/vue/src/interfaces.ts
index 35ea96b397..aadacc9019 100644
--- a/vue/src/interfaces.ts
+++ b/vue/src/interfaces.ts
@@ -1,11 +1,12 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import { RouterDirection } from '@ionic/core';
 import { RouterOptions } from 'vue-router/types/router';
 
 declare module 'vue-router/types/router' {
   interface VueRouter {
-    direction: number;
-    directionOverride: number | null;
+    direction: RouterDirection;
+    directionOverride: RouterDirection | null;
     transition: Promise<void>;
     canGoBack(): boolean;
   }
@@ -61,7 +62,7 @@ export interface ApiCache {
 }
 
 export interface RouterArgs extends RouterOptions {
-  direction?: number;
+  direction?: RouterDirection;
   viewCount?: number;
 }
 
diff --git a/vue/src/router.ts b/vue/src/router.ts
index 1f4ea038ff..588b831bcc 100644
--- a/vue/src/router.ts
+++ b/vue/src/router.ts
@@ -2,12 +2,12 @@ import VueRouter, { Route } from 'vue-router';
 import { PluginFunction } from 'vue';
 import { RouterArgs } from './interfaces';
 import IonVueRouter from './components/ion-vue-router';
-import { BackButtonEvent } from '@ionic/core';
+import { BackButtonEvent, RouterDirection } from '@ionic/core';
 
 // Extend the official VueRouter
 export default class Router extends VueRouter {
-  direction: number;
-  directionOverride: number | null;
+  direction: RouterDirection;
+  directionOverride: RouterDirection | null;
   viewCount: number;
   prevRouteStack: Route[];
   history: any;
@@ -18,7 +18,7 @@ export default class Router extends VueRouter {
     super(args);
 
     // The direction user navigates in
-    this.direction = args.direction || 1;
+    this.direction = args.direction || 'forward';
 
     // Override normal direction
     this.directionOverride = null;
@@ -65,12 +65,12 @@ export default class Router extends VueRouter {
       }
 
       // Increment or decrement the view count
-      this.viewCount += this.direction;
+      this.viewCount += this.direction === 'back' ? -1 : 1;
 
       // Call the original method
       this.history._updateRoute(nextRoute);
 
-      // Reset direction for overrides
+      // Reset direction overrides
       this.directionOverride = null;
     };
   }
@@ -81,7 +81,7 @@ export default class Router extends VueRouter {
     return this.viewCount > 1 && this.currentRoute.fullPath.length > 1;
   }
 
-  guessDirection(nextRoute: Route): number {
+  guessDirection(nextRoute: Route): RouterDirection {
     if (this.prevRouteStack.length !== 0) {
       const prevRoute: Route = this.prevRouteStack[this.prevRouteStack.length - 1];
 
@@ -93,7 +93,7 @@ export default class Router extends VueRouter {
         } else {
           this.prevRouteStack.pop();
         }
-        return -1;
+        return 'back';
       }
     }
 
@@ -101,7 +101,7 @@ export default class Router extends VueRouter {
     if (this.history.current.fullPath !== nextRoute.fullPath) {
       this.prevRouteStack.push(this.history.current);
     }
-    return 1;
+    return 'forward';
   }
 }