From 03250ac46872510cf00a44c4b22398163b649280 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 11 Sep 2023 10:59:58 -0400
Subject: [PATCH] fix(nav-link): opt-out of vue reactivity for component
 binding

Co-authored-by: David Kagiri <davykiash@gmail.com>
---
 static/usage/v6/nav/nav-link/vue/example_vue.md  | 3 ++-
 static/usage/v6/nav/nav-link/vue/page_one_vue.md | 3 ++-
 static/usage/v6/nav/nav-link/vue/page_two_vue.md | 3 ++-
 static/usage/v7/nav/nav-link/vue/example_vue.md  | 3 ++-
 static/usage/v7/nav/nav-link/vue/page_one_vue.md | 3 ++-
 static/usage/v7/nav/nav-link/vue/page_two_vue.md | 3 ++-
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/static/usage/v6/nav/nav-link/vue/example_vue.md b/static/usage/v6/nav/nav-link/vue/example_vue.md
index ec054a80749..0d1bb74fb60 100644
--- a/static/usage/v6/nav/nav-link/vue/example_vue.md
+++ b/static/usage/v6/nav/nav-link/vue/example_vue.md
@@ -4,6 +4,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonNav } from '@ionic/vue';
   import PageOne from './PageOne.vue';
 
@@ -11,7 +12,7 @@
     components: { IonNav },
     data() {
       return {
-        component: PageOne,
+        component: markRaw(PageOne),
       };
     },
   };
diff --git a/static/usage/v6/nav/nav-link/vue/page_one_vue.md b/static/usage/v6/nav/nav-link/vue/page_one_vue.md
index f3635e1db37..6597688ea05 100644
--- a/static/usage/v6/nav/nav-link/vue/page_one_vue.md
+++ b/static/usage/v6/nav/nav-link/vue/page_one_vue.md
@@ -14,6 +14,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
   import PageTwo from './PageTwo.vue';
 
@@ -21,7 +22,7 @@
     components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
     data() {
       return {
-        component: PageTwo,
+        component: markRaw(PageTwo),
       };
     },
   };
diff --git a/static/usage/v6/nav/nav-link/vue/page_two_vue.md b/static/usage/v6/nav/nav-link/vue/page_two_vue.md
index 0d736d69c88..ceb17385968 100644
--- a/static/usage/v6/nav/nav-link/vue/page_two_vue.md
+++ b/static/usage/v6/nav/nav-link/vue/page_two_vue.md
@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import {
     IonHeader,
     IonTitle,
@@ -42,7 +43,7 @@
     },
     data() {
       return {
-        component: PageThree,
+        component: markRaw(PageThree),
       };
     },
   };
diff --git a/static/usage/v7/nav/nav-link/vue/example_vue.md b/static/usage/v7/nav/nav-link/vue/example_vue.md
index ec054a80749..0d1bb74fb60 100644
--- a/static/usage/v7/nav/nav-link/vue/example_vue.md
+++ b/static/usage/v7/nav/nav-link/vue/example_vue.md
@@ -4,6 +4,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonNav } from '@ionic/vue';
   import PageOne from './PageOne.vue';
 
@@ -11,7 +12,7 @@
     components: { IonNav },
     data() {
       return {
-        component: PageOne,
+        component: markRaw(PageOne),
       };
     },
   };
diff --git a/static/usage/v7/nav/nav-link/vue/page_one_vue.md b/static/usage/v7/nav/nav-link/vue/page_one_vue.md
index f3635e1db37..6597688ea05 100644
--- a/static/usage/v7/nav/nav-link/vue/page_one_vue.md
+++ b/static/usage/v7/nav/nav-link/vue/page_one_vue.md
@@ -14,6 +14,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
   import PageTwo from './PageTwo.vue';
 
@@ -21,7 +22,7 @@
     components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
     data() {
       return {
-        component: PageTwo,
+        component: markRaw(PageTwo),
       };
     },
   };
diff --git a/static/usage/v7/nav/nav-link/vue/page_two_vue.md b/static/usage/v7/nav/nav-link/vue/page_two_vue.md
index 0d736d69c88..ceb17385968 100644
--- a/static/usage/v7/nav/nav-link/vue/page_two_vue.md
+++ b/static/usage/v7/nav/nav-link/vue/page_two_vue.md
@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import {
     IonHeader,
     IonTitle,
@@ -42,7 +43,7 @@
     },
     data() {
       return {
-        component: PageThree,
+        component: markRaw(PageThree),
       };
     },
   };