fonction traduction

package-lock.json

@@ -13,6 +13,7 @@
         "@nextcloud/files": "^3.10.0",
         "@nextcloud/initial-state": "^2.2.0",
         "@nextcloud/vue": "^8.20.0",
+        "i18next": "^24.0.2",
         "jszip": "^3.10.1",
         "vue": "^2.7.16",
         "vue-material-design-icons": "^5.3.1"
@@ -7782,6 +7783,37 @@
         "node": ">=10.18"
       }
     },
+    "node_modules/i18next": {
+      "version": "24.0.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.0.2.tgz",
+      "integrity": "sha512-D88xyIGcWAKwBTAs4RSqASi8NXR/NhCVSTM4LDbdoU8qb/5dcEZjNCLDhtQBB7Epw/Cp1w2vH/3ujoTbqLSs5g==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ical.js": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ical.js/-/ical.js-2.1.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "@nextcloud/files": "^3.10.0",
     "@nextcloud/initial-state": "^2.2.0",
     "@nextcloud/vue": "^8.20.0",
+    "i18next": "^24.0.2",
     "jszip": "^3.10.1",
     "vue": "^2.7.16",
     "vue-material-design-icons": "^5.3.1"

src/assets/traduction.json

@@ -0,0 +1,14 @@
+{
+    "en": {
+        "translation": {
+            "welcome": "Welcome to the app!",
+            "hello": "Hello, {{name}}!"
+        }
+    },
+    "fr": {
+        "translation": {
+            "welcome": "Bienvenue dans l'application !",
+            "hello": "Bonjour, {{name}} !"
+        }
+    }
+}

src/components/FileTable.vue

@@ -152,8 +152,6 @@
     </div>
 </template>
 
-
-
 <script>
 // NextCloud Components
 import { getClient, getRootPath, getFavoriteNodes } from '@nextcloud/files/dav';
@@ -172,6 +170,10 @@ import Plus from 'vue-material-design-icons/Plus.vue'
 import Delete from 'vue-material-design-icons/Delete.vue';
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 
+// Traduction
+import i18next from "i18next";
+import file from "../assets/traduction.json";
+
 export default {
     name: 'FileTable',
     components: {
@@ -211,6 +213,7 @@ export default {
     },
     data() {
         return {
+            trad: null,
             files: [], // Liste des fichiers et dossiers récupérés
             root_path: getRootPath(),
             current_dir: '/',
@@ -237,6 +240,14 @@ export default {
     async mounted() {
         await this.fetchFiles();
         this.breadcrumbParts = this.getBreadcrumbParts();
+
+        await i18next.init({
+            lng: navigator.language.split('-')[0],
+            fallbackLng: "en",
+            resources: file,
+        });
+        
+        console.log(i18next.t('welcome'))
     },
     methods: {
         async changeTab(name) {
@@ -657,6 +668,9 @@ export default {
 
             return cssStyle;
         },
+        translate(id) {
+            return i18next.t(id)
+        },
         async sleep(ms) {
             return new Promise(resolve => setTimeout(resolve, ms));
         }