https://github.com/twcapps/vue-ts-locale
Advanced localization support for VueJS
https://github.com/twcapps/vue-ts-locale
Last synced: 4 months ago
JSON representation
Advanced localization support for VueJS
- Host: GitHub
- URL: https://github.com/twcapps/vue-ts-locale
- Owner: twcapps
- License: apache-2.0
- Created: 2017-04-14T07:36:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-07-14T13:03:43.000Z (over 8 years ago)
- Last Synced: 2025-07-10T02:52:19.090Z (5 months ago)
- Language: TypeScript
- Size: 15.6 KB
- Stars: 36
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-ts-locale - Advanced localization support for VueJS ` 📝 4 years ago` (Utilities [🔝](#readme))
- awesome-vue-zh - Vue-TS-区域 - 使用Vl.js 2中的Intl实现翻译的插件,支持打字稿. (公用事业 / 国际化)
- awesome-vue - vue-ts-locale - A plugin for implementing translations using Intl in Vue.js 2 with typescript support. (Components & Libraries / Utilities)
- awesome-vue - vue-ts-locale ★24 - A plugin for implementing translations using Intl in Vue.js 2 with typescript support. (Utilities / i18n)
- awesome-vue - vue-ts-locale - A plugin for implementing translations using Intl in Vue.js 2 with typescript support. (Utilities / i18n)
README
# VueJS TS Locale
[![Sponsored by][sponsor-img]][sponsor] [![Version][npm-version-img]][npm] [![Downloads][npm-downloads-img]][npm] [![Build Status][ci-img]][ci] [![Dependencies][deps-img]][deps]
[VueJS] Plugin for advanced localization of web applications using typescript
[sponsor-img]: https://img.shields.io/badge/Sponsored%20by-TWCAPPS-692446.svg
[sponsor]: https://www.twcapps.com
[VueJS]: https://github.com/vuejs/vue
[ci-img]: https://travis-ci.org/bartsidee/vue-ts-locale.svg
[ci]: https://travis-ci.org/bartsidee/vue-ts-locale
[deps]: https://david-dm.org/bartsidee/vue-ts-locale
[deps-img]: https://david-dm.org/bartsidee/vue-ts-locale.svg
[npm]: https://www.npmjs.com/package/vue-ts-locale
[npm-downloads-img]: https://img.shields.io/npm/dm/vue-ts-locale.svg
[npm-version-img]: https://img.shields.io/npm/v/vue-ts-locale.svg
## Links
- [GitHub](https://github.com/bartsidee/vue-ts-locale)
- [NPM](https://www.npmjs.com/package/vue-ts-locale)
## Installation
Should be installed locally in your project source code:
```bash
npm install vue-ts-locale --save
```
## Integration
Inside your VueJS application you have to register the `VueLocale` plugin:
```js
import VueLocale from "vue-ts-locale";
Vue.use(VueLocale,
{
language: SELECTED_LANGUAGE,
currency: SELECTED_CURRENCY,
messages: MESSAGE_TEXTS
})
```
While these are typical examples of values:
- `SELECTED_LANGUAGE`: `"de"`, `"en"`, `"fr"`, ... (any valid language identifier)
- `SELECTED_CURRENCY`: `"EUR"`, `"USD"`, ... (any valid currency from [CLDR data](http://www.currency-iso.org/dam/downloads/lists/list_one.xml))
- `MESSAGE_TEXTS`: `{ key : value, ...}`
## Loading required locale data
Depending on whether your clients support the `Intl` API + all relevant locales (prominent exceptions right now are NodeJS, Safari on Mac and Safari on iOS) the amount of data and polyfills to load differs.
### Loading Intl-Polyfill + Data for 4 Locales
```ts
import "intl";
import "intl/locale-data/jsonp/en.js";
import "intl/locale-data/jsonp/de.js";
import "intl/locale-data/jsonp/fr.js";
import "intl/locale-data/jsonp/es.js";
```
The data loaded here contains information on how to format dates (+ calendar data) and numbers (+ currencies).
## Usage
### Adding Messages
You should pass the matching locale data structure with relevant messages e.g. Dutch.
```js
let messages =
{
"my-message-identifier": "Hallo wereld!",
"my-html-identifier": "Hallo wereld!",
"my-personal-identifier": "Hallo {name}!",
...
}
```
### Translating messages using VueJS filter
- Plain Text: ```{{ "my-message-identifier" | format-message }}```
- HTML Output: ```{{{ "my-html-identifier" | format-message }}}```
- Personal: Not possible because we can't pass the required additional data structure to the filter
### Translating using function calls
- Plain Text: ```{{ $formatMessage("my-message-identifier") }}```
- HTML Output: ```{{{ $formatMessage("my-html-identifier") }}}```
- Personal: `{{{ $formatMessage("my-personal-identifier", { name : screenName }) }}}`
### Formatting Numbers
- Number Formatting #1: ```{{ 3.14159 | format-number }}``` => `"3,14159"`
- Number Formatting #2: ```{{ 3.14159 | format-number 2 }}``` => `"3,14"`
- Number Formatting #3: ```{{ 3.14159 | format-number 0 }}``` => `"3"`
- Percent Formatting #1: ```{{ 0.641322 | format-percent }}``` => `"64%"`
- Percent Formatting #2: ```{{ 0.641322 | format-percent 2 }}``` => `"64,13%"`
- Currency Formatting #1: ```{{ 21.37 | format-currency }}``` => `"21 €"`
- Currency Formatting #2: ```{{ 21.37 | format-currency-precise }}``` => `"21,37 €"`
### Formatting Dates/Times
- Date Formatting: ```{{ new Date | format-date }}``` => `12.2.2016`
- Time Formatting: ```{{ new Date | format-time }}``` => `14:23 Uhr`
### Formatting Relative Dates
- Relative Formatting: ```{{ new Date - (1000 * 60 * 10) | format-relative }}``` => `vor 10 Minuten`
### Use format methods outside of Vue component
It is possible to use the format methods directly in TS code, but only after the plugin is initialised
```
import { formatMessage } from "vue-ts-locale";
formatMessage("my-message-identifier");
```
## Copyright
This plugin is based on the work of Sebastian Werner
https://github.com/sebastian-software/vue-locale