Skip to content
This repository was archived by the owner on Apr 22, 2024. It is now read-only.

Commit 517b466

Browse files
antfuantfu
committed
feat: basic align with vue-i18n@9
1 parent 0eef6ee commit 517b466

File tree

12 files changed

+7354
-2924
lines changed

12 files changed

+7354
-2924
lines changed

‎README.md‎

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,70 @@
11
# vue-i18n-composable
22

3-
{WIP} Composition API for vue-i18n in Vue 2.x
3+
Composition API for `vue-i18n` in Vue 2.x
4+
5+
<a href="https://www.npmjs.com/package/vue-i18n-composable">
6+
<img alt="npm" src="https://img.shields.io/npm/v/vue-i18n-composable">
7+
</a>
8+
9+
## Install
10+
11+
<pre>
12+
npm i vue-i18n <b>vue-i18n-composable</b> @vue/composition-api
13+
</pre>
14+
15+
## Usage
16+
17+
```js
18+
// main.js
19+
import Vue from 'vue'
20+
import VueCompositionAPI, { createApp } from '@vue/composition-api'
21+
import { createI18n } from 'vue-i18n-composable'
22+
import App from './App.vue'
23+
24+
Vue.use(VueCompositionAPI)
25+
26+
const i18n = createI18n({
27+
locale: 'ja',
28+
messages: {
29+
en: {
30+
language: 'English',
31+
},
32+
ja: {
33+
language: '日本語',
34+
},
35+
},
36+
})
37+
38+
const app = createApp({
39+
render: h => h(App),
40+
i18n,
41+
})
42+
43+
app.mount('#app')
44+
```
45+
46+
In components
47+
48+
```vue
49+
<template>
50+
<div>{{ t('language') }}</div>
51+
</template>
52+
53+
<script>
54+
import { defineComponent } from '@vue/composition-api'
55+
import { useI18n } from 'vue-i18n-composable'
56+
57+
export default defineComponent({
58+
setup() {
59+
return {
60+
...useI18n()
61+
}
62+
}
63+
})
64+
</script>
65+
```
66+
67+
68+
## 📄 License
69+
70+
[MIT License](https://github.com/intlify/vue-i18n-composable/blob/master/LICENSE) © 2020 [Anthony Fu](https://github.com/antfu)

‎example/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "fixture",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vue-cli-service serve",
7+
"build": "vue-cli-service build"
8+
},
9+
"dependencies": {
10+
"@vue/composition-api": "^1.0.0-beta.14",
11+
"vue": "^2.6.12",
12+
"vue-i18n": "^8.21.1",
13+
"vue-i18n-composable": "workspace:*"
14+
},
15+
"devDependencies": {
16+
"@vue/cli-service": "~4.5.6",
17+
"vue-template-compiler": "^2.6.12"
18+
},
19+
"browserslist": [
20+
"> 1%",
21+
"last 2 versions",
22+
"not dead"
23+
]
24+
}

‎example/public/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎example/src/App.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<div id="app">
3+
<button @click="locale = locale === 'ja' ? 'en' : 'ja'">Toggle Language</button>
4+
<h2>localize with slot contents:</h2>
5+
<i18n tag="p" class="name" path="message.named">
6+
<template #name>
7+
<span>kazupon</span>
8+
</template>
9+
</i18n>
10+
11+
<h2>localize with DOM contents:</h2>
12+
<i18n path="message.list" locale="en">
13+
<span class="lang"
14+
>{{ t('message.language', {}, { locale: 'en' }) }}</span
15+
>
16+
</i18n>
17+
18+
<h2>localize with using linked:</h2>
19+
<i18n path="message.linked">
20+
<template #name>
21+
<span>かずぽん</span>
22+
</template>
23+
</i18n>
24+
25+
<h2>localize with using plural:</h2>
26+
<form>
27+
<label>{{ t('message.quantity', {}, { locale: 'en' }) }}</label>
28+
<select v-model="count">
29+
<option value="0">0</option>
30+
<option value="1">1</option>
31+
<option value="2">2</option>
32+
</select>
33+
</form>
34+
<i18n path="message.plural" locale="en" :plural="count">
35+
<template #n>
36+
<b>{{ count }}</b>
37+
</template>
38+
</i18n>
39+
</div>
40+
</template>a
41+
42+
<script>
43+
import { defineComponent } from '@vue/composition-api'
44+
import { useI18n } from 'vue-i18n-composable'
45+
46+
export default defineComponent({
47+
setup() {
48+
return {
49+
count: 0,
50+
...useI18n(),
51+
}
52+
}
53+
})
54+
</script>
55+
56+
<style>
57+
#app {
58+
font-family: Avenir, Helvetica, Arial, sans-serif;
59+
-webkit-font-smoothing: antialiased;
60+
-moz-osx-font-smoothing: grayscale;
61+
text-align: center;
62+
color: #2c3e50;
63+
margin-top: 60px;
64+
}
65+
</style>

‎example/src/main.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import Vue from 'vue'
2+
import VueCompositionAPI, { createApp } from '@vue/composition-api'
3+
import { createI18n } from 'vue-i18n-composable'
4+
import App from './App.vue'
5+
6+
Vue.use(VueCompositionAPI)
7+
8+
const i18n = createI18n({
9+
locale: 'ja',
10+
messages: {
11+
en: {
12+
message: {
13+
language: 'English',
14+
quantity: 'Quantity',
15+
list: 'hello, {0}!',
16+
named: 'hello, {name}!',
17+
linked: '@:message.named How are you?',
18+
plural: 'no bananas | {n} banana | {n} bananas',
19+
},
20+
},
21+
ja: {
22+
message: {
23+
language: '日本語',
24+
list: 'こんにちは、{0}！',
25+
named: 'こんにちは、{name}！',
26+
linked: '@:message.named ごきげんいかが？',
27+
},
28+
},
29+
},
30+
})
31+
32+
const app = createApp({
33+
i18n,
34+
render: h => h(App),
35+
})
36+
37+
app.mount('#app')

‎package.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
{
22
"name": "vue-i18n-composable",
3-
"version": "0.0.1-alpha.1",
3+
"version": "0.1.0",
44
"main": "dist/index.js",
5+
"module": "dist/index.m.js",
6+
"types": "dist/index.d.ts",
57
"repository": "https://github.com/intlify/vue-i18n-composable",
68
"author": "Anthony Fu <anthonyfu117@hotmail.com>",
79
"license": "MIT",
10+
"files": [
11+
"dist",
12+
"src"
13+
],
814
"scripts": {
15+
"prepare": "yarn build",
916
"build": "tsup src/index.ts --format cjs,esm --dts --external vue,vue-i18n,@vue/composition-api",
1017
"dev": "yarn build --watch"
1118
},

0 commit comments

Comments
 (0)