[8.0.0-beta.3 - Nuxt 3 RC13] $te is not auto-imported in template - _ctx.$te is not a function

[TheAlexLichter]

Version

@nuxtjs/i18n: 8.0.0-beta.3
nuxt:3.0.0-rc.13

Nuxt configuration

Please change to [x] if relevant for this issue:

• Applies to a site deployed to a static server (site generated with nuxt generate)
• Applies to a site deployed to a server with a Node backend

@nuxtjs/i18n configuration

i18n: {
    vueI18n: {
      legacy: false,
      locale: 'en',
      messages: {
        en: {
          welcome: 'Welcome',
        },
        fr: {
          welcome: 'Bienvenue',
        },
      },
    },
  },

Reproduction Link

https://stackblitz.com/edit/i18n-module-1643?file=app.vue,nuxt.config.ts,package.json

Steps to reproduce

1. Use any config
2. Write $te in template

What is Expected?

• Having $te working out of the box

What is actually happening?

See _ctx.$te is not a function as error.

[kazupon]

Thank you for your reproting!

$te injected into component is no longer provided by the Composition API (setup hook or script setup) from vue-i18n v9.
https://vue-i18n.intlify.dev/api/injection.html#componentcustomproperties

The reason for the deprecation is that having that API would complicate the i18n implementation by programmatically checking for the presence of keys.

As an alternative to checking for the presence of a key, vue-i18n by default outputs a warning if the key is not present.

And also, vue-i18n provides an eslint plugin that can be used to statically check for the presence of a key.
https://eslint-plugin-vue-i18n.intlify.dev/

[TheAlexLichter]

@kazupon Thanks for the info! So there is no way to programmatically check the existence of a key and e.g. render a component based on it (except with the legacy API)?

[kazupon]

@manniL
Ah, sorry. vue-i18n have been still providing Composition API equivalent to it. 😅
You can use te:
https://vue-i18n.intlify.dev/api/composition.html#te-key-locale

const { te } = useI18n(); 

[TheAlexLichter]

Good to know!

But still, $te should be automatically injected without using composition API, similar to $t, right? That's not the case (see example above).

[kazupon]

Hi!
I supported $te globaly.
Please try to install edge version @nuxtjs/[email protected]