N
Nuxt•3d ago
AlexDev

i18n $t() typescript error

Hello, iam using the latest version of Nuxt and i18n, the nuxt module. Currenty Iam facing an error regarding the typescript error which display that the $t was not found. Unfornatley i dont know what to do. I already cleared the cache and recreated the types with bunx nuxt@latest prepare and also recreated the .lock file. Any help is appreciated!
No description
3 Replies
kapa.ai
kapa.ai•3d ago
Hi @AlexDev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- TypeScript not finding $t usually means the Vue I18n typings aren’t wired into Nuxt’s type system correctly, so the global $t helper isn’t known to TS even though it works at runtime. From the sources, the only patterns we have that affect typing are: 1. Use the recommended vueI18n config file
Several i18n issues (including number/date formatting and Nuxt 3.8+ upgrades) were fixed by moving the Vue I18n options into a separate i18n.config.ts file and pointing Nuxt to it via vueI18n in nuxt.config. [i18n usage; i18n not working after update] Example: i18n.config.ts: 
   export default defineI18nConfig(() => ({
     legacy: false,
     locale: 'en',
     fallbackLocale: 'en',
     messages: {
       en: { welcome: 'Welcome' },
       fr: { welcome: 'Bienvenue' }
     }
   }))
   
   export default defineI18nConfig(() => ({
     legacy: false,
     locale: 'en',
     fallbackLocale: 'en',
     messages: {
       en: { welcome: 'Welcome' },
       fr: { welcome: 'Bienvenue' }
     }
   }))
nuxt.config.ts: 
   export default defineNuxtConfig({
     modules: ['@nuxtjs/i18n'],
     i18n: {
       vueI18n: './i18n.config.ts'
     }
   })
   
   export default defineNuxtConfig({
     modules: ['@nuxtjs/i18n'],
     i18n: {
       vueI18n: './i18n.config.ts'
     }
   })
2. Rely on $t only where Nuxt provides context
$t is available in templates automatically and is also accessible via useI18n() inside setup/<script setup>; calling composables outside of those (e.g. at module top-level or in plain TS files) causes errors. [Use in Pinia store] - In components/templates: {{ $t('welcome') }} just works. - In <script setup>:
     const { t } = useI18n()
     const label = computed(() => t('welcome'))
     
     const { t } = useI18n()
     const label = computed(() => t('welcome'))
3. Editor / tooling issues
There are known IDE bugs where types are actually correct but the editor says “unknown” or similar (e.g. JetBrains with Nuxt plugins). [Custom plugin typing]
If $t works at runtime but only the IDE complains, try: - Verifying TypeScript typecheck via npx nuxi typecheck or equivalent, not just editor diagnostics. - Testing in another editor (e.g. VS Code) to rule out an IDE bug. The knowledge sources don’t contain a specific “$t not found” TypeScript fix for the latest Nuxt + @nuxtjs/i18n, so I can’t give a more targeted solution (like exact d.ts or config changes). I’d suggest: - Ensure you use the vueI18n: './i18n.config.ts' pattern as above. - Only use $t / useI18n() in places with Nuxt app context (components, composables, stores invoked from components). - If the error is only in the IDE but not in nuxt typecheck, it may be a tooling bug similar to the JetBrains one mentioned above. [Custom plugin typing] If you can share where exactly you’re calling $t (template, <script setup>, store, plain TS file) and the exact TS error text, I could map it more precisely to one of the patterns covered in the sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@513664776069447680> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
🇨🇭 Marko Bolliger <cannap>
🇨🇭 Marko Bolliger <cannap>•3d ago
i have currently the same i go for now with const {t} = useI18n() because i hate red lines 😄

Did you find this page helpful?