added basic i18n frame and locale changer to navigation bar

pinry-spa/package.json

@@ -13,6 +13,7 @@
     "core-js": "^3.3.2",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
+    "vue-i18n": "8",
     "vue-masonry": "^0.11.8",
     "vue-router": "^3.1.3"
   },

pinry-spa/src/assets/locales/en.json

@@ -0,0 +1,3 @@
+{
+    "loginTitle": "Login"
+}

pinry-spa/src/components/LoginForm.vue

@@ -3,7 +3,7 @@
     <div @keydown="triggerDoLogin">
       <div class="modal-card" style="width: auto">
         <header class="modal-card-head">
-          <p class="modal-card-title">Login</p>
+          <p class="modal-card-title">{{ $t("loginTitle") }}</p>
         </header>
         <section class="modal-card-body">
           <b-field label="Username"

pinry-spa/src/components/PHeader.vue

@@ -109,6 +109,11 @@
                 </a>
               </div>
             </div>
+            <div class="locale-changer">
+              <select v-model="$i18n.locale">
+                 <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ locale }}</option>
+              </select>
+            </div>
           </div>
         </div>
       </div>
@@ -129,6 +134,7 @@ export default {
         loggedIn: false,
         meta: {},
       },
+      langs: ['en'],
     };
   },
   computed: {

pinry-spa/src/main.js

@@ -1,17 +1,30 @@
 import Buefy from 'buefy';
 import Vue from 'vue';
 import { VueMasonryPlugin } from 'vue-masonry';
+import VueI18n from 'vue-i18n';
 import App from './App.vue';
 import router from './router';
 import setUpAxiosCsrfConfig from './components/utils/csrf';
 import './registerServiceWorker';
+import en from './assets/locales/en.json';
+
+const messages = {
+  en,
+};
 
 Vue.config.productionTip = false;
 Vue.use(Buefy);
 Vue.use(VueMasonryPlugin);
+Vue.use(VueI18n);
 setUpAxiosCsrfConfig();
 
+const i18n = new VueI18n({
+  locale: 'en',
+  messages,
+});
+
 new Vue({
   router,
+  i18n,
   render: h => h(App),
 }).$mount('#app');

pinry-spa/yarn.lock

@@ -7160,6 +7160,11 @@ vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz?cache=0&sync_timestamp=1568190386192&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-hot-reload-api%2Fdownload%2Fvue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
 
+vue-i18n@8:
+  version "8.27.1"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.27.1.tgz#fe660f6c14793ae404d6a715875d772594a3324f"
+  integrity sha512-lWrGm4F25qReJ7XxSnFVb2h3PfW54ldnM4C+YLBGGJ75+Myt/kj4hHSTKqsyDLamvNYpvINMicSOdW+7yuqgIQ==
+
 vue-loader@^15.7.2:
   version "15.8.3"
   resolved "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.8.3.tgz#857cb9e30eb5fc25e66db48dce7e4f768602a23c"