Define default translation inside component

[Christilut]

I'm wondering if something like this is possible:

<template>
  <h1>{{ $t('message.hello', 'Hello World') }}</h1>
</template>

What I mean there is that I define a tag (message.hello) and a string Hello World for my default language. This makes editing components much faster and I don't need to find a tag in the JSON files.

For each language I would still have a JSON file (or one big JSON) except for the default language. The default language is always defined inside the components. With HMR it's a nicer experience too, when editing the default language right inside the component.

With this approach I can fully focus on my own, default, language and translations are not in the way at all. An app full of only tags is not great for the developer.

[kazupon]

{{ $t('message.hello', 'Hello World') }}

You can use it.
API docs says:
https://vue-i18n.intlify.dev/api/injection.html#t-key-defaultmsg-options

$t(key: Path, defaultMsg: string, options: TranslateOptions): string;

[Christilut]

Great, thanks! I didn't see that option :)