Can't use i18n translation in custom component

[polyminthe]

Versions

• 1.7.14

Describe the bug

Property "$t" was accessed during render but is not defined on instance

Expected behavior

I wish i can use i18n inside the component

Steps to reproduce

Steps:

1. Install normally
2. Set up plugin
3. Create a component
4. use i18n inside the component => {{ $t('valueNameToTranslate') }}
5. Use toast.update to create or update a existing toast component =>

   toast.update(
   numeroLotIC,
   {
     content: {
       component: ToastEpnUploadProgress,
   ....

Your Environment

• Device: Laptop
• OS: Windows 11
• Browser : Edge
• Version : 106.0.1370.47

Additional context

[polyminthe]

I found the solution. Just need add :shareAppContext: true, on .use(Toast,... and everything work well.

[ttibau]

I'm still receiving the same error.

I'm using shareAppContext:true on my main.js use.

I'm using 1.7.14 version

Somebody fixed that?

[prochorz]

It seems like there might be an issue stemming from different versions of internationalization (i18n), as well as the challenge of initializing a new Vue instance within a plugin. Here's my proposed solution:

app.use(toast,
    {
        onMounted: (_, baseApp) => {
            baseApp.use(i18n);
        }
     }
);