diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
new file mode 100644
index 000000000..0f566f464
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
@@ -0,0 +1,49 @@
+<template>
+    <on-the-fly
+        action="action"
+        :type="type"
+        :id="id"
+        @saveFormOnTheFly="saveFormOnTheFly">
+    </on-the-fly>
+</template>
+
+<script>
+import OnTheFly from './components/OnTheFly.vue';
+
+export default {
+    name: "App",
+    components: [
+        'OnTheFly'
+    ],
+    props: ['onTheFly'],
+    computed: {
+        context() {
+            return this.onTheFly.context;
+        },
+        options() {
+            return this.onTheFly.options;
+        },
+        // temp
+        action() {
+            return 'show';  // 'edit', 'create'
+        },
+        type() {
+            return 'person'; // 'thirdparty'
+        },
+        id() {
+            return 1613
+        }
+    },
+    mounted() {
+        console.log('OnTheFly mounted');
+        console.log('OnTheFly: data context', this.context);
+        console.log('OnTheFly: data options', this.options);
+    },
+    methods: {
+        saveFormOnTheFly(payload) {
+            console.log('saveFormOnTheFly', payload);
+        }
+    }
+}
+</script>
+
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Create.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
similarity index 100%
rename from src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Create.vue
rename to src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
similarity index 97%
rename from src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
rename to src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
index a87940ba3..7cfb04651 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
@@ -61,7 +61,7 @@
 
 <script>
 import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
-import OnTheFlyCreate from './OnTheFly/Create.vue';
+import OnTheFlyCreate from './Create.vue';
 import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
 import OnTheFlyThirdparty from 'ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue';
 
@@ -174,10 +174,10 @@ export default {
          this.modal.showModal = false;
       },
       buildLocation(id, type) {
-         if (type == 'person') {
+         if (type === 'person') {
             // TODO i18n
             return `/fr/person/${id}/general`;
-         } else if (type == 'thirdparty') {
+         } else if (type === 'thirdparty') {
             return `/fr/thirdparty/thirdparty/${id}/show`;
          }
       }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/i18n.js
new file mode 100644
index 000000000..3cba67149
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/i18n.js
@@ -0,0 +1,24 @@
+const ontheflyMessages = {
+    fr: {
+        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: "Création d'un nouvel usager ou d'un tiers professionnel",
+                person: "un nouvel usager",
+                thirdparty: "un nouveau tiers professionnel"
+            },
+        }
+    }
+}
+
+export { ontheflyMessages };
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js
new file mode 100644
index 000000000..2b78a569a
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js
@@ -0,0 +1,28 @@
+import { createApp } from "vue";
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+import { ontheflyMessages } from './i18n.js';
+import App from "./App.vue";
+
+const i18n = _createI18n( ontheflyMessages );
+
+let containers = document.querySelectorAll('.onthefly-container');
+
+containers.forEach((container) => {
+
+    const app = createApp({
+        template: `<app :onTheFly="this.onTheFly" ></app>`,
+        data() {
+            return {
+                onTheFly: {
+                    context: {},
+                    options: {}
+                }
+            }
+        }
+    })
+    .use(i18n)
+    .component('app', App)
+    .mount(container);
+
+    console.log('container dataset', container.dataset);
+});
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
index 5e001a21b..c16b4c65d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -53,24 +53,6 @@ const messages = {
          top: "Haut",
          bottom: "Bas",
       },
-      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: "Création d'un nouvel usager ou d'un tiers professionnel",
-            person: "un nouvel usager",
-            thirdparty: "un nouveau tiers professionnel"
-         },
-      },
       renderbox: {
          person: "Usager",
          birthday: {
diff --git a/src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig b/src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig
new file mode 100644
index 000000000..f43101bbb
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig
@@ -0,0 +1,13 @@
+{#
+    This Twig template include load vue_onthefly component.
+    It push all variables from context in OnTheFly/App.vue.
+
+    OPTIONS
+    *
+#}
+<div class="onthefly-container"
+
+></div>
+
+{{ encore_entry_script_tags('vue_onthefly') }}
+{{ encore_entry_link_tags('vue_onthefly') }}
diff --git a/src/Bundle/ChillMainBundle/chill.webpack.config.js b/src/Bundle/ChillMainBundle/chill.webpack.config.js
index 7ba42ed97..0204166d0 100644
--- a/src/Bundle/ChillMainBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillMainBundle/chill.webpack.config.js
@@ -61,5 +61,6 @@ module.exports = function(encore, entries)
 
     // Vue entrypoints
     encore.addEntry('vue_address', __dirname + '/Resources/public/vuejs/Address/index.js');
+    encore.addEntry('vue_onthefly', __dirname + '/Resources/public/vuejs/OnTheFly/index.js');
 
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
index c349ce159..e19dfa05e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import ButtonLocation from '../ButtonLocation.vue';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
index 437cc23e1..cb4b243bb 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -79,7 +79,7 @@
 
 <script>
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
-import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import PersonRenderBox from '../../_components/Entity/PersonRenderBox.vue';
 import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
index f8a61b930..bd70fa090 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import ButtonLocation from '../ButtonLocation.vue';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
index 5d1451ff3..f742a6ea0 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -1,6 +1,7 @@
 import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n';
 import { thirdpartyMessages } from 'ChillThirdPartyAssets/vuejs/_js/i18n';
 import { addressMessages } from 'ChillMainAssets/vuejs/Address/i18n';
+import { ontheflyMessages } from 'ChillMainAssets/vuejs/OnTheFly/i18n';
 
 const appMessages = {
    fr: {
@@ -142,7 +143,7 @@ const appMessages = {
    }
 };
 
-Object.assign(appMessages.fr, personMessages.fr, thirdpartyMessages.fr, addressMessages.fr);
+Object.assign(appMessages.fr, personMessages.fr, thirdpartyMessages.fr, addressMessages.fr, ontheflyMessages.fr);
 
 export {
    appMessages
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index a31089f76..e2415d1e4 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -88,7 +88,7 @@
 
 <script>
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
-import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import PersonSuggestion from './AddPersons/PersonSuggestion';
 import { searchPersons, searchPersons_2 } from 'ChillPersonAssets/vuejs/_api/AddPersons';
 import { postPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
index 1daa5d100..a6b4695f9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 
 export default {
    name: 'SuggestionPerson',
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
index f2f0e42c6..0d7a3a88b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 
 export default {
    name: 'SuggestionThirdParty',