🌐 (app) init 18n in en and french

2020-07-18 23:32:47 +02:00
parent 4cae3c7a49
commit 62749a3bf7
14 changed files with 311 additions and 40 deletions
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
  },
  "dependencies": {
    "@vue/composition-api": "^1.0.0-beta.1",
@@ -13,12 +14,15 @@
    "plyr": "^3.6.2",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
+    "vue-i18n": "^8.17.3",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "vuex-composition-helpers": "^1.0.18",
    "vuex-persist": "^2.2.0"
  },
  "devDependencies": {
+    "@intlify/vue-i18n-loader": "^1.0.0",
+    "@types/webpack": "^4.4.0",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.4.0",
@@ -37,6 +41,7 @@
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
+    "vue-cli-plugin-i18n": "~1.0.1",
    "vue-template-compiler": "^2.6.11"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="<%= VUE_APP_I18N_LOCALE %>">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
--- a/src/components/ChilledMusic.vue
+++ b/src/components/ChilledMusic.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="chilled-music">
    <transition name="fade">
-      <img v-show="!ready" src="@/assets/loader.svg" alt="loading" />
+      <img v-show="!ready" src="@/assets/loader.svg" :alt="$t('loading')" />
    </transition>
    <section v-show="false">
      <div
@@ -114,3 +114,14 @@ img {
  animation: rotating 4s linear infinite;
 }
 </style>
+
+<i18n>
+{
+  "en": {
+    "loading": "loading..."
+  },
+  "fr": {
+    "loading": "chargement..."
+  }
+}
+</i18n>
--- a/src/components/IntervalInput.vue
+++ b/src/components/IntervalInput.vue
@@ -1,23 +1,30 @@
 <template>
  <div class="interval-input">
-    <transition name="fade" mode="out-in">
-      <button v-if="editable" class="spacer" @click="minus">
-        <img key="minus" src="@/assets/minus.svg" alt="minus" />
-      </button>
-      <div v-else class="spacer"></div>
-    </transition>
-    <h3>{{ label }}</h3>
-    <transition name="fade" mode="out-in">
-      <button v-if="editable" class="spacer" @click="plus">
-        <img key="plus" src="@/assets/plus.svg" alt="plus" />
-      </button>
-      <div v-else class="spacer"></div>
-    </transition>
+    <div class="button-container minus">
+      <transition name="fade" mode="out-in">
+        <button v-if="editable" class="spacer" @click="minus">
+          <img key="minus" src="@/assets/minus.svg" alt="minus" />
+        </button>
+        <div v-else class="spacer"></div>
+      </transition>
+    </div>
+    <h3 v-if="isMinuteSession">
+      {{ $tc('minuteSession', interval, { interval }) }}
+    </h3>
+    <h3 v-else>{{ $t('secondSession') }}</h3>
+    <div class="button-container plus">
+      <transition name="fade" mode="out-in">
+        <button v-if="editable" class="spacer" @click="plus">
+          <img key="plus" src="@/assets/plus.svg" alt="plus" />
+        </button>
+        <div v-else class="spacer"></div>
+      </transition>
+    </div>
  </div>
 </template>

 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
+import { defineComponent } from '@vue/composition-api'
 import { useInterval } from '../hooks/useInterval'

 export default defineComponent({
@@ -26,20 +33,13 @@ export default defineComponent({
    editable: { type: Boolean, required: true }
  },
  setup() {
-    const { interval, minInterval, minus, plus } = useInterval()
-
-    const label = computed(() => {
-      if (interval.value === minInterval) {
-        return '30 second session'
-      }
-
-      return `${interval.value} minute session`
-    })
+    const { interval, isMinuteSession, minus, plus } = useInterval()

    return {
+      interval,
+      isMinuteSession,
      minus,
-      plus,
-      label
+      plus
    }
  }
 })
@@ -53,12 +53,25 @@ $button-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
+  width: 100%;

  h3 {
-    flex: 1;
+    flex: 2;
    line-height: 2rem;
  }

+  .button-container {
+    flex: 1;
+    display: flex;
+
+    &.minus {
+      justify-content: flex-end;
+    }
+    &.plus {
+      justify-content: flex-start;
+    }
+  }
+
  button {
    display: flex;
    justify-content: center;
@@ -73,3 +86,16 @@ $button-size: 50px;
  }
 }
 </style>
+
+<i18n>
+{
+  "en": {
+    "minuteSession": "{interval} minute session",
+    "secondSession": "30 second session"
+  },
+  "fr": {
+    "minuteSession": "session de {interval} minute | session de {interval} minutes",
+    "secondSession": "session de 30 secondes"
+  }
+}
+</i18n>
--- a/src/components/ZoneMusic.vue
+++ b/src/components/ZoneMusic.vue
@@ -2,9 +2,11 @@
  <div class="zone-music plume" v-if="isMusicAvailable">
    <div class="pm-field">
      <label for="use-music" data-pm-holder>
-        <span class="focus" :class="{ selected: !hasMusic, disabled: hasMusic }"
-          >focus</span
-        >
+        <span
+          class="focus"
+          :class="{ selected: !hasMusic, disabled: hasMusic }"
+          v-t="'focus'"
+        ></span>
        <input
          type="checkbox"
          name="use-music"
@@ -17,7 +19,7 @@
          class="chill"
          :class="{ selected: hasMusic, disabled: !hasMusic }"
        >
-          chill
+          <span v-t="'chill'"></span>
          <ChilledMusic
            class="chilled-music"
            v-if="hasMusic"
@@ -92,6 +94,10 @@ label[data-pm-holder] {
      align-items: center;
      justify-content: flex-start;

+      span {
+        text-align: left;
+      }
+
      .chilled-music {
        margin-left: 0.5rem;
      }
@@ -105,3 +111,16 @@ label[data-pm-holder] {
  color: desaturate($color, 70%);
 }
 </style>
+
+<i18n>
+{
+  "en": {
+    "focus": "focus",
+    "chill": "chill"
+  },
+  "fr": {
+    "focus": "concentré",
+    "chill": "détendu"
+  }
+}
+</i18n>
--- a/src/hooks/useInterval.ts
+++ b/src/hooks/useInterval.ts
@@ -1,6 +1,7 @@
 import { useGetters, useActions } from 'vuex-composition-helpers'
 import { GetterTree } from 'vuex'
 import { State, RootActions } from '@/store'
+import { computed } from '@vue/composition-api'

 const MIN_INTERVAL = 0.5
 const MAX_INTERVAL = 60
@@ -19,8 +20,11 @@ export const useInterval = () => {
    setInterval(Math.min(Math.floor(interval.value + 1), MAX_INTERVAL))
  }

+  const isMinuteSession = computed(() => interval.value >= 1)
+
  return {
    interval,
+    isMinuteSession,
    minInterval: MIN_INTERVAL,
    minus,
    plus
--- a/src/hooks/useTimer.ts
+++ b/src/hooks/useTimer.ts
@@ -28,8 +28,8 @@ export const useTimer = () => {
  const session = computed(() => formatSeconds(sessionSeconds.value))
  const intervalSeconds = computed(() => interval.value * 60)

-  let stopwatchId: number | null = null
-  let stopWatchSessionId: number | null = null
+  let stopwatchId: NodeJS.Timeout | null = null
+  let stopWatchSessionId: NodeJS.Timeout | null = null

  watch(interval, () => {
    sessionSeconds.value = interval.value * 60
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import VueI18n, { LocaleMessages } from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+function loadLocaleMessages(): LocaleMessages {
+  const locales = require.context(
+    './locales',
+    true,
+    /[A-Za-z0-9-_,\s]+\.json$/i
+  )
+  const messages: LocaleMessages = {}
+  locales.keys().forEach((key) => {
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      messages[locale] = locales(key)
+    }
+  })
+  return messages
+}
+
+const lang = navigator.language
+  ?.split('-')
+  .shift()
+  ?.toLowerCase()
+
+export default new VueI18n({
+  locale: lang || 'en',
+  fallbackLocale: 'en',
+  messages: loadLocaleMessages()
+})
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,7 @@ import './registerServiceWorker'
 import router from './router'
 import store from './store'
 import VueCompositionAPI from '@vue/composition-api'
+import i18n from './i18n'

 Vue.use(VueCompositionAPI)

@@ -12,5 +13,6 @@ Vue.config.productionTip = false
 new Vue({
  router,
  store,
+  i18n,
  render: (h) => h(App)
 }).$mount('#app')
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,7 +12,7 @@ const routes: RouteConfig[] = [
  },
  {
    path: '/play',
-    name: 'Home',
+    name: 'HomePlay',
    component: Home,
    props: { play: true }
  }
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -165,3 +165,20 @@ footer {
  font-size: 1rem;
 }
 </style>
+
+<i18n>
+{
+  "en": {
+    "madeBy": "Made by",
+    "juju": "juju",
+    "chillWith": "chill with",
+    "chilled cow": "chilled cow"
+  },
+  "fr": {
+    "madeBy": "Fait par",
+    "juju": "juju",
+    "chillWith": "Détendez-vous avec",
+    "chilled cow": "chilled cow"
+  }
+}
+</i18n>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,8 @@
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
+      "webpack-env",
+      "webpack",
      "webpack-env"
    ],
    "paths": {
@@ -35,4 +37,4 @@
  "exclude": [
    "node_modules"
  ]
-}
+}
--- a/vue.config.js
+++ b/vue.config.js
@@ -103,5 +103,14 @@ module.exports = {
        }
      ]
    }
+  },
+
+  pluginOptions: {
+    i18n: {
+      locale: 'en',
+      fallbackLocale: 'en',
+      localeDir: 'locales',
+      enableInSFC: true
+    }
  }
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -863,6 +863,14 @@
    cssnano-preset-default "^4.0.0"
    postcss "^7.0.0"

