vue-ts-locale

KO | EN

gitlite — search

#python #hacktoberfest #react #go #android #machine-learning #deep-learning #linux #macos #kubernetes #awesome-list #ios #mcp #openai

(★ 37)

Advanced localization support for VueJS

vue-ts-locale 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# VueJS TS Locale<br/>[![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 <b>wereld</b>!",
  "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

vue-ts-locale

vue-ts-locale 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vue-ts-locale

vue-ts-locale 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README