fix(vue): modal, popover, and nav are now created within application context (#22282)

resolves #22079

packages/vue/src/components/IonApp.ts

@@ -0,0 +1,38 @@
+import { h, defineComponent, shallowRef, VNode } from 'vue';
+
+const userComponents = shallowRef([]);
+export const IonApp = defineComponent({
+  name: 'IonApp',
+  setup(_, { attrs, slots }) {
+    return () => {
+      return h(
+        'ion-app',
+        {
+          ...attrs
+        },
+        [slots.default && slots.default(), ...userComponents.value]
+      )
+    }
+  }
+});
+
+/**
+ * When rendering user components inside of
+ * ion-modal, ion-popover, or ion-nav, the component
+ * needs to be created inside of the current application
+ * context otherwise libraries such as vue-i18n or vuex
+ * will not work properly.
+ *
+ * `userComponents` renders teleported components as children
+ * of `ion-app` within the current application context.
+ */
+export const addTeleportedUserComponent = (component: VNode) => {
+  userComponents.value = [
+    ...userComponents.value,
+    component
+  ]
+}
+
+export const removeTeleportedUserComponent = (component: VNode) => {
+  userComponents.value = userComponents.value.filter(cmp => cmp !== component);
+}

packages/vue/src/framework-delegate.ts

@@ -1,7 +1,8 @@
-import { createVNode, render } from 'vue';
-
+import { h, Teleport, VNode } from 'vue';
+import { addTeleportedUserComponent, removeTeleportedUserComponent } from './components/IonApp';
 export const VueDelegate = () => {
-  const attachViewToDom = (parentElement: HTMLElement, component: any, componentProps: any, classes?: string[]) => {
+  let Component: VNode | undefined;
+  const attachViewToDom = (parentElement: HTMLElement, component: any, componentProps: any = {}, classes?: string[]) => {
     /**
      * Ionic Framework passes in modal and popover element
      * refs as props, but if these are not defined
@@ -10,20 +11,24 @@ export const VueDelegate = () => {
      */
     delete componentProps['modal'];
     delete componentProps['popover'];
-    const vueInstance = createVNode(component, componentProps);
 
     const div = document.createElement('div');
     classes && div.classList.add(...classes);
-
     parentElement.appendChild(div);
 
-    render(vueInstance, div);
+    Component = h(
+      Teleport,
+      { to: div },
+      h(component, { ...componentProps })
+    );
+
+    addTeleportedUserComponent(Component);
 
     return div;
   }
 
-  const removeViewFromDom = (_: HTMLElement, childElement: any) => {
-    render(null, childElement);
+  const removeViewFromDom = () => {
+    Component && removeTeleportedUserComponent(Component);
     return Promise.resolve();
   }
 

packages/vue/src/index.ts

@@ -12,6 +12,8 @@ export { IonTabs } from './components/IonTabs';
 export { IonTabBar } from './components/IonTabBar';
 export { IonNav } from './components/IonNav';
 export { IonIcon } from './components/IonIcon';
+export { IonApp } from './components/IonApp';
+
 export * from './components/Overlays';
 
 export { IonKeyboardRef, IonRouter, useBackButton, useIonRouter, useKeyboard } from './hooks';

packages/vue/src/proxies.ts

@@ -8,9 +8,6 @@ import { JSX } from '@ionic/core';
 
 
 
-export const IonApp = /*@__PURE__*/ defineContainer<JSX.IonApp>('ion-app');
-
-
 export const IonAvatar = /*@__PURE__*/ defineContainer<JSX.IonAvatar>('ion-avatar');
 
 

packages/vue/src/vue-component-lib/overlays.ts

@@ -16,8 +16,6 @@ export const defineOverlayContainer = <Props extends object>(name: string, compo
 
   const Container = defineComponent<Props & OverlayProps>((props, { slots, emit }) => {
     const overlay = ref();
-    const content = ref();
-
     const onVnodeMounted = async () => {
       const isOpen = props.isOpen;
       isOpen && (await present(props))
@@ -39,7 +37,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, compo
     }
 
     const present = async (props: Readonly<Props>) => {
-      const component = (slots) ? h('div', { ref: content }, slots) : undefined;
+      const component = slots.default && slots.default()[0];
       overlay.value = await controller.create({
         ...props,
         component