Skip to content

Commit f44506d

Browse files
kazuponkazupon
committed
update lazy-loading for vite
1 parent 97221df commit f44506d

File tree

9 files changed

+337
-1623
lines changed

9 files changed

+337
-1623
lines changed

‎examples/lazy-loading/vite/package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@
66
"dev": "vite"
77
},
88
"dependencies": {
9-
"vue": "^3.0.4",
10-
"vue-i18n": "^9.0.0-beta.16",
11-
"vue-router": "^4.0.1"
9+
"vue": "^3.0.5",
10+
"vue-i18n": "^9.0.0-rc.1",
11+
"vue-router": "^4.0.2"
1212
},
1313
"devDependencies": {
14-
"@vue/compiler-sfc": "^3.0.4",
15-
"@intlify/vite-plugin-vue-i18n": "^1.0.0-beta.4",
16-
"vite": "^1.0.0-rc.13"
14+
"@intlify/vite-plugin-vue-i18n": "^1.0.0-beta.12",
15+
"@vitejs/plugin-vue": "^1.0.4",
16+
"@vue/compiler-sfc": "^3.0.5",
17+
"vite": "^2.0.0-beta.15"
1718
},
1819
"private": true
1920
}

‎examples/lazy-loading/vite/src/App.vue‎

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,36 +11,60 @@
1111
</div>
1212
<form class="language">
1313
<label>{{ t('labels.language') }}</label>
14-
<select v-model="locale">
15-
<option value="en">en</option>
16-
<option value="ja">ja</option>
14+
<select v-model="currentLocale">
15+
<option
16+
v-for="optionLocale in supportLocales"
17+
:key="optionLocale"
18+
:value="optionLocale"
19+
>
20+
{{ optionLocale }}
21+
</option>
1722
</select>
1823
</form>
1924
</nav>
2025
<router-view />
2126
</template>
2227

