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

2 files changed, 13 insertions, 9 deletions

diff --git a/src-vue/src/views/mods/LocalModsView.vue b/src-vue/src/views/mods/LocalModsView.vue
index ed801b7a..4bc870fe 100644
--- a/src-vue/src/views/mods/LocalModsView.vue
+++ b/src-vue/src/views/mods/LocalModsView.vue
@@ -1,23 +1,27 @@
 <template>
     <el-scrollbar>
         <div>
-            <p v-if="mods.length === 0">No mods were found.</p>
+            <p v-if="mods.length === 0">{{ $t('mods.local.no_mods') }}</p>
             <el-card v-else shadow="hover" v-for="mod in mods" v-bind:key="mod.name">
                 <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled"
                             :before-change="() => updateWhichModsEnabled(mod)" :loading="global_load_indicator" />
                 <el-popconfirm
-                    title="Are you sure to delete this mod?"
+                    :title="$t('mods.local.delete_confirm')"
+                    :confirm-button-text="$t('generic.yes')"
+                    :cancel-button-text="$t('generic.no')"
                     @confirm="deleteMod(mod)"
                 >
                     <template #reference>
-                        <el-button type="danger">Delete</el-button>
+                        <el-button type="danger">
+                            {{ $t('mods.local.delete') }}
+                        </el-button>
                     </template>
                 </el-popconfirm>
                 {{ mod.name }}
                 <span v-if="mod.version != null">(v{{ mod.version }})</span>
                 <img
                     v-if="mod.thunderstore_mod_string != null"
-                    title="This Northstar mod is part of a Thunderstore mod"
+                    :title="$t('mods.local.part_of_ts_mod')"
                     src="/src/assets/thunderstore-icon.png"
                     class="image"
                     height="16"
@@ -80,7 +84,7 @@ export default defineComponent({
             }
             catch (error) {
                 ElNotification({
-                    title: 'Error',
+                    title: this.$t('generic.error'),
                     message: `${error}`,
                     type: 'error',
                     position: 'bottom-right'
@@ -101,14 +105,14 @@ export default defineComponent({
                 .then((message) => {
                     // Just a visual indicator that it worked
                     ElNotification({
-                        title: `Success deleting ${mod.name}`,
+                        title: this.$t('mods.local.success_deleting', {modName: mod.name}),
                         type: 'success',
                         position: 'bottom-right'
                     });
                 })
                 .catch((error) => {
                     ElNotification({
-                        title: 'Error',
+                        title: this.$t('generic.error'),
                         message: error,
                         type: 'error',
                         position: 'bottom-right'
diff --git a/src-vue/src/views/mods/ThunderstoreModsView.vue b/src-vue/src/views/mods/ThunderstoreModsView.vue
index 19809f3e..0a0b9965 100644
--- a/src-vue/src/views/mods/ThunderstoreModsView.vue
+++ b/src-vue/src/views/mods/ThunderstoreModsView.vue
@@ -18,8 +18,8 @@
 

                 <!-- Message displayed if no mod matched searched words -->

                 <div v-if="filteredMods.length === 0" class="modMessage">

-                    No matching mod has been found.<br/>

-                    Try another search!

+                    {{ $t('mods.online.no_match') }}<br/>

+                    {{ $t('mods.online.try_another_search') }}

                 </div>

 

                 <!-- Mod cards -->