Skip to content

Commit 1e5b63b

Browse files
kazuponkazupon
authored
feat: support Vue 2.7 for vue-i18n-bridge (#1062)
1 parent 1fceaa7 commit 1e5b63b

File tree

20 files changed

+172
-67
lines changed

20 files changed

+172
-67
lines changed

‎docs/guide/migration/vue2.md‎

Lines changed: 109 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ It can be used in Vue 2 applications that you have already built with vue-i18n@v
1010

1111
And, also some features are backported from [email protected]:
1212

13-
- Vue I18n Compostion API, that is powered by `@vue/composition-api`
13+
- Vue I18n Compostion API, that is powered by `@vue/composition-api` and `vue-demi`
14+
- for Vue 2.6, you need `@vue/composition-api` and `vue-demi`
15+
- for Vue 2.7, you need `vue-demi` only
1416
- Message format syntax, that is powered by `@intlify/message-compiler`
1517

1618
### Installation
@@ -29,23 +31,80 @@ pnpm add vue-i18n-bridge
2931
You must install the below packages before using this library:
3032

3133
- vue-i18n: >= v8.26.1 < v9
32-
- @vue/composition-api: >= v1.2.0
34+
- @vue/composition-api: >= v1.2.0 (for Vue 2.6)
3335

3436
#### CDN
3537

36-
Include `vue-i18n-bridge` after `vue`, `@vue/composition-api` and it will install.
38+
**For Vue 2.7**:
39+
40+
Include `vue-i18n-bridge` after `vue`, `vue-demo` and it will install.
41+
42+
```html
43+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
44+
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.min.js"></script>
45+
<script src="https://unpkg.com/[email protected]/lib/index.iife.js"></script>
46+
<script src="https://unpkg.com/[email protected]/dist/vue-i18n-bridge.global.prod.js"></script>
47+
```
48+
49+
**For Vue 2.6**:
50+
51+
Include `vue-i18n-bridge` after `vue`, `@vue/composition-api`, `vue-demi` and it will install.
3752

3853
```html
3954
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
4055
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.min.js"></script>
41-
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
42-
<script src="https://unpkg.com/[email protected]/dist/vue-i18n-bridge.global.prod.js"></script>
56+
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
57+
<script src="https://unpkg.com/[email protected]/lib/index.iife.js"></script>
58+
<script src="https://unpkg.com/[email protected]/dist/vue-i18n-bridge.global.prod.js"></script>
4359
```
4460

4561
### Usage
4662

4763
#### Composition API
4864

65+
**For Vue 2.7**:
66+
67+
```js
68+
import Vue from 'vue'
69+
import { createApp } from 'vue-demi'
70+
import { createI18n, useI18n } from 'vue-i18n-bridge'
71+
72+
Vue.use(VueI18n, { bridge: true }) // you must specify '{ bridge: true }' plugin option when install vue-i18n
73+
74+
// `createI18n` options is almost same vue-i18n-next ([email protected]) API
75+
const i18n = createI18n({
76+
legacy: false,
77+
locale: 'ja',
78+
messages: {
79+
en: {
80+
message: {
81+
hello: 'hello, {name}!'
82+
}
83+
},
84+
ja: {
85+
message: {
86+
hello: 'こんにちは、{name}！'
87+
}
88+
}
89+
}
90+
}, VueI18n) // `createI18n` which is provide `vue-i18n-bridge` has second argument, you **must** pass `VueI18n` constructor which is provide `vue-i18n`
91+
92+
const app = createApp({
93+
setup() {
94+
// `useI18n` options is almost same vue-i18n-next ([email protected]) API
95+
const { t, locale } = useI18n()
96+
// ... todo something
97+
98+
return { t, locale }
99+
}
100+
})
101+
102+
app.use(i18n) // you must install `i18n` instance which is created by `createI18n`
103+
app.mount('#app')
104+
```
105+
106+
**For Vue 2.6**:
107+
49108
```js
50109
import Vue from 'vue'
51110
import VueCompositionAPI, { createApp } from '@vue/composition-api'
@@ -88,6 +147,39 @@ app.mount('#app')
88147

89148
#### Legacy API
90149

150+
**For Vue 2.7**:
151+
152+
```js
153+
import Vue from 'vue'
154+
import { createI18n, useI18n } from 'vue-i18n-bridge'
155+
156+
Vue.use(VueI18n, { bridge: true }) // you must specify '{ bridge: true }' plugin option when install vue-i18n
157+
158+
// `createI18n` options is almost same vue-i18n-next ([email protected]) API
159+
const i18n = createI18n({
160+
locale: 'ja',
161+
messages: {
162+
en: {
163+
message: {
164+
hello: 'hello, {name}!'
165+
}
166+
},
167+
ja: {
168+
message: {
169+
hello: 'こんにちは、{name}！'
170+
}
171+
}
172+
}
173+
}, VueI18n) // `createI18n` which is provide `vue-i18n-bridge` has second argument, you **must** pass `VueI18n` constructor which is provide `vue-i18n`
174+
175+
Vue.use(i18n) // you must install `i18n` instance which is created by `createI18n`
176+
177+
const app = new Vue({ i18n })
178+
app.$mount('#app')
179+
```
180+
181+
**For Vue 2.6**:
182+
91183
```js
92184
import Vue from 'vue'
93185
import VueCompositionAPI from '@vue/composition-api'
@@ -119,7 +211,8 @@ const app = new Vue({ i18n })
119211
app.$mount('#app')
120212
```
121213

122-
for TypeScript:
214+
**For TypeScript:**
215+
123216
```ts
124217
import Vue from 'vue'
125218
import VueCompositionAPI from '@vue/composition-api'
@@ -153,8 +246,17 @@ app.$mount('#app')
153246

154247
### Usage UMD module in browser
155248

249+
#### For Vue 2.7
250+
```js
251+
const { createApp } = VueDemi // exported UMD which is named by `VueDemi`
252+
const { createI18n, useI18n } = VueI18nBridge // exported UMD which is named by `VueI18nBridge`
253+
254+
Vue.use(VueI18n, { bridge: true })
255+
```
256+
257+
#### For Vue 2.6
156258
```js
157-
const { createApp } = VueCompositionAPI // exported UMD which is named by `VueCompositionAPI
259+
const { createApp } = VueCompositionAPI // exported UMD which is named by `VueCompositionAPI`
158260
const { createI18n, useI18n } = VueI18nBridge // exported UMD which is named by `VueI18nBridge`
159261

160262
Vue.use(VueCompositionAPI)

‎examples/bridge/composition/basic.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>Composition</title>
6-
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.4/dist/vue.js"></script>
77
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.js"></script>
8-
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
8+
<script src="https://unpkg.com/vue[email protected]/lib/index.iife.js"></script>
99
<script src="../../../packages/vue-i18n-bridge/dist/vue-i18n-bridge.global.js"></script>
1010
</head>
1111
<body>
@@ -20,10 +20,9 @@
2020
<p>{{ t("message.hello", { name: 'vue-i18n-bridge' }) }}</p>
2121
</div>
2222
<script>
23-
const { createApp } = VueCompositionAPI
23+
const { createApp } = VueDemi
2424
const { createI18n, useI18n } = VueI18nBridge
2525

26-
Vue.use(VueCompositionAPI)
2726
Vue.use(VueI18n, { bridge: true })
2827

2928
const i18n = createI18n(

‎examples/bridge/composition/component.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>Translation component example</title>
6-
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.4/dist/vue.js"></script>
77
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.js"></script>
8-
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
8+
<script src="https://unpkg.com/vue[email protected]/lib/index.iife.js"></script>
99
<script src="../../../packages/vue-i18n-bridge/dist/vue-i18n-bridge.global.js"></script>
1010
</head>
1111
<body>
@@ -18,10 +18,9 @@ <h2>Translation component</h2>
1818
</i18n>
1919
</div>
2020
<script>
21-
const { createApp } = VueCompositionAPI
21+
const { createApp } = VueDemi
2222
const { createI18n, useI18n } = VueI18nBridge
2323

24-
Vue.use(VueCompositionAPI)
2524
Vue.use(VueI18n, { bridge: true })
2625

2726
const i18n = createI18n(

‎examples/bridge/composition/components/datetime-format.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>DatetimeFormat component examples</title>
6-
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.4/dist/vue.js"></script>
77
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.js"></script>
8-
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
8+
<script src="https://unpkg.com/vue[email protected]/lib/index.iife.js"></script>
99
<script src="../../../../packages/vue-i18n-bridge/dist/vue-i18n-bridge.global.js"></script>
1010
</head>
1111
<body>
@@ -34,10 +34,9 @@ <h2>slot usages:</h2>
3434
</i18n-d>
3535
</div>
3636
<script>
37-
const { createApp, ref } = VueCompositionAPI
37+
const { createApp, ref } = VueDemi
3838
const { createI18n, useI18n } = VueI18nBridge
3939

40-
Vue.use(VueCompositionAPI)
4140
Vue.use(VueI18n, { bridge: true })
4241

4342
const i18n = createI18n(

‎examples/bridge/composition/components/number-format.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>NumberFormat component examples</title>
6-
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.4/dist/vue.js"></script>
77
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.js"></script>
8-
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
8+
<script src="https://unpkg.com/vue[email protected]/lib/index.iife.js"></script>
99
<script src="../../../../packages/vue-i18n-bridge/dist/vue-i18n-bridge.global.js"></script>
1010
</head>
1111
<body>
@@ -34,10 +34,9 @@ <h2>slot usages:</h2>
3434
</i18n-n>
3535
</div>
3636
<script>
37-
const { createApp, ref } = VueCompositionAPI
37+
const { createApp, ref } = VueDemi
3838
const { createI18n, useI18n } = VueI18nBridge
3939

40-
Vue.use(VueCompositionAPI)
4140
Vue.use(VueI18n, { bridge: true })
4241

4342
const i18n = createI18n(

‎examples/bridge/composition/components/translation.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>Translation component example</title>
6-
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.6/dist/vue.js"></script>
77
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.js"></script>
8-
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
8+
<script src="https://unpkg.com/vue[email protected]/lib/index.iife.js"></script>
99
<script src="../../../../packages/vue-i18n-bridge/dist/vue-i18n-bridge.global.js"></script>
1010
</head>
1111
<body>
@@ -51,10 +51,9 @@ <h2>localize with using plural:</h2>
5151
</i18n-t>
5252
</div>
5353
<script>
54-
const { createApp, ref } = VueCompositionAPI
54+
const { createApp, ref } = VueDemi
5555
const { createI18n, useI18n } = VueI18nBridge
5656

57-
Vue.use(VueCompositionAPI)
5857
Vue.use(VueI18n, { bridge: true })
5958

6059
const i18n = createI18n(

‎examples/bridge/composition/plural.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>plural basic usage examples</title>
6-
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.4/dist/vue.js"></script>
77
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.js"></script>
8-
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
8+
<script src="https://unpkg.com/vue[email protected]/lib/index.iife.js"></script>
99
<script src="../../../packages/vue-i18n-bridge/dist/vue-i18n-bridge.global.js"></script>
1010
</head>
1111
<body>
@@ -24,10 +24,9 @@ <h2>Banana:</h2>
2424
<p>{{ t('banana', { n: 'too many' }, 100) }}</p>
2525
</div>
2626
<script>
27-
const { createApp } = VueCompositionAPI
27+
const { createApp } = VueDemi
2828
const { createI18n, useI18n } = VueI18nBridge
2929

30-
Vue.use(VueCompositionAPI)
3130
Vue.use(VueI18n, { bridge: true })
3231

3332
const i18n = createI18n(

‎examples/bridge/composition/scope/global.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>Global scope example</title>
6-
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.4/dist/vue.js"></script>
77
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.js"></script>
8-
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
8+
<script src="https://unpkg.com/vue[email protected]/lib/index.iife.js"></script>
99
<script src="../../../../packages/vue-i18n-bridge/dist/vue-i18n-bridge.global.js"></script>
1010
</head>
1111
<body>
@@ -22,10 +22,9 @@ <h1>Root</h1>
2222
<Child />
2323
</div>
2424
<script>
25-
const { createApp } = VueCompositionAPI
25+
const { createApp } = VueDemi
2626
const { createI18n, useI18n } = VueI18nBridge
2727

28-
Vue.use(VueCompositionAPI)
2928
Vue.use(VueI18n, { bridge: true })
3029

3130
const SlotChild = {

‎examples/bridge/composition/scope/inherit-locale.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>Inherit locale example</title>
6-
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.4/dist/vue.js"></script>
77
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.js"></script>
8-
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
8+
<script src="https://unpkg.com/vue[email protected]/lib/index.iife.js"></script>
99
<script src="../../../../packages/vue-i18n-bridge/dist/vue-i18n-bridge.global.js"></script>
1010
</head>
1111
<body>
@@ -22,10 +22,9 @@ <h1>Root</h1>
2222
<Child />
2323
</div>
2424
<script>
25-
const { createApp, ref, watchEffect } = VueCompositionAPI
25+
const { createApp, ref, watchEffect } = VueDemi
2626
const { createI18n, useI18n } = VueI18nBridge
2727

28-
Vue.use(VueCompositionAPI)
2928
Vue.use(VueI18n, { bridge: true })
3029

3130
const Child = {

‎examples/bridge/composition/scope/local.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>Local scope example</title>
6-
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.4/dist/vue.js"></script>
77
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.js"></script>
8-
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
8+
<script src="https://unpkg.com/vue[email protected]/lib/index.iife.js"></script>
99
<script src="../../../../packages/vue-i18n-bridge/dist/vue-i18n-bridge.global.js"></script>
1010
</head>
1111
<body>
@@ -22,10 +22,9 @@ <h1>Root</h1>
2222
<Child />
2323
</div>
2424
<script>
25-
const { createApp } = VueCompositionAPI
25+
const { createApp } = VueDemi
2626
const { createI18n, useI18n } = VueI18nBridge
2727

28-
Vue.use(VueCompositionAPI)
2928
Vue.use(VueI18n, { bridge: true })
3029

3130
const Child = {

0 commit comments

Comments
 (0)