+"@intlify/vue-i18n-loader@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@intlify/vue-i18n-loader/-/vue-i18n-loader-1.0.0.tgz#4350a9b03fd62e7d7f44c7496d5509bff3229c79"
+  integrity sha512-y7LlpKEQ01u7Yq14l4VNlbFYEHMmSEH1QXXASOMWspj9ZcIdCebhhvHCHqk5Oy5Epw3PtoxyRJNpb6Wle5udgA==
+  dependencies:
+    js-yaml "^3.13.1"
+    json5 "^2.1.1"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -890,6 +898,11 @@
  resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz#a53515db25d8038374381b73af20bb4f2e508d87"
  integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==

+"@types/anymatch@*":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
+  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
+
 "@types/color-name@^1.1.1":
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -933,11 +946,49 @@
  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
  integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==

+"@types/source-list-map@*":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
+  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
+
+"@types/tapable@*":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
+  integrity sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
+
+"@types/uglify-js@*":
+  version "3.9.3"
+  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.9.3.tgz#d94ed608e295bc5424c9600e6b8565407b6b4b6b"
+  integrity sha512-KswB5C7Kwduwjj04Ykz+AjvPcfgv/37Za24O2EDzYNbwyzOo8+ydtvzUfZ5UMguiVu29Gx44l1A6VsPPcmYu9w==
+  dependencies:
+    source-map "^0.6.1"
+
 "@types/webpack-env@^1.15.2":
  version "1.15.2"
  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.15.2.tgz#927997342bb9f4a5185a86e6579a0a18afc33b0a"
  integrity sha512-67ZgZpAlhIICIdfQrB5fnDvaKFcDxpKibxznfYRVAT4mQE41Dido/3Ty+E3xGBmTogc5+0Qb8tWhna+5B8z1iQ==

