feat: use vue-i18n for language switch

package.json

@@ -21,6 +21,7 @@
     "vue": "^2.6.11",
     "vue-analytics": "^5.22.1",
     "vue-global-events": "^1.2.1",
+    "vue-i18n": "^8.22.0",
     "vue-router": "^3.4.3",
     "vue-slider-component": "^3.2.5",
     "vuex": "^3.4.0"

src/assets/icons/translation.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" viewBox="0 0 1024 500">
+  <path d="M152.1 236.2c-3.5-12.1-7.8-33.2-7.8-33.2h-.5s-4.3 21.1-7.8 33.2l-11.1 37.5H163zM616 96H336v320h280c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24zm-24 120c0 6.6-5.4 12-12 12h-11.4c-6.9 23.6-21.7 47.4-42.7 69.9 8.4 6.4 17.1 12.5 26.1 18 5.5 3.4 7.3 10.5 4.1 16.2l-7.9 13.9c-3.4 5.9-10.9 7.8-16.7 4.3-12.6-7.8-24.5-16.1-35.4-24.9-10.9 8.7-22.7 17.1-35.4 24.9-5.8 3.5-13.3 1.6-16.7-4.3l-7.9-13.9c-3.2-5.6-1.4-12.8 4.2-16.2 9.3-5.7 18-11.7 26.1-18-7.9-8.4-14.9-17-21-25.7-4-5.7-2.2-13.6 3.7-17.1l6.5-3.9 7.3-4.3c5.4-3.2 12.4-1.7 16 3.4 5 7 10.8 14 17.4 20.9 13.5-14.2 23.8-28.9 30-43.2H412c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h64v-16c0-6.6 5.4-12 12-12h16c6.6 0 12 5.4 12 12v16h64c6.6 0 12 5.4 12 12zM0 120v272c0 13.3 10.7 24 24 24h280V96H24c-13.3 0-24 10.7-24 24zm58.9 216.1L116.4 167c1.7-4.9 6.2-8.1 11.4-8.1h32.5c5.1 0 9.7 3.3 11.4 8.1l57.5 169.1c2.6 7.8-3.1 15.9-11.4 15.9h-22.9a12 12 0 0 1-11.5-8.6l-9.4-31.9h-60.2l-9.1 31.8c-1.5 5.1-6.2 8.7-11.5 8.7H70.3c-8.2 0-14-8.1-11.4-15.9z"></path>
+</svg>

src/components/Navbar.vue

@@ -10,17 +10,17 @@
     </div>
     <div class="navigation-links">
       <router-link to="/" :class="{ active: this.$route.name === 'home' }"
-        >Home</router-link
+        >{{ $t('message.home') }}</router-link
       >
       <router-link
         to="/explore"
         :class="{ active: this.$route.name === 'explore' }"
-        >Explore</router-link
+        >{{ $t('message.explore') }}</router-link
       >
       <router-link
         to="/library"
         :class="{ active: this.$route.name === 'library' }"
-        >Library</router-link
+        >{{ $t('message.library') }}</router-link
       >
     </div>
     <div class="right-part">
@@ -32,7 +32,7 @@
           <svg-icon icon-class="search" />
           <div class="input">
             <input
-              :placeholder="inputFocus ? '' : 'Search'"
+              :placeholder="inputFocus ? '' : $t('message.search')"
               v-model="keywords"
               @keydown.enter="goToSearchPage"
               @focus="inputFocus = true"
@@ -41,6 +41,10 @@
           </div>
         </div>
       </div>
+      <div class="locale-changer" @click="changeLang">
+        <svg-icon icon-class="translation" class="translation"
+      />
+      </div>
     </div>
   </nav>
 </template>
@@ -57,6 +61,7 @@ export default {
     return {
       inputFocus: false,
       keywords: "",
+      langs: ['zh-CN', 'en']
     };
   },
   methods: {
@@ -70,6 +75,12 @@ export default {
         query: { keywords: this.keywords },
       });
     },
+    changeLang() {
+      if (this.$i18n.locale === "zh-CN") {
+        return this.$i18n.locale = "en";
+      }
+      this.$i18n.locale = "zh-CN";
+    }
   },
 };
 </script>
@@ -133,6 +144,7 @@ nav {
     color: #335eea;
   }
 }
+
 .search {
   .svg-icon {
     height: 18px;
@@ -193,4 +205,15 @@ nav {
     width: 24px;
   }
 }
+
+.locale-changer {
+  position: relative;
+  .translation {
+    margin-left: 16px;
+    height: 48px;
+    width: 48px;
+  }
+}
+
+
 </style>

src/locale/index.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n'
+import messages from './messages';
+
+Vue.use(VueI18n)
+
+const i18n = new VueI18n({
+  locale: 'zh-CN',
+  messages
+});
+
+export default i18n;

src/locale/messages.js

@@ -0,0 +1,18 @@
+export default {
+  en: {
+    message: {
+      home: 'Home',
+      explore: 'Explore',
+      library: 'Library',
+      search: 'Search'
+    }
+  },
+  'zh-CN': {
+    message: {
+      home: '首页',
+      explore: '发现',
+      library: '歌单',
+      search: '搜索'
+    }
+  }
+};

src/main.js

@@ -3,6 +3,7 @@ import VueAnalytics from "vue-analytics";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import i18n from '@/locale';
 import "@/assets/icons";
 import "@/utils/filters";
 import { initMediaSession } from "@/utils/mediaSession";
@@ -18,6 +19,7 @@ Vue.config.productionTip = false;
 initMediaSession();
 
 new Vue({
+  i18n,
   store,
   router,
   render: (h) => h(App),

yarn.lock

@@ -8535,6 +8535,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz?cache=0&sync_timestamp=1589682714858&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-hot-reload-api%2Fdownload%2Fvue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=
 
+vue-i18n@^8.22.0:
+  version "8.22.0"
+  resolved "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-8.22.0.tgz?cache=0&sync_timestamp=1602001179053&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-i18n%2Fdownload%2Fvue-i18n-8.22.0.tgz#6403381a6eab1d229e515a62addb29b2ff3abfed"
+  integrity sha1-ZAM4Gm6rHSKeUVpirdspsv86v+0=
+
 "vue-loader-v16@npm:vue-loader@^16.0.0-beta.7":
   version "16.0.0-beta.7"
   resolved "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-beta.7.tgz?cache=0&sync_timestamp=1599639283575&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-beta.7.tgz#6f2726fa0e2b1fbae67895c47593bbf69f2b9ab8"