feat: ✨ about page in language packs

NUXT/pages/mods/about.vue

@@ -15,9 +15,9 @@
 
     <!--   App Information   -->
     <v-card class="obj" :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
-      <v-card-title>App Information</v-card-title>
+      <v-card-title>{{ languagePack.mods.about.appinformation }}</v-card-title>
       <v-card-text>
-        <h3>App Version</h3>
+        <h3>{{ languagePack.mods.about.appversion }}</h3>
         {{ version.substring(0, 7) || "Unknown" }}
       </v-card-text>
     </v-card>
@@ -25,17 +25,17 @@
 
     <!--   Device Information   -->
     <v-card class="obj" :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
-      <v-card-title>Device Information</v-card-title>
+      <v-card-title>{{ languagePack.mods.about.deviceinformation }}</v-card-title>
       <v-card-text>
-        <h3>Platform</h3>
+        <h3>{{ languagePack.mods.about.platform }}</h3>
         {{ deviceInfo.platform || "Unknown" }}<br>
-        <h3>Operating System</h3>
+        <h3>{{ languagePack.mods.about.os }}</h3>
         {{ deviceInfo.operatingSystem || "Unknown" }} ({{ deviceInfo.osVersion || "Unknown" }})<br>
-        <h3>Model</h3>
+        <h3>{{ languagePack.mods.about.model }}</h3>
         {{ deviceInfo.model || "Unknown" }}<br>
-        <h3>Manufacturer</h3>
+        <h3>{{ languagePack.mods.about.manufacturer }}</h3>
         {{ deviceInfo.manufacturer || "Unknown" }}<br>
-        <h3>Emulator</h3>
+        <h3>{{ languagePack.mods.about.emulator }}</h3>
         {{ deviceInfo.isVirtual ? "yes" : "no" }}
       </v-card-text>
     </v-card>
@@ -45,11 +45,11 @@
     <div class="obj">
       <v-btn @click="openExternal('https://github.com/Frontesque/VueTube')" class="action"  :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
         <v-icon x-large class="actionIcon">mdi-github</v-icon>
-        Github
+        {{ languagePack.mods.about.github }}
       </v-btn>
       <v-btn @click="openExternal('https://discord.gg/7P8KJrdd5W')" class="action obj"  :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
         <v-icon x-large class="actionIcon">mdi-discord</v-icon>
-        Discord
+        {{ languagePack.mods.about.discord }}
       </v-btn>
     </div>
 
@@ -72,12 +72,15 @@ export default {
     return {
       version: process.env.appVersion,
       deviceInfo: "",
+      languagePack: {mods: {about: {}}},
     };
   },
 
   async mounted() {
     const info = await Device.getInfo();
     this.deviceInfo = info;
+
+    this.languagePack = this.$lang();
   },
   methods: {
     async openExternal(url) {

NUXT/plugins/languages/english.js

@@ -4,7 +4,7 @@ module.exports = {
   global: {
     home: "Home",
     subscriptions: "Subscriptions",
-    library: "Libraary"
+    library: "Library"
   },
 
   index: {
@@ -22,5 +22,22 @@ module.exports = {
     updates: "Updates",
     logs: "Logs",
     about: "About"
+  },
+
+  mods: {
+    about: {
+      appinformation: "App Information",
+      appversion: "App Version",
+      deviceinformation: "Device Information",
+      platform: "Platform",
+      os: "Operating System",
+      model: "Model",
+      manufacturer: "Manufacturer",
+      emulator: "Emulator",
+      github: "GitHub",
+      discord: "Discord"
+    }
   }
+
+
 }