+"@types/webpack-sources@*":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-1.4.0.tgz#e58f1f05f87d39a5c64cf85705bdbdbb94d4d57e"
+  integrity sha512-c88dKrpSle9BtTqR6ifdaxu1Lvjsl3C5OsfvuUbUwdXymshv1TkufUAXBajCCUM/f/TmnkZC/Esb03MinzSiXQ==
+  dependencies:
+    "@types/node" "*"
+    "@types/source-list-map" "*"
+    source-map "^0.7.3"
+
+"@types/webpack@^4.4.0":
+  version "4.41.21"
+  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.21.tgz#cc685b332c33f153bb2f5fc1fa3ac8adeb592dee"
+  integrity sha512-2j9WVnNrr/8PLAB5csW44xzQSJwS26aOnICsP3pSGCEdsu6KYtfQ6QJsVUKHWRnm1bL7HziJsfh5fHqth87yKA==
+  dependencies:
+    "@types/anymatch" "*"
+    "@types/node" "*"
+    "@types/tapable" "*"
+    "@types/uglify-js" "*"
+    "@types/webpack-sources" "*"
+    source-map "^0.6.0"
+
 "@typescript-eslint/eslint-plugin@^2.33.0":
  version "2.34.0"
  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9"
@@ -2376,6 +2427,16 @@ cli-spinners@^2.0.0:
  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.3.0.tgz#0632239a4b5aa4c958610142c34bb7a651fc8df5"
  integrity sha512-Xs2Hf2nzrvJMFKimOR7YR0QwZ8fc0u98kdtwN1eNAZzNQgH3vK2pXzff6GJtKh7S5hoJ87ECiAiZFS2fb5Ii2w==

