Ionic-framework: bug: ionic vue modal and popover do not get application context

[dev-kr2020]

Ionic Vue beta with Vue 3... Vue vue-i18n-next is not working .. tab1 in sample

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[dev-kr2020]

create project as instructed in the beta release article
added vue-i18n-next to it. In main.ts.. import import i18n from '@/i18n' and add .use(i18n) to app instance.

---

main.ts

---

import i18n from '@/i18n'
......
createApp(App).use(store).use(i18n).......

---

i18n.ts

---

import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'

function loadLocaleMessages() {
const locales = require.context('./locales', true, /[A-Za-z0-9-,\s]+.json$/i)
const messages: LocaleMessages = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-]+)./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key)
}
})
return messages
}
const i18n = createI18n({

locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages()

})

export default i18n;

---

/locale/en.json

---

{
"message": {
"hello": "hello world",
}
}

---

in tab1.ts add {{ t("message.hello") }} there is no error displayed but all tab view will go-off

---

[dev-kr2020]

Below is the repository -code - only vue3 with i18n works but with ion it do not
https://github.com/dev-kr2020/sample-vue3-i18n

https://github.com/dev-kr2020/sample-ionicvue3-i18n

getting following error
Uncaught (in promise) TypeError: _ctx.t is not a function
at eval (eval at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/Tabs.vue?vue&type=template&id=6a83f7b8&bindings={"ellipse":"setup","square":"setup","triangle":"setup"} (app.js:1054), :41:160)

[dev-kr2020]

@liamdebeasi sample code is provided

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. This looks to be an incorrect usage of vue-i18n:

1. In Tabs.vue you did not import useI18n, so the t function is not going to be defined.
2. Once you do import it, you need to make sure you return the t function in setup after calling useI18n:

...
setup() {
  const { t } = useI18n();

  return {
    ellipse,
    square,
    triangle,
    t
  }
}

In your Ionic Vue application, I was able to get I18N support working after doing those two things.

[dev-kr2020]

that worked .. thanks a lot..

[dev-kr2020]

one more question: for popoverController and other control, do i have to do same setup to get this.$ionic

[liamdebeasi]

It's a bit different now. You have 2 options: controller or in-template. We are still working on docs for both, but here is how you would use them. You will need to be on Ionic Vue 0.5.0 or newer to use the in-template components.

Controller

You can use overlays via a controller by importing the component's appropriate controller:

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="openPopover">Open Popover</ion-button>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { 
  IonButton, 
  IonContent, 
  IonPage,
  popoverController
} from '@ionic/vue';
import { defineComponent } from 'vue';
import PopoverContentComponent from '@/components/PopoverContentComponent.vue';

export default defineComponent({
  name: 'Home',
  components: {
    IonButton, 
    IonContent, 
    IonPage
  },
  setup() {
    const openPopover = async () => {
      const popover = await popoverController.create({
        component: PopoverContentComponent,
        ...
      });

     await popover.present();
    }

    return { openPopover }
  }
})

Template

You can use overlays such as popover in template if you would prefer not to import a controller:

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="setPopoverOpen">Open Popover</ion-button>

      <ion-popover
        css-class="my-popover-class"
        :is-open="isPopoverOpen"
        @onDidDismiss="setPopoverClosed"
      >
        <PopoverContentComponent></PopoverContentComponent>
      </ion-popover>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { 
  IonButton, 
  IonContent, 
  IonPopover, 
  IonPage
} from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import PopoverContentComponent from '@/components/PopoverContentComponent.vue';

export default defineComponent({
  name: 'Home',
  components: {
    PopoverContentComponent,
    IonButton, 
    IonContent, 
    IonPopover, 
    IonPage
  },
  setup() {
    const isPopoverOpen = ref(false);
    const setPopoverOpen = () => isPopoverOpen.value = true;
    const setPopoverClosed = () => isPopoverOpen.value = false;

    return {
      isPopoverOpen,
      setPopoverOpen,
      setPopoverClosed
    }
  }
})

[dev-kr2020]

