Adding translation with i18n

README.md

@@ -46,5 +46,9 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
 * Implementer Vuex ?
 * Implementer i18n pour la localization
+* Detecting user locale
 
+## QUESTIONS
 
+* Multiple page form: devrais-je utiliser Vuex? Stocker les paramètres dans la session ?
+Besoin de garder momentanément potentiellement un fichier lourd.

package-lock.json

@@ -1055,6 +1055,16 @@
         "postcss": "^7.0.0"
       }
     },
+    "@intlify/vue-i18n-loader": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-i18n-loader/-/vue-i18n-loader-1.0.0.tgz",
+      "integrity": "sha512-y7LlpKEQ01u7Yq14l4VNlbFYEHMmSEH1QXXASOMWspj9ZcIdCebhhvHCHqk5Oy5Epw3PtoxyRJNpb6Wle5udgA==",
+      "dev": true,
+      "requires": {
+        "js-yaml": "^3.13.1",
+        "json5": "^2.1.1"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -3061,6 +3071,50 @@
       "integrity": "sha512-Xs2Hf2nzrvJMFKimOR7YR0QwZ8fc0u98kdtwN1eNAZzNQgH3vK2pXzff6GJtKh7S5hoJ87ECiAiZFS2fb5Ii2w==",
       "dev": true
     },
+    "cli-table3": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.5.1.tgz",
+      "integrity": "sha512-7Qg2Jrep1S/+Q3EceiZtQcDPWxhAvBw+ERf1162v4sikJrvojMHFqXt8QIVha8UlH9rgU0BeWPytZ9/TzYqlUw==",
+      "dev": true,
+      "requires": {
+        "colors": "^1.1.2",
+        "object-assign": "^4.1.0",
+        "string-width": "^2.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "dev": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
     "cli-width": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
@@ -3173,6 +3227,13 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true,
+      "optional": true
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -4228,6 +4289,16 @@
         "domelementtype": "1"
       }
     },
+    "dot-object": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/dot-object/-/dot-object-1.9.0.tgz",
+      "integrity": "sha512-7MPN6y7XhAO4vM4eguj5+5HNKLjJYfkVG1ZR1Aput4Q4TR6SYeSjhpVQ77IzJHoSHffKbDxBC+48aCiiRurDPw==",
+      "dev": true,
+      "requires": {
+        "commander": "^2.20.0",
+        "glob": "^7.1.4"
+      }
+    },
     "dot-prop": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz",
@@ -4601,6 +4672,12 @@
       "integrity": "sha512-WFb4ihckKil6hu3Dp798xdzSfddwKKU3+nGniKF6HfeW6OLd2OUDEPP7TcHtB5+QXOKg2s6B2DaMPE1Nn/kxKQ==",
       "dev": true
     },
+    "esm": {
+      "version": "3.2.25",
+      "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
+      "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
+      "dev": true
+    },
     "espree": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
@@ -5121,6 +5198,12 @@
         "locate-path": "^2.0.0"
       }
     },
+    "flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true
+    },
     "flat-cache": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
@@ -6352,6 +6435,12 @@
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
+    "is-valid-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-1.0.0.tgz",
+      "integrity": "sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao=",
+      "dev": true
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -10718,6 +10807,39 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
+    "vue-cli-plugin-i18n": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz",
+      "integrity": "sha512-sLo6YzudaWgn5dOMvrKixE5bb/onYGxcxm+0YexqoOx0QtR+7hZ/P5WPFBMM9v/2i1ec2YYe2PvKTBel7KE+tA==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.0",
+        "deepmerge": "^4.2.0",
+        "dotenv": "^8.2.0",
+        "flat": "^5.0.0",
+        "rimraf": "^3.0.0",
+        "vue": "^2.6.11",
+        "vue-i18n": "^8.17.0",
+        "vue-i18n-extract": "1.0.2"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+          "dev": true
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
     "vue-cli-plugin-vuetify": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.5.tgz",
