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




Tab 1

</ion-header>
<ion-content :fullscreen="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
      <p>{{ t("message.hello") }}</p>
    </ion-toolbar>
  </ion-header>     
 
  <ExploreContainer name="Tab 1 page" />
</ion-content>

<script> import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue'; import ExploreContainer from '@/components/ExploreContainer.vue'; export default { name: 'Tab1', components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage } } </script>

[ionitron-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.