diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
index 22b0181e5..24968e364 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
@@ -4,7 +4,7 @@
          <a class="nav-link" :class="{ active: isActive('person') }">
             <label for="person">
                <input type="radio" name="person" id="person" v-model="radioType" value="person">
-               {{ $t('onthefly.create.person') }}
+               {{ $trans('ONTHEFLY_CREATE_PERSON') }}
             </label>
          </a>
       </li>
@@ -37,59 +37,61 @@
    </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted } from 'vue';
 import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
 import OnTheFlyThirdparty from 'ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue';
 
-export default {
-   name: "OnTheFlyCreate",
-   props: ['action', 'allowedTypes', 'query'],
-   components: {
-      OnTheFlyPerson,
-      OnTheFlyThirdparty
-   },
-   data() {
-      return {
-         type: null
-      }
-   },
-   computed: {
-      radioType: {
-         set(type) {
-            this.type = type;
-            console.log('## type:', type, ', action:', this.action);
-         },
-         get() {
-            return this.type;
-         }
-      },
-   },
-   mounted() {
-      this.type = (this.allowedTypes.length === 1 && this.allowedTypes.includes('thirdparty')) ? 'thirdparty' : 'person'
-   },
-   methods: {
-      isActive(tab) {
-         return (this.type === tab) ? true : false;
-      },
-      castDataByType() {
-         switch (this.radioType) {
-            case 'person':
-               return this.$refs.castPerson.$data.person;
-            case 'thirdparty':
-               let data = this.$refs.castThirdparty.$data.thirdparty;
-               if (data.address !== undefined && data.address !== null) {
-                   data.address = { id: data.address.address_id }
-               } else {
-                   data.address = null;
-               }
+// Define props
+const props = defineProps(['action', 'allowedTypes', 'query']);
+
+// Create a ref for type
+const type = ref(null);
+
+// Computed
+const radioType = computed({
+    get: () => type.value,
+    set(value) {
+        type.value = value;
+        console.log('## type:', value, ', action:', props.action);
+    }
+});
+
+// Mounted
+onMounted(() => {
+    type.value = (props.allowedTypes.length === 1 && props.allowedTypes.includes('thirdparty'))
+        ? 'thirdparty'
+        : 'person';
+});
+
+// Methods
+const isActive = (tab) => {
+    return type.value === tab;
+};
+
+const castDataByType = () => {
+    switch (radioType.value) {
+        case 'person':
+            return $refs.castPerson.$data.person;
+        case 'thirdparty':
+            let data = $refs.castThirdparty.$data.thirdparty;
+            if (data.address !== undefined && data.address !== null) {
+                data.address = { id: data.address.address_id };
+            } else {
+                data.address = null;
+            }
+            return data;
+        default:
+            throw Error('Invalid type of entity');
+    }
+};
+
+// Register components
+defineExpose({
+    isActive,
+    castDataByType
+});
 
-               return data;
-            default:
-               throw Error('Invalid type of entity')
-         }
-      }
-   }
-}
 </script>
 
 <style lang="css" scoped>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js
index 87dc82114..b7c2096ab 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js
@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
 import { ontheflyMessages } from './i18n.js';
 import App from "./App.vue";
+import TranslatorPlugin from '../translatorPlugin'
 
 const i18n = _createI18n( ontheflyMessages );
 
@@ -30,6 +31,7 @@ containers.forEach((container) => {
         }
     })
     .use(i18n)
+    .use(TranslatorPlugin)
     .component('app', App)
     .mount(container);
 
diff --git a/src/Bundle/ChillMainBundle/translations/messages.fr.yml b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
index 86440c503..e6f9791da 100644
--- a/src/Bundle/ChillMainBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
@@ -765,4 +765,23 @@ wopi:
     invalid_title: Format incompatible
     invalid_message: Désolé, ce format de document n'est pas éditable en ligne.
 
-
+onthefly:
+    show:
+        person: Détails de l'usager
+        thirdparty: Détails du tiers
+        file_person: Ouvrir la fiche de l'usager
+        file_thirdparty: Voir le Tiers
+    edit:
+        person: Modifier un usager
+        thirdparty: Modifier un tiers
+    create:
+        button: Créer {q}
+        title:
+            default: Création d'un nouvel usager ou d'un tiers professionnel
+            person: Création d'un nouvel usager
+            thirdparty: Création d'un nouveau tiers professionnel
+        person: un nouvel usager
+        thirdparty: un nouveau tiers professionnel
+    addContact:
+        title: Créer un contact pour {q}
+    resource_comment_title: Un commentaire est associé à cet interlocuteur