@@ -10768,6 +10890,152 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "8.21.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.21.0.tgz",
+      "integrity": "sha512-pKBq6Kg5hNacFHMFgPbpYsFlDIMRu4Ew/tpvTWns14CZoCxt7B3tmSNdrLruGMMivnJu1rhhRqsQqT6YwHkuQQ=="
+    },
+    "vue-i18n-extract": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n-extract/-/vue-i18n-extract-1.0.2.tgz",
+      "integrity": "sha512-+zwDKvle4KcfloXZnj5hF01ViKDiFr5RMx5507D7oyDXpSleRpekF5YHgZa/+Ra6Go68//z0Nya58J9tKFsCjw==",
+      "dev": true,
+      "requires": {
+        "cli-table3": "^0.5.1",
+        "dot-object": "^1.7.1",
+        "esm": "^3.2.13",
+        "glob": "^7.1.3",
+        "is-valid-glob": "^1.0.0",
+        "yargs": "^13.2.2"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "dev": true,
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+          "dev": true
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "yargs": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "vue-loader": {
       "version": "15.9.2",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.2.tgz",

package.json

@@ -5,15 +5,18 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
+    "vue-i18n": "^8.17.3",
     "vue-router": "^3.3.3",
     "vuetify": "^2.2.11"
   },
   "devDependencies": {
+    "@intlify/vue-i18n-loader": "^1.0.0",
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-plugin-eslint": "~4.4.0",
     "@vue/cli-service": "~4.4.0",
@@ -22,6 +25,7 @@
     "eslint-plugin-vue": "^6.2.2",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
+    "vue-cli-plugin-i18n": "~1.0.1",
     "vue-cli-plugin-vuetify": "~2.0.5",
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.3.0"

src/components/DefineCorpus/AddCorpus.vue

@@ -7,7 +7,7 @@
         v-for="item in tab_items"
         :key="item.tab"
       >
-        {{ item.tab }}
+        {{ $t(item.tab) }}
       </v-tab>
 
       <v-tabs-items v-model="tab" class="my-4" vertical>
@@ -17,9 +17,9 @@
               class="justify-center text-center"
             >
               <v-file-input
-                label="Choisissez un ou plusieurs fichiers"
+                :label="$t('local-file-label')"
                 multiple
-                hint="Formats acceptés: PDF, TXT, ...."
+                :hint="$t('local-file-hint')"
                 persistent-hint
                 small-chips
               >
@@ -34,8 +34,8 @@
           <v-card outlined height=8em>
             <v-card-text>
               <v-select :items="test_profile_corpus"
-                label="Choisissez le corpus que vous voulez traiter"
-                hint="Vous pouvez définir vos corpus dans votre profil"
+                :label="$t('profile-corpus-label')"
+                :hint="$t('profile-corpus-hint')"
                 persistent-hint
                 outlined
               >
@@ -49,7 +49,7 @@
               class="justify-center text-center"
             > 
               <v-select :items="test_common_corpus"
-                label="Choisissez le corpus que vous voulez traiter"
+                :label="$t('shared-corpus-label')"
                 outlined
               >
               </v-select>
@@ -67,10 +67,10 @@
       data: () => ({
           tab: null,
           tab_items: [
-            { tab: 'Depuis un fichier local', content: 'Fichier local'},
-            { tab: 'Depuis un champ de texte', content: InputText},
-            { tab: 'Depuis un corpus du profil', content: 'Corpus du profil'},
-            { tab: 'Depuis un corpus partagé', content: 'Corpus partagé'},
+            { tab: 'local-file', content: 'Fichier local'},
+            { tab: 'input-text', content: InputText},
+            { tab: 'profile-corpus', content: 'Corpus du profil'},
+            { tab: 'shared-corpus', content: 'Corpus partagé'},
           ],
           selected: null,
           test: { "fr": false, "en": false},
@@ -81,4 +81,30 @@
         InputText,
       }
   }
-</script>
\ No newline at end of file
+</script>
+<i18n>
+{
+  "fr":{
+    "local-file":"Depuis un fichier local",
+    "input-text":"Depuis un champ de texte",
+    "profile-corpus":"Depuis un corpus du profil",
+    "shared-corpus":"Depuis un corpus partagé",
+    "local-file-label":"Choisissez un ou plusieurs fichiers",
+    "local-file-hint":"Formats acceptés: PDF, TXT, ...",
+    "profile-corpus-label":"Choisissez le corpus que vous voulez traiter",
+    "profile-corpus-hint":"Vous pouvez définir vos corpora dans votre profil",
+    "shared-corpus-label":"Choisissez lecorpus que vous voulez traiter"
+  },
+  "en":{
+    "local-file":"From a local file",
+    "input-text":"From a text field",
+    "profile-corpus":"From a profile corpus",
+    "shared-corpus":"From a shared corpus",
+    "local-file-label":"Chose one or multiple files",
+    "local-file-hint":"Accepted formats: PDF, TXT, ...",
+    "profile-corpus-label":"Chose the corpus you want to process",
+    "profile-corpus-hint":"You can define your corpora in your profile",
+    "shared-corpus-label":"Chose the corpus you want to process"
+  }
+}
+</i18n>
\ No newline at end of file

src/components/DefineCorpus/CorpusOptions.vue

@@ -4,7 +4,7 @@
       class="my-5"
     >
       <v-card-title class="justify-center py-6">
-        <h2 class="display-1">Options du corpus</h2>
+        <h2 class="display-1">{{ $t('corpus-option-title') }}</h2>
       </v-card-title>
 
       <v-form class="px-12">
@@ -14,7 +14,7 @@
               class="my-5"
               v-model="lang_select"
               :items="languages"
-              label="Langue du corpus"
+              :label="$t('corpus-language')"
               required
               outlined
               max-width=80%
@@ -23,25 +23,25 @@
           <v-divider/>
           <v-col cols="6">
             <v-card outlined class="px-5 py-4 mb-5">
-              <v-card-title class="subtitle-2">Métadonnées (facultatif) 
+              <v-card-title class="subtitle-2">{{ $t('metadata-title') }}
               </v-card-title>
               <v-card-text>
                 <v-text-field
                     class="mt-0"
                     v-model="author"
-                    label="Auteur"
+                    :label="$t('metadata-author')"
                 ></v-text-field>
 
                 <v-text-field
                     class="pt-0 mt-0"
                     v-model="date"
-                    label="Date"
+                    :label="$t('metadata-date')"
                 ></v-text-field>
 
                 <v-text-field
                     class="mt-0 pt-0"
                     v-model="type"
-                    label="Type de document"
+                    :label="$t('metadata-corpus-type')"
                 ></v-text-field>
 
                 <v-row
@@ -51,14 +51,14 @@
                   <v-col>
                     <v-text-field 
                       class="mt-0 pt-0"
-                      label="Nom de la métadonnée"
+                      :label="$t('metadata-additional-name')"
                       v-model="metadata.name"
                     ></v-text-field>
                   </v-col>
                   <v-col>
                     <v-text-field 
                       class="mt-0 pt-0"
-                      label="Valeur de la métadonnée"
+                      :label="$t('metadata-additional-value')"
                       v-model="metadata.value"
                     ></v-text-field>
                   </v-col>
@@ -72,7 +72,7 @@
 
               <v-card-actions>
                 <v-btn elevation="6" @click="add_metadata()">
-                  <v-icon>mdi-plus</v-icon> Ajouter une métadonnée
+                  <v-icon>mdi-plus</v-icon> {{ $t('metadata-additional-button-label')}}
                 </v-btn>
               </v-card-actions>
             </v-card>
@@ -112,4 +112,30 @@
           }
         },
     }
