Fix: translations

src/NervTN.vue

@@ -1,20 +1,29 @@
 <script setup>
 import ReloadPWA from './components/ReloadPWA.vue';
+import {useI18n} from 'vue-i18n';
+
+const {t} = useI18n({useScope: 'local'});
 </script>
 
 <template>
-  <ReloadPWA/>
-  <main>
-      <router-view></router-view>
-  </main>
-  <header>
-      <router-link to='/apps'>
-          <img alt="" src="./assets/logo.svg"/>
-          {{ $t('home.apps') }}
-      </router-link>
-  </header>
-  <footer>
-  </footer>
+    <ReloadPWA/>
+    <main>
+        <router-view></router-view>
+    </main>
+    <header>
+        <router-link to='/apps'>
+            <img alt="" src="./assets/logo.svg"/>
+            {{ t('home.apps') }}
+        </router-link>
+        <select v-model="$i18n.locale" @change="$i18n.loadMessages()">
+            <option value="de">Deutsch</option>
+            <option value="en">English</option>
+            <option value="fr">Français</option>
+            <option value="nl">Nederlands</option>
+        </select>
+    </header>
+    <footer>
+    </footer>
 
 </template>
 

src/assets/css/common.less

@@ -236,12 +236,14 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
   font-size: 2.2rem;
+  padding-bottom: .3rem;
+  border-bottom: 0.3em solid var(--BClr);
 }
 
 h2 {
   font-size: 1.65rem;
-  padding-bottom: .3rem;
-  border-bottom: 0.3em solid var(--BClr);
+  padding-bottom: .2rem;
+  border-bottom: 0.2em solid var(--BClr);
 }
 
 h3 {

src/components/NervTNApps.vue

@@ -1,7 +1,16 @@
+<script setup>
+import {useI18n} from 'vue-i18n';
+
+const {t} = useI18n({useScope: 'local'});
+</script>
+
 <template>
-    <h1>Communication</h1>
-    <h1>Accounting</h1>
-    <h1>Ordering</h1>
-    <h1>Stocks</h1>
-    <h1>Monitoring</h1>
+    <h1>{{ t('apps.communication') }}</h1>
+    <h1>{{ t('apps.accounting') }}</h1>
+    <h1>{{ t('apps.ordering') }}</h1>
+    <h1>{{ t('apps.stocks') }}</h1>
+    <h1>{{ t('apps.monitoring') }}</h1>
 </template>
+
+<i18n lang="json" locale="en" src="../locale/en.json"/>
+<i18n lang="json" locale="fr" src="../locale/fr.json"/>

src/components/ReloadPWA.vue

@@ -2,18 +2,18 @@
     <div v-if="offlineReady || needRefresh" role="alert">
         <div class="admonition warning">
             <span v-if="offlineReady">
-                {{ $t('pwa.ready') }}
+                {{ t('pwa.ready') }}
             </span>
             <span v-else>
-                {{ $t('pwa.new_content') }}
+                {{ t('pwa.new_content') }}
             </span>
         </div>
         <div class="">
             <button v-if="needRefresh" @click="updateServiceWorker()">
-                {{ $t('pwa.reload') }}
+                {{ t('pwa.reload') }}
             </button>
             <button @click="close">
-                {{ $t('pwa.close') }}
+                {{ t('pwa.close') }}
             </button>
         </div>
     </div>
@@ -22,18 +22,20 @@
 <script>
 import {defineComponent} from "vue";
 import {useRegisterSW} from "virtual:pwa-register/vue";
+import {useI18n} from 'vue-i18n';
 
 const {updateServiceWorker} = useRegisterSW();
 
 export default defineComponent({
     name: "ReloadPWA",
     setup() {
+        const {t} = useI18n({useScope: 'local'});
         const {offlineReady, needRefresh, updateServiceWorker} = useRegisterSW();
         const close = async () => {
             offlineReady.value = false;
             needRefresh.value = false;
         };
-        return {offlineReady, needRefresh, updateServiceWorker, close};
+        return {offlineReady, needRefresh, updateServiceWorker, close, t};
     },
     methods: {
         async close() {
@@ -46,5 +48,6 @@ export default defineComponent({
     },
 });
 </script>
+
 <i18n lang="json" locale="en" src="../locale/en.json"/>
 <i18n lang="json" locale="fr" src="../locale/fr.json"/>

src/locale/en.json

@@ -1,4 +1,11 @@
 {
+    "apps": {
+        "communication": "",
+        "accounting": "",
+        "ordering": "",
+        "stocks": "",
+        "monitoring": ""
+    },
     "home": {
         "apps": "Applications"
     },

src/locale/fr.json

@@ -1,4 +1,11 @@
 {
+    "apps": {
+        "communication": "Communication",
+        "accounting": "Comptabilité",
+        "ordering": "Commande",
+        "stocks": "Stocks",
+        "monitoring": "Veille"
+    },
     "home": {
         "apps": "Applications"
     },

src/main.js

@@ -22,8 +22,7 @@ app.use(createI18n({
     locale: languages[0].trim().split(/-|_/)[0],
     fallbackLocale: 'en',
     legacy: false,
-    globalInjection: true,
-    messages: {}
+    globalInjection: true
 }));
 app.use(router);
 app.use(store);

vite.config.js

@@ -16,7 +16,9 @@ export default defineConfig({
     plugins: [
         vue(),
         vueI18n({
-            include: path.resolve(__dirname, '**/locale/**')
+            include: path.resolve(__dirname, '**/locale/**'),
+            compositionOnly: true,
+            fullInstall: true
         }),
         VitePWA({
             mode: "production",