+cli-table3@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.5.1.tgz#0252372d94dfc40dbd8df06005f48f31f656f202"
+  integrity sha512-7Qg2Jrep1S/+Q3EceiZtQcDPWxhAvBw+ERf1162v4sikJrvojMHFqXt8QIVha8UlH9rgU0BeWPytZ9/TzYqlUw==
+  dependencies:
+    object-assign "^4.1.0"
+    string-width "^2.1.1"
+  optionalDependencies:
+    colors "^1.1.2"
+
 cli-width@^2.0.0:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
@@ -2489,6 +2550,11 @@ colorette@^1.2.0:
  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.0.tgz#45306add826d196e8c87236ac05d797f25982e63"
  integrity sha512-soRSroY+OF/8OdA3PTQXwaDJeMc7TfknKKrxeSCencL2a4+Tx5zhxmmv7hdpCjhKBjehzp8+bwe/T68K0hpIjw==

+colors@^1.1.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
+  integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
+
 combined-stream@^1.0.6, combined-stream@~1.0.6:
  version "1.0.8"
  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -3015,6 +3081,11 @@ deepmerge@^1.5.2:
  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
  integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==

+deepmerge@^4.2.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 default-gateway@^4.2.0:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -3213,6 +3284,14 @@ domutils@^1.5.1, domutils@^1.7.0:
    dom-serializer "0"
    domelementtype "1"

+dot-object@^1.7.1:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/dot-object/-/dot-object-1.9.0.tgz#6e3d6d8379f794c5174599ddf05528f5990f076e"
+  integrity sha512-7MPN6y7XhAO4vM4eguj5+5HNKLjJYfkVG1ZR1Aput4Q4TR6SYeSjhpVQ77IzJHoSHffKbDxBC+48aCiiRurDPw==
+  dependencies:
+    commander "^2.20.0"
+    glob "^7.1.4"
+
 dot-prop@^5.2.0:
  version "5.2.0"
  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb"
@@ -3511,6 +3590,11 @@ eslint@^6.7.2:
    text-table "^0.2.0"
    v8-compile-cache "^2.0.3"

+esm@^3.2.13:
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
+  integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
+
 espree@^6.1.2, espree@^6.2.1:
  version "6.2.1"
  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
@@ -3905,6 +3989,13 @@ flat-cache@^2.0.1:
    rimraf "2.6.3"
    write "1.0.3"

+flat@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.0.tgz#dab7d71d60413becb0ac2de9bf4304495e3af6af"
+  integrity sha512-6KSMM+cHHzXC/hpldXApL2S8Uz+QZv+tq5o/L0KQYleoG+GcwrnIJhTWC7tCOiKQp8D/fIvryINU1OZCCwevjA==
+  dependencies:
+    is-buffer "~2.0.4"
+
 flatted@^2.0.0:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
