diff --git a/.gitignore b/.gitignore
index df4b755d6e..7a0e072c2c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,6 +31,9 @@
 /public/packs
 /public/packs-test
 
+# Vue i18n messages generated at boot (cf. config/initializers/vue_i18n.rb)
+/public/vue/*.json
+
 # Ignore some JS stuff
 /node_modules
 /yarn-error.log
diff --git a/app/controllers/admin/vue_i18n_controller.rb b/app/controllers/admin/vue_i18n_controller.rb
deleted file mode 100644
index ca1339f0a1..0000000000
--- a/app/controllers/admin/vue_i18n_controller.rb
+++ /dev/null
@@ -1,7 +0,0 @@
-class Admin::VueI18nController < Admin::ApplicationController
-  layout false
-
-  def index
-    render json: I18n.t('vue')
-  end
-end
diff --git a/app/javascript/apps/blocks-editor/BlocksEditorApp.vue b/app/javascript/apps/blocks-editor/BlocksEditorApp.vue
index 7b71cec299..51533004ee 100644
--- a/app/javascript/apps/blocks-editor/BlocksEditorApp.vue
+++ b/app/javascript/apps/blocks-editor/BlocksEditorApp.vue
@@ -11,12 +11,10 @@ export default {
       loading: true,
       csrfToken: '',
       url: {
-        i18n: '',
         new: '',
         reorder: '',
         data: '',
       },
-      i18n: {},
       data: {},
       planMode: false,
       offcanvasState: 'closed', // closed, picking, editing
@@ -26,11 +24,9 @@ export default {
   beforeMount() {
     this.csrfToken = document.querySelector('[name="csrf-token"]').content;
     const dataset = document.getElementById('blocks-editor-app').dataset;
-    this.url.i18n = dataset.i18nUrl;
     this.url.data = dataset.dataUrl;
     this.url.new = dataset.newUrl;
     this.url.reorder = dataset.reorderUrl;
-    this.loadJson(this.url.i18n, 'i18n');
     this.refresh();
   },
   methods: {
@@ -38,7 +34,7 @@ export default {
       const res = await fetch(url, { headers: { Accept: 'application/json' } });
       if (!res.ok) return;
       this[target] = await res.json();
-      if (this.i18n.blocksEditor && this.data.blocks) {
+      if (this.data.blocks) {
         this.loading = false;
       }
     },
@@ -77,7 +73,7 @@ export default {
       notyf.open({
         type: 'success',
         position: { x: 'left', y: 'bottom' },
-        message: this.i18n.blocksEditor.confirm.copy,
+        message: this.$t('blocksEditor.confirm.copy'),
         duration: 9000,
         ripple: true,
         dismissible: true,
@@ -137,19 +133,18 @@ export default {
           <a
             class="btn btn-lg btn-dark me-2 mb-2"
             @click="onAdd">
-            {{ i18n.blocksEditor.actions.addBlock }}</a>
+            {{ $t('blocksEditor.actions.addBlock') }}</a>
           <a
             class="btn btn-sm float-md-end"
             :class="{'btn-success': planMode, 'btn-light': !planMode}"
             @click="planMode = !planMode"
             v-show="data.blocks.length > 2">
             <i class="fas fa-list"></i>
-            {{ i18n.blocksEditor.planMode.button }}</a>
+            {{ $t('blocksEditor.planMode.button') }}</a>
         </div>
       </div>
       <Blocks
         v-model="data.blocks"
-        :i18n="i18n"
         @edit="onEdit"
         @delete="onDelete"
         @copy="onCopy"
@@ -162,13 +157,13 @@ export default {
           <a
             class="btn btn-lg btn-dark"
             @click="onAdd">
-            {{ i18n.blocksEditor.actions.addBlock }}</a>
+            {{ $t('blocksEditor.actions.addBlock') }}</a>
         </div>
       </div>
       <OffcanvasShell
         :open="offcanvasState !== 'closed'"
-        :title="i18n.blocksEditor.offcanvas.title"
-        :close-label="i18n.blocksEditor.offcanvas.close"
+        :title="$t('blocksEditor.offcanvas.title')"
+        :close-label="$t('blocksEditor.offcanvas.close')"
         @close="closeOffcanvas">
         <TemplatePicker
           v-if="offcanvasState === 'picking'"
diff --git a/app/javascript/apps/blocks-editor/components/Blocks.vue b/app/javascript/apps/blocks-editor/components/Blocks.vue
index ca7a9ef28d..fdc9a3c984 100644
--- a/app/javascript/apps/blocks-editor/components/Blocks.vue
+++ b/app/javascript/apps/blocks-editor/components/Blocks.vue
@@ -7,7 +7,6 @@ export default {
     },
     props: [
       'modelValue',
-      'i18n',
     ],
     emits: [
       'update:modelValue',
@@ -37,7 +36,7 @@ export default {
       },
       onDelete(event, block) {
         event.preventDefault();
-        if (!confirm(this.i18n.blocksEditor.confirm.deletion)) return;
+        if (!confirm(this.$t('blocksEditor.confirm.deletion'))) return;
         this.$emit('delete', block);
       },
       onCopy(event, block) {
@@ -46,7 +45,7 @@ export default {
       },
       onDuplicate(event, block) {
         event.preventDefault();
-        if (!confirm(this.i18n.blocksEditor.confirm.duplication)) return;
+        if (!confirm(this.$t('blocksEditor.confirm.duplication'))) return;
         this.$emit('duplicate', block);
       },
     }
@@ -83,7 +82,7 @@ export default {
                     <span class="handle">
                       <i class="fas fa-sort"></i>
                       <span class="small">
-                         {{ i18n.blocksEditor.actions.move }}
+                         {{ $t('blocksEditor.actions.move') }}
                       </span>
                     </span>
                   </span>
@@ -91,23 +90,23 @@ export default {
                     href="#"
                     class="action text-danger ms-2"
                     @click="onDelete($event, block)">
-                    {{ i18n.blocksEditor.actions.delete }}</a>
+                    {{ $t('blocksEditor.actions.delete') }}</a>
                   <a
                     href="#"
                     class="action ms-2"
                     @click="onCopy($event, block)">
-                    {{ i18n.blocksEditor.actions.copy }}</a>
+                    {{ $t('blocksEditor.actions.copy') }}</a>
                   <a
                     href="#"
                     class="action ms-2"
                     @click="onDuplicate($event, block)">
-                    {{ i18n.blocksEditor.actions.duplicate }}</a>
+                    {{ $t('blocksEditor.actions.duplicate') }}</a>
                 </span>
                 <a 
                   href="#"
                   class="action ms-2"
                   @click="onEdit($event, block)">
-                  {{ i18n.blocksEditor.actions.edit }}</a>
+                  {{ $t('blocksEditor.actions.edit') }}</a>
               </div>
               <div
                 class="vue__blocks-editor__elements__preview"
diff --git a/app/javascript/apps/components/Changes.vue b/app/javascript/apps/components/Changes.vue
index f2db4b8c17..03fdb29a7f 100644
--- a/app/javascript/apps/components/Changes.vue
+++ b/app/javascript/apps/components/Changes.vue
@@ -2,8 +2,7 @@
 export default {
     props: [
       'modelValue',
-      'endpoint',
-      'i18n'
+      'endpoint'
     ],
     emits: ['update:modelValue'],
     computed: {
@@ -69,13 +68,13 @@ export default {
             class="btn btn-light vue__changes__cancel"
             @click="cancel()"
             :disabled="savingInProgress">
-      {{ i18n.cancel }}
+      {{ $t('changes.cancel') }}
     </button>
     <button type="button"
             class="btn btn-success vue__changes__save"
             @click="save()"
             :disabled="savingInProgress">
-      {{ i18n.save }}
+      {{ $t('changes.save') }}
     </button>
   </div>
 </template>
diff --git a/app/javascript/apps/components/CropperModal.vue b/app/javascript/apps/components/CropperModal.vue
index ccba152cb2..633a410d3c 100644
--- a/app/javascript/apps/components/CropperModal.vue
+++ b/app/javascript/apps/components/CropperModal.vue
@@ -23,7 +23,6 @@ export default {
           width: null,
           height: null,
         },
-        i18n: {},
       }
     },
     methods: {
@@ -74,10 +73,6 @@ export default {
         xhr.send(JSON.stringify(this.data));
       },
     },
-    beforeMount() {
-      this.dataset = document.getElementById('media-picker-app').dataset;
-      this.i18n = JSON.parse(this.dataset.i18n).cropperModal;
-    },
 };
 
 // On utilise canvas=false et check-orientation=false pour éviter les problèmes de CORS
@@ -94,7 +89,7 @@ export default {
       <div class="modal-dialog modal-lg">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title">{{i18n.title}}</h5>
+            <h5 class="modal-title">{{ $t('cropperModal.title') }}</h5>
             <button type="button"
                     class="btn-close"
                     @click="close()">
@@ -115,7 +110,7 @@ export default {
           <div class="modal-footer justify-content-between">
             <button type="button"
                     class="btn btn-sm"
-                    :aria-label="i18n.rotate"
+                    :aria-label="$t('cropperModal.rotate')"
                     @click="rotate(90)">
               <i class="bi bi-arrow-clockwise"></i>
             </button>
@@ -124,13 +119,13 @@ export default {
                       class="btn btn-sm btn-secondary me-2"
                       :disabled="pending"
                       @click="close()">
-                {{ i18n.cancel }}
+                {{ $t('cropperModal.cancel') }}
               </button>
               <button type="button"
                       class="btn btn-sm btn-primary"
                       :disabled="pending"
                       @click="crop()">
-                {{ i18n.validate }}
+                {{ $t('cropperModal.validate') }}
               </button>
             </div>
           </div>
diff --git a/app/javascript/apps/index.js b/app/javascript/apps/index.js
index 8f8cfd4910..32e895fac7 100644
--- a/app/javascript/apps/index.js
+++ b/app/javascript/apps/index.js
@@ -1,18 +1,36 @@
 import { createApp } from 'vue';
+import { createI18n } from 'vue-i18n';
 import SsoMappingApp from './sso-mapping/SsoMappingApp.vue';
 import MediaPickerApp from './media-picker/MediaPickerApp.vue';
 import TimeSlotsApp from './time-slots/TimeSlotsApp.vue';
 import BlocksEditorApp from './blocks-editor/BlocksEditorApp.vue';
 
-if (document.getElementById('sso-mapping-app')) {
-    createApp(SsoMappingApp).mount('#sso-mapping-app');
-}
-if (document.getElementById('media-picker-app')) {
-    createApp(MediaPickerApp).mount('#media-picker-app');
-}
-if (document.getElementById('time-slots-app')) {
-    createApp(TimeSlotsApp).mount('#time-slots-app');
-}
-if (document.getElementById('blocks-editor-app')) {
-    createApp(BlocksEditorApp).mount('#blocks-editor-app');
+// Messages are precompiled at boot into public/vue/<locale>.json (cf.
+// config/initializers/vue_i18n.rb) and fetched once as a cacheable static file,
+// then shared by every app through a single vue-i18n instance.
+async function boot() {
+  const locale = document.documentElement.lang || 'fr';
+  const messages = await fetch(`/vue/${locale}.json`)
+    .then((res) => res.json())
+    .catch(() => ({}));
+  const i18n = createI18n({
+    legacy: false,
+    globalInjection: true,
+    locale,
+    fallbackLocale: 'fr',
+    messages: { [locale]: messages },
+  });
+
+  const mount = (App, selector) => {
+    if (document.querySelector(selector)) {
+      createApp(App).use(i18n).mount(selector);
+    }
+  };
+
+  mount(SsoMappingApp, '#sso-mapping-app');
+  mount(MediaPickerApp, '#media-picker-app');
+  mount(TimeSlotsApp, '#time-slots-app');
+  mount(BlocksEditorApp, '#blocks-editor-app');
 }
+
+boot();
diff --git a/app/javascript/apps/media-picker/MediaPickerApp.vue b/app/javascript/apps/media-picker/MediaPickerApp.vue
index 4c8bbf781f..9a24d8cda7 100644
--- a/app/javascript/apps/media-picker/MediaPickerApp.vue
+++ b/app/javascript/apps/media-picker/MediaPickerApp.vue
@@ -16,7 +16,6 @@ export default {
     data () {
       return {
         current: {},
-        i18n: {},
       }
     },
     methods: {
@@ -57,7 +56,6 @@ export default {
     },
     beforeMount() {
       this.dataset = document.getElementById('media-picker-app').dataset
-      this.i18n = JSON.parse(this.dataset.i18n);
       this.summernoteLang = this.dataset.summernoteLang;
       this.current = JSON.parse(this.dataset.current);
     },
@@ -70,7 +68,7 @@ export default {
 <template>
   <section class="vue__media-picker">
     <div class="d-lg-flex me-4 mb-0">
-      <label class="form-label">{{ i18n.mediaPicker.title }}</label>
+      <label class="form-label">{{ $t('mediaPicker.title') }}</label>
     </div>
     <div class="app-content">
       <div v-if="!current.image.url" class="vue__media-picker__selector">
@@ -87,33 +85,32 @@ export default {
           <a  class="btn btn-sm text-danger pe-0"
               @click="removeImage()">
             <i class="<%= Icon::DELETE %>"></i>
-            {{ i18n.mediaPicker.remove }}
+            {{ $t('mediaPicker.remove') }}
           </a>
         </div>
         <div class="mb-3">
-          <label class="form-label" aria-label="{{ i18n.mediaPicker.alt.label }}" for="alt">
-            {{ i18n.mediaPicker.alt.label }}
+          <label class="form-label" :aria-label="$t('mediaPicker.alt.label')" for="alt">
+            {{ $t('mediaPicker.alt.label') }}
           </label>
           <input  id="alt"
                   class="form-control"
                   data-translatable="true"
                   v-model="current.image.alt"
                   type="text">
-          <div class="form-text">{{ i18n.mediaPicker.alt.hint }}</div>
+          <div class="form-text">{{ $t('mediaPicker.alt.hint') }}</div>
         </div>
         <div class="mb-3 summernote">
-          <label class="form-label" :aria-label="i18n.mediaPicker.credit.label" for="credit">
-            {{ i18n.mediaPicker.credit.label }}
+          <label class="form-label" :aria-label="$t('mediaPicker.credit.label')" for="credit">
+            {{ $t('mediaPicker.credit.label') }}
           </label>
           <Summernote id="credit"
                       :lang="summernoteLang"
                       v-model="current.image.credit" />
-          <div class="form-text">{{ i18n.mediaPicker.credit.hint }}</div>
+          <div class="form-text">{{ $t('mediaPicker.credit.hint') }}</div>
         </div>
       </div>
     </div>
   </section>
   <Changes  v-model="current"
-            :i18n="i18n.changes"
             :endpoint="dataset.changesEndpoint" />
 </template>
diff --git a/app/javascript/apps/media-picker/components/Cloud.vue b/app/javascript/apps/media-picker/components/Cloud.vue
index f4c765721c..1741654fa8 100644
--- a/app/javascript/apps/media-picker/components/Cloud.vue
+++ b/app/javascript/apps/media-picker/components/Cloud.vue
@@ -27,7 +27,6 @@ export default {
             total_pages: 0,
           }
         },
-        i18n: {},
       }
     },
     methods: {
@@ -93,7 +92,6 @@ export default {
       const dataset = document.getElementById('media-picker-app').dataset;
       this.lang = dataset.lang;
       this.query = JSON.parse(dataset.current).about.name;
-      this.i18n = JSON.parse(dataset.i18n).mediaPicker.cloud;
       this.settings = JSON.parse(dataset.cloud);
     },
 };
@@ -105,28 +103,28 @@ export default {
           class="btn btn-sm ms-n2"
           @click="open()">
       <CloudDownload stroke-width="1.5" />
-      {{ i18n.button }}
+      {{ $t('mediaPicker.cloud.button') }}
     </button>
     <div class="modal" tabindex="-1" role="dialog" :class="{'d-block': modal}">
       <div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
         <div class="modal-content">
           <div class="modal-header">
             <div class="col-auto d-none d-lg-block">
-              <h5 class="modal-title">{{ i18n.title }}</h5>
+              <h5 class="modal-title">{{ $t('mediaPicker.cloud.title') }}</h5>
             </div>
             <div class="col-auto d-flex flex-fill mx-lg-5">
               <div class="input-group">
                 <input  type="text"
                         name="search"
                         class="form-control ms-auto"
-                        :placeholder="i18n.placeholder"
+                        :placeholder="$t('mediaPicker.cloud.placeholder')"
                         v-model="query"
                         @keyup.enter="search">
                 <button type="button"
                         class="btn btn-primary me-auto"
                         @click="search"
-                        :aria-label="i18n.search">
-                  {{ i18n.search }}
+                        :aria-label="$t('mediaPicker.cloud.search')">
+                  {{ $t('mediaPicker.cloud.search') }}
                 </button>
               </div>
             </div>
@@ -141,7 +139,7 @@ export default {
             <div class="row">
               <div class="col-lg-6">
                 <p v-if="unsplash.data.results.length === 0" >
-                  {{ i18n.nothing }}
+                  {{ $t('mediaPicker.cloud.nothing') }}
                 </p>
                 <div v-if="unsplash.data.total_pages" class="d-flex justify-content-between mb-2">
                   <div class="vue__media-picker__button_container">
@@ -149,7 +147,7 @@ export default {
                       class="btn btn-sm ps-0"
                       v-if="unsplash.page > 1"
                       @click="unsplash.page = unsplash.page - 1"
-                      title="{{ i18n.previous }}">
+                      :title="$t('mediaPicker.cloud.previous')">
                       <ArrowLeft stroke-width="1.5" />
                     </button>
                   </div>
@@ -161,7 +159,7 @@ export default {
                       class="btn btn-sm pe-0"
                       v-if="unsplash.page < unsplash.data.total_pages"
                       @click="unsplash.page = unsplash.page + 1"
-                      title="{{ i18n.next }}">
+                      :title="$t('mediaPicker.cloud.next')">
                       <ArrowRight stroke-width="1.5" />
                     </button>
                   </div>
@@ -176,7 +174,7 @@ export default {
               </div>
               <div class="col-lg-6">
                 <p v-if="pexels.data.results.length === 0" >
-                  {{ i18n.nothing }}
+                  {{ $t('mediaPicker.cloud.nothing') }}
                 </p>
                 <div v-if="pexels.data.total_pages" class="d-flex justify-content-between mb-2">
                   <div class="vue__media-picker__button_container">
@@ -184,7 +182,7 @@ export default {
                       class="btn btn-sm ps-0"
                       v-if="pexels.page > 1"
                       @click="pexels.page = pexels.page - 1"
-                      title="{{ i18n.previous }}">
+                      :title="$t('mediaPicker.cloud.previous')">
                       <ArrowLeft stroke-width="1.5" />
                     </button>
                   </div>
@@ -196,7 +194,7 @@ export default {
                       class="btn btn-sm pe-0"
                       v-if="pexels.page < pexels.data.total_pages"
                       @click="pexels.page = pexels.page + 1"
-                      title="{{ i18n.next }}">
+                      :title="$t('mediaPicker.cloud.next')">
                       <ArrowRight stroke-width="1.5" />
                     </button>
                   </div>
diff --git a/app/javascript/apps/media-picker/components/ImageUploader.vue b/app/javascript/apps/media-picker/components/ImageUploader.vue
index 74c09b08b8..b2157a1889 100644
--- a/app/javascript/apps/media-picker/components/ImageUploader.vue
+++ b/app/javascript/apps/media-picker/components/ImageUploader.vue
@@ -10,10 +10,10 @@ export default {
   computed: {
     sizeWarningSentence: {
       get() {
-        let sentence = this.i18n.size.text;
-        sentence = sentence.replace(':size', this.file.size.mo);
-        sentence = sentence.replace(':max', this.size.max.mo);
-        return sentence;
+        return this.$t('mediaPicker.imageUploader.size.text', {
+          size: this.file.size.mo,
+          max: this.size.max.mo,
+        });
       }
     },
   },
@@ -46,7 +46,6 @@ export default {
       },
       directUpload: null,
       keycdnUrl: null,
-      i18n: {},
     }
   },
   methods: {
@@ -116,7 +115,6 @@ export default {
     if (dataset.keycdn !== '') {
       this.keycdnUrl = "https://" + dataset.keycdn;
     }
-    this.i18n = JSON.parse(dataset.i18n).mediaPicker.imageUploader;
     this.formats = {
       accepted: dataset.formatsAccepted,
       hint: dataset.formatsAcceptedHint,
@@ -137,7 +135,7 @@ export default {
               class="btn"
               @click.prevent="$refs.file.click()">
         <Upload stroke-width="1.5" />
-        {{ i18n.button }}
+        {{ $t('mediaPicker.imageUploader.button') }}
       </button>
       <div class="form-text">{{ formats.hint }}</div>
     </div>
@@ -152,7 +150,7 @@ export default {
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title">{{ i18n.size.title }}</h5>
+            <h5 class="modal-title">{{ $t('mediaPicker.imageUploader.size.title') }}</h5>
             <button type="button"
                     class="btn-close"
                     @click="closeAlert()">
@@ -164,7 +162,7 @@ export default {
             <button type="button"
                     class="btn btn-sm btn-secondary ms-auto"
                     @click="closeAlert()">
-              {{ i18n.size.close }}
+              {{ $t('mediaPicker.imageUploader.size.close') }}
             </button>
           </div>
         </div>
diff --git a/app/javascript/apps/media-picker/components/Medias.vue b/app/javascript/apps/media-picker/components/Medias.vue
index 6f0f3bdb56..2cdd862969 100644
--- a/app/javascript/apps/media-picker/components/Medias.vue
+++ b/app/javascript/apps/media-picker/components/Medias.vue
@@ -24,7 +24,6 @@ export default {
           collections: [],
           categories: [],
         },
-        i18n: {},
       }
     },
     methods: {
@@ -86,7 +85,6 @@ export default {
     },
     beforeMount() {
       const dataset = document.getElementById('media-picker-app').dataset;
-      this.i18n = JSON.parse(dataset.i18n).mediaPicker.medias;
       this.endpoint = dataset.mediaEndpoint;
     },
 };
@@ -98,7 +96,7 @@ export default {
             class="btn btn-sm mx-n2"
             @click="open()">
       <Image stroke-width="1.5" />
-      {{ i18n.button }}
+      {{ $t('mediaPicker.medias.button') }}
     </button>
     <div  class="modal"
           tabindex="-1"
@@ -108,21 +106,21 @@ export default {
         <div class="modal-content">
           <div class="modal-header">
             <div class="col-auto d-none d-lg-block">
-              <h5 class="modal-title">{{ i18n.title }}</h5>
+              <h5 class="modal-title">{{ $t('mediaPicker.medias.title') }}</h5>
             </div>
             <div class="col-auto d-flex flex-fill mx-lg-5">
               <div class="input-group">
                 <input  type="text"
                         name="search"
                         class="form-control ms-auto"
-                        :placeholder="i18n.placeholder"
+                        :placeholder="$t('mediaPicker.medias.placeholder')"
                         v-model="query"
                         @keyup.enter="search">
                 <button type="button"
                         class="btn btn-primary me-auto"
-                        :aria-label="i18n.search"
+                        :aria-label="$t('mediaPicker.medias.search')"
                         @click="search">
-                  {{ i18n.search }}
+                  {{ $t('mediaPicker.medias.search') }}
                 </button>
               </div>
             </div>
@@ -137,7 +135,7 @@ export default {
             <div class="row">
               <div class="col-md-2">
                 <div class="mb-4">
-                  <p class="small text-muted mb-1">{{ i18n.collections }}</p>
+                  <p class="small text-muted mb-1">{{ $t('mediaPicker.medias.collections') }}</p>
                   <div v-for="collection in data.collections" class="form-check">
                     <input  class="form-check-input"
                             type="checkbox"
@@ -153,14 +151,14 @@ export default {
                 <Taxonomies v-model="data.taxonomies" @toggle="toggleCategory" />
               </div>
               <div class="col-md-10">
-                <p v-if="data.results.length === 0" >{{ i18n.nothing }}</p>
+                <p v-if="data.results.length === 0" >{{ $t('mediaPicker.medias.nothing') }}</p>
                 <div v-if="data.total_pages" class="d-flex justify-content-between mb-2">
                   <div class="vue__media-picker__button_container">
                     <button
                       class="btn btn-sm ps-0"
                       v-if="page > 1"
                       @click="page = page - 1"
-                      title="{{ i18n.previous }}">
+                      :title="$t('mediaPicker.medias.previous')">
                       <ArrowLeft stroke-width="1.5" />
                     </button>
                   </div>
@@ -172,7 +170,7 @@ export default {
                       class="btn btn-sm pe-0"
                       v-if="page < data.total_pages"
                       @click="page = page + 1"
-                      title="{{ i18n.next }}">
+                      :title="$t('mediaPicker.medias.next')">
                       <ArrowRight stroke-width="1.5" />
                     </button>
                   </div>
diff --git a/app/javascript/apps/time-slots/TimeSlotsApp.vue b/app/javascript/apps/time-slots/TimeSlotsApp.vue
index c898dbbc4c..f60d0dad8c 100644
--- a/app/javascript/apps/time-slots/TimeSlotsApp.vue
+++ b/app/javascript/apps/time-slots/TimeSlotsApp.vue
@@ -13,7 +13,6 @@ export default {
     data () {
       return {
         current: {},
-        i18n: {},
       }
     },
     methods: {
@@ -40,7 +39,6 @@ export default {
     beforeMount() {
       this.dataset = document.getElementById('time-slots-app').dataset
       this.current = JSON.parse(this.dataset.current);
-      this.i18n = JSON.parse(this.dataset.i18n);
     },
 };
 </script>
@@ -54,7 +52,7 @@ export default {
           v-show="current.slots.length < 30"
           @click="addSlot()">
           <Plus width="20" stroke-width="1.5" />
-          {{ i18n.timeSlots.add }}
+          {{ $t('timeSlots.add') }}
         </button>
       </div>
       <div class="col-xxl-8">
@@ -78,7 +76,6 @@ export default {
             <div class="col-lg-2">
               <Duration
                       v-model="slot.duration"
-                      :i18n="i18n.timeSlots.duration"
                       />
             </div>
             <div class="col-lg-4">
@@ -87,7 +84,7 @@ export default {
                       data-translatable="true" 
                       v-model="slot.place"
                       type="text"
-                      :placeholder="i18n.timeSlots.place.label"
+                      :placeholder="$t('timeSlots.place.label')"
                       />
             </div>
             <div class="col-lg-1">
@@ -102,6 +99,5 @@ export default {
     </div>
   </section>
   <Changes  v-model="current"
-            :i18n="i18n.changes"
             :endpoint="dataset.changesEndpoint" />
 </template>
diff --git a/app/javascript/apps/time-slots/components/Duration.vue b/app/javascript/apps/time-slots/components/Duration.vue
index 606b2fb0cc..75cec9f5c4 100644
--- a/app/javascript/apps/time-slots/components/Duration.vue
+++ b/app/javascript/apps/time-slots/components/Duration.vue
@@ -1,8 +1,7 @@
 <script>
 export default {
   props: [
-    'modelValue',
-    'i18n'
+    'modelValue'
   ],
   emits: ['update:modelValue'],
   data() {
@@ -70,11 +69,11 @@ export default {
 <template>
   <div>
     <select class="form-select" v-model="preset">
-      <option value="0">{{ i18n.label }}</option>
+      <option value="0">{{ $t('timeSlots.duration.label') }}</option>
       <option v-for="value in presetValues" :key="value[0]" :value="value[0]">
         {{ value[1] }}
       </option>
-      <option value="custom">{{ i18n.custom }}</option>
+      <option value="custom">{{ $t('timeSlots.duration.custom') }}</option>
     </select>
     <div>
       <input type="number" class="form-control" v-model.number="custom" v-if="preset === 'custom'">
diff --git a/app/views/admin/communication/blocks/group/_editor.html.erb b/app/views/admin/communication/blocks/group/_editor.html.erb
index 3ba9ec4e9d..21db90d7f9 100644
--- a/app/views/admin/communication/blocks/group/_editor.html.erb
+++ b/app/views/admin/communication/blocks/group/_editor.html.erb
@@ -1,9 +1,4 @@
 <%
-# L'url contenant les locales (TODO doit être mise en cache)
-i18n_url    = admin_vue_i18n_path(
-                website_id: nil,
-                extranet_id: nil,
-                journal_id: nil)
 # La liste des blocs
 data_url    = root_admin_communication_group_blocks_path(
                 about_type: about.class.polymorphic_name,
@@ -26,7 +21,6 @@ reorder_url = reorder_admin_communication_blocks_path(
 %>
 <div 
   id="blocks-editor-app"
-  data-i18n-url="<%= i18n_url %>"
   data-data-url="<%= data_url %>"
   data-new-url="<%= new_url %>"
   data-reorder-url="<%= reorder_url %>">
diff --git a/app/views/admin/communication/medias/_picker.html.erb b/app/views/admin/communication/medias/_picker.html.erb
index 07f636f3f2..1a764e55b7 100644
--- a/app/views/admin/communication/medias/_picker.html.erb
+++ b/app/views/admin/communication/medias/_picker.html.erb
@@ -20,7 +20,6 @@ cloud = {
       data-changes-endpoint="<%= pick_admin_communication_medias_path(website_id: nil, extranet_id: nil, journal_id: nil, format: :json) %>"
       data-formats-accepted="<%= default_images_formats_accepted %>"
       data-formats-accepted-hint="<%= images_formats_accepted_hint %>"
-      data-i18n="<%= t('vue').to_json %>"
       data-cloud="<%= cloud.to_json %>"
       data-keycdn="<%= ENV["KEYCDN_HOST"] %>"
       data-media-endpoint="<%= admin_communication_medias_url(website_id: nil, extranet_id: nil, journal_id: nil, format: :json) %>"
diff --git a/app/views/admin/communication/websites/agenda/events/show/_time_slots.html.erb b/app/views/admin/communication/websites/agenda/events/show/_time_slots.html.erb
index 939e9f3511..f0d0e6173b 100644
--- a/app/views/admin/communication/websites/agenda/events/show/_time_slots.html.erb
+++ b/app/views/admin/communication/websites/agenda/events/show/_time_slots.html.erb
@@ -4,7 +4,6 @@
     <div  id="time-slots-app"
           data-changes-endpoint="<%= save_time_slots_admin_communication_website_agenda_event_path(event) %>"
           data-current="<%= event.time_slots_to_json(current_language).to_json %>"
-          data-i18n="<%= t('vue').to_json %>"
           >
     </div>
   </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 1b759df962..8897367cee 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="<%= I18n.locale %>">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
diff --git a/config/initializers/vue_i18n.rb b/config/initializers/vue_i18n.rb
new file mode 100644
index 0000000000..22f123e897
--- /dev/null
+++ b/config/initializers/vue_i18n.rb
@@ -0,0 +1,16 @@
+# Génère les fichiers de traduction statiques des apps Vue dans
+# public/vue/<locale>.json. Ils servent de messages à vue-i18n (cf.
+# app/javascript/apps/index.js) et sont chargés une seule fois, en statique
+# cacheable, plutôt que sérialisés dans chaque page.
+#
+# after_initialize garantit que tous les config/locales/**/*.yml sont bien
+# ajoutés à I18n.load_path. En dev, redémarrer le serveur régénère les fichiers
+# après modification d'une traduction.
+Rails.application.config.after_initialize do
+  output_dir = Rails.root.join('public', 'vue')
+  FileUtils.mkdir_p(output_dir)
+  I18n.available_locales.each do |locale|
+    translations = I18n.t('vue', locale: locale, default: {})
+    File.write(output_dir.join("#{locale}.json"), translations.to_json)
+  end
+end
diff --git a/config/locales/vue/en.yml b/config/locales/vue/en.yml
index 0568059881..e530258ee8 100644
--- a/config/locales/vue/en.yml
+++ b/config/locales/vue/en.yml
@@ -48,7 +48,7 @@ en:
         button: Upload an image
         size:
           close: Close
