Translation

software/src/App.vue

@@ -1,27 +1,18 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import axios from 'axios';
 import { useTheme } from 'vuetify/lib/framework.mjs';
 import { useUserStore } from './data/stores/userStore';
 import vuetify from './plugins/vuetify';
 import { useBasketStore } from './data/stores/basketStore';
+import { i18n } from './plugins/i18n';
 
 const userStore = useUserStore()
 const basketStore = useBasketStore()
-const categories = ref([])
 const theme = useTheme()
 const navRail = ref(vuetify.display.mobile)
 
 theme.global.name.value = userStore.theme
-
-function requestAllCategories() {
-  axios.get('http://127.0.0.1:3000/categories')
-    .then(function (response) {
-      categories.value = response.data
-    })
-}
-
-requestAllCategories()
+i18n.global.locale = userStore.language
 </script>
 
 <template>
@@ -35,11 +26,11 @@ requestAllCategories()
     <v-navigation-drawer :rail="navRail" permanent>
       <v-list>
         <v-list-subheader>
-          <div v-if="!navRail">Einkaufen</div>
+          <div v-if="!navRail">{{ $t('menu.shopping') }}</div>
           <div v-else></div>
         </v-list-subheader>
-        <v-list-item title="Produkte" prepend-icon="mdi-store" to="/products" link />
-        <v-list-item to="/basket" link title="Warenkorb">
+        <v-list-item :title="$t('menu.products')" prepend-icon="mdi-store" to="/products" link />
+        <v-list-item :title="$t('menu.basket')" to="/basket" link >
           <template v-slot:prepend>
             <v-badge color="primary" :content="basketStore.itemsInBasket.length">
               <v-icon icon="mdi-cart" />
@@ -50,21 +41,21 @@ requestAllCategories()
         <v-divider />
 
         <v-list-subheader>
-          <div v-if="!navRail">Account</div>
+          <div v-if="!navRail">{{ $t('menu.account') }}</div>
           <div v-else></div>
         </v-list-subheader>
-        <v-list-item title="Login" prepend-icon="mdi-login" to="/login" link />
-        <v-list-item title="Account" prepend-icon="mdi-account" to="/account" link />
-        <v-list-item title="Bestellungen" prepend-icon="mdi-cart-check" to="/orders" link />
+        <v-list-item :title="$t('menu.login')" prepend-icon="mdi-login" to="/login" link />
+        <v-list-item :title="$t('menu.account')" prepend-icon="mdi-account" to="/account" link />
+        <v-list-item :title="$t('menu.orders')" prepend-icon="mdi-cart-check" to="/orders" link />
 
         <v-divider />
         
         <v-list-subheader>
-          <div v-if="!navRail">System & Hilfe</div>
+          <div v-if="!navRail">{{ $t('menu.systemAndHelp') }}</div>
           <div v-else></div>
         </v-list-subheader>
-        <v-list-item title="Hilfestellung" prepend-icon="mdi-chat-question" to="/help" link />
-        <v-list-item title="Einstellungen" prepend-icon="mdi-cog" to="/preferences" link />
+        <v-list-item :title="$t('menu.helpInstructions')" prepend-icon="mdi-chat-question" to="/help" link />
+        <v-list-item :title="$t('menu.preferences')" prepend-icon="mdi-cog" to="/preferences" link />
       </v-list>
     </v-navigation-drawer>