@@ -4765,6 +4856,11 @@ is-buffer@^1.1.5:
  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==

+is-buffer@~2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
+  integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
+
 is-callable@^1.1.4, is-callable@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
@@ -4993,6 +5089,11 @@ is-utf8@^0.2.0:
  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
  integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=

+is-valid-glob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-valid-glob/-/is-valid-glob-1.0.0.tgz#29bf3eff701be2d4d315dbacc39bc39fe8f601aa"
+  integrity sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao=
+
 is-windows@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -5149,7 +5250,7 @@ json5@^1.0.1:
  dependencies:
    minimist "^1.2.0"

-json5@^2.1.2:
+json5@^2.1.1, json5@^2.1.2:
  version "2.1.3"
  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
@@ -7346,6 +7447,13 @@ rimraf@2.6.3:
  dependencies:
    glob "^7.1.3"

+rimraf@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 ripemd160@^2.0.0, ripemd160@^2.0.1:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
@@ -7747,6 +7855,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==

+source-map@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
 spdx-correct@^3.0.0:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
@@ -7914,7 +8027,7 @@ string-width@^1.0.1:
    is-fullwidth-code-point "^1.0.0"
    strip-ansi "^3.0.0"

-"string-width@^1.0.2 || 2", string-width@^2.0.0:
+"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
@@ -8663,6 +8776,20 @@ vm-browserify@^1.0.1:
  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==

+vue-cli-plugin-i18n@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz#5a3077de5d62c9b4068e486db1fc97fce9fa0072"
+  integrity sha512-sLo6YzudaWgn5dOMvrKixE5bb/onYGxcxm+0YexqoOx0QtR+7hZ/P5WPFBMM9v/2i1ec2YYe2PvKTBel7KE+tA==
+  dependencies:
+    debug "^4.1.0"
+    deepmerge "^4.2.0"
+    dotenv "^8.2.0"
+    flat "^5.0.0"
+    rimraf "^3.0.0"
+    vue "^2.6.11"
+    vue-i18n "^8.17.0"
+    vue-i18n-extract "1.0.2"
+
 vue-eslint-parser@^7.0.0:
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz#9cdbcc823e656b087507a1911732b867ac101e83"
@@ -8680,6 +8807,23 @@ vue-hot-reload-api@^2.3.0:
  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
  integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==

+vue-i18n-extract@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n-extract/-/vue-i18n-extract-1.0.2.tgz#0a136e12d1634d6799e187aad81a7003d02f67a5"
+  integrity sha512-+zwDKvle4KcfloXZnj5hF01ViKDiFr5RMx5507D7oyDXpSleRpekF5YHgZa/+Ra6Go68//z0Nya58J9tKFsCjw==
+  dependencies:
+    cli-table3 "^0.5.1"
+    dot-object "^1.7.1"
+    esm "^3.2.13"
+    glob "^7.1.3"
+    is-valid-glob "^1.0.0"
+    yargs "^13.2.2"
+
+vue-i18n@^8.17.0, vue-i18n@^8.17.3:
+  version "8.18.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.18.2.tgz#cd7c12f2e178e6faa23b0e3cfd2f7bac9305f8fc"
+  integrity sha512-0X5nBTCZAVjlwcrPaYJwNs3iipBBTv0AUHwQUOa8yP3XbQGWKbRHqBb3OhCYtum/IHDD21d/df5Xd2VgyxbxfA==
+
 vue-loader@^15.9.2:
  version "15.9.3"
  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.3.tgz#0de35d9e555d3ed53969516cac5ce25531299dda"
@@ -9180,7 +9324,7 @@ yargs-parser@^18.1.1:
    camelcase "^5.0.0"
    decamelize "^1.2.0"

-yargs@^13.3.2:
+yargs@^13.2.2, yargs@^13.3.2:
  version "13.3.2"
  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==