@i18n-pro/vue2
Version:
An out-of-the-box, lightweight i18n auto-translation solution for Vue 2
130 lines (93 loc) • 5.04 kB
Markdown
<div align="center">
<p style="font-size: 18px;">An out-of-the-box, lightweight i18n auto-translation solution for Vue</p>
English | [简体中文](https://github.com/i18n-pro/vue2/blob/v2.0.0/README_zh-CN.md)
[](https://www.npmjs.com/package/@i18n-pro/vue2 "npm")
[](https://www.npmjs.com/package/@i18n-pro/vue2 "npm")
[](https://github.com/i18n-pro/vue2/stargazers "github-stars")
[](https://github.com/i18n-pro/vue2/commits/main "last-commit")
[](https://github.com/i18n-pro/vue2/issues "github-issues")
[](https://codecov.io/gh/i18n-pro/vue2 "codecov")
</div>
<details >
<summary>Table of Contents</summary>
[Vision](#vision)<br/>
[Requirement](#requirement)<br/>
[Features](#features)<br/>
[Live Demo](#live-demo)<br/>
[Principle](#principle)<br/>
[License](#license)<br/>
</details>
# Vision
Make internationalization easy and enjoyable 😄💪🏻
# Requirement
> The current library is only applicable to `Vue 2` . If you need to support `Vue 3` , please click [i18n-pro/vue](https://github.com/i18n-pro/vue) to view<br/>
* vue >= **2.0.0** < **3.0.0**
* i18n-pro >= **3.0.0** < **4.0.0**
# Features
* **lightweight**：[](https://bundlephobia.com/package/i18n-pro "i18n-pro-bundlesize") + [](https://bundlephobia.com/package/@i18n-pro/vue2 "bundlesize")
* The following features are inherited from [i18n-pro](https://github.com/i18n-pro/core "i18n-pro")
* **simple**
* **flexible**
* **automatic-translation**
* **keyless**
# Live Demo
* with$ = true
* [Open in CodeSandbox](https://codesandbox.io/p/github/i18n-pro/vue2-demo/main?file=README.md)
* [](https://stackblitz.com/github/i18n-pro/vue2-demo/tree/main?file=README.md)
* with$ = false
* [Open in CodeSandbox](https://codesandbox.io/p/github/i18n-pro/vue2-demo/simple?file=README.md)
* [](https://stackblitz.com/github/i18n-pro/vue2-demo/tree/simple?file=README.md)
# Principle
This library is implemented based on [i18n-pro](https://github.com/i18n-pro/core "i18n-pro") combined with `Vue` 's `Prototype Properties, Reactivity System and Plugin System`
Mainly composed of `1` parts
* createI18n
**createI18n**：Initialize internationalization state and return its plugin function
A simple example is as follows
```jsx
// App.vue
<template>
{/** text-as-key */}
<div>{{ $t('hello world') }}</div>
{/** custom-key */}
<div>{{ $t.t('custom-key', 'hello world') }}</div>
</template>
// main.ts
import Vue from 'vue'
import App from './App.vue'
import { createI18n } from '@i18n-pro/vue2'
const i18n = createI18n({
namespace: "i18n-example",
locale: "en",
langs: {
zh: {
'hello world': '你好世界',
'custom-key': '你好世界',
},
ja:{
"hello world": "こんにちは世界",
'custom-key': 'こんにちは世界',
},
}
})
Vue.use(i18n)
new Vue({
el: '#app',
render: h => h(App)
})
```
# Help Document
> To avoid unnecessary duplicate document content, some of the documents in this library are linked to the content in `i18n-pro` <br/>
> The `i18n-pro` related link in the current document is based on the `3.0.0` version. If you are using a different version, you need to check the document corresponding to the version you are using to avoid inconsistent usage<br/>
* Current Library
* [Quick Start](https://github.com/i18n-pro/vue2/blob/v2.0.0/docs/dist/USAGE.md)
* [API](https://github.com/i18n-pro/vue2/blob/v2.0.0/docs/dist/API.md)
* [Changelog](https://github.com/i18n-pro/vue2/blob/v2.0.0/docs/dist/CHANGELOG.md)
* i18n-pro
* [Command Line](https://github.com/i18n-pro/core/blob/v3.0.0/docs/dist/COMMAND_LINE.md)
* [Matching Rules](https://github.com/i18n-pro/core/blob/v3.0.0/docs/dist/MATCH_RULE.md)
* [Q&A](https://github.com/i18n-pro/core/blob/v3.0.0/docs/dist/Q&A.md)
* [Translation Log](https://github.com/i18n-pro/core/blob/v3.0.0/docs/dist/OUTPUT_LOG.md)
# License
[MIT](./LICENSE)
Copyright (c) 2023-present Eyelly Wu