-</script>
\ No newline at end of file
+</script>
+<i18n>
+{
+  "fr":{
+    "corpus-option-title":"Paramètres du corpus",
+    "corpus-language":"Langue du corpus",
+    "metadata-title":"Métadonnées (facultatif)",
+    "metadata-author":"Auteur",
+    "metadata-date":"Date",
+    "metadata-corpus-type":"Type",
+    "metadata-additional-name":"Nom de la métadonnée",
+    "metadata-additional-value":"Valeur de la métadonnée",
+    "metadata-additional-button-label":"Ajouter une métadonnée"
+  },
+  "en":{
+    "corpus-option-title":"Parameters of the corpus",
+    "corpus-language":"Corpus language",
+    "metadata-title":"Metadata (not mandatory)",
+    "metadata-author":"Author",
+    "metadata-date":"Date",
+    "metadata-corpus-type":"Type",
+    "metadata-additional-name":"Name of the metadata",
+    "metadata-additional-value":"Value of the metadata",
+    "metadata-additional-button-label":"Add a metadata"
+  }
+}
+</i18n>
\ No newline at end of file

src/components/DefineCorpus/DefineCorpus.vue

@@ -2,12 +2,12 @@
   <v-container class="my-5">
     <v-card outlined class="my-5 px-6">
       <v-card-title class="justify-center py-6">
-        <h1 class="display-3">Choix du corpus</h1>
+        <h1 class="display-3"> {{ $t('corpus-choice' )}}</h1>
       </v-card-title>
       <AddCorpus/>
       <CorpusOptions />
     </v-card>
-    <v-btn block to="/treatment"> Suivant </v-btn>
+    <v-btn block to="/treatment"> {{ $t('next') }} </v-btn>
   </v-container>
 </template>
 
@@ -22,4 +22,16 @@
       CorpusOptions,
     },
   }
-</script>
\ No newline at end of file
+</script>
+<i18n>
+{
+  "fr": {
+    "corpus-choice": "Choix du corpus!",
+    "next": "Suivant"
+  },
+  "en": {
+    "corpus-choice": "Chose your corpus",
+    "next": "Next"
+  }
+}
+</i18n>
\ No newline at end of file

src/components/DefineCorpus/InputText.vue

@@ -5,6 +5,15 @@
      height=8em
      auto-grow
      clearable
-     label="Entrez votre texte ici"
+     :label="$t('input-text')"
     ></v-textarea>
-</template>
\ No newline at end of file
+</template>
+<i18n>
+{
+    "fr":{
+        "input-text":"Entrez ou collez votre texte ici"
+    },
+    "en":{
+        "input-text":"Type or paste your text here"
+    }
+}
\ No newline at end of file

src/components/HelloI18n.vue

+<template>
+  <p>{{ $t('hello') }}</p>
+</template>