vue-simple-i18n
Probably the thinnest library to end all Vue i18n solutions within 1kb
Installation
or
npm install vue-simple-i18n
then
import vI18n from 'vue-simple-i18n'
Basic Usage
Use case: All places where you need to display in different languages.
Usage: See example.
Example:
{{locale.__name__}}{{welcome}}
const i18n =base: 'en-us' // The base fallback when specified language not exists, defaults to 'en-us'locale: 'zh-cn' // Global language, defaults to browser languagelocales:'en-us':__name__: 'English' // Specify a display name for each language is highly recommendedwelcome: 'Welcome {{name}} to the Wonderland!' // Translation, default template supported is vue-like without expressions'zh-cn':__name__: '简体中文'welcome: '{{name}},欢迎来到幻境!'// Where you put all your translationsel: '#app'data:name: 'Yukino' // Value used by translation templatev_locale: i18nlocale // Specify 'v_locale' could change locale component-widelocales: i18nlocalescomputed:...i18n // Map the translation!
Advanced Usage
Use Translation as a Method
Detail
Use case: Dynamic content in list rendering, temporary locale change, temporary value change etc.
Usage: Instead of map the translation to computed properties, map the translation directly to methods could use the translation as a method. Specify the v_locale
property in the argument could change the locale string-wide.
Example:
How to say "Hello" in different languagesName:{{helloMsg({v_locale: key, languageName: locale.__name__})}}
const i18n =locales:'en-us':__name__: 'English'hello: 'Hello'helloMsg: 'Hello {{name}}, this is how we say "{{hello}}" in {{languageName}}.''zh-cn':__name__: '简体中文'hello: '你好'helloMsg: '{{name}}您好,这是如何用{{languageName}}说“{{hello}}”。'// More locales...el: '#app'data:name: 'Yukino'locales: i18nlocalescomputed:...i18nmethods:...i18n
Programmatic Translation
Detail
Use case: Singular/plural, grammatical gender etc.
Usage: Insteas of a string, write a function that returns a string as the translation. The first argument passes to the function is the current Vue vm instance, the second argument is the value you passed to the template if you are using it as a method.
Example:
{{step({index})}}
const i18n =locales:'en-us':` step completed, total step.`el: '#app'data:steps: 10methods:...i18n
Dynamic Load
Detail
Use case: Add a new locale or modify existing ones on demand.
Usage: Simply modify the i18n instance you created. Refresh the Vue instance, it works!
Example:
// Now we have English as default but we don't have a Chinese translation// But the user specifies Chinese as his localeconst i18n =base: 'en-us'locale: 'zh-cn'locales:'en-us':welcome: 'Welcome {{name}} to the Wonderland!'// Create the Vue instance// Now all displayed locales are shown in Englishconst vm =el: '#app'data:name: 'Yukino'computed:...i18n// Now some how we get the Chinese translationconst ChineseTranslation =welcome: '{{name}},欢迎来到幻境!'i18nlocales'zh-cn' = ChineseTranslation// Don't forget to refresh the Vue instance for this gadget is not embeded into Vue's life cycle// Note that vm.$forceUpdate does not work on computed properties// We should trigger re-compute by modifying one of the property on the instance// A little bit hacky here but we have to do this due to the restriction// Here we choose 'name'let name = vmnamevmname = ''vmname = name
Nested Expressions
Detail
Use case: Display translations within translations etc.
Usage: See Use Translation as a Method.
Note: String level locales will not inherit in nested expressions.
MIT
License:Contributions welcomed, but please keep the minified js under 1kb ☝️