From 556a3962b06b79fb5d77cc91ff656d8f4d5fd2c1 Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Thu, 19 May 2022 11:08:09 +0200
Subject: [PATCH] Bug 32030: ERM - I18N

Make the string translatable

To update the json files:
npx vue-i18n-extract --vueFiles 'koha-tmpl/intranet-tmpl/prog/js/vue/**/*.?(js|vue)' --exclude koha-tmpl/intranet-tmpl/prog/js/vue/dist/main.js --languageFiles 'koha-tmpl/intranet-tmpl/prog/js/vue/locales/*.json' --add --remove

Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com>

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../vue/components/ERM/AgreementDocuments.vue |  39 +++---
 .../vue/components/ERM/AgreementLicenses.vue  |  37 +++---
 .../vue/components/ERM/AgreementPeriods.vue   |  21 ++--
 .../components/ERM/AgreementRelationships.vue |  33 +++--
 .../vue/components/ERM/AgreementUserRoles.vue |  18 +--
 .../vue/components/ERM/AgreementsFormAdd.vue  |  54 +++++----
 .../ERM/AgreementsFormConfirmDelete.vue       |  14 +--
 .../js/vue/components/ERM/AgreementsList.vue  |  24 ++--
 .../js/vue/components/ERM/AgreementsShow.vue  |  70 +++++------
 .../vue/components/ERM/AgreementsToolbar.vue  |   7 +-
 .../js/vue/components/ERM/ButtonDelete.vue    |  11 --
 .../prog/js/vue/components/ERM/ButtonEdit.vue |  11 --
 .../prog/js/vue/components/ERM/ERMMain.vue    |   6 +-
 .../js/vue/components/ERM/LicensesFormAdd.vue |  42 ++++---
 .../ERM/LicensesFormConfirmDelete.vue         |  12 +-
 .../js/vue/components/ERM/LicensesList.vue    |  22 ++--
 .../js/vue/components/ERM/LicensesShow.vue    |  29 +++--
 .../js/vue/components/ERM/LicensesToolbar.vue |   6 +-
 .../intranet-tmpl/prog/js/vue/locales/en.json | 113 ++++++++++++++++++
 .../prog/js/vue/locales/fr-FR.json            | 113 ++++++++++++++++++
 .../intranet-tmpl/prog/js/vue/main-erm.ts     |  10 +-
 package.json                                  |   1 +
 tsconfig.json                                 |   1 +
 23 files changed, 472 insertions(+), 222 deletions(-)
 delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ButtonDelete.vue
 delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ButtonEdit.vue
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/locales/en.json
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/locales/fr-FR.json

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementDocuments.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementDocuments.vue
index e528995c8d..df745973f6 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementDocuments.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementDocuments.vue
@@ -1,6 +1,6 @@
 <template>
     <fieldset class="rows" id="agreement_documents">
-        <legend>Documents</legend>
+        <legend>{{ $t("Documents") }}</legend>
         <fieldset
             :id="`agreement_period_${counter}`"
             class="rows"
@@ -8,17 +8,18 @@
             v-bind:key="counter"
         >
             <legend>
-                Document {{ counter + 1 }}
+                {{ $t("Document.counter", { counter: counter + 1 }) }}
                 <a href="#" @click.prevent="deleteDocument(counter)"
-                    ><i class="fa fa-trash"></i> Remove this document</a
+                    ><i class="fa fa-trash"></i>
+                    {{ $t("Remove this document") }}</a
                 >
             </legend>
             <ol>
                 <li>
-                    <label>File:</label>
+                    <label>{{ $t("File:") }}</label>
                     <div class="file_information">
                         <span v-if="!document.file_name">
-                            Select a file
+                            {{ $t("Select a file") }}
                             <input
                                 type="file"
                                 @change="selectFile($event, counter)"
@@ -27,7 +28,7 @@
                             />
                         </span>
                         <span v-else>
-                            Update file
+                            {{ $t("Update file") }}
                             <input
                                 type="file"
                                 @change="selectFile($event, counter)"
@@ -37,24 +38,26 @@
                         </span>
                         <ol>
                             <li v-show="document.file_name">
-                                File name: <span>{{ document.file_name }}</span>
+                                {{ $t("File name:") }}
+                                <span>{{ document.file_name }}</span>
                             </li>
                             <li v-show="document.file_type">
-                                File type: <span>{{ document.file_type }}</span>
+                                {{ $t("File type:") }}
+                                <span>{{ document.file_type }}</span>
                             </li>
                             <li v-show="document.file_name">
-                                File description:
+                                {{ $t("File description:") }}
                                 <input
                                     :id="`file_description_${counter}`"
                                     type="text"
                                     class="file_description"
                                     :name="`file_description_${counter}`"
                                     v-model="document.file_description"
-                                    placeholder="File description"
+                                    :placeholder="$t('File description')"
                                 />
                             </li>
                             <li v-show="document.uploaded_on">
-                                Uploaded on:
+                                {{ $t("Uploaded on:") }}
                                 <span>{{
                                     format_date(document.uploaded_on)
                                 }}</span>
@@ -64,7 +67,7 @@
                 </li>
                 <li>
                     <label :for="`physical_location_${counter}`"
-                        >Physical location:
+                        >{{ $t("Physical location:") }}
                     </label>
                     <input
                         :id="`physical_location_${counter}`"
@@ -72,32 +75,32 @@
                         class="physical_location"
                         :name="`physical_location_${counter}`"
                         v-model="document.physical_location"
-                        placeholder="Physical location"
+                        :placeholder="$t('Physical location')"
                     />
                 </li>
                 <li>
-                    <label :for="`uri_${counter}`">URI:</label>
+                    <label :for="`uri_${counter}`">{{ $t("URI:") }}</label>
                     <input
                         :id="`uri_${counter}`"
                         v-model="document.uri"
-                        placeholder="URI"
+                        :placeholder="$t('URI')"
                     />
                 </li>
                 <li>
-                    <label :for="`notes_${counter}`">Notes: </label>
+                    <label :for="`notes_${counter}`">{{ $t("Notes:") }} </label>
                     <input
                         :id="`notes_${counter}`"
                         type="text"
                         class="notes"
                         :name="`notes_${counter}`"
                         v-model="document.notes"
-                        placeholder="Notes"
+                        :placeholder="$t('Notes')"
                     />
                 </li>
             </ol>
         </fieldset>
         <a class="btn btn-default" @click="addDocument"
