Skip to content

Commit e656263

Browse files
kazuponkazupon
committed
update petite-vue-i18n docs
1 parent 1d7843a commit e656263

File tree

1 file changed

+142
-6
lines changed

1 file changed

+142
-6
lines changed

‎packages/petite-vue-i18n/README.md‎

Lines changed: 142 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,154 @@
11
# petite-vue-i18n
22

3-
Vue I18n lite version
3+
Small size subset of Vue I18n
44

5-
## :warning: NOTICE
5+
`petite-vue-i18n` is an alternative distribution of Vue I18n, which provides only minimal features.
66

7-
This is exprimental version.
7+
## :question: What is defference from Vue I18n ?
88

9-
## :questions: What defferent from Vue I18n ?
9+
- The Size is smaller than vue-i18n
10+
- For CDN or without a Bundler
11+
- The code size can be reduced by up to about 50%
12+
- `petite-vue-i18n`: runtime + compiler `~7.48KB`, runtime only `~4.07KB` (production build, brotli compression)
13+
- `vue-i18n`: runtime + compiler `~11.71KB`, runtime only `~8.30KB` (production build, brotli compression)
14+
- ES Modules for browser
15+
- runtime + compiler 35%, runtime only 49%
16+
- `petite-vue-i18n`: runtime + compiler `~7.51KB`, runtime only `~4.09KB` (production build, brotli compression)
17+
- `vue-i18n`: runtime + compiler `~11.73KB`, runtime only `~8.34KB` (production build, brotli compression)
18+
- The legacy API is not supported, **only the composition API**
19+
- The APIs for the following DateTime Foramts, Number Formats, and utilities aren’t included. **Translation only**
20+
- `n`, `$n`
21+
- `d`, `$d`
22+
- `rt`, `$rt`
23+
- `tm`, `$tm`
24+
- `getDateTimeFormat`, `setDateTimeFormat`, `mergeDateTimeFormat`
25+
- `getNumberFormat`, `setNumberFormat`, `mergeNumberFormat`
26+
- **The only locale msssages that can be handled are simple key-values**. if you can handle hierarchical locale messages, you need to customize them using the API
27+
- The algorithm of local fallback is **the array order** specified in `fallbackLocale`
28+
- Custom directive `v-t` isn’t included
29+
- The following components provided by `vue-i18n` aren’t included
30+
- Translation `i18n-t`
31+
- DatetimeFormat `i18n-d`
32+
- NumberFormat `i18n-n`
1033

11-
TODO:
34+
## :hammer: The use case of `petite-vue-i18n`
35+
36+
`vue-i18n` includes various i18n features such as translation, datetimes format and number formats. Some projects may only use translation and not datetime formats. At the moment, even in that case, the code for that feature is included.
37+
38+
If your project only uses `t` or `$t` API for translation, so we recommended you would use `petite-vue-i18n` better than `vue-i18n`. And your project needs the features of `vue-i18n`, you can smoothly migrate from `petitle-vue-i18n` to `vue-i18n`. This means that it’s progressive enhancement.
39+
40+
## :warning: About the supporting of `petite-vue-i18n`
41+
42+
Note that `petitle-vue-i18n` is still experimental, and you may encounter bugs and unsupported use cases. Proceed at your own risk.
43+
44+
However, please don’t worry about it. Depending on the usage of `petitle-vue-i18n` and the feedback, we would like to use it refer to the development of the next version of `vue-i18n`. This means we will to maintain it.
45+
46+
We welcome your feedback on `petite-vue-i18n`.
1247

1348
## :cd: Installation
1449

15-
TODO:
50+
Basically, it’s the same as installing `vue-i18n`. The only difference is that the part of URL or part of path are changed from `vue-i18n` to `petite-vue-i18n`.
51+
52+
### CDN
53+
You need to insert the following scripts to end of `<head>`:
54+
55+
```html
56+
<script src="https://unpkg.com/vue@next"></script>
57+
<script src="https://unpkg.com/petite-vue-i18n"></script>
58+
```
59+
60+
The following is the application code with script tag:
61+
62+
```html
63+
<script>
64+
const { createApp } = Vue
65+
const { createI18n } = PetiteVueI18n
66+
67+
const i18n = createI18n({
68+
// something vue-i18n options here ...
69+
})
70+
71+
const app = createApp({
72+
// something vue options here ...
73+
})
74+
75+
app.use(i18n)
76+
app.mount('#app')
77+
</script>
78+
```
79+
80+
### Package managers
81+
82+
NPM:
83+
```sh
84+
npm install petite-vue-i18n
85+
```
86+
87+
Yarn:
88+
```sh
89+
yarn add petite-vue-i18n
90+
```
91+
92+
```js
93+
import { createApp } from 'vue'
94+
import { createI18n } from 'petite-vue-i18n'
95+
96+
const i18n = createI18n({
97+
// something vue-i18n options here ...
98+
})
99+
100+
const app = createApp({
101+
// something vue options here ...
102+
})
103+
104+
app.use(i18n)
105+
app.mount('#app')
106+
```
107+
108+
## :rocket: Usage
109+
110+
### Hello world
111+
112+
Template:
113+
```html
114+
<div id="app">
115+
<h1>{{ t('hello world') }}</h1>
116+
</div>
117+
```
118+
119+
Scripts:
120+
```js
121+
const { createApp } = Vue
122+
const { createI18n, useI18n } = PetiteVueI18n
123+
// or for ES modules
124+
// import { createApp } from 'vue'
125+
// import { createI18n } from 'petitle-vue-i18n'
126+
127+
const i18n = createI18n({
128+
locale: 'en',
129+
messages: {
130+
en: {
131+
'hello world': 'Hello world!'
132+
},
133+
ja: {
134+
'hello world': 'こんにちは、世界！'
135+
}
136+
}
137+
})
138+
139+
// define App component
140+
const App = {
141+
setup() {
142+
const { t } = useI18n()
143+
return { t }
144+
}
145+
}
146+
147+
const app = createApp(App)
148+
149+
app.use(i18n)
150+
app.mount('#app')
151+
```
16152

17153
## :copyright: License
18154

0 commit comments

Comments
 (0)