feat: i18n (#182)

* build: add vue-i18n dependency

* feat: add i18n plugin to vue project

* feat: use translations in play button

* feat: translate play view

* feat: translate menu items

* feat: translate local mods view

* feat: translate online mods view

* feat: translate mods menu

* feat: translate thunderstore mod card component

* fix: remove useless "this" keyword

* feat: translate settings view

* fix: remove leftover test invocation

* feat: add language selector component

* feat: using language selector updates interface's language

* feat: save language in persistent store on selector change

* feat: initialize lang on app launch

* refactor: move i18n code into App.mounted callback

* feat: update interface language on app launch

* feat: adjust language selection on language selector load

* fix: this.$root can't be null

* feat: translate store notifications

* fix: add missing parameter to english translation

* feat: translate "by" author keyword

* feat: translate repair window

* feat: translate repair window title

* docs: add some documentation regarding localization

* docs: explain how to add a new language

* feat: translate Northstar release canal selector elements

* docs: describe how to inject variable into translations

* feat: translate "info" word

* feat: translate popconfirm buttons

* fix: remove "this" keyword

* fix: save store when updating interface language

1 files changed, 7 insertions, 7 deletions

diff --git a/src-vue/src/components/ModsMenu.vue b/src-vue/src/components/ModsMenu.vue
index 9b62fcfa..656c05a6 100644
--- a/src-vue/src/components/ModsMenu.vue
+++ b/src-vue/src/components/ModsMenu.vue
@@ -7,20 +7,20 @@
             <h5>Mods</h5>
             <el-menu-item index="1" @click="$emit('showLocalMods', true)">
                 <el-icon><Folder /></el-icon>
-                <span>Local</span>
+                <span>{{ $t('mods.menu.local') }}</span>
             </el-menu-item>
             <el-menu-item index="2" @click="$emit('showLocalMods', false)">
                 <el-icon><Connection /></el-icon>
-                <span>Online</span>
+                <span>{{ $t('mods.menu.online') }}</span>
             </el-menu-item>
 
             <!-- Search inputs -->
-            <h5>Filter</h5>
-            <el-input v-model="$store.state.search.searchValue" placeholder="Search" clearable />
+            <h5>{{ $t('mods.menu.filter') }}</h5>
+            <el-input v-model="$store.state.search.searchValue" :placeholder="$t('mods.menu.search')" clearable />
             <el-select
                 v-if="!showingLocalMods"
                 v-model="$store.state.search.sortValue" 
-                placeholder="Sort mods"
+                :placeholder="$t('mods.menu.sort_mods')"
             >
                 <el-option
                     v-for="item of sortValues"
@@ -33,7 +33,7 @@
                 v-if="!showingLocalMods"
                 v-model="$store.state.search.selectedCategories"
                 multiple
-                placeholder="Select categories"
+                :placeholder="$t('mods.menu.select_categories')"
             >
                 <el-option
                     v-for="item in $store.state.thunderstoreModsCategories"
@@ -66,7 +66,7 @@ export default defineComponent({
         sortValues(): {label: string, value: string}[] {
             return Object.keys(SortOptions).map((key: string) => ({
                 value: key,
-                label: Object.values(SortOptions)[Object.keys(SortOptions).indexOf(key)]
+                label: this.$t('mods.menu.sort.' + Object.values(SortOptions)[Object.keys(SortOptions).indexOf(key)])
             }));
         }
     }