-            ><font-awesome-icon icon="plus" /> Add new document</a
+            ><font-awesome-icon icon="plus" /> {{ $t("Add new document") }}</a
         >
     </fieldset>
 </template>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue
index e10d030b4c..598a42dcc4 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue
@@ -1,6 +1,6 @@
 <template>
     <fieldset class="rows" id="agreement_licenses">
-        <legend>Licenses</legend>
+        <legend>{{ $t("Licenses") }}</legend>
         <fieldset
             :id="`agreement_license_${counter}`"
             class="rows"
@@ -8,14 +8,17 @@
             v-bind:key="counter"
         >
             <legend>
-                Agreement license {{ counter + 1 }}
+                {{ $t("Agreement license.counter", { counter: counter + 1 }) }}
                 <a href="#" @click.prevent="deleteLicense(counter)"
-                    ><i class="fa fa-trash"></i> Remove this license</a
+                    ><i class="fa fa-trash"></i>
+                    {{ $t("Remove this license") }}</a
                 >
             </legend>
             <ol>
                 <li>
-                    <label :for="`license_id_${counter}`">License: </label>
+                    <label :for="`license_id_${counter}`">{{
+                        $t("License: ")
+                    }}</label>
                     <select
                         :id="`license_id_${counter}`"
                         v-model="agreement_license.license_id"
@@ -36,10 +39,12 @@
                             {{ license.name }}
                         </option>
                     </select>
-                    <span class="required">Required</span>
+                    <span class="required">{{ $t("Required") }}</span>
                 </li>
                 <li>
-                    <label :for="`license_status_${counter}`">Status: </label>
+                    <label :for="`license_status_${counter}`">{{
+                        $t("Status: ")
+                    }}</label>
                     <select v-model="agreement_license.status" required>
                         <option value=""></option>
                         <option
@@ -55,11 +60,11 @@
                             {{ r.lib }}
                         </option>
                     </select>
-                    <span class="required">Required</span>
+                    <span class="required">{{ $t("Required") }}</span>
                 </li>
                 <li>
                     <label :for="`license_location_${counter}`"
-                        >Physical location:
+                        >{{ $t("Physical location:") }}
                     </label>
                     <select v-model="agreement_license.physical_location">
                         <option value=""></option>
@@ -79,27 +84,31 @@
                     </select>
                 </li>
                 <li>
-                    <label :for="`license_notes_${counter}`">Notes:</label>
+                    <label :for="`license_notes_${counter}`">{{
+                        $t("Notes:")
+                    }}</label>
                     <input
                         :id="`license_notes_${counter}`"
                         v-model="agreement_license.notes"
-                        placeholder="Notes"
+                        :placeholder="$t('Notes')"
                     />
                 </li>
                 <li>
-                    <label :for="`license_uri_${counter}`">URI:</label>
+                    <label :for="`license_uri_${counter}`">{{
+                        $t("URI:")
+                    }}</label>
                     <input
                         :id="`license_uri_${counter}`"
                         v-model="agreement_license.uri"
-                        placeholder="URI"
+                        :placeholder="$t('URI')"
                     />
                 </li>
             </ol>
         </fieldset>
         <a v-if="licenses.length" class="btn btn-default" @click="addLicense"
-            ><font-awesome-icon icon="plus" /> Add new license</a
+            ><font-awesome-icon icon="plus" /> {{ $t("Add new license") }}</a
         >
-        <span v-else>There are licenses created yet.</span>
+        <span v-else>{{ $t("There are no licenses created yet") }}</span>
     </fieldset>
 </template>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementPeriods.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementPeriods.vue
index df28f5e59d..8f536ed9da 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementPeriods.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementPeriods.vue
@@ -1,6 +1,6 @@
 <template>
     <fieldset class="rows" id="agreement_periods">
-        <legend>Periods</legend>
+        <legend>{{ $t("Periods") }}</legend>
         <fieldset
             :id="`agreement_period_${counter}`"
             class="rows"
@@ -8,15 +8,16 @@
             v-bind:key="counter"
         >
             <legend>
-                Agreement period {{ counter + 1 }}
+                {{ $t("Agreement period.counter", { counter: counter + 1 }) }}
                 <a href="#" @click.prevent="deletePeriod(counter)"
-                    ><i class="fa fa-trash"></i> Remove this period</a
+                    ><i class="fa fa-trash"></i>
+                    {{ $t("Remove this period") }}</a
                 >
             </legend>
             <ol>
                 <li>
                     <label :for="`started_on_${counter}`" class="required"
-                        >Start date:
+                        >{{ $t("Start date:") }}
                     </label>
                     <flat-pickr
                         :id="`started_on_${counter}`"
@@ -25,10 +26,12 @@
                         :config="fp_config"
                         :data-date_to="`ended_on_${counter}`"
                     />
-                    <span class="required">Required</span>
+                    <span class="required">{{ $t("Required") }}</span>
                 </li>
                 <li>
-                    <label :for="`ended_on_${counter}`">End date: </label>
+                    <label :for="`ended_on_${counter}`">{{
+                        $t("End date:")
+                    }}</label>
                     <flat-pickr
                         :id="`ended_on_${counter}`"
                         v-model="period.ended_on"
@@ -37,7 +40,7 @@
                 </li>
                 <li>
                     <label :for="`cancellation_deadline_${counter}`"
-                        >Cancellation deadline:
+                        >{{ $t("Cancellation deadline:") }}
                     </label>
                     <flat-pickr
                         :id="`cancellation_deadline_${counter}`"
@@ -46,7 +49,7 @@
                     />
                 </li>
                 <li>
-                    <label :for="`notes_${counter}`">Notes: </label>
+                    <label :for="`notes_${counter}`">{{ $t("Notes:") }}</label>
                     <input
                         :id="`notes_${counter}`"
                         type="text"
@@ -58,7 +61,7 @@
             </ol>
         </fieldset>
         <a class="btn btn-default" @click="addPeriod"
-            ><font-awesome-icon icon="plus" /> Add new period</a
+            ><font-awesome-icon icon="plus" /> {{ $t("Add new period") }}</a
         >
     </fieldset>
 </template>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue
index f388a77260..61c08fb5a3 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue
@@ -1,21 +1,22 @@
 <template>
     <fieldset class="rows" id="agreement_relationships">
-        <legend>Related agreements</legend>
+        <legend>{{ $t("Related agreements") }}</legend>
         <fieldset
             class="rows"
             v-for="(relationship, counter) in relationships"
             v-bind:key="counter"
         >
             <legend>
