fix(vue3): Add workaround for Vue extends bug

See vuejs/core#6249 Fixes #2877.
OnsenUI · Jul 25, 2022 · ead935e · ead935e
1 parent d8919c9
commit ead935e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git 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
@@ -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) {