🥇 Gold Sponsors
- -
-
- 🥈 Silver Sponsors
- -
-
- 🥉 Bronze Sponsors
- -
-
-
- 
-
-
- 
-
-You can introduce internationalization into your app with simple API
-In addition to simple translation, support localization such as pluralization, number, datetime ... etc
-You can manage locale messages on single file component
-Component1 locale messages: {{ $t("message.hello") }}
-Fallback global locale messages: {{ $t("message.greeting") }}
-{{ $t("message.hello") }}
-こんにちは、世界
-Component1 locale messages: こんにちは、component1
-Fallback global locale messages: おはようございます
-This is good service
-
-
-{{ $d(new Date(), 'short') }}
-{{ $d(new Date(), 'long', 'ja-JP') }}
-Jan 18, 2021
-2021年1月18日日曜日 午前5:47
-hi there!
-hi there!
-こんにちは、kazupon！
-hi kazupon!
-{{ $t('hello') }}
-``` - -Output: - -```html -Hello, world!
-``` - -By default, falling back to `fallbackLocale` generates two console warnings: - -``` -[vue-i18n] Value of key 'hello' is not a string! -[vue-i18n] Fall back to translate the keypath 'hello' with 'en' locale. -``` - -To suppress these warnings (while keeping those which warn of the total absence of translation for the given key) set `silentFallbackWarn: true` when initializing the `VueI18n` instance. - -## Explicit fallback with an array of locales - -It is possible to set more than one fallback locale by using an array of locales. For example - -```javascript -fallbackLocale: [ 'fr', 'en' ], -``` - -## Explicit fallback with decision maps -If more complex decision maps for fallback locales are required, it is possible to define decision maps with according fallback locales. -Using the following decision map -```javascript -fallbackLocale: { - /* 1 */ 'de-CH': ['fr', 'it'], - /* 2 */ 'zh-Hant': ['zh-Hans'], - /* 3 */ 'es-CL': ['es-AR'], - /* 4 */ 'es': ['en-GB'], - /* 5 */ 'pt': ['es-AR'], - /* 6 */ 'default': ['en', 'da'] -}, -``` -will result in the following fallback chains -| locale | fallback chains | -|--------|-----------------| -| `'de-CH'` | de-CH > fr > it > en > da | -| `'de'` | de > en > da | -| `'zh-Hant'` | zh-Hant > zh-Hans > zh > en > da | -| `'es-SP'` | es-SP > es > en-GB > en > da | -| `'es-SP!'` | es-SP > en > da | -| `'fr'` | fr > en > da | -| `'pt-BR'` | pt-BR > pt > es-AR > es > en-GB > en > da | -| `'es-CL'` | es-CL > es-AR > es > en-GB > en > da | - -## Fallback interpolation - -*Summary: Set `formatFallbackMessages: true` to do template interpolation on translation keys when your language lacks a translation for a key.* - -Since the keys to the translations are strings, you can use a user-readable message (for a particular language) as a key. -E.g. - -```javascript -const messages = { - ja: { - 'Hello, world!': 'こんにちは、世界!' - } -} -``` - -This is useful because you don't have to specify a translation for the string "Hello, world!" into English. - -In fact, you can even include template parameters in a key. Together with `formatFallbackMessages: true`, this lets you skip writing templates for your "base" language; the keys *are* your templates. - -```javascript -const messages = { - ru: { - 'Hello {name}': 'Здравствуйте {name}' - } -} - -const i18n = new VueI18n({ - locale: 'ru', - fallbackLocale: 'en', - formatFallbackMessages: true, - messages -}) -``` - -When the template is as below: - -```html -{{ $t('Hello {name}', { name: 'John' }}) }}
-{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}
-``` - -The following will be output: - -```html -Здравствуйте, John
-The weather today is sunny!
-``` diff --git a/docs-old/guide/formatting.md b/docs-old/guide/formatting.md deleted file mode 100644 index 54ed67942..000000000 --- a/docs-old/guide/formatting.md +++ /dev/null @@ -1,205 +0,0 @@ -# Formatting - -## Named formatting - -Locale messages: - -```js -const messages = { - en: { - message: { - hello: '{msg} world' - } - } -} -``` - -Template: - -```html -{{ $t('message.hello', { msg: 'hello' }) }}
-``` - -Output: - -```html -hello world
-``` - -## List formatting - -Locale messages: - -```js -const messages = { - en: { - message: { - hello: '{0} world' - } - } -} -``` - -Template: - -```html -{{ $t('message.hello', ['hello']) }}
-``` - -Output: - -```html -hello world
-``` - -List formatting also accepts array-like objects: - -```html -{{ $t('message.hello', {'0': 'hello'}) }}
-``` - -Output: - -```html -hello world
-``` - -## HTML formatting - -:::warning Notice -:warning: Dynamically localizing arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content. - -We recommended using the [component interpolation](interpolation.md) feature. -::: - -:::warning Notice -> :new: 8.11+ - -You can control the use of HTML formatting. see the detail `warnHtmlInMessage` constructor option and property API. -::: - -In some cases you might want to render your translation as an HTML message and not a static string. - - -```js -const messages = { - en: { - message: { - hello: 'hellohello - -world
-``` - - -## Support ruby on rails i18n format - -Locale messages: - -```js -const messages = { - en: { - message: { - hello: '%{msg} world' - } - } -} -``` - -Template: - -```html -{{ $t('message.hello', { msg: 'hello' }) }}
-``` - -Output: - -```html -hello world
-``` - -## Custom formatting - -Sometimes, you may need to translate using custom formatting (e.g. [ICU message syntax](http://userguide.icu-project.org/formatparse/messages)). - -You can do that with a custom formatter that implements the [Formatter Interface](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L145-L147). - -The following custom formatter with ES2015 class syntax: - -```js -// Custom Formatter implementation -class CustomFormatter { - constructor (options) { - // ... - } - - // - // interpolate - // - // @param {string} message - // string of list or named format. - // e.g. - // - named formatting: 'Hi {name}' - // - list formatting: 'Hi {0}' - // - // @param {Object | Array} values - // values of `message` interpolation. - // passed values with `$t`, `$tc` and `i18n` functional component. - // e.g. - // - $t('hello', { name: 'kazupon' }) -> passed values: Object `{ name: 'kazupon' }` - // - $t('hello', ['kazupon']) -> passed values: Array `['kazupon']` - // - `i18n` functional component (component interpolation) - //kazupon
- //how are you?
- //I accept xxx Terms of Service Agreement
-``` - -In the above message, if you use `$t`, you will probably try to compose the following locale messages: - -```js -const messages = { - en: { - term1: 'I Accept xxx\'s', - term2: 'Terms of Service Agreement' - } -} -``` - -And your localized template may look like this: - -```html -{{ $t('term1') }}{{ $t('term2') }}
-``` - -Output: - -```html -I accept xxx Terms of Service Agreement
-``` - -This is very cumbersome, and if you configure the `` tag in a locale message, there is a possibility of XSS vulnerabilities due to localizing with -`v-html="$t('term')"`. - -You can avoid it using the `i18n` functional component. For example: - -```html -- You can change your flight until 15 minutes from departure. -
- -- You can change your flight until 15 minutes from departure. -
- -- You can refund your ticket until 30 minutes from departure. -
- -{{ $t('key1') }}
- -{{ $t('nested.message1') }}
- -{{ $t('errors[0]') }}
- -{{ $t('errors[1].internal1') }}
- -{{ $t('errors[2][0]') }}
-this is message1
- -this is nested message1
- -this is 0 error code message
- -this is internal 1 error message
- -this is nested array error 1
-{{ $t('message.linked') }}
-``` - -Output: - -```html -DIO: the world !!!!
-``` - -### Formatting linked locale messages - -If the language distinguish cases of character, you may need control the case of the linked locale messages. -Linked messages can be formatted with modifier `@.modifier:key` - -The below modifiers are available currently. - -* `upper`: Uppercase all characters in the linked message. -* `lower`: Lowercase all characters in the linked message. -* `capitalize`: Capitalize the first character in the linked message. - -Locale messages the below: - -```javascript -const messages = { - en: { - message: { - homeAddress: 'Home address', - missingHomeAddress: 'Please provide @.lower:message.homeAddress' - } - } -} -``` - -```html - - -{{ $t('message.missingHomeAddress') }}
-``` - -Output the below: - -```html - - -Please provide home address
-``` - -You can add modifiers or overwrite the existing ones passing the `modifiers` options to the `VueI18n` constructor. - -```javascript -const i18n = new VueI18n({ - locale: 'en', - modifiers: { - // Adding a new modifier - snakeCase: (str) => str.split(' ').join('-') - }, - messages: { - // ... - }, -}) -``` - -### Grouping by brackets - -A translation key of linked locale message can also have the form of `@:(message.foo.bar.baz)` in which the link to another translation key is within brackets `()`. - -This can be useful if the link `@:message.something` is followed by period `.`, which otherwise would be part of the link and may not need to be. - -Locale messages: - -```js -const messages = { - en: { - message: { - dio: 'DIO', - linked: 'There\'s a reason, you lost, @:(message.dio).' - } - } -} -``` - -Template: - -```html -{{ $t('message.linked') }}
-``` - -Output: - -```html -There's a reason, you lost, DIO.
-``` - -## Message Function - -vue-i18n recommends using the string base on list or named format as locale messages when translating messages. - -There are situations however, where you really need the full programmatic power of JavaScript, due to the complex language syntax. So instead of string-based messages, you can use the **message function**. - -The following is a message function that returns a simple greeting: - -```js -const messages = { - en: { - greeting: (ctx) => 'hello!' - } -} -``` - -The use of the message function is very easy! You just specify the key of the message function with `$t` or `t`: - -```html -{{ $t('greeting') }}
-``` - -Output is the below: - -```html -hello!
-``` - -The message function outputs the message of the return value of the message function. - -### Named formatting - -vue-i18n supports [named formatting](./formatting.md#named-formatting) as a string-based message format. vue-i18n interpolate the parameter values with `$t` or `t`, and it can be output it. - -You can do the same thing with the message function by using **message context**: - -here is the example of greeting: - -```js -const messages = { - en: { - greeting: (ctx) => `hello, ${ctx.named('name')}!` - } -} -``` - -Template: - -```html -{{ $t('greeting', { name: 'DIO' }) }}
-``` - -Output is the below: - -```html -hello, DIO!
-``` - -The message context has a named function. You need to specify the key that resolves the value specified with the named of `$t` or `t`. - -### List formatting - -The use of the list format is similar to the named format described above. - -vue-i18n supports [list formatting](./formatting.md#list-formatting) as a string-based message format. vue-i18n interpolate the parameter values with `$t` or `t`, and it can be output it. - -You can do the same thing with the message function by using message context: - -here is the example of greeting: - -```js -const messages = { - en: { - greeting: (ctx) => `hello, ${ctx.list(0)}!` - } -} -``` - -Template: - -```html -{{ $t('greeting', ['DIO']) }}
-``` - -Output is the below: - -```html -hello, DIO!
-``` - -The message context has a list function. You need to specify the index that resolves the value specified with the list of `$t` or `t`. - -### Limitation - -In the message function, the following functions, which are provided on a string basis, are not available via a message context: - -- Linked locale messages -- Pluralization diff --git a/docs-old/guide/number.md b/docs-old/guide/number.md deleted file mode 100644 index 630d5fff8..000000000 --- a/docs-old/guide/number.md +++ /dev/null @@ -1,133 +0,0 @@ -# Number localization - -:::tip Support Version -:new: 7.0+ -::: - -You can localize the number with your definition formats. - -Number formats the below: - -```js -const numberFormats = { - 'en-US': { - currency: { - style: 'currency', - currency: 'USD' - } - }, - 'ja-JP': { - currency: { - style: 'currency', - currency: 'JPY', - currencyDisplay: 'symbol' - } - } -} -``` - -As the above, you can define named number formats (e.g. `currency`, etc), and you need to use [the options with ECMA-402 Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) - -After that, when using the locale messages, you need to specify the `numberFormats` option of the `VueI18n` constructor: - -```js -const i18n = new VueI18n({ - numberFormats -}) - -new Vue({ - i18n -}).$mount('#app') -``` - -Template the below: - -```html -{{ $n(100, 'currency') }}
-{{ $n(100, 'currency', 'ja-JP') }}
-$100.00
-￥100
-{{ $tc('car', 1) }}
-{{ $tc('car', 2) }}
- -{{ $tc('apple', 0) }}
-{{ $tc('apple', 1) }}
-{{ $tc('apple', 10, { count: 10 }) }}
-``` - -Output below: - -```html -car
-cars
- -no apples
-one apple
-10 apples
-``` - -## Accessing the number via the pre-defined argument - -You don't need to explicitly give the number for pluralization. -The number can be accessed within locale messages via pre-defined named arguments `{count}` and/or `{n}`. -You can overwrite those pre-defined named arguments if necessary. - -Locale messages the below: - -```js -const messages = { - en: { - apple: 'no apples | one apple | {count} apples', - banana: 'no bananas | {n} banana | {n} bananas' - } -} -``` - -Template below: - -```html -{{ $tc('apple', 10, { count: 10 }) }}
-{{ $tc('apple', 10) }}
- -{{ $tc('banana', 1, { n: 1 }) }}
-{{ $tc('banana', 1) }}
-{{ $tc('banana', 100, { n: 'too many' }) }}
-``` - -Output below: - -```html -10 apples
-10 apples
- -1 banana
-1 banana
-too many bananas
-``` - - -## Custom pluralization - -Such pluralization, however, does not apply to all languages (Slavic languages, for example, have different pluralization rules). - -In order to implement these rules you can pass an optional `pluralizationRules` object into `VueI18n` constructor options. - -Very simplified example using rules for Slavic languages (Russian, Ukrainian, etc.): -```js -new VueI18n({ - // Key - language to use the rule for, `'ru'`, in this case - // Value - function to choose right plural form - pluralizationRules: { - /** - * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)` - * @param choicesLength {number} an overall amount of available choices - * @returns a final choice index to select plural word by - */ - 'ru': function(choice, choicesLength) { - // this === VueI18n instance, so the locale property also exists here - - if (choice === 0) { - return 0; - } - - const teen = choice > 10 && choice < 20; - const endsWithOne = choice % 10 === 1; - - if (choicesLength < 4) { - return (!teen && endsWithOne) ? 1 : 2; - } - if (!teen && endsWithOne) { - return 1; - } - if (!teen && choice % 10 >= 2 && choice % 10 <= 4) { - return 2; - } - - return (choicesLength < 4) ? 2 : 3; - } - } -}) -``` - -This would effectively give this: - -```javascript -const messages = { - ru: { - car: '0 машин | {n} машина | {n} машины | {n} машин', - banana: 'нет бананов | {n} банан | {n} банана | {n} бананов' - } -} -``` -Where the format is `0 things | things count ends with 1 | things count ends with 2-4 | things count ends with 5-9, 0 and teens (10-19)`. -P.S. Slavic pluralization is difficult, you can read more about it [here](http://www.russianlessons.net/lessons/lesson11_main.php). - -Your template still needs to use `$tc()`, not `$t()`: - -```html -{{ $tc('car', 1) }}
-{{ $tc('car', 2) }}
-{{ $tc('car', 4) }}
-{{ $tc('car', 12) }}
-{{ $tc('car', 21) }}
- -{{ $tc('banana', 0) }}
-{{ $tc('banana', 4) }}
-{{ $tc('banana', 11) }}
-{{ $tc('banana', 31) }}
-``` - -Which results in: - -```html -1 машина
-2 машины
-4 машины
-12 машин
-21 машина
- -нет бананов
-4 банана
-11 бананов
-31 банан
-``` - -### Default pluralization - -If your current locale is not found in a pluralization map, the [default](#pluralization) rule of the english language will be used. diff --git a/docs-old/guide/sfc.md b/docs-old/guide/sfc.md deleted file mode 100644 index 0220e274c..000000000 --- a/docs-old/guide/sfc.md +++ /dev/null @@ -1,400 +0,0 @@ -# Single file components - -## Basic Usage - -If you are building Vue component or Vue application using single file components, you can manage the locale messages `i18n` custom block. - -The following in [single file components example](https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc): - -```vue -message: {{ $t('hello') }}
-message: {{ $t('hello') }}
-{{ parent.$t('hello') }}
- -``` diff --git a/docs-old/guide/tooling.md b/docs-old/guide/tooling.md deleted file mode 100644 index ddc4ed113..000000000 --- a/docs-old/guide/tooling.md +++ /dev/null @@ -1,72 +0,0 @@ -# Tooling - -To support the i18n of Vue applications, some tools are officially provided. - -There are also tools from third vendors integrating Vue I18n. - -## Official tooling - -### Vue CLI Plugin - -[vue-cli-plugin-i18n](https://github.com/kazupon/vue-cli-plugin-i18n) is officially provided as the Vue CLI Plugin. - -With this plugin, you can setup the i18n environment for the Vue application, and support the i18n development environment. - -### Nuxt Module - -[nuxt-i18n](https://github.com/nuxt-community/nuxt-i18n/) is corresponding Nuxt.js module. - -### Webpack loader - -[vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader) is an officially provided webpack loader. - -With this loader, you can use the `i18n` custom block in the Single file components. - -In about `i18n` custom block, see the [Single file components section](./sfc.md) - -### ESLint Plugin - -[eslint-plugin-vue-i18n](https://intlify.github.io/eslint-plugin-vue-i18n/) is ESLint plugin for Vue I18n. - -It easily integrates some localization lint features to your Vue.js Application. - -### Extensions - -[vue-i18n-extensions](https://github.com/kazupon/vue-i18n-extensions) provides some extensions for Vue I18n. - -You can use this extension to enable SSR and improve i18n performance. - -## 3rd party tooling - -### BabelEdit - -[BabelEdit](https://www.codeandweb.com/babeledit) is translation editor for web apps. - -BabelEdit can translate `json` files, and it can also translate `i18n` custom block of Single-file components. - -Read more about BabelEdit in [tutorial page](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n). - -### i18n Ally - -[i18n Ally](https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally) is i18n extension for VSCode. - -i18n Ally give awesome DX for your i18n development. - -Read more about i18n Ally in [README](https://github.com/antfu/i18n-ally/blob/master/README.md). - -### i18nPlugin (intellij platform) - -[i18nPlugin](https://github.com/nyavro/i18nPlugin) Intellij idea i18next support plugin ( [Jetbrains plugin page ](https://plugins.jetbrains.com/plugin/12981-i18n-support)). - -Plugin for i18n typescript/javascript/PHP. Supports vue-i18n. To enable vue-i18n support go to settings -> Tools -> i18n Plugin configuration and check "Vue-i18n". You need set vue locales directory (locales by default). - -### vue-i18n-extract - -[vue-i18n-extract](https://github.com/pixari/vue-i18n-extract) performs static analysis on a Vue.js project based on vue-i18n and reports the following information: - -- list of all the **unused vue-i18n keys** (entries found in the language files but not used in the project) -- list of all the **missing keys** (entries fond in the project but not in the language files) - -It's possible to show the output in the console or to write it in a json file. - -The missing keys can be also automatically added to the given language files. diff --git a/docs-old/installation.md b/docs-old/installation.md deleted file mode 100644 index 4e1da9042..000000000 --- a/docs-old/installation.md +++ /dev/null @@ -1,86 +0,0 @@ -# Installation - -## Compatibility Note - -- Vue.js `2.0.0`+ - -## Direct Download / CDN - -{{ $t('key1') }}
- -{{ $t('nested.message1') }}
- -{{ $t('errors[0]') }}
- -{{ $t('errors[1].internal1') }}
- -{{ $t('errors[2][0]') }}
-esta é a mensagem 1
- -esta é a mensagem aninhada 1
- -esta é a mensagem de código de erro 0
- -esta é uma mensagem de código de erro interno 1
- -este é o erro de array aninhado 1
-{{ $t('message.linked') }}
-``` - -O resultado será o seguinte: - -```html -DIO: the world !!!!
-``` - -### Formatando mensagens de localização relacionadas - -Se o idioma distinguir casos de caracteres, você pode precisar controlar o caso das mensagens de localização relacionadas. -Mensagens relacionadas podem ser formatadas com o modificador `@.modifier:key` - -Mensagens de localização a seguir: - -* `upper`: Letras maiúsculas em todos os caracteres na mensagem vinculada. -* `lower`: Letras minúsculas em todos os caracteres na mensagem vinculada. -* `capitalize`: Primeiro caractere em maiúsculo da mensagem vinculada. - -Mensagens de localização: - -```js -const messages = { - en: { - message: { - homeAddress: 'Home address', - missingHomeAddress: 'Please provide @.lower:message.homeAddress' - } - }, - pt: { - message: { - homeAddress: 'Endereço residencial', - missingHomeAddress: 'Por favor, providencie o @.lower:message.homeAddress' - } - } -} -``` - -```html - - -{{ $t('message.missingHomeAddress') }}
-``` - -O resultado será o seguinte: - -```html - - -Por favor, providencie o Endereço residencial
-``` - -Você pode adicionar modificadores ou sobrescrever os existentes passando as opções de `modificadores` para o construtor `VueI18n`. - -```js -const i18n = new VueI18n({ - locale: 'pt', - modifiers: { - // Adicionando um novo modificador - snakeCase: str => str.split(' ').join('-') - }, - messages: { - // ... - }, -}) -``` - -### Agrupando com parêntese - -Uma chave de tradução de uma mensagem também pode ser especificada com `@:(message.foo.bar.baz)`, onde a referência a outra chave de tradução está entre parêntese `()`. - -Isso pode ser necessário se um ponto `.` for exigido após um link para outra mensagem `@:message.something`, que de outra forma seria considerado parte do link. - -Mensagens de localização: - -```js -const messages = { - en: { - message: { - dio: 'DIO', - linked: "There's a reason, you lost, @:(message.dio)." - } - }, - pt: { - message: { - dio: 'DIO', - linked: "Há uma razão pela qual você falhou, @:(message.dio)." - } - } -} -``` - -Template: - -```html -{{ $t('message.linked') }}
-``` - -O resultado será o seguinte: - -```html -Há uma razão pela qual você falhou, DIO.
-``` - -## Mensagem com função - -vue-i18n recomenda o uso de strings para formatação de lista ou formatação nomeada como mensagem de localização ao traduzir as mensagens. - -No entanto, existem situações em que, devido à sintaxe complexa da linguagem, todo o poder do JavaScript é necessário. Nesse caso, em vez de mensagens de string, você pode usar **uma mensagem com função**. - -A função abaixo retorna uma saudação: - -```js -const messages = { - en: { - greeting: (ctx) => 'Hello!' - }, - pt: { - greeting: (ctx) => 'Olá!' - } -} -``` - -Usar a função da mensagem é fácil! Você só precisa especificar a chave usando `$t` ou `t`: - -```html -{{ $t('greeting') }}
-``` - -O resultado será o seguinte: - -```html -Olá!
-``` - -O resultado de retorno da função é usado para a mensagem. - -### Formatação nomeada - -vue-i18n suporta [formatação nomeada](./formatting.md#named-formatting) como um formato de mensagem baseado em string. vue-i18n interpola os valores dos parâmetros com `$t` ou `t`, e os retorna. - -O mesmo pode ser feito com a função da mensagem usando o **contexto de mensagem**: - -Aqui está o exemplo de saudação: - -```js -const messages = { - en: { - greeting: (ctx) => `Hello, ${ctx.named('name')}!` - }, - pt: { - greeting: (ctx) => `Olá, ${ctx.named('name')}!` - } -} -``` - -Template: - -```html -{{ $t('greeting', { name: 'DIO' }) }}
-``` - -O resultado será o seguinte: - -```html -Olá, DIO!
-``` - -O contexto da mensagem fornece acesso à função `named`. Você deve especificar a chave especificada para `$t` ou `t`, que resolverá com o valor necessário. - -### Formatação de lista - -O uso da formatação de lista é semelhante ao formatação nomeada descrito acima. - -vue-i18n suporta [formatação de lista](./formatting.md#list-formatting) para mensagens de string. vue-i18n interpola os valores dos parâmetros com `$t` ou `t`, e os retorna. - -O mesmo pode ser feito com a função da mensagem usando o **contexto de mensagem**: - -Aqui está o exemplo de saudação: - -```js -const messages = { - en: { - greeting: (ctx) => `Hello, ${ctx.list(0)}!` - }, - pt: { - greeting: (ctx) => `Olá, ${ctx.list(0)}!` - } -} -``` - -Template: - -```html -{{ $t('greeting', ['DIO']) }}
-``` - -O resultado será o seguinte: - -```html -Olá, DIO!
-``` - -O contexto da mensagem fornece acesso à função `list`. Você deve especificar a chave especificada para `$t` ou `t`, que resolverá com o valor necessário. - -### Limitação - -Em uma função para mensagem, os seguintes recursos, que estão disponíveis em uma versão de string, não estarão disponíveis por meio do contexto da mensagem: - -- Mensagens de localidade vinculadas -- Pluralização diff --git a/docs-old/pt/guide/number.md b/docs-old/pt/guide/number.md deleted file mode 100644 index a388f386a..000000000 --- a/docs-old/pt/guide/number.md +++ /dev/null @@ -1,142 +0,0 @@ -# Localização de números - -:::tip Suporta a versão -:new: 7.0+ -::: - -Você pode localizar números com seus formatos de definição. - -Formato de exemplo para números: - -```js -const numberFormats = { - 'en-US': { - currency: { - style: 'currency', - currency: 'USD' - } - }, - 'pt-BR': { - currency: { - style: 'currency', - currency: 'BRL', - currencyDisplay: 'symbol' - } - } -} -``` - -Conforme declarado acima, você pode especificar formatos numéricos (por exemplo, `currency` para moeda) usando opções [ECMA-402 Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat). - -Depois disso, para poder usar este formato em mensagens de localização, você precisa definir a opção `numberFormats` do construtor na instância `VueI18n`: - -```js -const i18n = new VueI18n({ - numberFormats -}) - -new Vue({ - i18n -}).$mount('#app') -``` - -Template: - -```html -{{ $n(100, 'currency') }}
-{{ $n(100, 'currency', 'pt-BR') }}
-$100.00
-100,00 ₽
-{{ $tc('car', 1) }}
-{{ $tc('car', 2) }}
- -{{ $tc('apple', 0) }}
-{{ $tc('apple', 1) }}
-{{ $tc('apple', 10, { count: 10 }) }}
-``` - -O resultado será o seguinte: - -```html -carro
-carros
- -sem maçãs
-uma maçã
-10 maçãs
-``` - -## Acessando o número por meio do argumento predefinido - -Não há necessidade de passar explicitamente o número para pluralização. Em mensagens de localização, um número está disponível através dos argumentos nomeados `{count}` e/ou `{n}`. Você pode substituí-los, se desejar. - -Mensagens locais abaixo: - -```js -const messages = { - en: { - apple: 'no apples | one apple | {count} apples', - banana: 'no bananas | {n} banana | {n} bananas' - }, - pt: { - apple: 'sem maçãs | uma maçã | {count} maçãs' - banana: 'sem bananas | {n} banana | {n} bananas' - } -} -``` - -Template: - -```html -{{ $tc('apple', 10, { count: 10 }) }}
-{{ $tc('apple', 10) }}
- -{{ $tc('banana', 1, { n: 1 }) }}
-{{ $tc('banana', 1) }}
-{{ $tc('banana', 100, { n: 'Muitas' }) }}
-``` - -O resultado será o seguinte: - -```html -10 maçãs
-10 maçãs
- -1 banana
-1 banana
-Muitas bananas
-``` - -## Pluralização personalizadas - -Essa pluralização, entretanto, não se aplica a todas as línguas (as línguas eslavas, por exemplo, têm regras de pluralização diferentes). - -Para implementar essas regras, você pode passar um objeto `pluralizationRules` opcional para as opções do construtor `VueI18n`. - -Um exemplo simplificado para idiomas eslavos (russo, ucraniano e outros): -```js -new VueI18n({ - // Key - idioma para usar a regra, `'ru'`, neste caso - // Value - função para escolher a forma plural correta - pluralizationRules: { - /** - * @param choice {number} um índice de escolha dado pela entrada de $tc: `$tc('path.to.rule', choiceIndex)` - * @param choicesLength {number} quantidade geral de opções disponíveis - * @returns índice final para selecionar as palavras no plural - */ - 'ru': function(choice, choicesLength) { - // this === Instância VueI18n, então a propriedade locale também existe aqui - - if (choice === 0) { - return 0; - } - - const teen = choice > 10 && choice < 20; - const endsWithOne = choice % 10 === 1; - - if (choicesLength < 4) { - return (!teen && endsWithOne) ? 1 : 2; - } - if (!teen && endsWithOne) { - return 1; - } - if (!teen && choice % 10 >= 2 && choice % 10 <= 4) { - return 2; - } - - return (choicesLength < 4) ? 2 : 3; - } - } -}) -``` - -Essa implementação permitirá que você use: - -```js -const messages = { - ru: { - car: '0 машин | {n} машина | {n} машины | {n} машин', - banana: 'нет бананов | {n} банан | {n} банана | {n} бананов' - } -} -``` - -Onde o formato é `0 coisas | número de itens termina em 1 | o número de coisas que termina em 2-4 | o número de coisas que termina com 5-9, 0 e o número coisas que termina de 11 a 19`. -P.S. A pluralização eslava é complexa, você pode ler mais sobre isso [aqui](http://www.russianlessons.net/lessons/lesson11_main.php). - -No template, você ainda precisa usar `$tc()` em vez de `$t()`: - -```html -{{ $tc('car', 1) }}
-{{ $tc('car', 2) }}
-{{ $tc('car', 4) }}
-{{ $tc('car', 12) }}
-{{ $tc('car', 21) }}
- -{{ $tc('banana', 0) }}
-{{ $tc('banana', 4) }}
-{{ $tc('banana', 11) }}
-{{ $tc('banana', 31) }}
-``` - -O resultado será o seguinte: - -```html -1 машина
-2 машины
-4 машины
-12 машин
-21 машина
- -нет бананов
-4 банана
-11 бананов
-31 банан
-``` - -### Pluralização padrão - -Se nenhuma regra de pluralização for fornecida para a localidade em uso, a regra [padrão](#pluralizacao) do idioma inglês será usada. diff --git a/docs-old/pt/guide/sfc.md b/docs-old/pt/guide/sfc.md deleted file mode 100644 index d5e06460c..000000000 --- a/docs-old/pt/guide/sfc.md +++ /dev/null @@ -1,410 +0,0 @@ -# Componentes de arquivo único - -## Uso básico - -Se você estiver construindo um componente ou aplicativo Vue usando componentes de arquivo único, você pode gerenciar as mensagens de localização usando um bloco `i18n` personalizado. - -Código de componente com [exemplo de componentes de arquivo único](https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc): - -```vue -Mensagem: {{ $t('hello') }}
-Mensagem: {{ $t('hello') }}
-{{ parent.$t('hello') }}
- -``` diff --git a/docs-old/pt/guide/tooling.md b/docs-old/pt/guide/tooling.md deleted file mode 100644 index f05d23595..000000000 --- a/docs-old/pt/guide/tooling.md +++ /dev/null @@ -1,72 +0,0 @@ -# Ferramentas - -Para suportar os aplicativos i18n do Vue, algumas ferramentas são fornecidas oficialmente. - -Existem também ferramentas de terceiros que integram o Vue I18n. - -## Ferramentas oficiais - -### Plugin para Vue CLI - -[vue-cli-plugin-i18n](https://github.com/kazupon/vue-cli-plugin-i18n) é o plugin oficial para o Vue CLI. - -Com este plugin, você pode configurar um ambiente i18n para seu aplicativo Vue e oferecer suporte ao ambiente de desenvolvimento i18n. - -### Módulo para Nuxt - -[nuxt-i18n](https://github.com/nuxt-community/nuxt-i18n/) é o módulo correspondente para Nuxt.js. - -### Loader para Webpack - -[vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader) — é o loader para webpack oficial. - -Com este loader é possível usar blocos `i18n` personalizados em componentes de arquivo único. - -Para obter mais informações sobre blocos `i18n` personalizados, consulte [Componentes de arquivo único](./sfc.md) - -### Plugin para ESLint - -[eslint-plugin-vue-i18n](https://intlify.github.io/eslint-plugin-vue-i18n/) - Plug-in ESLint para Vue I18n. - -Permite que você integre facilmente alguns recursos de localização do lint ao seu aplicativo Vue.js. - -### Extensões - -[vue-i18n-extensions](https://github.com/kazupon/vue-i18n-extensions) fornece algumas extensões para Vue I18n. - -Você pode usar esta extensão para habilitar o SSR e melhorar o desempenho do i18n. - -## Ferramentas de terceiros - -### BabelEdit - -[BabelEdit](https://www.codeandweb.com/babeledit) é um editor de tradução para aplicativos da web. - -O BabelEdit pode traduzir arquivos `json` e também pode trabalhar com blocos personalizados `i18n` de componentes de arquivo único. - -Mais informações sobre o BabelEdit podem ser encontradas na página de [introdução](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n). - -### i18n Ally - -[i18n Ally] (https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally) é uma extensão i18n para VSCode. - -i18n Ally oferece um DX(Experiência do desenvolvedor) incrível para o desenvolvimento de i18n. - -Você pode aprender mais sobre a extensão i18n Ally em [README](https://github.com/antfu/i18n-ally/blob/master/README.md). - -### i18nPlugin (plataforma intellij) - -[i18nPlugin](https://github.com/nyavro/i18nPlugin) — Plugin de suporte para idea Intellij i18next ([Página do plugin Jetbrains](https://plugins.jetbrains.com/plugin/12981-i18n-support)). - -Plugin para i18n typescript/javascript/PHP. Suporta vue-i18n. Para habilitar o suporte a vue-i18n vá em configurações -> Ferramentas -> Configuração do plugin i18n e selecione "Vue-i18n". É necessário instalar os diretórios com os arquivos de tradução (tradução por padrão). - -### vue-i18n-extract - -[vue-i18n-extract](https://github.com/pixari/vue-i18n-extract) faz uma análise estática de um projeto Vue.js com base em vue-i18n e relata as seguintes informações: - -- lista de todas as **chaves vue-i18n não utilizadas** (entradas encontradas nos arquivos de idioma, mas não utilizadas no projeto) -- lista de todas as **chaves ausentes** (entradas encontradas no projeto, mas não nos arquivos de idioma) - -É possível mostrar a saída no console ou gravá-la em um arquivo json. - -As chaves ausentes também podem ser adicionadas automaticamente aos arquivos de tradução fornecidos. diff --git a/docs-old/pt/installation.md b/docs-old/pt/installation.md deleted file mode 100644 index dc51f35af..000000000 --- a/docs-old/pt/installation.md +++ /dev/null @@ -1,85 +0,0 @@ -# Instalação - -## Nota de compatibilidade - -- Vue.js versões `2.0.0`+ - -## Download direto / CDN - -{{ $t("message.hello") }}
-Olá Mundo
-Позволяет легко добавить интернационализацию в приложение с помощью простого API
-В дополнение к переводам, поддерживает плюрализацию, локализацию для чисел, дат ... и т.д.
-Можно управлять сообщениями локализации в однофайловых компонентах
-Component1 locale messages: {{ $t("message.hello") }}
-Fallback global locale messages: {{ $t("message.greeting") }}
-{{ $t("message.hello") }}
-привет мир
-Component1 locale messages: привет component1
-Fallback global locale messages: доброе утро
-Это хороший сервис
-
-
-{{ $d(new Date(), 'short') }}
-{{ $d(new Date(), 'long', 'pt-BR') }}
-Jan 18, 2021
-domingo, 18 de janeiro de 2021 5:47 AM
-привет всем!
-привет всем!
-привет、kazupon！
-hi kazupon!
-{{ $t('hello') }}
-``` - -Результат: - -```html -Hello, world!
-``` - -По умолчанию, если использовались сообщения запасной локализации из `fallbackLocale`, то в консоли будут выведены соответствующие предупреждения: - -``` -[vue-i18n] Value of key 'hello' is not a string! -[vue-i18n] Fall back to translate the keypath 'hello' with 'en' locale. -``` - -Чтобы скрыть такие предупреждения (оставив при этом те, в случаях полного отсутствия переводов для данного ключа) установите `silentFallbackWarn: true` при инициализации экземпляра `VueI18n`. - -## Явное определение запасной локали с помощью массива - -Можно указать более одной запасной локализации с помощью массива. Например: - -```js -fallbackLocale: ['ru', 'en'], -``` - -## Явное определение запасной локали с помощью объекта - -Более сложный алгоритм принятия решений для определения запасной локали можно реализовать с помощью карты принятия решений в виде объекта. - -Например для подобного объекта: - -```js -fallbackLocale: { - /* 1 */ 'de-CH': ['fr', 'it'], - /* 2 */ 'zh-Hant': ['zh-Hans'], - /* 3 */ 'es-CL': ['es-AR'], - /* 4 */ 'es': ['en-GB'], - /* 5 */ 'pt': ['es-AR'], - /* 6 */ 'default': ['en', 'ru'] -}, -``` - -Будут следующие цепочки выбора запасной локали: - -| Локаль | Цепочка выбора | -| ----------- | ----------------------------------------- | -| `'de-CH'` | de-CH > fr > it > en > ru | -| `'de'` | de > en > ru | -| `'zh-Hant'` | zh-Hant > zh-Hans > zh > en > ru | -| `'es-SP'` | es-SP > es > en-GB > en > ru | -| `'es-SP!'` | es-SP > en > ru | -| `'fr'` | fr > en > ru | -| `'pt-BR'` | pt-BR > pt > es-AR > es > en-GB > en > ru | -| `'es-CL'` | es-CL > es-AR > es > en-GB > en > ru | - -## Резервная интерполяция - -_Вкратце: установите `formatFallbackMessages: true` чтобы выполнять интерполяции шаблона по ключам перевода, когда в выбранном языке отсутствует данный ключ для перевода._ - -Так как ключи переводов являются строками, то можно использовать само сообщение в качестве ключа (для определённого языка). Например: - -```js -const messages = { - ru: { - 'Hello, world!': 'Привет мир!' - } -} -``` - -Это может быть полезным, потому что не нужно будет указывать перевод для строки "Hello, world!" в английской локализации. - -Фактически, можно указывать даже параметры в ключе. Вместе с `formatFallbackMessages: true` это позволит опустить создание шаблонов для «базового» языка; потому что его ключи _уже находятся_ в шаблоне. - -```js -const messages = { - ru: { - 'Hello {name}': 'Здравствуйте {name}' - } -} - -const i18n = new VueI18n({ - locale: 'ru', - fallbackLocale: 'en', - formatFallbackMessages: true, - messages -}) -``` - -Шаблон: - -```html -{{ $t('Hello {name}', { name: 'John' }}) }}
-{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}
-``` - -Результат: - -```html -Здравствуйте, John
-The weather today is sunny!
-``` diff --git a/docs-old/ru/guide/formatting.md b/docs-old/ru/guide/formatting.md deleted file mode 100644 index 042e895c9..000000000 --- a/docs-old/ru/guide/formatting.md +++ /dev/null @@ -1,227 +0,0 @@ -# Формат сообщений локализации - -## Именованный формат - -Сообщения локализации: - -```js -const messages = { - en: { - message: { - hello: '{msg} world' - } - }, - ru: { - message: { - hello: '{msg} мир' - } - } -} -``` - -Шаблон: - -```html -{{ $t('message.hello', { msg: 'привет' }) }}
-``` - -Результат: - -```html -привет мир
-``` - -## Формат списков - -Сообщения локализации: - -```js -const messages = { - en: { - message: { - hello: '{0} world' - } - }, - ru: { - message: { - hello: '{0} мир' - } - } -} -``` - -Шаблон: - -```html -{{ $t('message.hello', ['привееет']) }}
-``` - -Результат: - -```html -привееет мир
-``` - -Форматирование списков также принимает объекты, соответствующие по структуре массиву: - -```html -{{ $t('message.hello', {'0': 'привееет'}) }}
-``` - -Результат: - -```html -привееет мир
-``` - -## HTML формат - -:::warning Обратите внимание -:warning: Динамическая локализация произвольного HTML на вебсайте очень опасна, потому что легко может привести к XSS-уязвимостям. Используйте HTML-интерполяцию только для доверенного контента и никогда для пользовательского. - -Рекомендуем в таких случаях использовать возможности [интерполяции компонента](interpolation.md). -::: - -:::warning Обратите внимание - -> :new: Добавлено в версии 8.11+ - -Можно управлять использованием HTML форматирования. Для подробностей см. опцию конструктора `warnHtmlInMessage` и свойства API. -::: - -Иногда требуется отобразить сообщение локализации HTML-кодом, а не статической строкой. - -```js -const messages = { - en: { - message: { - hello: 'hello- привет - - мир -
-``` - -## Формат ruby on rails i18n - -Сообщения локализации: - -```js -const messages = { - en: { - message: { - hello: '%{msg} world' - } - }, - ru: { - message: { - hello: '%{msg} мир' - } - } -} -``` - -Шаблон: - -```html -{{ $t('message.hello', { msg: 'привет' }) }}
-``` - -Результат: - -```html -привет мир
-``` - -## Пользовательский формат - -Иногда может потребоваться реализовать локализацию для собственного формата сообщений (например, использовать [синтаксиса сообщений ICU](http://userguide.icu-project.org/formatparse/messages)). - -Реализовать это можно с помощью специального пользовательского метода форматирования, который должен реализовать [интерфейс Formatter](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L145-L147). - -Пример пользовательского метода форматирования с синтаксисом класса ES2015: - -```js -// Реализация пользовательского Formatter -class CustomFormatter { - constructor(options) { - // ... - } - - // - // interpolate - // - // @param {string} message - // строка или список или именованный формат - // напр. - // - именованный формат: 'Hi {name}' - // - формат списка: 'Hi {0}' - // - // @param {Object | Array} values - // значения интерполяции `message`. - // переданные значения с `$t`, `$tc` и функциональным компонентом `i18n`. - // напр. - // - $t('hello', { name: 'Alex' }) -> переданные значения: Object `{ name: 'Alex' }` - // - $t('hello', ['Alex']) -> переданные значения: Array `['Alex']` - // - функциональный компонент `i18n` (интерполяция в компоненте) - //Alex
- //how are you?
- //I accept xxx Terms of Service Agreement
-``` - -Для такого сообщения, если хотим использовать `$t`, то, вероятно, попробуем достичь скомпоновав из следующих сообщений локализации: - -```js -const messages = { - en: { - term1: "I Accept xxx's", - term2: 'Terms of Service Agreement' - } -} -``` - -И в итоге шаблон станет выглядеть так: - -```html -{{ $t('term1') }}{{ $t('term2') }}
-``` - -Результат: - -```html -I accept xxx Terms of Service Agreement
-``` - -Это выглядит очень громоздко, но если перенести тег `` в сообщение локализации, то добавится вероятность XSS-уязвимости из-за применения `v-html="$t('term')"`. - -Этого можно избежать воспользовавшись функциональным компонентом `i18n`. Например: - -```html -- You can change your flight until - 15 minutes from departure. -
- -- You can change your flight until - 15 minutes from departure. -
- -- You can refund your ticket until 30 minutes from - departure. -
- -{{ $t('key1') }}
- -{{ $t('nested.message1') }}
- -{{ $t('errors[0]') }}
- -{{ $t('errors[1].internal1') }}
- -{{ $t('errors[2][0]') }}
-это сообщение 1
- -это вложенное сообщение 1
- -это сообщение кода ошибки 0
- -это внутреннее сообщение кода ошибки 1
- -это вложенный массив ошибки 1
-{{ $t('message.linked') }}
-``` - -Результат: - -```html -DIO: the world !!!!
-``` - -### Форматирование связанных сообщений локализации - -Если важен регистр символов в переводе, то можно управлять регистром связанного сообщения локализации. Связанные сообщения можно отформатировать используя модификатор `@.modifier:key` - -Доступны следующие модификаторы: - -* `upper`: Форматирование в верхний регистр всех символов в связанном сообщении. -* `lower`: Форматирование в нижний регистр всех символов в связанном сообщении. -* `capitalize`: Форматирование заглавной первой буквы в связанном сообщении. - -Сообщения локализации: - -```js -const messages = { - en: { - message: { - homeAddress: 'Home address', - missingHomeAddress: 'Please provide @.lower:message.homeAddress' - } - }, - ru: { - message: { - homeAddress: 'Домашний адрес', - missingHomeAddress: 'Пожалуйста укажите @.lower:message.homeAddress' - } - } -} -``` - -```html - - -{{ $t('message.missingHomeAddress') }}
-``` - -Результат: - -```html - - -Пожалуйста укажите домашний адрес
-``` - -При необходимости можно добавлять новые модификаторы или перезаписывать существующие через опцию `modifiers` в конструкторе `VueI18n`. - -```js -const i18n = new VueI18n({ - locale: 'ru', - modifiers: { - // Добавление нового модификатора - snakeCase: str => str.split(' ').join('-') - }, - messages: { - // ... - }, -}) -``` - -### Группировка с помощью скобок - -Ключ связанного сообщения также можно указывать в виде `@:(message.foo.bar.baz)`, где ссылка на другой ключ перевода обрамляется в скобки `()`. - -Подобное может потребоваться, если за ссылкой на другое сообщение `@:message.something` требуется поставить точку `.`, которая в противном случае считалась бы частью ссылки. - -Сообщения локализации: - -```js -const messages = { - en: { - message: { - dio: 'DIO', - linked: "There's a reason, you lost, @:(message.dio)." - } - }, - ru: { - message: { - dio: 'DIO', - linked: "Есть причина по которой ты проиграл, @:(message.dio)." - } - } -} -``` - -Шаблон: - -```html -{{ $t('message.linked') }}
-``` - -Результат: - -```html -There's a reason, you lost, DIO.
-``` - -## Функция для сообщения - -vue-i18n рекомендует использовать строки для формата списком или именованного формата в качестве сообщения локализации при переводе сообщений. - -Однако бывают ситуации, когда из-за сложного синтаксиса языка, необходима полная мощь возможностей JavaScript. В таком случае, вместо строковых сообщений можно использовать **функцию для сообщения**. - -Функция ниже просто возвращает приветствие: - -```js -const messages = { - en: { - greeting: (ctx) => 'hello!' - }, - ru: { - greeting: (ctx) => 'привет!' - } -} -``` - -Использовать функцию для сообщения очень просто! Необходимо просто указать ключ с помощью `$t` или `t`: - -```html -{{ $t('greeting') }}
-``` - -Результат будет таким: - -```html -привет!
-``` - -Используется возвращаемый результат из функции для сообщения. - -### Именованный формат - -vue-i18n поддерживает [именованный формат](./formatting.md#именованный-формат) для строковых сообщений. vue-i18n интерполирует значения с помощью `$t` или `t` и выводит их. - -Тоже самое можно сделать и с функцией для сообщения, используя **контекст сообщения**: - -Пример приветствия: - -```js -const messages = { - en: { - greeting: (ctx) => `hello, ${ctx.named('name')}!` - }, - ru: { - greeting: (ctx) => `привет, ${ctx.named('name')}!` - } -} -``` - -Шаблон: - -```html -{{ $t('greeting', { name: 'DIO' }) }}
-``` - -Результат: - -```html -привет, DIO!
-``` - -Контекст сообщения предоставляет доступ к функции `named`. Необходимо указать ключ, указываемым для `$t` или `t`, который разрешится требуемым значением. - -### Формат списков - -Использование формата списков аналогично именованному формату, описанному выше. - -vue-i18n поддерживает [формат списков](./formatting.md#формат-списков) для строковых сообщений. vue-i18n интерполирует значения с помощью `$t` или `t` и выводит их. - -Тоже самое можно сделать и с функцией для сообщения, используя **контекст сообщения**: - -Пример приветствия: - -```js -const messages = { - en: { - greeting: (ctx) => `hello, ${ctx.list(0)}!` - }, - ru: { - greeting: (ctx) => `привет, ${ctx.list(0)}!` - } -} -``` - -Шаблон: - -```html -{{ $t('greeting', ['DIO']) }}
-``` - -Результат: - -```html -привет, DIO!
-``` - -Контекст сообщения предоставляет доступ к функции `list`. Необходимо указать ключ, указываемым для `$t` или `t`, который разрешится требуемым значением. - -### Ограничение - -В функции для сообщения следующие возможности, которые доступны в строковом варианте, не будут доступны через контекст сообщения: - -- Связанные сообщения локализации -- Плюрализация diff --git a/docs-old/ru/guide/number.md b/docs-old/ru/guide/number.md deleted file mode 100644 index b9bb04f1d..000000000 --- a/docs-old/ru/guide/number.md +++ /dev/null @@ -1,142 +0,0 @@ -# Локализация чисел - -:::tip Поддержка с версии -:new: 7.0+ -::: - -Можно выполнять локализацию чисел по соответствующему формату. - -Пример формата для чисел: - -```js -const numberFormats = { - 'en-US': { - currency: { - style: 'currency', - currency: 'USD' - } - }, - 'ru-RU': { - currency: { - style: 'currency', - currency: 'RUB', - currencyDisplay: 'symbol' - } - } -} -``` - -Как указано выше, можно задать числовые форматы (например, `currency` для валюты) используя [опции ECMA-402 Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat). - -После этого, для возможности использования данного формата в сообщениях локализации, необходимо задать опцию `numberFormats` конструктора `VueI18n`: - -```js -const i18n = new VueI18n({ - numberFormats -}) - -new Vue({ - i18n -}).$mount('#app') -``` - -Шаблон: - -```html -{{ $n(100, 'currency') }}
-{{ $n(100, 'currency', 'ru-RU') }}
-$100.00
-100,00 ₽
-{{ $tc('car', 1) }}
-{{ $tc('car', 2) }}
- -{{ $tc('apple', 0) }}
-{{ $tc('apple', 1) }}
-{{ $tc('apple', 10, { count: 10 }) }}
-``` - -Результат: - -```html -машина
-машины
- -нет яблок
-одно яблоко
-10 яблок
-``` - -## Аргумент для доступа к числу - -Нет необходимости явно передавать число для плюрализации. В сообщениях локализации число доступно через именованные аргументы `{count}` и/или `{n}`. При желании их можно переопределить. - -Сообщения локализации: - -```js -const messages = { - en: { - apple: 'no apples | one apple | {count} apples', - banana: 'no bananas | {n} banana | {n} bananas' - }, - ru: { - apple: 'нет яблок | одно яблоко | {count} яблок', - banana: 'нет бананов | {n} банан | {n} бананов' - } -} -``` - -Шаблон: - -```html -{{ $tc('apple', 10, { count: 10 }) }}
-{{ $tc('apple', 10) }}
- -{{ $tc('banana', 1, { n: 1 }) }}
-{{ $tc('banana', 1) }}
-{{ $tc('banana', 100, { n: 'слишком много' }) }}
-``` - -Результат: - -```html -10 яблок
-10 яблок
- -1 банан
-1 банан
-слишком много бананов
-``` - -## Пользовательская плюрализация - -Стандартная реализация плюрализации не подходит для некоторых языков (к примеру, в славянских языках другие правила множественности). - -Можно предоставить собственную реализацию, передав `pluralizationRules` в конструктор `VueI18n`. - -Упрощенный пример для славянских языков (Русский, Украинский и другие): -```js -new VueI18n({ - // Ключ - язык, для которого будет применяться правило, в этом примере - `'ru'` - // Value - функция плюрализации - pluralizationRules: { - /** - * @param choice {number} индекс выбора, переданный в $tc: `$tc('path.to.rule', choiceIndex)` - * @param choicesLength {number} общее количество доступных вариантов - * @returns финальный индекс для выбора соответственного варианта слова - */ - 'ru': function(choice, choicesLength) { - // this === VueI18n экземпляра, так что свойство locale также существует здесь - - if (choice === 0) { - return 0; - } - - const teen = choice > 10 && choice < 20; - const endsWithOne = choice % 10 === 1; - - if (choicesLength < 4) { - return (!teen && endsWithOne) ? 1 : 2; - } - if (!teen && endsWithOne) { - return 1; - } - if (!teen && choice % 10 >= 2 && choice % 10 <= 4) { - return 2; - } - - return (choicesLength < 4) ? 2 : 3; - } - } -}) -``` - -Такая реализация позволит использовать: - -```js -const messages = { - ru: { - car: '0 машин | {n} машина | {n} машины | {n} машин', - banana: 'нет бананов | {n} банан | {n} банана | {n} бананов' - } -} -``` - -Для такого формата вариантов `0 вещей | количество вещей заканчивается на 1 | количество вещей заканчивается на 2-4 | количество вещей заканчивается на 5-9, 0 и числа от 11 до 19`. -P.S. Славянское множественное число - сложное явление, подробнее о нем можно прочитать [здесь](http://www.russianlessons.net/lessons/lesson11_main.php). - -В шаблоне, по-прежнему, необходимо использовать `$tc()` вместо `$t()`: - -```html -{{ $tc('car', 1) }}
-{{ $tc('car', 2) }}
-{{ $tc('car', 4) }}
-{{ $tc('car', 12) }}
-{{ $tc('car', 21) }}
- -{{ $tc('banana', 0) }}
-{{ $tc('banana', 4) }}
-{{ $tc('banana', 11) }}
-{{ $tc('banana', 31) }}
-``` - -Результат: - -```html -1 машина
-2 машины
-4 машины
-12 машин
-21 машина
- -нет бананов
-4 банана
-11 бананов
-31 банан
-``` - -### Плюрализация по умолчанию - -Если для используемой локали не предоставить правило плюрализации, [по умолчанию](#плюрализация) будет использовано правило для английского языка diff --git a/docs-old/ru/guide/sfc.md b/docs-old/ru/guide/sfc.md deleted file mode 100644 index 321f84a94..000000000 --- a/docs-old/ru/guide/sfc.md +++ /dev/null @@ -1,408 +0,0 @@ -# Однофайловые компоненты - -## Базовое использование - -В компоненте Vue или приложении Vue с использованием однофайловых компонентов, можно управлять сообщениями локализации с помощью пользовательского блока `i18n`. - -Код компонента из [примера использования с однофайловыми компонентами](https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc): - -```vue -Сообщение: {{ $t('hello') }}
-Сообщение: {{ $t('hello') }}
-{{ parent.$t('hello') }}
- -``` diff --git a/docs-old/ru/guide/tooling.md b/docs-old/ru/guide/tooling.md deleted file mode 100644 index 92fa19a93..000000000 --- a/docs-old/ru/guide/tooling.md +++ /dev/null @@ -1,72 +0,0 @@ -# Инструментарий - -Для поддержки i18n приложений Vue некоторые инструменты предоставляются официально. - -Также есть инструменты от сторонних разработчиков, которые интегрируются в Vue I18n. - -## Официальный инструментарий - -### Плагин для Vue CLI - -[vue-cli-plugin-i18n](https://github.com/kazupon/vue-cli-plugin-i18n) — официальный плагин для Vue CLI. - -С помощью этого плагина можно настроить среду i18n для приложения Vue и поддерживать среду разработки i18n. - -### Модуль для Nuxt - -[nuxt-i18n](https://github.com/nuxt-community/nuxt-i18n/) — соответствующий модуль для Nuxt.js. - -### Загрузчик для Webpack - -[vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader) — официальный загрузчик для webpack. - -С помощью этого загрузчика можно использовать пользовательские блоки `i18n` в однофайловых компонентах. - -Подробнее о пользовательских блоках `i18n` можно изучить в разделе [Однофайловых компонентов](./sfc.md) - -### Плагин для ESLint - -[eslint-plugin-vue-i18n](https://intlify.github.io/eslint-plugin-vue-i18n/) — ESLint-плагин для Vue I18n. - -Позволяет легко интегрировать функции проверки локализацией в ваше приложение Vue.js. - -### Расширения - -[vue-i18n-extensions](https://github.com/kazupon/vue-i18n-extensions) — предоставляет некоторые расширения дляVue I18n. - -Эти расширения позволяет использовать в рендеринге на стороне сервера (SSR) и улучшить производительность i18n. - -## Сторонние разработки - -### BabelEdit - -[BabelEdit](https://www.codeandweb.com/babeledit) — редактор переводов для веб-приложений. - -BabelEdit может переводить файлы `json`, а также умеет работать с пользовательскими блоками `i18n` однофайловых компонентов. - -Подробнее про BabelEdit можно узнать [на странице введения](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n). - -### i18n Ally - -[i18n Ally](https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally) — расширение i18n для VSCode. - -i18n Ally предоставляет потрясающий DX для разработки с использованием i18n. - -Подробнее о расширении i18n Ally можно изучить в [README](https://github.com/antfu/i18n-ally/blob/master/README.md). - -### i18nPlugin (платформа intellij) - -[i18nPlugin](https://github.com/nyavro/i18nPlugin) — плагин Intellij idea для поддержки i18next ([Jetbrains plugin page](https://plugins.jetbrains.com/plugin/12981-i18n-support)). - -Плагин для i18n typescript/javascript/PHP. Поддерживает vue-i18n. Для включения поддержки vue-i18n в настройках -> Tools -> i18n Plugin configuration выберите "Vue-i18n". Необходимо установить каталоги с файлами локализаций (по умолчанию locales). - -### vue-i18n-extract - -[vue-i18n-extract](https://github.com/pixari/vue-i18n-extract) выполняет статический анализ проекта Vue.js на основе vue-i18n и сообщает следующую информацию: - -- список всех **неиспользуемых ключей vue-i18n** (записи, найденные в файлах перевода, но не использованные в проекте) -- список всех **пропущенных ключей** (записи, найденные в проекте, но отсутствующие в файлах перевода) - -Имеется возможность отобразить результат в консоли или записать его в файл json. - -Пропущенные ключи также могут быть автоматически добавлены в заданные файлы переводов. diff --git a/docs-old/ru/installation.md b/docs-old/ru/installation.md deleted file mode 100644 index 2df4d851d..000000000 --- a/docs-old/ru/installation.md +++ /dev/null @@ -1,85 +0,0 @@ -# Установка - -## Примечание совместимости - -- Vue.js версии `2.0.0`+ - -## Загрузка файла / CDN - -{{ $t("message.hello") }}
-Привет мир
-{{ $t("message.hello") }}
-こんにちは、世界
-通过简单的 API 将你的应用国际化
-除了简单的翻译外，还支持复数，数字，日期时间等本地化处理
-你可以在单文件组件上管理语言环境信息
-Component1 locale messages: {{ $t("message.hello") }}
-Fallback global locale messages: {{ $t("message.greeting") }}
-{{ $t("message.hello") }}
-こんにちは、世界
-Component1 locale messages: こんにちは、component1
-Fallback global locale messages: おはようございます
-This is good service
-
-
-{{ $d(new Date(), 'short') }}
-{{ $d(new Date(), 'long', 'ja-JP') }}
-Jan 18, 2021
-2021年1月18日日曜日 午前5:47
-hi there!
-hi there!
-こんにちは、kazupon！
-hi kazupon!
-{{ $t('message') }}
-``` - -输出如下： - -```html -hello world
-``` - -注意，默认情况下回退到 `fallbackLocale` 会产生两个控制台警告： - -``` -[vue-i18n] Value of key 'message' is not a string! -[vue-i18n] Fall back to translate the keypath 'message' with 'en' locale. -``` - -为了避免这些警告 (同时保留那些完全没有翻译给定关键字的警告)，需初始化 `VueI18n` 实例时设置 `silentFallbackWarn：true`。 - -## 回退插值 - -由于翻译的键值是字符串，因此也可以作为翻译的值： - -```javascript -const messages = { - ja: { - 'Hello world': 'こんにちは、世界' - } -} -``` - -这是一种很自然的书写方式，如果在`message`中找不到相应的键值将回退到原本的语言： - -*注意: `fallbackRoot`的优先级高于`formatFallbackMessages`* - -```html -{{ $t('Hello world') }}
-``` - -为了实现此功能，可以通过设置`formatFallbackMessages`为`true`： - -```javascript -const messages = { - ru: { - 'Hello {name}': 'Здравствуйте {name}' - } -} - -const i18n = new VueI18n({ - locale: 'ru', - fallbackLocale: 'en', - formatFallbackMessages: true, - messages -}) -``` - -模板如下： - -```html -{{ $t('Hello {name}', { name: 'John' }}) }}
-{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}
-``` - -将会输出： - -```html -Здравствуйте John
-The weather today is sunny!
-``` diff --git a/docs-old/zh/guide/formatting.md b/docs-old/zh/guide/formatting.md deleted file mode 100644 index a3e3d1105..000000000 --- a/docs-old/zh/guide/formatting.md +++ /dev/null @@ -1,200 +0,0 @@ -# 格式化 - -## 具名格式 - -语言环境信息如下： - -```js -const messages = { - en: { - message: { - hello: '{msg} world' - } - } -} -``` - -模板如下： - -```html -{{ $t('message.hello', { msg: 'hello' }) }}
-``` - -输出如下： - -```html -hello world
-``` - -## 列表格式 - -语言环境信息如下： - -```js -const messages = { - en: { - message: { - hello: '{0} world' - } - } -} -``` - -模板如下： - -```html -{{ $t('message.hello', ['hello']) }}
-``` - -输出如下： - -```html -hello world
-``` - -列表格式也接受类似数组的对象： - - -```html -{{ $t('message.hello', {'0': 'hello'}) }}
-``` - -输出如下： - -```html -hello world
-``` - -## HTML 格式化 - -:::warning 提示 -:warning: 在你的网站上动态插入任意 HTML 可能非常危险，因为它很容易导致 XSS 攻击。仅对可信内容使用 HTML 插值，而不对用户提供的内容使用。 - -我们建议使用[组件插值](interpolation.md) 功能。 -::: - -在某些情况下，你可能希望将翻译呈现为 HTML 信息而不是静态字符串。 - - -```js -const messages = { - en: { - message: { - hello: 'hellohello - -world
-``` - - -## 支持 ruby on rails 的 i18n 格式 - -语言环境信息如下： - -```js -const messages = { - en: { - message: { - hello: '%{msg} world' - } - } -} -``` - -模板如下： - -```html -{{ $t('message.hello', { msg: 'hello' }) }}
-``` - -输出如下： - -```html -hello world
-``` - -## 自定义格式 - -有时，你可能需要使用自定义格式进行翻译 (例如：[ICU 信息语法](http://userguide.icu-project.org/formatparse/messages))。 - -你可以使用实现[格式化接口](https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L41-L43) 的自定义格式化函数来实现。 - -以下使用 ES2015 class 语法的自定义格式化函数： - -```js -// 实现自定义格式 -class CustomFormatter { - constructor (options) { - // ... - } - - // - // 插值 - // - // @param {string} 信息 - // 列表或具名格式的字符串。 - // 例如： - // - 具名格式：'Hi {name}' - // - 列表格式：'Hi {0}' - // - // @param {Object | Array} 值 - // `message` 插值的值 - // 使用 `$t`， `$tc` 和 `i18n` 函数式组件传递值。 - // e.g. - // - $t('hello', { name: 'kazupon' }) -> 传递值：Object `{ name: 'kazupon' }` - // - $t('hello', ['kazupon']) -> 传递值：Array `['kazupon']` - // - `i18n` 函数式组件 (组件插值) - //kazupon
- //how are you?
- //I accept xxx Terms of Service Agreement
-``` - -在上面的信息中，如果你使用 `$t`，可能你会尝试编写以下语言环境信息： - -```js -const messages = { - en: { - term1: 'I Accept xxx\'s', - term2: 'Terms of Service Agreement' - } -} -``` - -你可能会尝试在以下模板中实现： - -```html -{{ $t('term1') }}{{ $t('term2') }}
-``` - -输出： - -```html -I accept xxx Terms of Service Agreement
-``` - -这是非常麻烦的，如果在语言环境信息中配置 `` 标签，则可能由于使用了 `v-html="$t('term')"` 进行本地化而存在被 XSS 攻击的可能性。 - -你可以使用 `i18n` 函数式组件来避免它。例如： - -```html -- You can change your flight until 15 minutes from departure. -
- -- You can refund your ticket until 30 minutes from departure. -
- -{{ $t('key1') }}
- -{{ $t('nested.message1') }}
- -{{ $t('errors[0]') }}
- -{{ $t('errors[1].internal1') }}
- -{{ $t('errors[2][0]') }}
-this is message1
- -this is nested message1
- -this is 0 error code message
- -this is internal 1 error message
- -this is nested array error 1
-{{ $t('message.linked') }}
-``` - -输出如下： - -```html -DIO: the world !!!!
-``` -### 格式化链接的语言环境消息 - -如果语言区分字符大小写，则可能需要控制链接的语言环境消息的大小写。 -链接的消息可以用修饰符 `@.modifier:key` 格式化。 - -以下修饰符当前可用。 - -* `upper`: 链接消息中的所有字符均大写 -* `lower`: 小写链接消息中的所有字符 -* `capitalize`: 大写链接消息中的第一个字符 - -语言环境消息如下： - -```javascript -const messages = { - en: { - message: { - homeAddress: 'Home address', - missingHomeAddress: 'Please provide @.lower:message.homeAddress' - } - } -} -``` - -```html - - -{{ $t('message.missingHomeAddress') }}
-``` - -输出以下内容： - -```html - - -Please provide home address
-``` - -您可以添加修饰符或覆盖将 `modifiers` 选项传递给 `VueI18n` 构造函数的现有修饰符。 - -```javascript -const i18n = new VueI18n({ - locale: 'en', - modifiers: { - snakeCase: (str) => str.split(' ').join('-') - }, - messages: { - // ... - }, -}) -``` - -### 按括号分组 - -链接到的语言环境信息的键名也可以形如 `@:(message.foo.bar.baz)`，其中链接到另一段翻译的键名在括号 `()` 里。 - -如果链接 `@:message.something` 后紧跟着一个点 `.`，则此选项非常有用，因为它本不该成为但却成为了链接的一部分。 - -语言环境信息如下： - -```js -const messages = { - en: { - message: { - dio: 'DIO', - linked: 'There\'s a reason, you lost, @:(message.dio).' - } - } -} -``` - -模板如下： - -```html -{{ $t('message.linked') }}
-``` - -输出如下： - -```html -There's a reason, you lost, DIO.
-``` - -## 留言功能 - -vue-i18n 建议在翻译消息时使用基于列表的字符串或命名格式作为语言环境消息。 - -但是，在某些情况下，由于复杂的语言语法，您确实需要JavaScript的全部编程功能。 因此，您可以使用 **message function** 来代替基于字符串的消息。 - -以下是一个返回简单问候语的消息函数： - -```js -const messages = { - en: { - greeting: (ctx) => 'hello!' - } -} -``` - -使用消息功能非常容易！ 您只需使用 `$t` 或 `t` 指定消息功能的键： - -```html -{{ $t('greeting') }}
-``` - -输出如下： - -```html -hello!
-``` - -消息功能输出消息，该消息具有消息功能的返回值。 - -### 命名格式 - -vue-i18n 支持[命名格式](./formatting.md#named-formatting) 作为基于字符串的消息格式。 vue-i18n用$ t或t插值参数值，并可以将其输出。 - -使用 **消息上下文** 的消息功能可以完成以下操作： - -这是问候的示例： - -```js -const messages = { - en: { - greeting: (ctx) => `hello, ${ctx.named('name')}!` - } -} -``` - -模板： - -```html -{{ $t('greeting', { name: 'DIO' }) }}
-``` - -输出如下： - -```html -hello, DIO!
-``` - -消息上下文具有命名函数。 您需要指定键来解析以 `$t` 或 `t` 命名的值。 - -### 清单格式 - -列表格式的使用类似于上述命名格式。 - -vue-i18n 支持 [列表格式](./formatting.md#list-formatting) 作为基于字符串的消息格式。 vue-i18n用$ t或t插值参数值，并可以将其输出。 - -您可以通过使用消息上下文对消息函数执行相同的操作： - -这是问候的示例： - -```js -const messages = { - en: { - greeting: (ctx) => `hello, ${ctx.list(0)}!` - } -} -``` - -模板： - -```html -{{ $t('greeting', ['DIO']) }}
-``` - -输出如下： - -```html -hello, DIO!
-``` - -消息上下文具有列表功能。 您需要指定索引来解析由 `$t` 或 `t` 列表指定的值。 - -### 局限性 - -在消息功能中，以下基于字符串提供的功能无法通过消息上下文使用： - -- 链接的区域设置消息 -- 复数 diff --git a/docs-old/zh/guide/number.md b/docs-old/zh/guide/number.md deleted file mode 100644 index 8efbd0052..000000000 --- a/docs-old/zh/guide/number.md +++ /dev/null @@ -1,133 +0,0 @@ -# 数字本地化 - -:::tip 支持版本 -:new: 7.0+ 新增 -::: - -你可以使用你定义的格式来本地化数字。 - -数字格式如下： - -```js -const numberFormats = { - 'en-US': { - currency: { - style: 'currency', - currency: 'USD' - } - }, - 'ja-JP': { - currency: { - style: 'currency', - currency: 'JPY', - currencyDisplay: 'symbol' - } - } -} -``` - -如上，你可以指定具名的 (例如：`currency` 等) 的数字格式，并且需要使用 [ECMA-402 Intl.NumberFormat 的选项](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat)。 - -之后就像语言环境信息一样，你需要指定 `VueI18n` 构造函数的 `numberFormats` 选项： - -```js -const i18n = new VueI18n({ - numberFormats -}) - -new Vue({ - i18n -}).$mount('#app') -``` - -模板如下： - -```html -{{ $n(100, 'currency') }}
-{{ $n(100, 'currency', 'ja-JP') }}
-$100.00
-￥100
-{{ $tc('car', 1) }}
-{{ $tc('car', 2) }}
- -{{ $tc('apple', 0) }}
-{{ $tc('apple', 1) }}
-{{ $tc('apple', 10, { count: 10 }) }}
-``` - -输出如下： - -```html -car
-cars
- -no apples
-one apple
-10 apples
-``` - -## 通过预定义的参数访问该数字 - -你无需明确指定复数的数字。可以通过预定义的命名参数 `{count}` 和/或 `{n}` 在语言环境信息中访问该数字。如有必要，你可以覆盖这些预定义的命名参数。 - -语言环境信息如下： - -```js -const messages = { - en: { - apple: 'no apples | one apple | {count} apples', - banana: 'no bananas | {n} banana | {n} bananas' - } -} -``` - -模板如下： - -```html -{{ $tc('apple', 10, { count: 10 }) }}
-{{ $tc('apple', 10) }}
- -{{ $tc('banana', 1, { n: 1 }) }}
-{{ $tc('banana', 1) }}
-{{ $tc('banana', 100, { n: 'too many' }) }}
-``` - -输出如下： - -```html -10 apples
-10 apples
- -1 banana
-1 banana
-too many bananas
-``` - - -## 自定义复数 - -但是，这种多元化并不适用于所有语言（例如，斯拉夫语言具有不同的多元化规则）。 - -为了实现这些规则，您可以将可选的 `pluralizationRules` 对象传递给`VueI18n` 构造函数选项。 - -使用针对斯拉夫语言（俄语，乌克兰语等）的规则的非常简化的示例： -```js -new VueI18n({ - // Key - 在这种情况下，用于规则 `'ru'` 的语言 - // Value - 选择正确的复数形式的功能 - pluralizationRules: { - /** - * @param choice {number} 输入给$的选择索引 $tc：`$tc('path.to.rule', choiceIndex)` - * @param choicesLength {number} 可用选择总数 - * @returns 最终选择索引以选择复数单词 - */ - 'ru': function(choice, choicesLength) { - // this === VueI18n 实例，因此本地属性也存在于此 - - if (choice === 0) { - return 0; - } - - const teen = choice > 10 && choice < 20; - const endsWithOne = choice % 10 === 1; - - if (choicesLength < 4) { - return (!teen && endsWithOne) ? 1 : 2; - } - if (!teen && endsWithOne) { - return 1; - } - if (!teen && choice % 10 >= 2 && choice % 10 <= 4) { - return 2; - } - - return (choicesLength < 4) ? 2 : 3; - } - } -}) -``` - -这将有效地实现以下目的： - -```javascript -const messages = { - ru: { - car: '0 машин | {n} машина | {n} машины | {n} машин', - banana: 'нет бананов | {n} банан | {n} банана | {n} бананов' - } -} -``` -格式在哪里 `0 东西 | 事情以结尾结束 1 | 事情以结尾结束 2-4 | 事情以结尾结束 5-9, 0 和青少年 (10-19)`. -附言 斯拉夫多元化是困难的，您可以阅读有关它的更多信息 [这里](http://www.russianlessons.net/lessons/lesson11_main.php). - -你的模板仍然需要使用 `$tc()`，而不是 `$t()` ： - -```html -{{ $tc('car', 1) }}
-{{ $tc('car', 2) }}
-{{ $tc('car', 4) }}
-{{ $tc('car', 12) }}
-{{ $tc('car', 21) }}
- -{{ $tc('banana', 0) }}
-{{ $tc('banana', 4) }}
-{{ $tc('banana', 11) }}
-{{ $tc('banana', 31) }}
-``` - -结果如下： - -```html -1 машина
-2 машины
-4 машины
-12 машин
-21 машина
- -нет бананов
-4 банана
-11 бананов
-31 банан
-``` - -### 默认多元 - -如果在多元化地图中找不到您当前的语言环境，则将使用英语的 [默认](#复数) 规则。 diff --git a/docs-old/zh/guide/sfc.md b/docs-old/zh/guide/sfc.md deleted file mode 100644 index d796bb94a..000000000 --- a/docs-old/zh/guide/sfc.md +++ /dev/null @@ -1,397 +0,0 @@ -# 单文件组件 - -## 基本用法 - -如果使用单文件组件构建 Vue 组件或 Vue 应用程序，则可以管理 `i18n` 自定义块的语言环境信息。 - -以下是[单文件组件示例](https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc): - -```vue -message: {{ $t('hello') }}
-message: {{ $t('hello') }}
-{{ parent.$t('hello') }}
- -``` diff --git a/docs-old/zh/guide/tooling.md b/docs-old/zh/guide/tooling.md deleted file mode 100644 index 36eded149..000000000 --- a/docs-old/zh/guide/tooling.md +++ /dev/null @@ -1,67 +0,0 @@ -# 工具 - -为了支持开发，我们官方提供了一些工具。 - -此外，还有第三方供应商提供的集成了 Vue I18n 的工具。 - -## 官方工具 - -### Vue Cli 插件 - -[vue-cli-plugin-i18n](https://github.com/kazupon/vue-cli-plugin-i18n) 是官方提供的 Vue Cli 插件。 - -使用此插件，您可以为Vue应用程序设置 i18n 环境，并支持 i18n 开发环境。 - -### Webpack Loader - -[vue-i18n-loader](https://github.com/kazupon/vue-i18n-loader) 是官方提供的 Webpack Loader。 -使用此加载程序，您可以在单个文件组件中使用 `i18n` 自定义块。 - -关于 `i18n` 自定义块，请参见 [单文件组件](./sfc.md) - -### ESLint 插件 - -[eslint-plugin-vue-i18n](https://intlify.github.io/eslint-plugin-vue-i18n/) 是为 Vue I18n 编写的 ESLint 插件。 - -它可以轻松地将一些本地化 lint 功能集成到 Vue.js 应用程序中。 - -### Extensions - -在[vue-i18n-extensions](https://github.com/kazupon/vue-i18n-extensions) 你可以找到为 Vue I18n 编写的插件。 - -您可以使用此扩展来启用 SSR 并提高 Vue I18n 的性能。 - -## 第三方工具 - -### BabelEdit - -[BabelEdit](https://www.codeandweb.com/babeledit) 是 Web 应用程序的翻译编辑器。 - -BabelEdit可以翻译 `json` 文件，也可以翻译单文件组件的 `i18n` 自定义块。 - -欲了解更多，请看[教程](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n) - -### i18n Ally - -[i18n Ally](https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally) 是 VSCode 的 i18n 扩展。 - -i18n Ally 为您的 i18n 开发提供了出色的 DX。 - -在[自述文件](https://github.com/antfu/i18n-ally/blob/master/README.md)中了解有关 i18n Ally 的更多信息。 - -### i18nPlugin (intellij 平台) - -[i18nPlugin](https://github.com/nyavro/i18nPlugin) Intellij idea i18next 支持插件([Jetbrains 插件页面](https://plugins.jetbrains.com/plugin/12981-i18n-support))。 - -适用于 i18n typescript/javascript/PHP 的插件。 支持 vue-i18n。 要启用 vue-i18n 支持，请转到 设置- > 工具 -> i18n 插件配置，然后选中 "Vue-i18n"。 您需要设置您的语言环境目录（默认为语言环境）。 - -### vue-i18n-extract - -[vue-i18n-extract](https://github.com/pixari/vue-i18n-extract) 对基于 vue-i18n 的 Vue.js 项目执行静态分析，并报告以下信息： - -- 所有 **未使用的 vue-i18n 键**的列表（在语言文件中找到但在项目中未使用的条目） -- 所有 **缺失键** 的列表（在项目中使用但在语言文件中不存在的条目） - -可以在控制台中显示输出或将其写入json文件 - -丢失的键也可以自动添加到给定的语言文件中 diff --git a/docs-old/zh/installation.md b/docs-old/zh/installation.md deleted file mode 100644 index 426e4e107..000000000 --- a/docs-old/zh/installation.md +++ /dev/null @@ -1,66 +0,0 @@ -# 安装 - -## 兼容性说明 - -- Vue.js `2.0.0`+ - -## 直接下载 / CDN - -{{ $t("message.hello") }}
-こんにちは、世界
-
+
> [!IMPORTANT]
-Vue I18n v8 is no longer supported after 2025. Vue I18n v9 and Vue I18n v10 is in maintenance mode after 2025 July.
+
+Vue I18n v8 has reached EOL and is no longer actively maintained. Vue I18n v9 and Vue I18n v10 is in maintenance mode after 2025 July.
diff --git a/docs/guide/v8-docs.md b/docs/guide/v8-docs.md
deleted file mode 100644
index 9c908bf66..000000000
--- a/docs/guide/v8-docs.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Documentation for v8.x
-
-- [Introduction](https://github.com/intlify/vue-i18n/blob/master/docs-old/introduction.md)
-- [Getting started](https://github.com/intlify/vue-i18n/blob/master/docs-old/started.md)
-- [Installation](https://github.com/intlify/vue-i18n/blob/master/docs-old/installation.md)
-- Guide
- - [Formatting](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/formatting.md)
- - [Pluralization](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/pluralization.md)
- - [DateTime localization](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/datetime.md)
- - [Number localization](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/number.md)
- - [Locale messages syntax](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/messages.md)
- - [Fallback localization](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/fallback.md)
- - [Component based localization](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/component.md)
- - [Custom directive localization](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/directive.md)
- - [Component interpolation](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/interpolation.md)
- - [Single file components](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/sfc.md)
- - [Hot reloading](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/hot-reload.md)
- - [Locale changing](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/locale.md)
- - [Lazy loading translations](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/lazy-loading.md)
- - [Tooling](https://github.com/intlify/vue-i18n/blob/master/docs-old/guide/tooling.md)
-- [API references](https://github.com/intlify/vue-i18n/blob/master/docs-old/api/README.md)
-
diff --git a/docs/public/lifecycle2025-1.excalidraw b/docs/public/lifecycle2025-1.excalidraw
new file mode 100644
index 000000000..921724341
--- /dev/null
+++ b/docs/public/lifecycle2025-1.excalidraw
@@ -0,0 +1,1189 @@
+{
+ "type": "excalidraw",
+ "version": 2,
+ "source": "https://excalidraw.com",
+ "elements": [
+ {
+ "id": "YbPbE3iYZmV_3J4aIrZ0v",
+ "type": "text",
+ "x": 1128.2236916124564,
+ "y": 361.74584105795753,
+ "width": 77,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "white",
+ "backgroundColor": "#e64980",
+ "fillStyle": "hachure",
+ "strokeWidth": 1,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 1767348146,
+ "version": 219,
+ "versionNonce": 1477768050,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "Team 2",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "a3",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1733211872168,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "Team 2",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "KaaUzvllAfwSp4xX5xNzx",
+ "type": "line",
+ "x": 350.62500000000006,
+ "y": 162.2170718013658,
+ "width": 0,
+ "height": 323.1526724873608,
+ "angle": 0,
+ "strokeColor": "#495057",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 30,
+ "groupIds": [],
+ "strokeSharpness": "round",
+ "seed": 203664754,
+ "version": 411,
+ "versionNonce": 666349204,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 0,
+ 323.1526724873608
+ ]
+ ],
+ "lastCommittedPoint": null,
+ "startBinding": null,
+ "endBinding": null,
+ "startArrowhead": null,
+ "endArrowhead": null,
+ "index": "aK",
+ "frameId": null,
+ "roundness": {
+ "type": 2
+ },
+ "boundElements": [],
+ "updated": 1735049936982,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "DZZZ6ZgVkIprA06jL-kCX",
+ "type": "line",
+ "x": 696.0750992057751,
+ "y": 164.1835924161148,
+ "width": 0,
+ "height": 311.12990190977405,
+ "angle": 0,
+ "strokeColor": "#495057",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 30,
+ "groupIds": [],
+ "strokeSharpness": "round",
+ "seed": 1576087346,
+ "version": 352,
+ "versionNonce": 332346540,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 0,
+ 311.12990190977405
+ ]
+ ],
+ "lastCommittedPoint": null,
+ "startBinding": null,
+ "endBinding": null,
+ "startArrowhead": null,
+ "endArrowhead": null,
+ "index": "aL",
+ "frameId": null,
+ "roundness": {
+ "type": 2
+ },
+ "boundElements": [],
+ "updated": 1735049936982,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "9Zyu12Lh8d99PVFP35teh",
+ "type": "line",
+ "x": 869.3749999999998,
+ "y": 164.1124071733318,
+ "width": 0,
+ "height": 313.0937365643726,
+ "angle": 0,
+ "strokeColor": "#495057",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 30,
+ "groupIds": [],
+ "strokeSharpness": "round",
+ "seed": 640186610,
+ "version": 379,
+ "versionNonce": 996981780,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 0,
+ 313.0937365643726
+ ]
+ ],
+ "lastCommittedPoint": null,
+ "startBinding": null,
+ "endBinding": null,
+ "startArrowhead": null,
+ "endArrowhead": null,
+ "index": "aM",
+ "frameId": null,
+ "roundness": {
+ "type": 2
+ },
+ "boundElements": [],
+ "updated": 1735049936982,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "15nEBpxKWh7RahGfZNtxI",
+ "type": "line",
+ "x": 534.375,
+ "y": 163.5207405140126,
+ "width": 0,
+ "height": 314.31628636096366,
+ "angle": 0,
+ "strokeColor": "#495057",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 30,
+ "groupIds": [],
+ "strokeSharpness": "round",
+ "seed": 252732530,
+ "version": 298,
+ "versionNonce": 198950700,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 0,
+ 314.31628636096366
+ ]
+ ],
+ "lastCommittedPoint": null,
+ "startBinding": null,
+ "endBinding": null,
+ "startArrowhead": null,
+ "endArrowhead": null,
+ "index": "aO",
+ "frameId": null,
+ "roundness": {
+ "type": 2
+ },
+ "boundElements": [],
+ "updated": 1735049936982,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "3yvHCU_SIZ1dlBTsp-oQb",
+ "type": "rectangle",
+ "x": 295.04291083627874,
+ "y": 188.29490724404621,
+ "width": 400.8352374286324,
+ "height": 38.75,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 1682219442,
+ "version": 425,
+ "versionNonce": 105635405,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "index": "aR",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "8mOWQ0Sn_Bhr5PuIx4AkT",
+ "type": "text",
+ "x": 468.48231432901616,
+ "y": 196.65481162471866,
+ "width": 60.85995787382126,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 1863551794,
+ "version": 455,
+ "versionNonce": 322210989,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "Active",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "ab",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "Active",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "GzHn2uxkuMw6EAYG_1X4A",
+ "type": "rectangle",
+ "x": 171.33199398964427,
+ "y": 504.1467804793542,
+ "width": 31.25,
+ "height": 31.25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#fa5252",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "solid",
+ "roughness": 2,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 1153190898,
+ "version": 455,
+ "versionNonce": 976054828,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "index": "ag",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735049864166,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "ZF0_TKIDDzFADtju8oXdG",
+ "type": "text",
+ "x": 221.33199398964427,
+ "y": 511.3967804793542,
+ "width": 246.81979978084564,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#fa5252",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "solid",
+ "roughness": 2,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 1727135154,
+ "version": 479,
+ "versionNonce": 64439468,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "Maintenance (Hotfix only)",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "ah",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735049864166,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "Maintenance (Hotfix only)",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "type": "rectangle",
+ "version": 647,
+ "versionNonce": 1617022764,
+ "isDeleted": false,
+ "id": "tHx1CyVsgH2d2dkgpbIZn",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "angle": 0,
+ "x": 170.70699398964427,
+ "y": 568.5217804793542,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "width": 28.74999999999998,
+ "height": 27.50000000000002,
+ "seed": 587954034,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "boundElementIds": [],
+ "index": "ai",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735049864166,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "dHNxYCpsffyHkh_LlLILR",
+ "type": "text",
+ "x": 221.33199398964427,
+ "y": 570.1467804793542,
+ "width": 60.85995787382126,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#fa5252",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "solid",
+ "roughness": 2,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 424655154,
+ "version": 469,
+ "versionNonce": 272042412,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "Active",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "aj",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735049864166,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "Active",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "dBir_bIRB1stHdb-oF-hN",
+ "type": "text",
+ "x": 295.47037121881516,
+ "y": 131.006502505325,
+ "width": 115.27991855144501,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 963486322,
+ "version": 299,
+ "versionNonce": 1187159790,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "2024-07-01",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "ap",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1733211475536,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "2024-07-01",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "3I5lYgO0QCJSbgRxRLTPm",
+ "type": "text",
+ "x": 479.7708621160903,
+ "y": 131.35900116040705,
+ "width": 109.49991977214813,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 1472541550,
+ "version": 390,
+ "versionNonce": 2126006766,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "2025-01-01",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "aq",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1733211463249,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "2025-01-01",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "lSGvI5WivRLgRuHb_pqUm",
+ "type": "text",
+ "x": 642.7282219798635,
+ "y": 130.3964086792214,
+ "width": 114.83991611003876,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 444106994,
+ "version": 511,
+ "versionNonce": 19267502,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "2025-07-01",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "ar",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1733211467468,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "2025-07-01",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "KaXp0RpQyl81ul_cSHCiV",
+ "type": "text",
+ "x": 811.6663190600316,
+ "y": 130.9432335159513,
+ "width": 109.93992221355438,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 761725230,
+ "version": 539,
+ "versionNonce": 398021614,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "2026-01-01",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "as",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1733211472936,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "2026-01-01",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "Zl0Yw_XDHJ9iqVEZk5PqL",
+ "type": "rectangle",
+ "x": 699.2705127967365,
+ "y": 187.91427656489464,
+ "width": 168.42112417786478,
+ "height": 38.75,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#fa5252",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 471807790,
+ "version": 619,
+ "versionNonce": 800616205,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "index": "at",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "Yga-sG8cZZFBhIGv9ZJ77",
+ "type": "text",
+ "x": 727.7747972891052,
+ "y": 194.88869926248185,
+ "width": 118.4399322271347,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 793064494,
+ "version": 348,
+ "versionNonce": 709952877,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "Maintenance",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "au",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "Maintenance",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "iCre7vT6D1qTq2qjWTgWh",
+ "type": "rectangle",
+ "x": 295.52623592874687,
+ "y": 254.7439101687541,
+ "width": 481.4457781823576,
+ "height": 38.75,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 2101267246,
+ "version": 936,
+ "versionNonce": 1179111373,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "index": "av",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "c8fb3Iwg_p7uGfg-3-atm",
+ "type": "line",
+ "x": 955.9773524320833,
+ "y": 345.1350868969375,
+ "width": 69.05358268786904,
+ "height": 0.347979441555367,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "dotted",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "aw",
+ "roundness": {
+ "type": 2
+ },
+ "seed": 1697289010,
+ "version": 330,
+ "versionNonce": 565595693,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 69.05358268786904,
+ 0.347979441555367
+ ]
+ ],
+ "lastCommittedPoint": null,
+ "startBinding": null,
+ "endBinding": null,
+ "startArrowhead": null,
+ "endArrowhead": null
+ },
+ {
+ "id": "CIq_PLwyQmd8qYWoEmtMA",
+ "type": "text",
+ "x": 442.53017813626025,
+ "y": 263.86393401754776,
+ "width": 262.0598022341728,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 222507826,
+ "version": 898,
+ "versionNonce": 1535508621,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "Active (until 2025-06-30)",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "ay",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "Active (until 2025-06-30)",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "1-a1B88njz8X7CQ9T2Q1f",
+ "type": "text",
+ "x": 162.89090833540598,
+ "y": 197.37878591568966,
+ "width": 106.23992919921875,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 18151022,
+ "version": 332,
+ "versionNonce": 2037409517,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "VueI18n v9",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "b00",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "VueI18n v9",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "-6rj3sguQAgFE0FsnivSK",
+ "type": "text",
+ "x": 163.08457274115682,
+ "y": 260.41679937065373,
+ "width": 113.23992919921875,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 311348338,
+ "version": 393,
+ "versionNonce": 234815821,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "VueI18n v10",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "b01",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "VueI18n v10",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "rAlNxSvfI6_AJg3LtOBPF",
+ "type": "line",
+ "x": 1040.9107029563916,
+ "y": 154.736566890844,
+ "width": 0,
+ "height": 319.7277923075103,
+ "angle": 0,
+ "strokeColor": "#495057",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 30,
+ "groupIds": [],
+ "strokeSharpness": "round",
+ "seed": 1470226286,
+ "version": 456,
+ "versionNonce": 2365844,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 0,
+ 319.7277923075103
+ ]
+ ],
+ "lastCommittedPoint": null,
+ "startBinding": null,
+ "endBinding": null,
+ "startArrowhead": null,
+ "endArrowhead": null,
+ "index": "b05",
+ "frameId": null,
+ "roundness": {
+ "type": 2
+ },
+ "boundElements": [],
+ "updated": 1735049936982,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "-KaaHGdRmpp28fKgNzy7F",
+ "type": "text",
+ "x": 984.364127985853,
+ "y": 127.88824517190653,
+ "width": 115.27991855144501,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 1260307886,
+ "version": 615,
+ "versionNonce": 144256302,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "2026-07-01",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "b06",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1733211724257,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "2026-07-01",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "zhnxHeTa7Zt3eSYRsgNmr",
+ "type": "rectangle",
+ "x": 689.1258721820029,
+ "y": 323.8752929690932,
+ "width": 247.4418719323578,
+ "height": 38.75,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 1446955948,
+ "version": 1466,
+ "versionNonce": 512446381,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "index": "b07",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "E7k3rB2n8YGDcvHcDG7y6",
+ "type": "text",
+ "x": 783.1863604612711,
+ "y": 329.63310546909315,
+ "width": 60.85995787382126,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 569137556,
+ "version": 692,
+ "versionNonce": 1228853773,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "Active",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "b08",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "Active",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "lDNs8aJUE9LvIQukNh_ib",
+ "type": "rectangle",
+ "x": 780.3354648092493,
+ "y": 255.5510742190932,
+ "width": 88.03440542786478,
+ "height": 38.75,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#fa5252",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "solid",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 1189482156,
+ "version": 788,
+ "versionNonce": 722667629,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "index": "b0A",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false
+ },
+ {
+ "id": "1KHQmnwxK23ZG_-X_F-I4",
+ "type": "text",
+ "x": 903.3221545346144,
+ "y": 263.9924804690932,
+ "width": 118.4399322271347,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 685807276,
+ "version": 887,
+ "versionNonce": 97612493,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "Maintenance",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "b0B",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "Maintenance",
+ "autoResize": true,
+ "lineHeight": 1.25
+ },
+ {
+ "id": "469Ub5AUlLrEvUVkcttlm",
+ "type": "line",
+ "x": 832.2145227900735,
+ "y": 277.89838884247985,
+ "width": 57.24889518786904,
+ "height": 0.581708058444633,
+ "angle": 0,
+ "strokeColor": "#1e1e1e",
+ "backgroundColor": "transparent",
+ "fillStyle": "solid",
+ "strokeWidth": 2,
+ "strokeStyle": "dotted",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "frameId": null,
+ "index": "b0C",
+ "roundness": {
+ "type": 2
+ },
+ "seed": 1795179412,
+ "version": 559,
+ "versionNonce": 638816557,
+ "isDeleted": false,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false,
+ "points": [
+ [
+ 0,
+ 0
+ ],
+ [
+ 57.24889518786904,
+ -0.581708058444633
+ ]
+ ],
+ "lastCommittedPoint": null,
+ "startBinding": null,
+ "endBinding": null,
+ "startArrowhead": null,
+ "endArrowhead": null
+ },
+ {
+ "id": "e_BP_JEw5PPSVhTP4MSUg",
+ "type": "text",
+ "x": 163.68387479857233,
+ "y": 328.46513671909315,
+ "width": 104.89993286132812,
+ "height": 25,
+ "angle": 0,
+ "strokeColor": "#343a40",
+ "backgroundColor": "#82c91e",
+ "fillStyle": "solid",
+ "strokeWidth": 1,
+ "strokeStyle": "dashed",
+ "roughness": 1,
+ "opacity": 100,
+ "groupIds": [],
+ "strokeSharpness": "sharp",
+ "seed": 411179924,
+ "version": 476,
+ "versionNonce": 155378573,
+ "isDeleted": false,
+ "boundElementIds": null,
+ "text": "VueI18n v11",
+ "fontSize": 20,
+ "fontFamily": 1,
+ "textAlign": "left",
+ "verticalAlign": "top",
+ "baseline": 18,
+ "index": "b0D",
+ "frameId": null,
+ "roundness": null,
+ "boundElements": [],
+ "updated": 1735626077833,
+ "link": null,
+ "locked": false,
+ "containerId": null,
+ "originalText": "VueI18n v11",
+ "autoResize": true,
+ "lineHeight": 1.25
+ }
+ ],
+ "appState": {
+ "gridSize": 20,
+ "gridStep": 5,
+ "gridModeEnabled": false,
+ "viewBackgroundColor": "#ffffff"
+ },
+ "files": {}
+}
\ No newline at end of file
diff --git a/docs/public/lifecycle2025-1.png b/docs/public/lifecycle2025-1.png
new file mode 100644
index 000000000..700cd01b8
Binary files /dev/null and b/docs/public/lifecycle2025-1.png differ
diff --git a/docs/public/lifecycle2025-1.svg b/docs/public/lifecycle2025-1.svg
new file mode 100644
index 000000000..73d61725b
--- /dev/null
+++ b/docs/public/lifecycle2025-1.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
-