thanks but i am getting following error
framework-delegate-d1eb6504.js?b457:11 Uncaught (in promise) Error: framework delegate is missing
at eval (framework-delegate-d1eb6504.js?b457:11)
at step (tslib.es6.js?9ab4:100)
at Object.eval [as next] (tslib.es6.js?9ab4:81)
at eval (tslib.es6.js?9ab4:74)
at new Promise ()
at __awaiter (tslib.es6.js?9ab4:70)
at attachComponent (framework-delegate-d1eb6504.js?b457:2)
at class_1.eval (ion-popover.entry.js?4285:313)
at step (tslib.es6.js?9ab4:100)
at Object.eval [as next] (tslib.es6.js?9ab4:81)

[dev-kr2020]

here is the source code
https://github.com/dev-kr2020/sample-ionicvue3-i18n

Issues

1. Popover is giving error - framework delegation
2. Navigate from menu with have tab - to login, you will see all tab buttons even through it is different page
3. if you go with login to log out .. you will see 2 headers

your help will be appreciated.

[liamdebeasi]

Please update to Ionic Vue 0.5.0. These issues have been resolved already.

[dev-kr2020]

@liamdebeasi : updated to 0.5.0 and delegation error is no longer coming up, but popover is not taking parent property. Checked the example updated in document but it do not say anything on how to pass values between popover or modal

[liamdebeasi]

If using a controller, you pass in data as you would normally:

await modalController
  .create({
    component: Modal,
    componentProps: {
      title: 'Hello World'
    }
  });

If you are using an overlay in-template, you set the data directly as a prop:

<ion-modal
  :is-open="isOpenRef"
  @onDidDismiss="setIsOpen(false)"
  title="Hello World"
>
  <Modal></Modal>
</ion-modal>

[dev-kr2020]

triggering method on parent when changes happens in popover..
$parent, $store, $i18n, context are not coming up in popover and modal.. normally it should pass as it popover is another component and all global or context variable should be available. unfortunately it is not. thats why we used to pass parent and access all context related variables from parents. below is the discussion on this
https://github.com/ModusCreateOrg/ionic-vue/issues/38
Now passing parent is not taking in.. any other solution

[liamdebeasi]

Can you update your example to show this issue happening? Also the issue in https://github.com/ModusCreateOrg/ionic-vue/issues/38 is not for our Ionic Vue integration -- that is a different package.

[dev-kr2020]

updated source code in below repository
https://github.com/dev-kr2020/sample-ionicvue3-i18n

1. Popover (filter in header component) is not taking context hence it is not coming up
2. Popover have save button which will call parent method to save filter - not able to get to this point
3. in Account page, Ion-item disable property is not binding .. it is not toggling

[dev-kr2020]

also in https://github.com/ModusCreateOrg/ionic-vue/issues/38 , they are talking about vuex, global variable $store which is popular integration with vue for store. this $store should be available to popover, modal.. etc. i will try to update the example

[liamdebeasi]

Thanks! #3 should be resolved by https://github.com/ionic-team/ionic-framework/pull/22204. I am still looking into #1. It looks like when we dynamically create Vue components, they are not linked up to the global application context, leading to the errors you are experiencing.

[liamdebeasi]

I am going to re-open this so I can properly track a fix for issue 1 in https://github.com/ionic-team/ionic-framework/issues/22079#issuecomment-700748377.

[dev-kr2020]

@liamdebeasi : updated the project https://github.com/dev-kr2020/sample-ionicvue3-i18n with

1. Shows store functionality
2. showing bug
   a. select component popover interface is not showing up properly in account example
   b. we should able to use component HeaderFilterPopover as popover or page - filter example is added
   c. modal or popover should able to take page as well as component - there should not be any difference as page is also a component
   d. is it possible for select to inherit style from parent. selected item font and weight is not inline with parent component (list)
   e. is it possible to have image/icon as select options
   f. Multiselect - select is not binding

[Livijn]

I suppose this is why I am receiving tons of warnings from components used in my modal:

