create OnTheFly rootComponent structure, and twig include template to insert it

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>
+

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 };

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);
+});

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: {