$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

• [X] Read the contribution guide (The contribution guideline of nuxt-modules/i18n is compliant with Nuxt too).
• [X] 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: https://github.com/intlify/vue-i18n-next/issues/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 https://github.com/nuxt-modules/i18n/pull/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!

[natemate90]

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

Hi @BobbieGoede, many thanks for your efforts to implement this. Is there any updated documentation on how we can get the message schema to work? The link you mention doesn't work anymore, maybe it's default behavior now? I can't get $t autocomplete to work yet in my existing project, maybe I'm doing something wrong. Would you mind shortly describing on what steps are needed to get the message schema to be generated?

Many thanks in advance

[BobbieGoede]

The docs for v9 were moved up a level, the updated link is https://i18n.nuxtjs.org/docs/api/options#typedoptionsandmessages, let me know if you run into issues (preferably with a reproduction 🙏)

[natemate90]

@BobbieGoede Works excellent, many thanks!

[murshex]

The docs for v9 were moved up a level, the updated link is https://i18n.nuxtjs.org/docs/api/options#typedoptionsandmessages, let me know if you run into issues (preferably with a reproduction 🙏)

Works for me too, but it would be nice to have incorrect keys as a typescript error if possible.