$t() autocomplete support

[EternalC0der]

Describe the feature

Hello,
It would be really nice to have auto completion feature while using t('welcome') in template, especially when you want to reuse keys in different sections.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide (The contribution guideline of nuxt-modules/i18n is compliant with Nuxt too).
• Check existing discussions and issues.

[kazupon]

Hi!
I'll support about auto complete.
vue-i18n v9 has type-safe resources feature.
https://vue-i18n.intlify.dev/guide/advanced/typescript.html

we need to setup manually in vue-i18n.
In nuxt, I will support auto complete by respecting the defaultLocale and dynamically generating types with that resource as master schema.

I would also like to support $t, but we need to refactor the $t type definition on the vue-i18n side.
related issue on vue-i18n:
intlify/vue-i18n#1124

[jenseo]

@kazupon Any news on when we can expect this to be shipped? It would be a real step forward for developer experience in my opinion :)

[natemate90]

Any update on this?

[EternalC0der]

I have been waiting for this feature for so long 😂
Any updates?

Here is a quick solution to get the list of locale keys, I wrote this to manually add type-safety for my code.
I hope it helps others:

import english from '~/i18n/en-US.json'

type StringKey<T> = Extract<keyof T, string>
type GenerateKeyPaths<T, Prefix extends string = ''> = T extends object
  ? { [K in StringKey<T>]: T[K] extends object ? GenerateKeyPaths<T[K], `${Prefix}${K}.`> : `${Prefix}${K}` }[StringKey<T>]
  : Prefix

type Locale = typeof english
export type I18nKeys = GenerateKeyPaths<Locale>

[Bobakanoosh]

@EternalC0der how are you using that? Are you making a custom translation function that then uses I18nKeys?

This works if we use t from useI18n

import "vue-i18n";
import en from "./i18n/website/en.json";

type MainTranslations = typeof en;
declare module "vue-i18n" {
	export interface DefineLocaleMessage extends MainTranslations {}
}

but it doesn't work with $t because the generated types for $t are incorrect. There's like 10 different overrides for it so I dont really want to override them all like above