feat!: change $t overloaded signature for Legacy API mode

[kazupon]

feature (has breaking change)

In Vue I18n v9, it has a different interface from the Composition API mode and Legacy API mode of the $t overloaded signature.

Especially, $t signature in Legacy API mode has fewer overloaded signatures than in Composition API mode, as shown below:

$t overloaded signatures	Legacy API v9	Legacy API v10	Composition API v9 & v10
$t(key: Path): TranslateResult;	✅	✅	✅
$t(key: Path, locale: Locale): TranslateResult;	✅	-	-
$t(key: Path, locale: Locale, list: unknown[]): TranslateResult;	✅	-	-
$t(key: Path, locale: Locale, named: NamedValue): TranslateResult;	✅	-	-
$t(key: Path, plural: number): TranslateResult;	-	✅	✅
$t(key: Path, plural: number, options: TranslateOptions): TranslateResult;	-	✅	✅
$t(key: Path, defaultMsg: string): TranslateResult;	-	✅	✅
$t(key: Path, defaultMsg: string, options: TranslateOptions): TranslateResult;	-	✅	✅
$t(key: Path, list: unknown[]): TranslateResult;	✅	✅	✅
$t(key: Path, list: unknown[], plural: number): TranslateResult;	-	✅	✅
$t(key: Path, list: unknown[], defaultMsg: string): TranslateResult;	-	✅	✅
$t(key: Path, list: unknown[], options: TranslateOptions): TranslateResult;	-	✅	✅
$t(key: Path, named: Record<string, unknown>): TranslateResult;	✅	✅	✅
$t(key: Path, named: NamedValue, plural: number): TranslateResult;	-	✅	✅
$t(key: Path, named: NamedValue, defaultMsg: string): TranslateResult;	-	✅	✅
$t(key: Path, named: NamedValue, options: TranslateOptions): TranslateResult;	-	✅	✅

Starting from v10, Legacy API mode can use the same $t overload signature as Composition API mode.

Reason: After that migration, when migrating to Composition API mode, we sometimes fall into a pitfall due to the different signature of $t.

[cloudflare-pages]

Deploying vue-i18n-next with    Cloudflare Pages

Latest commit:	396c9ab
Status:	✅  Deploy successful!
Preview URL:	https://7ee48bc8.vue-i18n-next.pages.dev
Branch Preview URL:	https://breaking-t-signature-legacy.vue-i18n-next.pages.dev

View logs

[lyking90]

$t(key: Path, locale: Locale): TranslateResult;
v9+ cannot not set locale ?
how can i use t('key','en') and then i can get english translate

[BobbieGoede]

$t(key: Path, locale: Locale): TranslateResult; v9+ cannot not set locale ? how can i use t('key','en') and then i can get english translate

You can by passing the TranslateOptions options argument, like so:

• $t('key', 'default message', { locale: 'en' })
• $t('key', 1, { locale: 'en' })

But I suppose there isn't an overload to pass options as a second argument if that's what you're asking.

[lyking90]

$t(key: Path, locale: Locale): TranslateResult; v9+ cannot not set locale ? how can i use t('key','en') and then i can get english translate

You can by passing the TranslateOptions options argument, like so:

• $t('key', 'default message', { locale: 'en' })
• $t('key', 1, { locale: 'en' })

But I suppose there isn't an overload to pass options as a second argument if that's what you're asking.

thank you for your reply。 so i need to add second argument for this plural, and then i can use TranslateOptions { locale: 'en' }

[BobbieGoede]

@lyking90
There's a few overloads that accept the TranslateOptions argument, including the one accepting plural number as second argument, yes.

Check out the migration page for good examples and comparisons of usage between v9 and v10 here: https://vue-i18n.intlify.dev/guide/migration/breaking10.html#change-t-and-t-overloaded-signature-for-legacy-api-mode, it should have all the info you're looking for 😄