$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

[adamdehaven]

@kazupon I was able to get type-safe checking as well as auto-completion to work for the @nuxtjs/i18n $t function (and others) by manually overriding the interface for the given function(s).

I believe this could also be extended for type checking the methods exported like const { t } = useI18n() usage as well if implemented correctly.

I was going to attempt to PR the feature into the upstream repository; however, there appear to be around 19 different interfaces for the $t function in the resolved vue-i18n/dist/vue-i18n.d.ts file and I'm not sure where to start?

[thomaslecoeur]

Managed to get key autocompletion by adding a i18n.d.ts in my types folder (at root of project).

import fr from "~/i18n/fr";

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 fr;

declare global {
  type I18nKeys = GenerateKeyPaths<Locale>;
}

declare module "vue" {
  interface ComponentCustomProperties {
    $t(key: I18nKeys): string;
  }
}

#2591

[dsijakovski98]

Managed to get key autocompletion by adding a i18n.d.ts in my types folder (at root of project).

import fr from "~/i18n/fr";

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 fr;

declare global {
  type I18nKeys = GenerateKeyPaths<Locale>;
}

declare module "vue" {
  interface ComponentCustomProperties {
    $t(key: I18nKeys): string;
  }
}

#2591

Thanks! This helped me get the autocomplete working! 🙏
One small modification I made to make it work is, because I use .ts files with a default export:

// lang/en.ts
export default {
  welcome: "Welcome"
}

I had to change the config to

import type en from "./lang/en";

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;

// IMPORTANT CHANGE HERE, USING AWAITED + RETURN TYPE
type Locale = Awaited<ReturnType<typeof en>>;

declare global {
  type I18nKeys = GenerateKeyPaths<Locale>;
}

declare module "vue" {
  interface ComponentCustomProperties {
    $t(key: I18nKeys): string;
  }
}

Also, remember to add the .d.ts file in your tsconfig.json file:

// tsconfig.json
{
 // ...

  "compilerOptions": {
    "types": ["./i18n.d.ts"]
  }
}

In case it helps anybody ✌️

[BobbieGoede]

The latest v9 release candidate (https://github.com/nuxt-modules/i18n/releases/tag/v9.0.0-rc.2) includes experimental vue-i18n options and messages generation, this provides autocompletion for translation functions, please try it out and let me know if this works as expected 🙏

More on the option that enables this functionality: https://i18n.nuxtjs.org/docs/v9/options/misc#experimentaltypedoptionsandmessages, the
PR implementing this has a demo video of it in action #3151

[BobbieGoede]

Closing this as we have experimental support for this in the stable release of v9, please try it out and let me know your thoughts!

[sneakylenny]

let me know your thoughts!

It works like a charm for me! Absolutely love it!