add: composant GeneratedContent.vue pour gérer et afficher la partie générative

src/components/GeneratedContent.vue

@@ -0,0 +1,31 @@
+<script setup>
+</script>
+
+<template>
+  <div id="generatorContainer">
+    <p>It's empty for now!</p>
+  </div>
+</template>
+
+<style scoped>
+  /*=====================Generated Content CSS*/
+  #generatorContainer{
+    pointer-events: none;
+    position:absolute;
+    inset:0;
+    z-index: 3;
+    background-color: transparent;
+    opacity: 50%;
+    box-sizing: border-box;
+  }
+
+</style>
+
+<script>
+  export default {
+    name : 'GeneratedContent',
+    mounted(){
+      console.log("Content generator is loaded!");
+    }
+  };
+</script>

src/components/MainContent.vue

@@ -3,11 +3,14 @@
 
 <template>
   <div id="mainContainer">
+    <generatorDiv></generatorDiv>
     <div class="windowContainer" id="mainPannel">
       <div class="windowTitle">
         <div class="titleContent">
           <p>./MainContent.333</p>
-          <button type="button" class="titleBtn"> <p>RELOAD</p> </button>
+          <!--<Teleport to="div#generatorContainer">-->
+            <button type="button" class="titleBtn"> <p>RELOAD</p> </button>
+          <!--</Teleport>-->
         </div>
       </div>
     </div>

src/main.js

@@ -6,6 +6,7 @@ import App from './App.vue'
 // import composants
 import MainContent from './components/MainContent.vue'
 import ExtraContent from './components/ExtraContent.vue'
+import GeneratedContent from './components/GeneratedContent.vue'
 
 // création app racine
 const app = createApp(App);
@@ -13,6 +14,8 @@ const app = createApp(App);
 //Composants
 app.component('mainDiv',MainContent);
 app.component('extraDiv',ExtraContent);
+app.component('generatorDiv',GeneratedContent);
+
 
 //Démarrage dans div#app de index.html
 app.mount('#app');