i18n-t/translation components within custom elements throw appContext.app error

[yashha]

Reporting a bug?

The i18n-t/translation components seem not to support a custom component environment.
They throw a instance.appContext.app is null error.
It seems to be related to this ticket #628 which has been fixed by @kazupon.

Expected behavior

The i18n-t/translation component should not be dependend on appContext.app when it is loaded within a custom element.

Reproduction

https://stackblitz.com/edit/vitejs-vite-4dvqbr?file=src%2Fcomponents%2FHelloBlock.ce.vue

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.9.2 - /usr/local/bin/pnpm
  npmPackages:
    @intlify/unplugin-vue-i18n: ^1.0.1 => 1.0.1 
    @vitejs/plugin-vue: ^4.2.3 => 4.3.4 
    vite: ^4.4.9 => 4.4.9 
    vue: ^3.3.4 => 3.3.4 
    vue-i18n: ^9.3.0 => 9.3.0 
    vue-tsc: ^1.8.8 => 1.8.10

Screenshot

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussions

[kazupon]

Thank you for your reporting!

I noticed that your reproduction code isn't setup createApp and vue-i18n installing.
fully example codes is here
https://github.com/intlify/vue-i18n-next/tree/master/examples/web-components

and I'll add example code link at docs.

[yashha]

@kazupon
I did create a host component an did wrap it around the other custom element, do I wrap the each component before converting it to a custom element?
Can you maybe add the usage of i18n-t to the examples directory or fork my stackblitz
https://stackblitz.com/edit/vitejs-vite-4dvqbr?file=src%2Fcomponents%2FHelloBlock.ce.vue