updates

Author: kazupon

docs/advanced/lazy.md

@@ -28,8 +28,11 @@ Let´s assume we have a project directory similar to the one below:
 The `pages` folder is where our arbitrary Vue component files like the `About.vue`, router inits, i18n inits and other reside. The `locales` folder is where all of our localization files reside, and In `i18n.js`, the functions for i18n-related process are defined as follows:
 
 ```js
+import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
+export const SUPPORT_LOCALES = ['en', 'ja']
+
 export function setupI18n(options = { locale: 'en' }) {
   const i18n = createI18n(options)
   setI18nLanguage(i18n, options.locale)
@@ -53,13 +56,15 @@ export function setI18nLanguage(i18n, locale) {
 }
 
 export async function loadLocaleMessages(i18n, locale) {
-  // load locale messages
-  if (!i18n.global.availableLocales.includes(locale)) {
-    const messages = await import(
-      /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
-    )
-    i18n.global.setLocaleMessage(locale, messages.default)
-  }
+  // load locale messages with dynami import
+  const messages = await import(
+    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
+  )
+
+  // set locale and locale message
+  i18n.global.setLocaleMessage(locale, messages.default)
+
+  return nextTick()
 }
 ```
 
@@ -83,19 +88,21 @@ Here the code for the vue-router beforeEach hook part of `router.js`:
 
 ```js
   // navigation guards
-  router.beforeEach((to, from, next) => {
-    const locale = to.params.locale
+  router.beforeEach(async (to, from, next) => {
+    const paramsLocale = to.params.locale
 
-    // check locale
-    if (!SUPPORT_LOCALES.includes(locale)) {
-      return false
+    // use locale if paramsLocale is not in SUPPORT_LOCALES
+    if (!SUPPORT_LOCALES.includes(paramsLocale)) {
+      return next(`/${locale}`)
     }
 
     // load locale messages
-    loadLocaleMessages(i18n, locale)
+    if (!i18n.global.availableLocales.includes(paramsLocale)) {
+      await loadLocaleMessages(i18n, paramsLocale)
+    }
 
     // set i18n language
-    setI18nLanguage(i18n, locale)
+    setI18nLanguage(i18n, paramsLocale)
 
     return next()
   })

examples/lazy-loading/webpack/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "vue": "^3.0.4",
-    "vue-i18n": "^9.0.0-beta.16",
+    "vue-i18n": "^9.0.0-beta.18",
     "vue-router": "^4.0.1"
   },
   "devDependencies": {

examples/lazy-loading/webpack/src/App.vue

@@ -11,36 +11,60 @@
     </div>
     <form class="language">
       <label>{{ t('labels.language') }}</label>
-      <select v-model="locale">
-        <option value="en">en</option>
-        <option value="ja">ja</option>
+      <select v-model="currentLocale">
+        <option
+          v-for="optionLocale in supportLocales"
+          :key="optionLocale"
+          :value="optionLocale"
+        >
+          {{ optionLocale }}
+        </option>
       </select>
     </form>
   </nav>
   <router-view />
 </template>
 
 <script>
-import { ref, watch, defineComponent, getCurrentInstance } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { defineComponent, watch, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { SUPPORT_LOCALES } from './i18n'
 
 export default defineComponent({
   name: 'App',
   setup() {
     const router = useRouter()
-    const route = useRoute()
-    const { t, locale } = useI18n()
+    const { t, locale } = useI18n({ useScope: 'global' })
 
-    // when change the locale, go to locale route
-    watch(locale, val => {
+    /**
+     * select locale value for language select form
+     *
+     * If you use the vue-i18n composer `locale` property directly, it will be re-rendering component when this property is changed,
+     * before dynamic import was used to asynchronously load and apply locale messages
+     * To avoid this, use the anoter locale reactive value.
+     */
+    const currentLocale = ref(locale.value)
+
+    // sync to switch locale from router locale path
+    watch(router.currentRoute, route => {
+      currentLocale.value = route.params.locale
+    })
+
+    /**
+     * when change the locale, go to locale route
+     *
+     * when the changes are detected, load the locale message and set the language via vue-router navigation guard.
+     * change the vue-i18n locale too.
+     */
+    watch(currentLocale, val => {
       router.push({
-        name: router.currentRoute._rawValue.name,
+        name: router.currentRoute.value.name,
         params: { locale: val }
       })
     })
 
-    return { t, locale }
+    return { t, locale, currentLocale, supportLocales: SUPPORT_LOCALES }
   }
 })
 </script>

examples/lazy-loading/webpack/src/i18n.js

@@ -1,5 +1,8 @@
+import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
+export const SUPPORT_LOCALES = ['en', 'ja']
+
 export function setupI18n(options = { locale: 'en' }) {
   const i18n = createI18n(options)
   setI18nLanguage(i18n, options.locale)
@@ -23,14 +26,13 @@ export function setI18nLanguage(i18n, locale) {
 }
 
 export async function loadLocaleMessages(i18n, locale) {
-  // load locale messages
-  if (!i18n.global.availableLocales.includes(locale)) {
-    const messages = await import(
-      /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
-    )
+  // load locale messages with dynami import
+  const messages = await import(
+    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
+  )
 
-    // set locale and locale message
-    i18n.global.setLocaleMessage(locale, messages.default)
-    setI18nLanguage(i18n, locale)
-  }
+  // set locale and locale message
+  i18n.global.setLocaleMessage(locale, messages.default)
+
+  return nextTick()
 }

examples/lazy-loading/webpack/src/router.js

@@ -1,11 +1,10 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { loadLocaleMessages } from './i18n'
+import { setI18nLanguage, loadLocaleMessages, SUPPORT_LOCALES } from './i18n'
 
 import Home from './pages/Home.vue'
 import About from './pages/About.vue'
 
 export function setupRouter(i18n) {
-  const SUPPORT_LOCALES = ['en', 'ja']
   const locale =
     i18n.mode === 'legacy' ? i18n.global.locale : i18n.global.locale.value
 
@@ -34,16 +33,21 @@ export function setupRouter(i18n) {
   })
 
   // navigation guards
-  router.beforeEach((to, from, next) => {
+  router.beforeEach(async (to, from, next) => {
     const paramsLocale = to.params.locale
 
     // use locale if paramsLocale is not in SUPPORT_LOCALES
     if (!SUPPORT_LOCALES.includes(paramsLocale)) {
       return next(`/${locale}`)
     }
 
-    // load locale messages and set i18n language
-    loadLocaleMessages(i18n, paramsLocale)
+    // load locale messages
+    if (!i18n.global.availableLocales.includes(paramsLocale)) {
+      await loadLocaleMessages(i18n, paramsLocale)
+    }
+
+    // set i18n language
+    setI18nLanguage(i18n, paramsLocale)
 
     return next()
   })

examples/lazy-loading/webpack/webpack.config.js

@@ -70,6 +70,6 @@ module.exports = (env = {}) => ({
     stats: 'minimal',
     contentBase: __dirname,
     overlay: true,
-    historyApiFallback: true  // 404s will fallback to /index.html
+    historyApiFallback: true // 404s will fallback to /index.html
   }
 })