-                Related agreement {{ counter + 1 }}
+                {{ $t("Related agreement.counter", { counter: counter + 1 }) }}
                 <a href="#" @click.prevent="deleteRelationship(counter)"
-                    ><i class="fa fa-trash"></i> Remove this relationship</a
+                    ><i class="fa fa-trash"></i>
+                    {{ $t("Remove this relationship") }}</a
                 >
             </legend>
             <ol>
                 <li>
                     <label :for="`related_agreement_id_${counter}`"
-                        >Related agreement:
+                        >{{ $t("Related agreement:") }}
                     </label>
                     <select
                         v-model="relationship.related_agreement_id"
@@ -39,7 +40,7 @@
                 </li>
                 <li>
                     <label :for="`related_agreement_relationship_${counter}`"
-                        >Relationship:
+                        >{{ $t("Relationship:") }}
                     </label>
                     <select
                         v-model="relationship.relationship"
@@ -60,24 +61,30 @@
                             {{ r.lib }}
                         </option>
                     </select>
-                    <span class="required">Required</span>
+                    <span class="required">{{ $t("Required") }}</span>
                 </li>
                 <li>
-                    <label :for="`related_agreement_notes${counter}`"
-                        >Notes:</label
-                    >
+                    <label :for="`related_agreement_notes_${counter}`">{{
+                        $t("Notes:")
+                    }}</label>
                     <input
                         :id="`related_agreement_notes_${counter}`"
                         v-model="relationship.notes"
-                        placeholder="Notes"
+                        :placeholder="$t('Notes')"
                     />
                 </li>
             </ol>
         </fieldset>
-        <a v-if="agreements.length" class="btn btn-default" @click="addRelationship"
-            ><font-awesome-icon icon="plus" /> Add new related agreement</a
+        <a
+            v-if="agreements.length"
+            class="btn btn-default"
+            @click="addRelationship"
+            ><font-awesome-icon icon="plus" />
+            {{ $t("Add new related agreement") }}</a
         >
-        <span v-else>There are no other agreements created yet.</span>
+        <span v-else>{{
+            $t("There are no other agreements created yet")
+        }}</span>
     </fieldset>
 </template>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue
index 5bb1279a8e..c9e8f86fe0 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue
@@ -1,20 +1,20 @@
 <template>
     <fieldset class="rows" id="agreement_user_roles">
-        <legend>Users</legend>
+        <legend>{{ $t("Users") }}</legend>
         <fieldset
             class="rows"
             v-for="(user_role, counter) in user_roles"
             v-bind:key="counter"
         >
             <legend>
-                Agreement user {{ counter + 1 }}
+                {{ $t("Agreement user.counter", { counter: counter + 1 }) }}
                 <a href="#" @click.prevent="deleteUser(counter)"
-                    ><i class="fa fa-trash"></i> Remove this user</a
+                    ><i class="fa fa-trash"></i> {{ $t("Remove this user") }}</a
                 >
             </legend>
             <ol>
                 <li>
-                    <label :for="`user_id_${counter}`">User: </label>
+                    <label :for="`user_id_${counter}`">{{ $t("User:") }}</label>
                     <span class="user">
                         {{ user_role.patron_str }}
                     </span>
@@ -22,11 +22,13 @@
                         href="#"
                         @click="selectUser(counter)"
                         class="btn btn-default"
-                        >Select user</a
+                        >{{ $t("Select user") }}</a
                     >)
                 </li>
                 <li>
-                    <label :for="`user_role_${counter}`">Role: </label>
+                    <label :for="`user_role_${counter}`">{{
+                        $t("Role:")
+                    }}</label>
                     <select v-model="user_role.role" required>
                         <option value=""></option>
                         <option
@@ -42,7 +44,7 @@
                             {{ r.lib }}
                         </option>
                     </select>
-                    <span class="required">Required</span>
+                    <span class="required">{{ $t("Required") }}</span>
                 </li>
             </ol>
         </fieldset>
@@ -52,7 +54,7 @@
             id="selected_patron_id"
         />
         <a class="btn btn-default" @click="addUser"
-            ><font-awesome-icon icon="plus" /> Add new user</a
+            ><font-awesome-icon icon="plus" /> {{ $t("Add new user") }}</a
         >
     </fieldset>
 </template>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue
index 3997d220d0..3de4440f24 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue
@@ -1,28 +1,30 @@
 <template>
-    <div v-if="!this.initialized">Loading...</div>
+    <div v-if="!this.initialized">{{ $t("Loading")}}</div>
     <div v-else id="agreements_add">
         <h2 v-if="agreement.agreement_id">
-            Edit agreement #{{ agreement.agreement_id }}
+            {{ $t("Edit agreement.id", { id: agreement.agreement_id }) }}
         </h2>
-        <h2 v-else>New agreement</h2>
+        <h2 v-else>{{ $t("New agreement") }}</h2>
         <div>
             <form @submit="onSubmit($event)">
                 <fieldset class="rows">
                     <ol>
                         <li>
-                            <label class="required" for="agreement_name"
-                                >Agreement name:</label
-                            >
+                            <label class="required" for="agreement_name">{{
+                                $t("Agreement name:")
+                            }}</label>
                             <input
                                 id="agreement_name"
                                 v-model="agreement.name"
-                                placeholder="Agreement name"
+                                :placeholder="$t('Agreement name')"
                                 required
                             />
-                            <span class="required">Required</span>
+                            <span class="required">{{ $t("Required") }}</span>
                         </li>
                         <li>
-                            <label for="agreement_vendor_id">Vendor:</label>
+                            <label for="agreement_vendor_id">{{
+                                $t("Vendor:")
+                            }}</label>
                             <select
                                 id="agreement_vendor_id"
                                 v-model="agreement.vendor_id"
@@ -44,20 +46,22 @@
                         </li>
                         <li>
                             <label for="agreement_description"
-                                >Description:
+                                >{{ $t("Description:") }}
                             </label>
                             <textarea
                                 id="agreement_description"
                                 v-model="agreement.description"
-                                placeholder="Description"
+                                :placeholder="$t('Description')"
                                 rows="10"
                                 cols="50"
                                 required
                             />
-                            <span class="required">Required</span>
+                            <span class="required">{{ $t("Required") }}</span>
                         </li>
                         <li>
-                            <label for="agreement_status">Status: </label>
+                            <label for="agreement_status">{{
+                                $t("Status: ")
+                            }}</label>
                             <select
                                 id="agreement_status"
                                 v-model="agreement.status"
