diff --git a/packages/vue/src/components/IonRouterOutlet.ts b/packages/vue/src/components/IonRouterOutlet.ts index 98d1f24d51..505943a14d 100644 --- a/packages/vue/src/components/IonRouterOutlet.ts +++ b/packages/vue/src/components/IonRouterOutlet.ts @@ -220,6 +220,17 @@ export const IonRouterOutlet = defineComponent({ let leavingViewItem = viewStacks.findLeavingViewItemByRouteInfo(routeInfo, id, true, usingDeprecatedRouteSetup); const enteringEl = enteringViewItem.ionPageElement; + /** + * All views that can be transitioned to must have + * an `` element for transitions and lifecycle + * methods to work properly. + */ + if (enteringEl === undefined) { + console.warn(`[@ionic/vue Warning]: The view you are trying to render for path ${routeInfo.pathname} does not have the required component. Transitions and lifecycle methods may not work as expected. + +See https://ionicframework.com/docs/vue/navigation#ionpage for more information.`); + } + if (enteringViewItem === leavingViewItem) return; if (!leavingViewItem && prevRouteLastPathname) { @@ -323,17 +334,6 @@ export const IonRouterOutlet = defineComponent({ if (!enteringViewItem) { enteringViewItem = viewStacks.createViewItem(id, matchedRouteRef.value.components.default, matchedRouteRef.value, currentRoute); viewStacks.add(enteringViewItem); - - /** - * All views that can be transitioned to must have - * an `` element for transitions and lifecycle - * methods to work properly. - */ - if (enteringViewItem.vueComponent?.components?.IonPage === undefined) { - console.warn(`[@ionic/vue Warning]: The view you are trying to render for path ${currentRoute.pathname} does not have the required component. Transitions and lifecycle methods may not work as expected. - -See https://ionicframework.com/docs/vue/navigation#ionpage for more information.`); - } } if (!enteringViewItem.mount) {