From ead935edea37ac0de62b50796c5af26d6d4ea0e3 Mon Sep 17 00:00:00 2001
From: Eric Corson <public@giraffedev.com>
Date: Mon, 25 Jul 2022 08:43:49 +0100
Subject: [PATCH] fix(vue3): Add workaround for Vue extends bug

See https://github.com/vuejs/core/issues/6249

Fixes #2877.
---
 vue3-onsenui-examples/src/components/Navigator.vue |  2 +-
 vue3-onsenui/src/components/VOnsNavigator.vue      | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/vue3-onsenui-examples/src/components/Navigator.vue b/vue3-onsenui-examples/src/components/Navigator.vue
index 16481e9b88..378da907f5 100644
--- a/vue3-onsenui-examples/src/components/Navigator.vue
+++ b/vue3-onsenui-examples/src/components/Navigator.vue
@@ -104,7 +104,7 @@
       log,
       push() {
         this.$emit('push', markRaw({
-          ...page2,
+          extends: page2,
           onsNavigatorProps: {
             myProp: 'This is a navigator prop'
           }
diff --git a/vue3-onsenui/src/components/VOnsNavigator.vue b/vue3-onsenui/src/components/VOnsNavigator.vue
index 42ce130dbb..43056edeca 100644
--- a/vue3-onsenui/src/components/VOnsNavigator.vue
+++ b/vue3-onsenui/src/components/VOnsNavigator.vue
@@ -2,7 +2,7 @@
   <ons-navigator @postpop.self="_checkUserInteraction" :options.prop="options">
     <slot>
       <component
-        v-for="(page, index) in internalPageStack"
+        v-for="(page, index) in extendsFix"
         :is="page"
         :key="index"
         v-bind="{ ...unrecognizedListeners, ...page.onsNavigatorProps }"
@@ -36,6 +36,18 @@
       };
     },
 
+    computed: {
+      extendsFix() {
+        // workaround for Vue bug where extends doesn't work with runtime template compilation
+        // https://github.com/vuejs/core/issues/6249
+        return this.internalPageStack.map(page =>
+          page.extends ?
+            {...page, template: page.extends.template} :
+            page
+        );
+      }
+    },
+
     methods: {
       isReady() {
         if (this.hasOwnProperty('_ready') && this._ready instanceof Promise) {