@@ -79,12 +83,12 @@
                                     {{ status.lib }}
                                 </option>
                             </select>
-                            <span class="required">Required</span>
+                            <span class="required">{{ $t("Required") }}</span>
                         </li>
                         <li>
-                            <label for="agreement_closure_reason"
-                                >Closure reason:</label
-                            >
+                            <label for="agreement_closure_reason">{{
+                                $t("Closure reason:")
+                            }}</label>
                             <select
                                 id="agreement_closure_reason"
                                 v-model="agreement.closure_reason"
@@ -109,9 +113,9 @@
                             </select>
                         </li>
                         <li>
-                            <label for="agreement_is_perpetual" class="radio"
-                                >Is perpetual:</label
-                            >
+                            <label for="agreement_is_perpetual" class="radio">{{
+                                $t("Is perpetual:")
+                            }}</label>
                             <label for="agreement_is_perpetual_yes">
                                 <input
                                     type="radio"
@@ -134,9 +138,9 @@
                             </label>
                         </li>
                         <li>
-                            <label for="agreement_renewal_priority"
-                                >Renewal priority:</label
-                            >
+                            <label for="agreement_renewal_priority">{{
+                                $t("Renewal priority:")
+                            }}</label>
                             <select v-model="agreement.renewal_priority">
                                 <option value=""></option>
                                 <option
@@ -156,7 +160,7 @@
                         </li>
                         <li>
                             <label for="agreement_license_info"
-                                >License info:
+                                >{{ $t("License info:") }}
                             </label>
                             <textarea
                                 id="agreement_license_info"
@@ -195,7 +199,7 @@
                         to="/cgi-bin/koha/erm/agreements"
                         role="button"
                         class="cancel"
-                        >Cancel</router-link
+                        >{{ $t("Cancel") }}</router-link
                     >
                 </fieldset>
             </form>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue
index 01c1ab39b4..230a3750f7 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue
@@ -1,18 +1,18 @@
 <template>
-    <div v-if="!this.initialized">Loading...</div>
+    <div v-if="!this.initialized">{{ $t("Loading") }}</div>
     <div v-else id="agreements_confirm_delete">
-        <h2>Delete agreement</h2>
+        <h2>{{ $t("Delete agreement") }}</h2>
         <div>
             <form @submit="onSubmit($event)">
                 <fieldset class="rows">
                     <ol>
                         <li>
-                            Agreement name:
+                            {{ $t("Agreement name:") }}
                             {{ agreement.name }}
                         </li>
-                        <li>Vendor:{{ agreement.vendor_id }}</li>
+                        <li>{{ $t("Vendor:") }} {{ agreement.vendor_id }}</li>
                         <li>
-                            Description:
+                            {{ $t("Description:") }}
                             {{ agreement.description }}
                         </li>
                     </ol>
@@ -21,13 +21,13 @@
                     <input
                         type="submit"
                         variant="primary"
-                        value="Yes, delete"
+                        :value="$t('Yes, delete')"
                     />
                     <router-link
                         to="/cgi-bin/koha/erm/agreements"
                         role="button"
                         class="cancel"
-                        >No, do not delete</router-link
+                        >{{ $t("No, do not delete") }}</router-link
                     >
                 </fieldset>
             </form>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
index c97ba17f9e..12765f8343 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
@@ -1,18 +1,16 @@
 <template>
-    <div v-if="!this.initialized">Loading...</div>
+    <div v-if="!this.initialized">{{ $t("Loading") }}</div>
     <div v-else-if="this.agreements" id="agreements_list">
         <Toolbar />
         <table v-if="this.agreements.length" id="agreement_list"></table>
         <div v-else-if="this.initialized" class="dialog message">
-            There are no agreements defined.
+            {{ $t("There are no agreements defined") }}
         </div>
     </div>
 </template>
 
 <script>
 import Toolbar from "./AgreementsToolbar.vue"
-import ButtonEdit from "./ButtonEdit.vue"
-import ButtonDelete from "./ButtonDelete.vue"
 import { createVNode, render } from 'vue'
 import { useVendorStore } from "../../stores/vendors"
 import { useAVStore } from "../../stores/authorised_values"
