Merge pull request #2 from ProtocolONE/AUTH-12-internationalization

AUTH-12 provides internationalization setup for the app

Author: fullfs

.env

@@ -0,0 +1,2 @@
+VUE_APP_I18N_LOCALE=ru
+VUE_APP_I18N_FALLBACK_LOCALE=en

README.md

@@ -1,4 +1,11 @@
 # auth-web-sdk-embedded
+- `src/main.js` - точка входа для сборки
+- `src/i18n.js` - подключение интернационализации
+- `src/Root.vue` - входной (рутовый) компонент
+- `src/assets/` - jpg, png, css, scss и так далее
+- `src/components/` - **плоский** список компонентов приложения
+- `src/locales` - интернацианализация приложения в формате json
+- `src/store` - файлы vuex-стора
 
 ## Project setup
 ```

package-lock.json

@@ -12,11 +12,13 @@
   },
   "dependencies": {
     "vue": "^2.5.17",
+    "vue-i18n": "^8.0.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@ascendancyy/vue-cli-plugin-stylelint": "^1.1.0",
     "@cypress/webpack-preprocessor": "^3.0.0",
+    "@kazupon/vue-i18n-loader": "^0.3.0",
     "@vue/cli-plugin-babel": "^3.1.1",
     "@vue/cli-plugin-e2e-cypress": "^3.1.1",
     "@vue/cli-plugin-eslint": "^3.1.1",
@@ -32,6 +34,7 @@
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
     "stylelint-config-standard": "^18.2.0",
+    "vue-cli-plugin-i18n": "^0.5.1",
     "vue-template-compiler": "^2.5.17"
   }
 }

package.json

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div>
     <center>
       <img alt="Vue logo" src="./assets/logo.png">
     </center>
@@ -11,7 +11,7 @@
 import AuthForm from './components/AuthForm.vue';
 
 export default {
-  name: 'App',
+  name: 'Root',
   components: {
     AuthForm,
   },

src/App.vue renamed to src/Root.vue

@@ -1,17 +1,26 @@
 <template>
   <div class="auth-form">
+    <LocaleChanger/>
     <h1>ProtocolONE Auth Form</h1>
     <p>Авторизируйтесь, граждане!</p>
+    <HelloI18n/>
   </div>
 </template>
 
 <script>
+import HelloI18n from './HelloI18n.vue';
+import LocaleChanger from './LocaleChanger.vue';
+
 export default {
   name: 'AuthForm',
+
+  components: {
+    HelloI18n,
+    LocaleChanger,
+  },
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 .auth-form {
   box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);

src/components/AuthForm.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <p>Это из компонента: {{ $t('hello') }}</p>
+    <p>Это берётся из папки с локалями: {{ $t('message') }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloI18n',
+};
+</script>
+
+<i18n>
+{
+  "ru": {
+    "hello": "А вот и i18n в SFC!"
+  },
+  "en": {
+    "hello": "Hello i18n in SFC!"
+  }
+}
+</i18n>

src/components/HelloI18n.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="locale-changer">
+    <select v-model="$i18n.locale">
+      <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'locale-changer',
+  data() {
+    return { langs: ['ru', 'en'] };
+  },
+};
+</script>

src/components/LocaleChanger.vue

@@ -0,0 +1,27 @@
+/**
+ * Подключение модуля интернационализации
+ */
+
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+Vue.use(VueI18n);
+
+function loadLocaleMessages() {
+  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
+  const messages = {};
+  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;
+}
+
+export default new VueI18n({
+  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+  messages: loadLocaleMessages(),
+});

src/i18n.js

@@ -0,0 +1,3 @@
+{
+  "message": "hello i18n !!"
+}

src/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "message": "дратути i18n !!"
+}

src/locales/ru.json

@@ -1,13 +1,20 @@
+/**
+ * App entry point
+ * Сборка начинается отсюа
+ */
+
 import Vue from 'vue';
-import App from './App.vue';
+import Root from './Root.vue';
 import store from './store/RootStore';
+import i18n from './i18n';
 
 Vue.config.productionTip = false;
 
 function mountApp(targetElement) {
   new Vue({
     store,
-    render: h => h(App),
+    i18n,
+    render: h => h(Root),
   }).$mount(targetElement);
 }
 
@@ -17,6 +24,8 @@ if (process.env.NODE_ENV === 'production') {
       mountApp(targetElement);
     }
   }
+  // Имя конструктора, который будет доступен в браузере после подключения sdk
+  // ( new ProtocolOneAuthWebSdk('#app') );
   window.ProtocolOneAuthWebSdk = ProtocolOneAuthWebSdk;
 } else {
   mountApp('#app');

src/main.js

@@ -39,5 +39,11 @@ module.exports = {
   pluginOptions: {
     lintStyleOnBuild: false,
     stylelint: {},
+    i18n: {
+      locale: 'ru',
+      fallbackLocale: 'en',
+      localeDir: 'locales',
+      enableInSFC: true
+    }
   },
 };