[Vue warn]: injection "navManager" not found. 
  at <Anonymous color="white" fill="clear" onClick=fn<bound close> > 
  at <Anonymous slot="start" > 
  at <Anonymous color="primary" > 
  at <Anonymous> 
  at <IonPage> 
  at <SearchModal >

[dev-kr2020]

not getting any of the warning... please check

[liamdebeasi]

Hi everyone,

Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected] @ionic/[email protected] --save-exact

@dev-kr2020 There are a few changes you will need to make regarding the original workarounds you had in place:

1. You no longer need to pass in this in componentProps in Header.vue
2. You do not need to use the ion-page component in HeaderFilterPopover.vue - that component is only for pages tied to routing. Though if you plan to use HeaderFilterPopover as an actual page tied to routing, you should keep it.
3. this.$parent.saveFilter will not work here because HeaderFilterPopover is not rendered as a child of Header. You can either pass the saveFilter method in as a prop, or move it to a shared utility file.

[xlanghejianfeng]

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: injection "navManager" not found.
at >
at at at
at

not work modal

[liamdebeasi]

@xlanghejianfeng Can you please provide a GitHub repo that I can use to reproduce the issue?

[dev-kr2020]

@liamdebeasi
Looks like Popover is working fine but there is a issue with modal

1. when modal component along with ion-page is used, modal is coming up with no visibility of contents. when i click mouse on content events are generating. it is rendering but not visible.
2. When i use div as root for modal component contents are shrink to button height with vertical scroll, to avoid this i have to use class="ion-page" for div.
3. storeFront icon is not defined in ion/vue .. -- what is the strategy to include newly available icons to ion-vue?
4. Modal backdrop is not closing the modal

[liamdebeasi]

@liamdebeasi
Looks like Popover is working fine but there is a issue with modal

1. when modal component along with ion-page is used, modal is coming up with no visibility of contents. when i click mouse on content events are generating. it is rendering but not visible.
2. When i use div as root for modal component contents are shrink to button height with vertical scroll, to avoid this i have to use class="ion-page" for div.
3. storeFront icon is not defined in ion/vue .. -- what is the strategy to include newly available icons to ion-vue?
4. Modal backdrop is not closing the modal

1. This is a bug. I will fix -thanks!
2. Can you provide a code reproduction of the issue in your repo?
3. You likely have an old version of ionicons. Try updating to the latest: npm install ionicons@latest
4. Can you provide a code reproduction of the issue in your repo? I cannot reproduce this.

[dev-kr2020]

@liamdebeasi : updated the project https://github.com/dev-kr2020/sample-ionicvue3-i18n with

1. Edit a/c from header - using ion-page - rendering but not visible
2. filter - radio options is not taking the component properly - it is not displaying the chip/icon - this will save lots of effort
3. When you select filter from menu - it says "can't set the property mounted - i think this is because filter component root element is div and not page. if i change to page, then header filter will not work.
4. Modal, popover component when used inline in template or as with in method... all options should be available, like defining the emits, passing function as props, capturing emits..

and thanks for the storefront icon resolution.

[liamdebeasi]

@dev-kr2020

1. Yes, this is a bug. I will address this separately.
2. Where are you setting the icons? I do not see any icons being used in HeaderFilterPopover.vue.
3. Selecting "Filter" from the ion-menu does not throw this error for me.
4. I am not sure this makes sense to do. When using Modal and Popover inline in a template, I think it makes more sense to set props, defining emits, etc directly on the component rather than on ion-modal or ion-popver. We cover this briefly in our usage docs: https://ionicframework.com/docs/api/modal#usage (switch to the Vue tab). That being said, you can set component-props on ion-modal to pass to your component, but I think at that point it is easier to set them directly on the user-defined component.

I am going to close this issue out shortly as it sounds like the original issue (modals and popovers are not getting application context) has been resolved. For any other issues you are running into, please create a new issue. Thanks!

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/22282, and a fix will be available in an upcoming release of Ionic Framework.

I will address the ion-page issue here: https://github.com/ionic-team/ionic-framework/issues/22300

[dev-kr2020]

@liamdebeasi Thanks. for select-option.. when you click on filter popup is coming with ShapeChip component in filter component

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.