Skip to content

Commit

Permalink
docs: add how to use shared locale messages on composition api
Browse files Browse the repository at this point in the history
  • Loading branch information
kazupon committed Sep 21, 2024
1 parent 19054e0 commit da9f5c2
Showing 1 changed file with 53 additions and 2 deletions.
55 changes: 53 additions & 2 deletions docs/guide/advanced/composition.md
Original file line number Diff line number Diff line change
Expand Up @@ -377,10 +377,11 @@ const { t, d, n, tm, locale } = useI18n({
// Something to do here ...
```

### Locale messages

If you use i18n custom blocks in SFC as i18n resource of locale messages, it will be merged with the locale messages specified by the `messages` option of `useI18n`.
If you use i18n custom blocks in SFC as i18n resource of locale messages, it will be merged with the locale messages specified by the `messages` option of `useI18n`.

The following is an example of using i18n custom blocks and `useI18n` options:
The following is an example of using i18n custom blocks and `useI18n` options:

```vue
<script setup>
Expand Down Expand Up @@ -410,6 +411,56 @@ availableLocales.forEach(locale => {
In this example, the definition of resources is separated from i18n custom blocks and the `messages` option of `useI18n`, but in local scope, resource messages are specified in the `messages` option in a lump sum for administrative purposes in resource messages or define all resource messages in the i18n custom blocks, which is preferable.
:::

### Shared locale messages for components

In Leacy API mode, shared locale messages are used in components with the `sharedMessages` option.

In composition API mode, use `mergeLocaleMessage` exported by `useI18n`.

Common locale messages example:

```js
export default {
en: {
buttons: {
save: "Save",
// ...
}
},
ja: {
buttons: {
save: "保存",
// ...
}
}
}
```

use `mergeLocaleMessage` on Components:

```vue
<script setup>
import { useI18n } from 'vue-i18n'
import commonMessages from './locales/common'
const { t, mergeLocaleMessage } = useI18n({
locale: 'en',
messages: {
en: {
hello: 'Hello!'
},
ja: {
hello: 'こんにちは!'
}
}
})
for (const locale of ['en', 'ja']) {
mergeLocaleMessage(locale, commonMessages[locale])
}
</script>
```

## Locale Changing

### Global Scope
Expand Down

0 comments on commit da9f5c2

Please sign in to comment.