Nuxt•2mo ago

@nuxtjs/i18n - Vue: __VLS_ctx.$t is of type unknown

When I'm trying to use any translation such as <p>{{ $t("common.ok") }}</p> the $t is underlined with red and displays: Vue: __VLS_ctx.$t is of type unknown as warning

5 Replies

kapa.ai•2mo ago

Hi @Dobby. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue is related to type checking in Vue with Nuxt and i18n. The warning you're seeing suggests that the TypeScript compiler doesn't recognize the $t function, which is provided by the i18n plugin. To resolve this, you can try the following approach: 1. Instead of using the global $t in your template, you can import and use the useI18n composable in your <script setup> section. This should provide proper type inference:

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

<template>
  <p>{{ t("common.ok") }}</p>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

<template>
  <p>{{ t("common.ok") }}</p>
</template>

This method is recommended in the Vue I18n documentation as seen here (https://stackoverflow.com/questions/77594888). 2. If you prefer to keep using $t in your template, you might need to augment the global types for Vue. You can do this by creating a file named vue-i18n.d.ts in your project's root or types directory with the following content:

import '@vue/runtime-core'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $t: (key: string) => string
  }
}

import '@vue/runtime-core'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $t: (key: string) => string
  }
}

This should help TypeScript recognize $t as a valid property on the Vue instance. 3. Make sure you have properly set up the i18n configuration in your nuxt.config.ts file. It should include something like this:

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts' // or the path to your i18n configuration
  }
})

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts' // or the path to your i18n configuration
  }
})

And in your i18n.config.ts:

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      common: {
        ok: 'OK'
      }
    }
  }
}))

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      common: {
        ok: 'OK'
      }
    }
  }
}))

These steps should help resolve the type checking issue for $t in your Nuxt project with i18n. If you're still experiencing issues, you might want to check your Nuxt and i18n versions to ensure they are compatible and up to date. Source for i18n configuration (https://stackoverflow.com/questions/77330239) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@209077102950088711> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

DobbyOP•2mo ago

anyone with an idea?

Cake•2mo ago

if you have other modules installed try commenting them out one by one, I've had similar issues in the past (not with vue-i18n) that was caused by some unrelated module messing up with types. @Dobby @Morpheus

Morpheus•2mo ago

I see @Cake , i will try that solution for now, i don’t use $t from plugins that nuxtjs/i18n provide, i use function t fron usei18n() @Dobby

Gaming

Programming

@nuxtjs/i18n - Vue: __VLS_ctx.$t is of type unknown