mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 02:14:01 +00:00
i18n: keep the page's locale in a vue-i18n instance
The application views install one vue-i18n instance that holds the active locale and the catalogs. src/i18n/index.js stays free of Vue: bindLocale() keeps its locale in the instance's ref, so t(), tn() and the Intl formatters read it from there and a view that translates while rendering renders again when the locale changes. A tag written straight to the ref is normalized. Message formatting, catalogs and call sites are unchanged, and switching language still reloads the page. The instance outlives the views: unmounting one no longer disposes it. The browser build defines vue-i18n's feature flags and drops its message compiler, which Core does not use.
This commit is contained in:
1 parent
22d4cf8ee7
commit
2c72a038d5
12 files changed
+330
-44
No files matched your search
@@ -25,6 +25,8 @@ label.textContent = t(FEED_STATE_LABELS[state]);
|
||||
|
||||
A module the server, tools or other portable code also imports must not load the catalogs: it imports `msg` from `src/i18n/marker.js`, which only marks the text, and the UI translates it with `t()` where it shows it. (Older modules keep a local `const msg = (text) => text`, which works the same.)
|
||||
|
||||
Vue views call the same `t()` and `tn()`. The page's vue-i18n instance (`src/ui/i18n.js`), installed in every view, holds the active locale, and `t()`, `tn()` and the formatters read it from there, so a view that translates while rendering renders again when the locale changes. Views don't use vue-i18n's own `t`: English is the key, `context` picks an entry and plural forms follow `Intl.PluralRules`, which only Core's functions do.
|
||||
|
||||
`msg()` exists for two reasons. `npm run i18n` finds messages only as string literals inside `t(…)`, `tn(…)` and `msg(…)`, so `t(FEED_STATE_LABELS[state])` alone tells it nothing. And a `t()` call at module load runs before the page has picked its language, so it would freeze the English.
|
||||
|
||||
## Markup
|
||||
@@ -84,6 +86,7 @@ Icons (`aria-hidden="true"`, Material Symbols), comments, CSS values and lowerca
|
||||
| File | What it holds |
|
||||
| ------------------------------- | ------------------------------------------------------------------------------ |
|
||||
| `src/i18n/index.js` | `t`, `tn`, `msg`, the Intl formatters, markup translation, switching language |
|
||||
| `src/ui/i18n.js` | the page's vue-i18n instance: the active locale and the catalogs |
|
||||
| `src/i18n/marker.js` | `msg` alone, for modules the server or tools import (no catalogs) |
|
||||
| `src/i18n/locale.js` | shipped languages, their names, choosing the language at boot |
|
||||
| `src/i18n/locales/<code>.json` | one catalog per language, keyed by English text |
|
||||
|
||||
Reference in new issue
Block a user