2328
<script>
24-
import { ref, watch, defineComponent } from 'vue'
25-
import { useRoute, useRouter } from 'vue-router'
29+
import { defineComponent, watch, ref } from 'vue'
30+
import { useRouter } from 'vue-router'
2631
import { useI18n } from 'vue-i18n'
32+
import { SUPPORT_LOCALES } from './i18n'
2733
2834
export default defineComponent({
2935
name: 'App',
3036
setup() {
31-
const { t, locale } = useI18n()
3237
const router = useRouter()
33-
const route = useRoute()
38+
const { t, locale } = useI18n({ useScope: 'global' })
3439
35-
// when change the locale, go to locale route
36-
watch(locale, val => {
40+
/**
41+
* select locale value for language select form
42+
*
43+
* If you use the vue-i18n composer `locale` property directly, it will be re-rendering component when this property is changed,
44+
* before dynamic import was used to asynchronously load and apply locale messages
45+
* To avoid this, use the anoter locale reactive value.
46+
*/
47+
const currentLocale = ref(locale.value)
48+
49+
// sync to switch locale from router locale path
50+
watch(router.currentRoute, route => {
51+
currentLocale.value = route.params.locale
52+
})
53+
54+
/**
55+
* when change the locale, go to locale route
56+
*
57+
* when the changes are detected, load the locale message and set the language via vue-router navigation guard.
58+
* change the vue-i18n locale too.
59+
*/
60+
watch(currentLocale, val => {
3761
router.push({
38-
name: route.name,
62+
name: router.currentRoute.value.name,
3963
params: { locale: val }
4064
})
4165
})
4266
43-
return { t, locale }
67+
return { t, locale, currentLocale, supportLocales: SUPPORT_LOCALES }
4468
}
4569
})
4670
</script>

‎examples/lazy-loading/vite/src/i18n.ts‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1+
import { nextTick } from 'vue'
12
import { createI18n } from 'vue-i18n'
2-
import type { I18n, Locale, I18nOptions, Composer } from 'vue-i18n'
3+
4+
import type { I18n, I18nOptions, Composer } from 'vue-i18n'
5+
6+
export const SUPPORT_LOCALES = ['en', 'ja']
37

48
export function setupI18n(options: I18nOptions = { locale: 'en' }): I18n {
59
const i18n = createI18n(options) as I18n
610
setI18nLanguage(i18n, options.locale!)
711
return i18n
812
}
913

10-
export function setI18nLanguage(i18n: I18n, locale: Locale): void {
14+
export function setI18nLanguage(i18n: I18n, locale: string): void {
1115
if (i18n.mode === 'legacy') {
1216
i18n.global.locale = locale
1317
} else {
@@ -23,10 +27,12 @@ export function setI18nLanguage(i18n: I18n, locale: Locale): void {
2327
document.querySelector('html').setAttribute('lang', locale)
2428
}
2529

26-
export async function loadLocaleMessages(i18n: I18n, locale: Locale) {
30+
export async function loadLocaleMessages(i18n: I18n, locale: string) {
2731
// load locale messages
28-
if (!i18n.global.availableLocales.includes(locale)) {
29-
const messages = await import(`./locales/${locale}.yaml`)
30-
i18n.global.setLocaleMessage(locale, messages.default)
31-
}
32+
const messages = await import(/* @vite-ignore */ `./src/locales/${locale}.yaml`)
33+
34+
// set locale and locale message
35+
i18n.global.setLocaleMessage(locale, messages.default)
36+
37+
return nextTick()
3238
}

‎examples/lazy-loading/vite/src/main.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { setupI18n } from './i18n'
66
import en from './locales/en.yaml'
77

88
const i18n = setupI18n({
9-
globalInjection: true,
109
legacy: false,
1110
locale: 'en',
1211
fallbackLocale: 'en',

‎examples/lazy-loading/vite/src/pages/About.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
<script setup lang="ts">
2+
import { useI18n } from 'vue-i18n'
3+
4+
const { t } = useI18n({ useScope: 'global' })
5+
</script>
6+
17
<template>
2-
<h2>{{ $t('pages.about') }}</h2>
8+
<h2>{{ t('pages.about') }}</h2>
39
</template>

‎examples/lazy-loading/vite/src/pages/Home.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
<script setup lang="ts">
2+
import { useI18n } from 'vue-i18n'
3+
4+
const { t } = useI18n({ useScope: 'global' })
5+
</script>
6+
17
<template>
2-
<h2>{{ $t('pages.home') }}</h2>
8+
<h2>{{ t('pages.home') }}</h2>
39
</template>

‎examples/lazy-loading/vite/src/router.ts‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { createRouter, createWebHistory } from 'vue-router'
2-
import { setI18nLanguage, loadLocaleMessages } from './i18n'
2+
import { setI18nLanguage, loadLocaleMessages, SUPPORT_LOCALES } from './i18n'
3+
34
import type { Router, RouteRecordRaw } from 'vue-router'
4-
import type { I18n, Locale, Composer } from 'vue-i18n'
5+
import type { I18n, Composer } from 'vue-i18n'
56

67
import Home from './pages/Home.vue'
78
import About from './pages/About.vue'
89

910
export function setupRouter(i18n: I18n): Router {
10-
const SUPPORT_LOCALES = ['en', 'ja']
11-
const locale: Locale =
11+
const locale: string =
1212
i18n.mode === 'legacy'
1313
? i18n.global.locale
1414
: ((i18n.global as unknown) as Composer).locale.value
@@ -38,19 +38,21 @@ export function setupRouter(i18n: I18n): Router {
3838
})
3939

4040
// navigation guards
41-
router.beforeEach((to, from, next) => {
42-
const locale = (to.params as any).locale as Locale
41+
router.beforeEach(async (to, from, next) => {
42+
const paramsLocale = (to.params as any).locale as string
4343

44-
// check locale
45-
if (!SUPPORT_LOCALES.includes(locale)) {
46-
return false
44+
// use locale if paramsLocale is not in SUPPORT_LOCALES
45+
if (!SUPPORT_LOCALES.includes(paramsLocale)) {
46+
return next(`/${locale}`)
4747
}
4848

4949
// load locale messages
50-
loadLocaleMessages(i18n, locale)
50+
if (!i18n.global.availableLocales.includes(paramsLocale)) {
51+
await loadLocaleMessages(i18n, paramsLocale)
52+
}
5153

5254
// set i18n language
53-
setI18nLanguage(i18n, locale)
55+
setI18nLanguage(i18n, paramsLocale)
5456

5557
return next()
5658
})

‎examples/lazy-loading/vite/vite.config.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import path from 'path'
2-
import { pluginI18n } from '@intlify/vite-plugin-vue-i18n'
2+
import { defineConfig } from 'vite'
3+
import vue from '@vitejs/plugin-vue'
4+
import vueI18n from '@intlify/vite-plugin-vue-i18n'
35

4-
import type { UserConfig } from 'vite'
5-
6-
const config: UserConfig = {
6+
export default defineConfig({
77
plugins: [
8-
pluginI18n({
8+
vue(),
9+
vueI18n({
910
include: path.resolve(__dirname, './src/locales/**')
1011
})
1112
]
12-
}
13-
14-
export default config
13+
})

0 commit comments

Comments
 (0)