-          text: "The image sent is far too heavy, it weights :sizeMB! osuny manages all images under :maxMB automatically. When your image is bigger than that, you need to reduce them before upload. You might use a tool like <a href=\"https://www.iloveimg.com/fr\" target=\"_blank\" rel=\"noreferrer\">iLoveIMG</a>."
+          text: "The image sent is far too heavy, it weights {size}MB! osuny manages all images under {max}MB automatically. When your image is bigger than that, you need to reduce them before upload. You might use a tool like <a href=\"https://www.iloveimg.com/fr\" target=\"_blank\" rel=\"noreferrer\">iLoveIMG</a>."
           title: Image too heavy
       medias:
         button: Choose from media library
diff --git a/config/locales/vue/fr.yml b/config/locales/vue/fr.yml
index 0a0cb32c0e..951c61cc8c 100644
--- a/config/locales/vue/fr.yml
+++ b/config/locales/vue/fr.yml
@@ -48,7 +48,7 @@ fr:
         button: Envoyer une image
         size:
           close: Fermer
-          text: "L'image envoyée est beaucoup trop lourde, elle pèse :size Mo ! Sur osuny, nous traitons automatiquement les images de moins de :max Mo. Au-delà de ce poids, il est nécessaire de réduire l'image avant de l'envoyer, par exemple en utilisant un outil comme <a href=\"https://www.iloveimg.com/fr\" target=\"_blank\" rel=\"noreferrer\">iLoveIMG</a>."
+          text: "L'image envoyée est beaucoup trop lourde, elle pèse {size} Mo ! Sur osuny, nous traitons automatiquement les images de moins de {max} Mo. Au-delà de ce poids, il est nécessaire de réduire l'image avant de l'envoyer, par exemple en utilisant un outil comme <a href=\"https://www.iloveimg.com/fr\" target=\"_blank\" rel=\"noreferrer\">iLoveIMG</a>."
           title: Image trop lourde
       medias:
         button: Choisir dans la médiathèque
