Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Apr 30, 2024

Conversation

kazupon
Copy link
Member

@kazupon kazupon commented Apr 30, 2024

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.

@kazupon kazupon added the Type: Breaking Includes backwards-incompatible fixes label Apr 30, 2024
Copy link

cloudflare-workers-and-pages bot commented Apr 30, 2024

Deploying vue-i18n-next with  Cloudflare Pages  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

@kazupon kazupon changed the title breaking: change $t overloaded signature for Legacy API mode feat!: change $t overloaded signature for Legacy API mode Apr 30, 2024
@kazupon kazupon added the Type: Feature Includes new features label Apr 30, 2024
@kazupon kazupon merged commit 3ab1d8e into master Apr 30, 2024
25 checks passed
@kazupon kazupon deleted the breaking/t-signature-legacy branch April 30, 2024 23:37
@lyking90
Copy link

$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
Copy link
Member

$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
Copy link

$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
Copy link
Member

@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 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Breaking Includes backwards-incompatible fixes Type: Feature Includes new features
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants