nuxt3.jsnuxt-i18n

Error using $t @nuxtjs/i18n in Nuxt 3 - Vue: __VLS_ctx.$t is of type unknown


In the Nuxt 3 project I use the @nuxtjs/i18n(v. 8.5.1) plugin and everything worked fine. But today an "Vue: __VLS_ctx.$t is of type unknown" error appeared while I was making changes to the project not related to translations.

I tried to do the following:

  1. Rolled back all the changes I made. Result: the error is still there.

  2. Deleted and reinstalled the plugin of the latest version(v. 8.5.5). Result: the error is still there.

  3. Replaced the use of "$t" in the template with just "t"

    const { t } = useI18n();

Result: the error is gone, but the page performance in Lighthouse decreased from 84 to 56. Is it possible to fix the error without using a replacement?


Solution

  • The best solution I have found is add a "t" when you declare variables in your component or page for the nuxt module i18n:

    const { locale, locales, setLocale, t } = useI18n();
    

    And later use "t" instead of "$t", for example:

    {{ t('contact') }}
    

    Other option that works to quit the error is simply remove lang="ts" from script setup declaration. But obviously it's not the best solution.