@@ -192,16 +190,20 @@ export default {
 
                 $.each($(this).find("td .actions"), function (index, e) {
                     let agreement_id = api.row(index).data().agreement_id
-                    let editButton = createVNode(ButtonEdit, {
-                        onClick: () => {
+                    let editButton = createVNode("a", {
+                        class: "btn btn-default btn-xs", role: "button", onClick: () => {
                             edit_agreement(agreement_id)
                         }
-                    })
-                    let deleteButton = createVNode(ButtonDelete, {
-                        onClick: () => {
+                    },
+                        [createVNode("i", { class: "fa fa-pencil", 'aria-hidden': "true" }), __("Edit")])
+
+                    let deleteButton = createVNode("a", {
+                        class: "btn btn-default btn-xs", role: "button", onClick: () => {
                             delete_agreement(agreement_id)
                         }
-                    })
+                    },
+                        [createVNode("i", { class: "fa fa-trash", 'aria-hidden': "true" }), __("Delete")])
+
                     let n = createVNode('span', {}, [editButton, " ", deleteButton])
                     render(n, e)
                 })
@@ -236,7 +238,7 @@ export default {
             .DataTable()
             .destroy(true)
     },
-    components: {Toolbar},
+    components: { Toolbar },
     name: "AgreementsList",
 }
 </script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
index 0a4f956c6f..d5a4dd9b47 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
@@ -1,18 +1,18 @@
 <template>
-    <div v-if="!this.initialized">Loading...</div>
+    <div v-if="!this.initialized">{{ $t("Loading") }}</div>
     <div v-else id="agreements_show">
         <h2>
-            Agreement #{{ agreement.agreement_id }}
+            {{ $t("Agreement.id", { id: agreement.agreement_id }) }}
             <span class="action_links">
                 <router-link
                     :to="`/cgi-bin/koha/erm/agreements/edit/${agreement.agreement_id}`"
-                    title="Edit"
+                    :title="$t('Edit')"
                     ><i class="fa fa-pencil"></i
                 ></router-link>
 
                 <router-link
                     :to="`/cgi-bin/koha/erm/agreements/delete/${agreement.agreement_id}`"
-                    title="Delete"
+                    :title="$t('Delete')"
                     ><i class="fa fa-trash"></i
                 ></router-link>
             </span>
@@ -21,13 +21,13 @@
             <fieldset class="rows">
                 <ol>
                     <li>
-                        <label>Agreement name:</label>
+                        <label>{{ $t("Agreement name:") }}</label>
                         <span>
                             {{ agreement.name }}
                         </span>
                     </li>
                     <li>
-                        <label>Vendor:</label>
+                        <label>{{ $t("Vendor:") }}</label>
                         <span v-if="agreement.vendor_id">
                             {{
                                 vendors.find((e) => e.id == agreement.vendor_id)
@@ -36,56 +36,56 @@
                         </span>
                     </li>
                     <li>
-                        <label>Description: </label>
+                        <label>{{ $t("Description:") }}</label>
                         <span>
                             {{ agreement.description }}
                         </span>
                     </li>
                     <li>
-                        <label>Status: </label>
+                        <label>{{ $t("Status:") }}</label>
                         <span>{{
                             get_lib_from_av(
-                                'av_agreement_statuses',
+                                "av_agreement_statuses",
                                 agreement.status
                             )
                         }}</span>
                     </li>
                     <li>
-                        <label>Closure reason:</label>
+                        <label>{{ $t("Closure reason:") }}</label>
                         <span>{{
                             get_lib_from_av(
-                                'av_agreement_closure_reasons',
+                                "av_agreement_closure_reasons",
                                 agreement.closure_reason
                             )
                         }}</span>
                     </li>
                     <li>
-                        <label>Is perpetual:</label>
+                        <label>{{ $t("Is perpetual:") }}</label>
                         <span v-if="agreement.is_perpetual">Yes</span>
                         <span v-else>No</span>
                     </li>
                     <li>
-                        <label>Renewal priority:</label>
+                        <label>{{ $t("Renewal priority:") }}</label>
                         <span>{{
                             get_lib_from_av(
-                                'av_agreement_renewal_priorities',
+                                "av_agreement_renewal_priorities",
                                 agreement.renewal_priority
                             )
                         }}</span>
                     </li>
                     <li>
-                        <label>License info: </label>
+                        <label>{{ $t("License info:") }}</label>
                         <span>{{ agreement.license_info }}</span>
                     </li>
 
                     <li>
-                        <label>Periods</label>
+                        <label>{{ $t("Periods") }}</label>
                         <table>
                             <thead>
-                                <th>Period start</th>
-                                <th>Period end</th>
-                                <th>Cancellation deadline</th>
-                                <th>Period note</th>
+                                <th>{{ $t("Period start") }}</th>
+                                <th>{{ $t("Period end") }}</th>
+                                <th>{{ $t("Cancellation deadline") }}</th>
+                                <th>{{ $t("Period note") }}</th>
                             </thead>
                             <tbody>
                                 <tr
@@ -112,11 +112,11 @@
                     </li>
 
                     <li>
-                        <label>Users</label>
+                        <label>{{ $t("Users") }}</label>
                         <table>
                             <thead>
-                                <th>Name</th>
-                                <th>Role</th>
+                                <th>{{ $t("Name") }}</th>
+                                <th>{{ $t("Role") }}</th>
                             </thead>
                             <tbody>
                                 <tr
@@ -129,7 +129,7 @@
                                     <td>
                                         {{
                                             get_lib_from_av(
-                                                'av_agreement_user_roles',
+                                                "av_agreement_user_roles",
                                                 role.role
                                             )
                                         }}
@@ -140,14 +140,14 @@
                     </li>
 
                     <li>
-                        <label>Licenses</label>
+                        <label>{{ $t("Licenses") }}</label>
                         <table>
                             <thead>
-                                <th>Name</th>
-                                <th>Status</th>
-                                <th>Physical location</th>
-                                <th>Notes</th>
-                                <th>URI</th>
+                                <th>{{ $t("Name") }}</th>
+                                <th>{{ $t("Status") }}</th>
+                                <th>{{ $t("Physical location") }}</th>
+                                <th>{{ $t("Notes") }}</th>
+                                <th>{{ $t("URI") }}</th>
                             </thead>
                             <tbody>
                                 <tr
@@ -166,7 +166,7 @@
                                     <td>
                                         {{
                                             get_lib_from_av(
-                                                'av_agreement_license_statuses',
+                                                "av_agreement_license_statuses",
                                                 agreement_license.status
                                             )
                                         }}
@@ -174,7 +174,7 @@
                                     <td>
                                         {{
                                             get_lib_from_av(
-                                                'av_agreement_license_location',
+                                                "av_agreement_license_location",
                                                 agreement_license.physical_location
                                             )
                                         }}
@@ -187,7 +187,7 @@
                     </li>
 
                     <li>
-                        <label>Related agreements</label>
+                        <label>{{ $t("Related agreements") }}</label>
                         <div
                             v-for="relationship in agreement.agreement_relationships"
                             v-bind:key="relationship.related_agreement_id"
@@ -202,7 +202,7 @@
                             >
                             {{
                                 get_lib_from_av(
-                                    'av_agreement_relationships',
+                                    "av_agreement_relationships",
                                     relationship.relationship
                                 )
                             }}
@@ -216,7 +216,7 @@
                     to="/cgi-bin/koha/erm/agreements"
                     role="button"
                     class="cancel"
-                    >Close</router-link
+                    >{{ $t("Close") }}</router-link
                 >
             </fieldset>
         </div>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsToolbar.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsToolbar.vue
index 9d7dede8df..cb9abd243a 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsToolbar.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsToolbar.vue
@@ -1,8 +1,7 @@
 <template>
-    <router-link
-        to="/cgi-bin/koha/erm/agreements/add"
-        class="btn btn-default"
-        ><font-awesome-icon icon="plus" /> New agreement</router-link
+    <router-link to="/cgi-bin/koha/erm/agreements/add" class="btn btn-default"
+        ><font-awesome-icon icon="plus" />
+        {{ $t("New agreement") }}</router-link
     >
 </template>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ButtonDelete.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ButtonDelete.vue
deleted file mode 100644
index f435a6bf91..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ButtonDelete.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-    <a class="btn btn-default btn-xs" role="button"
-        ><i class="fa fa-trash" aria-hidden="true" /> Delete</a
-    >
-</template>
-
-<script>
-export default {
-    name: "ButtonDelete"
-}
-</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ButtonEdit.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ButtonEdit.vue
deleted file mode 100644
index d49479f16f..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ButtonEdit.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-    <a class="btn btn-default btn-xs" role="button"
-        ><i class="fa fa-pencil" aria-hidden="true" /> Edit</a
-    >
-</template>
-
-<script>
-export default {
-    name: "ButtonEdit",
-}
-</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue
index f9e8f41e78..baa441b4fd 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue
@@ -13,14 +13,14 @@
                 <aside>
                     <div id="navmenu">
                         <div id="navmenulist">
-                            <h5>ERM</h5>
+                            <h5>{{ $t("E-Resource management") }}</h5>
                             <ul>
                                 <li>
                                     <router-link
                                         to="/cgi-bin/koha/erm/agreements"
                                     >
                                         <i class="fa fa-upload"></i>
-                                        Agreements</router-link
+                                        {{ $t("Agreements") }}</router-link
                                     >
                                 </li>
                                 <li>
@@ -28,7 +28,7 @@
                                         to="/cgi-bin/koha/erm/licenses"
                                     >
                                         <i class="fa fa-file-text-o"></i>
-                                        Licenses</router-link
+                                        {{ $t("Licenses") }}</router-link
                                     >
                                 </li>
                             </ul>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
index 90920194a0..9219bf733c 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
@@ -1,42 +1,42 @@
 <template>
-    <div v-if="!this.initialized">Loading...</div>
+    <div v-if="!this.initialized">{{ $t("Loading") }}</div>
     <div v-else id="licenses_add">
         <h2 v-if="license.license_id">
-            Edit license #{{ license.license_id }}
+            {{ $t("Edit license.id", { id: license.license_id }) }}
         </h2>
-        <h2 v-else>New license</h2>
+        <h2 v-else>{{ $t("New license") }}</h2>
         <div>
             <form @submit="onSubmit($event)">
                 <fieldset class="rows">
                     <ol>
                         <li>
-                            <label class="required" for="license_name"
-                                >License name:</label
-                            >
+                            <label class="required" for="license_name">{{
+                                $t("License name:")
+                            }}</label>
                             <input
                                 id="license_name"
                                 v-model="license.name"
-                                placeholder="License name"
+                                :placeholder="$t('License name')"
                                 required
                             />
-                            <span class="required">Required</span>
+                            <span class="required">{{ $t("Required") }}</span>
                         </li>
                         <li>
                             <label for="license_description"
-                                >Description:
+                                >{{ $t("Description") }}:
                             </label>
                             <textarea
                                 id="license_description"
                                 v-model="license.description"
-                                placeholder="Description"
+                                :placeholder="$t('Description')"
                                 rows="10"
                                 cols="50"
                                 required
                             />
-                            <span class="required">Required</span>
+                            <span class="required">{{ $t("Required") }}</span>
                         </li>
                         <li>
-                            <label for="license_type">Type: </label>
+                            <label for="license_type">{{ $t("Type:") }}</label>
                             <select
                                 id="license_type"
                                 v-model="license.type"
@@ -56,10 +56,12 @@
                                     {{ type.lib }}
                                 </option>
                             </select>
-                            <span class="required">Required</span>
+                            <span class="required">{{ $t("Required") }}</span>
                         </li>
                         <li>
-                            <label for="license_status">Status: </label>
+                            <label for="license_status">{{
+                                $t("Status:")
+                            }}</label>
                             <select
                                 id="license_status"
                                 v-model="license.status"
@@ -80,10 +82,12 @@
                                     {{ status.lib }}
                                 </option>
                             </select>
-                            <span class="required">Required</span>
+                            <span class="required">{{ $t("Required") }}</span>
                         </li>
                         <li>
-                            <label for="started_on">Start date: </label>
+                            <label for="started_on">{{
+                                $t("Start date:")
+                            }}</label>
                             <flat-pickr
                                 id="started_on"
                                 v-model="license.started_on"
@@ -92,7 +96,7 @@
                             />
                         </li>
                         <li>
-                            <label for="ended_on">End date: </label>
+                            <label for="ended_on">{{ $t("End date:") }}</label>
                             <flat-pickr
                                 id="ended_on"
                                 v-model="license.ended_on"
@@ -102,12 +106,12 @@
                     </ol>
                 </fieldset>
                 <fieldset class="action">
-                    <input type="submit" value="Submit" />
+                    <input type="submit" :value="$t('Submit')" />
                     <router-link
                         to="/cgi-bin/koha/erm/licenses"
                         role="button"
                         class="cancel"
-                        >Cancel</router-link
+                        >{{ $t("Cancel") }}</router-link
                     >
                 </fieldset>
             </form>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormConfirmDelete.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormConfirmDelete.vue
index cd318f7454..dbf07af4c5 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormConfirmDelete.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormConfirmDelete.vue
@@ -1,17 +1,17 @@
 <template>
-    <div v-if="!this.initialized">Loading...</div>
+    <div v-if="!this.initialized">{{ $t("Loading") }}</div>
     <div v-else id="licenses_confirm_delete">
-        <h2>Delete license</h2>
+        <h2>{{ $t("Delete license") }}</h2>
         <div>
             <form @submit="onSubmit($event)">
                 <fieldset class="rows">
                     <ol>
                         <li>
-                            License name:
+                            {{ $t("License name:") }}
                             {{ license.name }}
                         </li>
                         <li>
-                            Description:
+                            {{ $t("Description:") }}
                             {{ license.description }}
                         </li>
                     </ol>
@@ -20,13 +20,13 @@
                     <input
                         type="submit"
                         variant="primary"
-                        value="Yes, delete"
+                        :value="$t('Yes, delete')"
                     />
                     <router-link
                         to="/cgi-bin/koha/erm/licenses"
                         role="button"
                         class="cancel"
-                        >No, do not delete</router-link
+                        >{{ $t("No, do not delete") }}</router-link
                     >
                 </fieldset>
             </form>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue
index cc3ad05703..d3925207ac 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue
@@ -1,18 +1,16 @@
 <template>
-    <div v-if="!this.initialized">Loading...</div>
+    <div v-if="!this.initialized">{{ $t("Loading") }}</div>
     <div v-else-if="this.licenses" id="licenses_list">
         <Toolbar />
         <table v-if="licenses.length" id="license_list"></table>
         <div v-else-if="this.initialized" class="dialog message">
-            There are no licenses defined.
+            {{ $t("There are no licenses defined") }}
         </div>
     </div>
 </template>
 
 <script>
 import Toolbar from "./LicensesToolbar.vue"
-import ButtonEdit from "./ButtonEdit.vue"
-import ButtonDelete from "./ButtonDelete.vue"
 import { createVNode, render } from 'vue'
 import { useAVStore } from "../../stores/authorised_values"
 import { storeToRefs } from "pinia"
@@ -134,16 +132,20 @@ export default {
 
                 $.each($(this).find("td .actions"), function (index, e) {
                     let license_id = api.row(index).data().license_id
-                    let editButton = createVNode(ButtonEdit, {
-                        onClick: () => {
+                    let editButton = createVNode("a", {
+                        class: "btn btn-default btn-xs", role: "button", onClick: () => {
                             edit_license(license_id)
                         }
-                    })
-                    let deleteButton = createVNode(ButtonDelete, {
-                        onClick: () => {
+                    },
+                        [createVNode("i", { class: "fa fa-pencil", 'aria-hidden': "true" }), __("Edit")])
+
+                    let deleteButton = createVNode("a", {
+                        class: "btn btn-default btn-xs", role: "button", onClick: () => {
                             delete_license(license_id)
                         }
-                    })
+                    },
+                        [createVNode("i", { class: "fa fa-trash", 'aria-hidden': "true" }), __("Delete")])
+
                     let n = createVNode('span', {}, [editButton, " ", deleteButton])
                     render(n, e)
                 })
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
index 69355298a7..e3c70dca8c 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
@@ -1,17 +1,17 @@
 <template>
-    <div v-if="!this.initialized">Loading...</div>
+    <div v-if="!this.initialized">{{ $t("Loading") }}</div>
     <div v-else id="licenses_show">
         <h2>
-            License #{{ license.license_id }}
+            {{ $t("License.id", { id: license.license_id }) }}
             <span class="action_links">
                 <router-link
                     :to="`/cgi-bin/koha/erm/licenses/edit/${license.license_id}`"
-                    title="Edit"
+                    :title="$t('Edit')"
                     ><i class="fa fa-pencil"></i
                 ></router-link>
                 <router-link
                     :to="`/cgi-bin/koha/erm/licenses/delete/${license.license_id}`"
-                    title="Delete"
+                    :title="$t('Delete')"
                     ><i class="fa fa-trash"></i
                 ></router-link>
             </span>
@@ -20,37 +20,40 @@
             <fieldset class="rows">
                 <ol>
                     <li>
-                        <label>License name:</label>
+                        <label>{{ $t("License name:") }}</label>
                         <span>
                             {{ license.name }}
                         </span>
                     </li>
                     <li>
-                        <label>Description: </label>
+                        <label>{{ $t("Description:") }}</label>
                         <span>
                             {{ license.description }}
                         </span>
                     </li>
                     <li>
-                        <label>Type: </label>
+                        <label>{{ $t("Type:") }}</label>
                         <span>{{
-                            get_lib_from_av('av_license_types', license.type)
+                            get_lib_from_av("av_license_types", license.type)
                         }}</span>
                     </li>
                     <li>
-                        <label>Status: </label>
+                        <label>{{ $t("Status:") }}</label>
                         <span>{{
-                            get_lib_from_av('av_license_statuses', license.status)
+                            get_lib_from_av(
+                                "av_license_statuses",
+                                license.status
+                            )
                         }}</span>
                     </li>
 
                     <li>
-                        <label>Started on:</label>
+                        <label>{{ $t("Started on:") }}</label>
                         <span>{{ format_date(license.started_on) }}</span>
                     </li>
 
                     <li>
-                        <label>Ended on:</label>
+                        <label>{{ $t("Ended on:") }}</label>
                         <span>{{ format_date(license.ended_on) }}</span>
                     </li>
                 </ol>
@@ -60,7 +63,7 @@
                     to="/cgi-bin/koha/erm/licenses"
                     role="button"
                     class="cancel"
-                    >Close</router-link
+                    >{{ $t("Close") }}</router-link
                 >
             </fieldset>
         </div>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesToolbar.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesToolbar.vue
index 18592e9e66..48d79a679c 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesToolbar.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesToolbar.vue
@@ -1,8 +1,6 @@
 <template>
-    <router-link
-        to="/cgi-bin/koha/erm/licenses/add"
-        class="btn btn-default"
-        ><font-awesome-icon icon="plus" /> New license</router-link
+    <router-link to="/cgi-bin/koha/erm/licenses/add" class="btn btn-default"
+        ><font-awesome-icon icon="plus" /> {{ $t("New license") }}</router-link
     >
 </template>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/locales/en.json b/koha-tmpl/intranet-tmpl/prog/js/vue/locales/en.json
new file mode 100644
index 0000000000..78f05727a5
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/locales/en.json
@@ -0,0 +1,113 @@
+{
+  "tos": "",
+  "language": "",
+  "hello": "",
+  "/": "",
+  "Agreements": "Agreements",
+  "Documents": "Documents",
+  "Document": {
+    "counter": "Document %{counter}"
+  },
+  "E-Resource management": "E-Resource management",
+  "Licenses": "Licenses",
+  "Remove this document": "Remove this document",
+  "File:": "File:",
+  "Select a file": "Select a file",
+  "Update file": "Update file",
+  "File name:": "File name:",
+  "File type:": "File type:",
+  "File description:": "File description:",
+  "File description": "File description",
+  "Uploaded on:": "Uploaded on:",
+  "Physical location:": "Physical location:",
+  "Physical location": "Physical location",
+  "URI:": "URI",
+  "URI": "URI",
+  "Notes:": "",
+  "Notes": "Notes",
+  "Agreement license": {
+    "counter": "Agreement license %{counter}"
+  },
+  "Remove this license": "Remove this license",
+  "License: ": "License",
+  "Required": "Required",
+  "Status: ": "Status",
+  "Add new license": "Add new license",
+  "There are no licenses created yet": "There are no licenses created yet.",
+  "Periods": "Periods",
+  "Agreement period": {
+    "counter": "Agreement period %{counter}"
+  },
+  "Remove this period": "Remove this period",
+  "End date:": "End date:",
+  "Add new period": "Add new period",
+  "Related agreements": "Related agreements",
+  "Related agreement": {
+    "counter": "Related agreements %{counter}"
+  },
+  "Remove this relationship": "Remove this relationship",
+  "Related agreement:": "Related agreement:",
+  "Relationship:": "Relationship:",
+  "Add new related agreement": "Add new related agreement",
+  "There are no other agreements created yet": "There are no other agreements created yet",
+  "Edit agreement": {
+    "id": "Edit agreement #%{id}"
+  },
+  "New agreement": "New agreement",
+  "Agreement name:": "Agreement name:",
+  "Agreement name": "Agreement name",
+  "Vendor:": "Vendor:",
+  "Description:": "Description:",
+  "Description": "Description",
+  "Closure reason:": "Closure reason:",
+  "Is perpetual:": "Is perpetual:",
+  "Renewal priority:": "Renewal priority:",
+  "License info:": "License info:",
+  "Cancel": "Cancel",
+  "Delete agreement": "Delete agreement",
+  "No, do not delete": "No, do not delete",
+  "There are no agreements defined": "There are no agreements defined.",
+  "Agreement": {
+    "id": "Agreement #%{id}"
+  },
+  "Edit": "Edit",
+  "Delete": "Delete",
+  "Status:": "Status:",
+  "Period start": "Period start",
+  "Period end": "Period end",
+  "Cancellation deadline": "Cancellation deadline",
+  "Period note": "Period note",
+  "Users": "Users",
+  "Name": "Name",
+  "Role": "Role",
+  "Status": "Status",
+  "Close": "Close",
+  "Agreement user": {
+    "counter": "Agreement user %{counter}"
+  },
+  "Remove this user": "Remove this user",
+  "User:": "User:",
+  "Select user": "Select user",
+  "Role:": "Role:",
+  "Add new user": "Add new user",
+  "Edit license": {
+    "id": "Edit license #%{id}"
+  },
+  "New license": "New license",
+  "License name:": "License name:",
+  "Type:": "Type:",
+  "Start date:": "Start date:",
+  "Submit": "Submit",
+  "Delete license": "Delete license",
+  "Yes, delete": "Yes, delete",
+  "There are no licenses defined": "There are no licenses defined",
+  "License": {
+    "id": "License #%{counter}"
+  },
+  "Started on:": "Started on:",
+  "Ended on:": "Ended on:",
+  "Cancellation deadline:": "Cancellation deadline:",
+  "Loading": "Loading",
+  "Add new document": "Add new document",
+  "License name": "License name"
+}
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/locales/fr-FR.json b/koha-tmpl/intranet-tmpl/prog/js/vue/locales/fr-FR.json
new file mode 100644
index 0000000000..51c0cfdf20
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/locales/fr-FR.json
@@ -0,0 +1,113 @@
+{
+  "tos": "",
+  "language": "",
+  "hello": "",
+  "/": "",
+  "Agreements": "",
+  "Documents": "",
+  "Document": {
+    "counter": ""
+  },
+  "E-Resource management": "",
+  "Licenses": "",
+  "Remove this document": "",
+  "File:": "",
+  "Select a file": "",
+  "Update file": "",
+  "File name:": "",
+  "File type:": "",
+  "File description:": "",
+  "File description": "",
+  "Uploaded on:": "",
+  "Physical location:": "",
+  "Physical location": "",
+  "URI:": "",
+  "URI": "",
+  "Notes:": "",
+  "Notes": "",
+  "Agreement license": {
+    "counter": ""
+  },
+  "Remove this license": "",
+  "License: ": "",
+  "Required": "",
+  "Status: ": "",
+  "Add new license": "",
+  "Periods": "",
+  "Agreement period": {
+    "counter": ""
+  },
+  "Remove this period": "",
+  "Add new period": "",
+  "Related agreements": "",
+  "Related agreement": {
+    "counter": ""
+  },
+  "Remove this relationship": "",
+  "Related agreement:": "",
+  "Relationship:": "",
+  "Add new related agreement": "",
+  "There are no other agreements created yet": "",
+  "Loading": "",
+  "Edit agreement": {
+    "id": ""
+  },
+  "New agreement": "",
+  "Agreement name:": "",
+  "Agreement name": "",
+  "Vendor:": "",
+  "Description:": "",
+  "Description": "",
+  "Closure reason:": "",
+  "Is perpetual:": "",
+  "Renewal priority:": "",
+  "License info:": "",
+  "Cancel": "",
+  "Delete agreement": "",
+  "No, do not delete": "",
+  "There are no agreements defined": "",
+  "Agreement": {
+    "id": ""
+  },
+  "Edit": "",
+  "Delete": "",
+  "Status:": "",
+  "Period start": "",
+  "Period end": "",
+  "Cancellation deadline": "",
+  "Period note": "",
+  "Users": "",
+  "Name": "",
+  "Role": "",
+  "Status": "",
+  "Close": "",
+  "Agreement user": {
+    "counter": ""
+  },
+  "Remove this user": "",
+  "User:": "",
+  "Select user": "",
+  "Role:": "",
+  "Add new user": "",
+  "Edit license": {
+    "id": ""
+  },
+  "New license": "",
+  "License name:": "",
+  "Type:": "",
+  "Start date:": "",
+  "End date:": "",
+  "Submit": "",
+  "Delete license": "",
+  "Yes, delete": "",
+  "There are no licenses defined": "",
+  "License": {
+    "id": ""
+  },
+  "Started on:": "",
+  "Ended on:": "",
+  "There are no licenses created yet": "",
+  "Cancellation deadline:": "",
+  "Add new document": "",
+  "License name": ""
+}
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts
index 123cfde066..2a3f60f735 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts
@@ -15,12 +15,20 @@ import { routes } from "./routes";
 const router = createRouter({ history: createWebHistory(), routes });
 
 import { useMainStore } from "./stores/main";
+
+import { createI18n } from "vue-i18n";
+
+import * as en from "./locales/en.json"; // We could async the load here, see https://vue-i18n.intlify.dev/guide/advanced/lazy.html
+const languages = { en };
+const messages = Object.assign(languages);
+const i18n = createI18n({ locale: "en", messages });
+
 createApp(App)
     .use(createPinia())
     .use(router)
+    .use(i18n)
     .component("font-awesome-icon", FontAwesomeIcon)
     .mount("#erm");
-
 const mainStore = useMainStore();
 const { removeMessages } = mainStore;
 router.beforeEach((to, from) => {
diff --git a/package.json b/package.json
index a7dd99b055..395a4faf7f 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "style-loader": "^3.3.1",
     "vue": "^3.2.31",
     "vue-flatpickr-component": "^9",
+    "vue-i18n": "^9.1.10",
     "vue-router": "^4.0.14"
   },
   "scripts": {
diff --git a/tsconfig.json b/tsconfig.json
index 298160923b..f11d86e7f0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+      "resolveJsonModule": true
   },
   "exclude": ["./cypress"]
 }
-- 
2.39.5