#Nuxt i18n typescript error in template

3 messages · Page 1 of 1 (latest)

storm wigeonBOT
#

Hi @unborn patio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

TypeScript support for $t in templates comes from the @nuxtjs/i18n module’s Vue/Nuxt type augmentation. In the sources provided, $t is used directly in templates and script without any extra typing configuration, which implies that, when the module is correctly registered, it should be available and typed globally in templates. [Nuxt i18n usage; Nuxt i18n store usage]

However, none of the referenced documents describe a specific fix for missing or incorrect TypeScript types for $t in templates in Nuxt 3, nor any additional configuration beyond:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts'
  }
})

and using defineI18nConfig in i18n.config.ts. [Nuxt i18n vueI18n config; Nuxt i18n vueI18n config 2]

The sources also show that, when TypeScript doesn’t “see” i18n helpers in non-component code (e.g. in a Pinia store), you can go through useNuxtApp().$i18n.t(...), which is typed there. [Nuxt i18n in Pinia] But they don’t provide a documented way to fix missing $t typing specifically inside <template> sections.

Given that:

  • $t works at runtime for you (so the module is installed/registered correctly),
  • and the provided material does not mention a known bug or an official workaround for template typing of $t,

I cannot point to an official, documented configuration change that will reliably fix the TypeScript error in templates, beyond ensuring:

#
  1. @nuxtjs/i18n is added to modules in nuxt.config.ts, and
  2. i18n.vueI18n points to a valid i18n.config.(ts|js) using defineI18nConfig. [Nuxt i18n vueI18n config; Nuxt i18n vueI18n config 2]

If, with that setup, TypeScript in your editor still does not recognize $t in templates, this specific problem is not covered in the knowledge sources, and it might be an editor/IDE integration issue similar to the JetBrains typing problem noted for Nuxt plugins. [Custom plugin typing]

So, based on the available information:

  • There is no documented extra step for $t template typing in Nuxt 3 beyond normal @nuxtjs/i18n setup.
  • For non-template code you can safely use useNuxtApp().$i18n.t('key') as shown in the Pinia example. [Nuxt i18n in Pinia]

Anything beyond that (e.g. custom type augmentation for $t in templates) is not described in the provided sources.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: