diff --git a/packages/vue/src/components/IonNav.ts b/packages/vue/src/components/IonNav.ts
new file mode 100644
index 0000000000..9993268d31
--- /dev/null
+++ b/packages/vue/src/components/IonNav.ts
@@ -0,0 +1,16 @@
+import { defineComponent, h } from 'vue';
+import { VueDelegate } from '../framework-delegate';
+
+export const IonNav = defineComponent({
+  name: 'IonNav',
+  setup(_, { slots }) {
+    const delegate = VueDelegate();
+    return () => {
+      return h(
+        'ion-nav',
+        { delegate },
+        slots
+      )
+    }
+  }
+});
diff --git a/packages/vue/src/framework-delegate.ts b/packages/vue/src/framework-delegate.ts
index e33208fbd2..c00bed361d 100644
--- a/packages/vue/src/framework-delegate.ts
+++ b/packages/vue/src/framework-delegate.ts
@@ -18,6 +18,8 @@ export const VueDelegate = () => {
     parentElement.appendChild(div);
 
     render(vueInstance, div);
+
+    return div;
   }
 
   const removeViewFromDom = (_: HTMLElement, childElement: any) => {
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 5732210616..0d9778ea87 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -10,6 +10,7 @@ export { IonRouterOutlet } from './components/IonRouterOutlet';
 export { IonTabButton } from './components/IonTabButton';
 export { IonTabs } from './components/IonTabs';
 export { IonTabBar } from './components/IonTabBar';
+export { IonNav } from './components/IonNav';
 export { IonIcon } from './components/IonIcon';
 export * from './components/Overlays';