diff --git a/config/routes.rb b/config/routes.rb
index a9d8aa5ad4..722aaba3a7 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -47,7 +47,6 @@
       post 'profile/optin_newsletter' => 'profile#optin_newsletter', as: :optin_newsletter
       # libre_translate route
       post 'translate/from/:source/to/:target' => 'translation#translate', as: :translate
-      get 'vue_i18n' => 'vue_i18n#index', as: :vue_i18n, defaults: { format: :json }
       put 'favorite' => 'users#favorite', as: :favorite
       get 'search(/website/:website_id)(/extranet/:extranet_id)' => 'search#index', as: :search
       draw 'admin/administration'
diff --git a/esbuild.config.mjs b/esbuild.config.mjs
index d689499156..1376163dff 100644
--- a/esbuild.config.mjs
+++ b/esbuild.config.mjs
@@ -13,7 +13,12 @@ const options = {
     define: {
         __VUE_OPTIONS_API__: 'true',
         __VUE_PROD_DEVTOOLS__: 'false',
-        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+        // vue-i18n feature flags: drop the legacy API (we use legacy: false)
+        // and devtools to keep the bundle lean.
+        __VUE_I18N_FULL_INSTALL__: 'true',
+        __VUE_I18N_LEGACY_API__: 'false',
+        __INTLIFY_PROD_DEVTOOLS__: 'false'
     },
     alias: {
         'vue': 'vue/dist/vue.esm-bundler.js',
diff --git a/package.json b/package.json
index dbcb28d7cb..5f4f4b08b5 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "sortablejs": "^1.14.0",
     "vue": "^3.5.17",
     "vue-advanced-cropper": "^2.8.9",
-    "vue-draggable-next": "^2.3.0"
+    "vue-draggable-next": "^2.3.0",
+    "vue-i18n": "^11.4.6"
   },
   "devDependencies": {
     "esbuild": "^0.25.0",
diff --git a/yarn.lock b/yarn.lock
index ddf14597a4..05091fecda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -157,6 +157,36 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz#9bdad8176be7811ad148d1f8772359041f46c6c5"
   integrity sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==
 
+"@intlify/core-base@11.4.6":
+  version "11.4.6"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-11.4.6.tgz#7402cd6f7e1c813e7a8370afa3654d2d9034783a"
+  integrity sha512-EOeHO95XESK9IFHgHeZXunsM/WBAoCA0DlaWODvx14vKmetAuS97t+l6Xe9hTUqntPpF93vtVSjjUDafw3wXMw==
+  dependencies:
+    "@intlify/devtools-types" "11.4.6"
+    "@intlify/message-compiler" "11.4.6"
+    "@intlify/shared" "11.4.6"
+
+"@intlify/devtools-types@11.4.6":
+  version "11.4.6"
+  resolved "https://registry.yarnpkg.com/@intlify/devtools-types/-/devtools-types-11.4.6.tgz#2280698191c7a238f7ce9fe69cafba6280277b40"
+  integrity sha512-wowQPpNem56b2d43IJmqbrzG2FeBKe5f/kUGlpNuBmXs6OSqncF8m1+1lxHuW8ISZJF0ma2RkW3iLkw0g0G4VA==
+  dependencies:
+    "@intlify/core-base" "11.4.6"
+    "@intlify/shared" "11.4.6"
+
+"@intlify/message-compiler@11.4.6":
+  version "11.4.6"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-11.4.6.tgz#4afde994de403f2e2d9569cd52eae7707f5d3008"
+  integrity sha512-5nj3jULqeTAC1WovwMs1LQWgatTa2pM/rXN9T3XW8rdOtXW9ZF6/GLSNFTKDQmPLwclhPdgUWLJ/4w3fMeeC/Q==
+  dependencies:
+    "@intlify/shared" "11.4.6"
+    source-map-js "^1.0.2"
+
+"@intlify/shared@11.4.6":
+  version "11.4.6"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-11.4.6.tgz#06431217c1ea12f91b303f026f485eb0a4cebe6a"
+  integrity sha512-m1p1HHAMLhqSpTRH7VnXdrN0CQ4y+9vunFkpLkbD8soIuBsnQdawZXqMCgvwI2UVF9Ww7sVaw7g9tV2VO7shoA==
+
 "@jridgewell/sourcemap-codec@^1.5.5":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz#6912b00d2c631c0d15ce1a7ab57cd657f2a8f8ba"
@@ -204,6 +234,11 @@
     "@vue/compiler-dom" "3.5.35"
     "@vue/shared" "3.5.35"
 
+"@vue/devtools-api@^6.5.0":
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
+
 "@vue/reactivity@3.5.35":
   version "3.5.35"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.35.tgz#45b9794ca77ff5ade2eee74bcdeacbc00ae8e7a2"
@@ -403,7 +438,7 @@ sortablejs@^1.14.0:
   resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.15.7.tgz#83a0bddc472117ee328dea20b2e6f490fed20f86"
   integrity sha512-Kk8wLQPlS+yi1ZEf48a4+fzHa4yxjC30M/Sr2AnQu+f/MPwvvX9XjZ6OWejiz8crBsLwSq8GHqaxaET7u6ux0A==
 
-source-map-js@^1.2.1:
+source-map-js@^1.0.2, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@@ -422,6 +457,16 @@ vue-draggable-next@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-draggable-next/-/vue-draggable-next-2.3.0.tgz#ba83154f60b8a3c24059c18b8060b72200a4c673"
   integrity sha512-ymbY0UIwfSdg0iDN/iyNNwUrTqZ/6KbPryzsvTNXBLuDCuOBdNijSK8yynNtmiSj6RapTPQfjLGQdJrZkzBd2w==
 
+vue-i18n@^11.4.6:
+  version "11.4.6"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-11.4.6.tgz#6ce49dc15b128b5de6e3813cf06f7de5410d9ae3"
+  integrity sha512-l0gE7Rfy0phCa5ChKYkOq543Wgd39BCK6hkktfr1Ed4D99oRkgPK9ffShASZdeC8OJxGfdWmpYoAaAH6iLEuIg==
+  dependencies:
+    "@intlify/core-base" "11.4.6"
+    "@intlify/devtools-types" "11.4.6"
+    "@intlify/shared" "11.4.6"
+    "@vue/devtools-api" "^6.5.0"
+
 vue@^3.5.17:
   version "3.5.35"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.35.tgz#ba502479bd781825514c8af0f40744eeeb6223d6"