wip added i18n

Author: briancaffey

quasar/src/i18n/cn-cn/index.js

@@ -0,0 +1,13 @@
+// This is just an example,
+// so you can safely delete all default props below
+
+export default {
+  leftDrawer: {
+    home: {
+      main: "目录",
+      sub: "从此开始"
+    }
+  },
+  failed: "你好",
+  success: "bu hao"
+};

quasar/src/i18n/en-us/index.js

@@ -2,6 +2,12 @@
 // so you can safely delete all default props below
 
 export default {
-  failed: "Action failed",
+  leftDrawer: {
+    home: {
+      main: "Home",
+      sub: "Start here"
+    }
+  },
+  failed: "Hello",
   success: "Action was successful"
 };

quasar/src/i18n/index.js

@@ -1,5 +1,7 @@
 import enUS from "./en-us";
+import cnCN from "./cn-cn";
 
 export default {
-  "en-us": enUS
+  "en-us": enUS,
+  "cn-cn": cnCN
 };

quasar/src/layouts/primary/MainHeader.vue

@@ -13,6 +13,8 @@
       </q-btn>
 
       <q-toolbar-title>Verbose Equals True</q-toolbar-title>
+
+      <q-select v-model="lang" :options="langs" />
       <q-btn
         id="login"
         :ripple="false"
@@ -42,6 +44,21 @@
 import AuthModal from "components/AuthModal.vue";
 
 export default {
+  data() {
+    return {
+      lang: this.$i18n.locale,
+      langs: [
+        {
+          label: "Chinese",
+          value: "cn-cn"
+        },
+        {
+          label: "US English",
+          value: "en-us"
+        }
+      ]
+    };
+  },
   components: { AuthModal },
   methods: {
     logout() {
@@ -51,6 +68,17 @@ export default {
     toggleLeftDrawer() {
       this.$store.commit("toggleLeftDrawer");
     }
+  },
+  created() {
+    this.$i18n.locale = "cn-cn";
+  },
+  watch: {
+    lang(lang) {
+      this.$i18n.locale = lang;
+      // import(`quasar/i18n/${lang}`).then(language => {
+      //   this.$q.lang.set(language.default)
+      // })
+    }
   }
 };
 </script>

quasar/src/layouts/primary/MainLeftDrawer.vue

@@ -8,7 +8,12 @@
       <q-list>
         <q-item-label header>Menu</q-item-label>
 
-        <left-menu-link label="Home" to="/" icon="home" caption="Start Here" />
+        <left-menu-link
+          :label="$t('leftDrawer.home.main')"
+          to="/"
+          icon="home"
+          caption="Start Here"
+        />
 
         <left-menu-link
           label="About"

quasar/src/pages/Environment.vue

@@ -1,6 +1,8 @@
 <template>
   <base-page>
     <h4>Environment Variables</h4>
+
+    {{ $t("failed") }}
     <div v-for="(value, key) in env" :key="key">
       <q-chip>{{ key }}</q-chip
       ><q-chip text-color="white" color="teal">{{ value }}</q-chip>