diff --git a/packages/vue/src/components/IonNav.ts b/packages/vue/src/components/IonNav.ts
index 437734d159..1c5b7b1584 100644
--- a/packages/vue/src/components/IonNav.ts
+++ b/packages/vue/src/components/IonNav.ts
@@ -4,7 +4,7 @@ import { defineComponent, h, shallowRef } from "vue";
 
 import { VueDelegate } from "../framework-delegate";
 
-export const IonNav = /*@__PURE__*/ defineComponent(() => {
+export const IonNav = /*@__PURE__*/ defineComponent((props) => {
   defineCustomElement();
   const views = shallowRef([]);
 
@@ -19,8 +19,39 @@ export const IonNav = /*@__PURE__*/ defineComponent(() => {
 
   const delegate = VueDelegate(addView, removeView);
   return () => {
-    return h("ion-nav", { delegate }, views.value);
+    return h("ion-nav", { ...props, delegate }, views.value);
   };
 });
 
 IonNav.name = "IonNav";
+
+/**
+ * The default values follow what is defined at
+ * https://ionicframework.com/docs/api/nav#properties
+ * otherwise the default values on the Web Component
+ * may be overridden. For example, if the default animated value
+ * is not `true` below, then Vue would default the prop to `false`
+ * which would override the Web Component default of `true`.
+ */
+IonNav.props = {
+  animated: {
+    type: Boolean,
+    default: true
+  },
+  animation: {
+    type: Function,
+    default: undefined
+  },
+  root: {
+    type: [Function, Object, String],
+    default: undefined
+  },
+  rootParams: {
+    type: Object,
+    default: undefined
+  },
+  swipeGesture: {
+    type: Boolean,
+    default: undefined
+  }
+}