working POC displaying data with state

app.vue

@@ -25,6 +25,7 @@ import Modal from "bootstrap/js/dist/modal";
 import KonamiCode from "konami-code-js";
 import Swal from "sweetalert2";
 import { defineComponent } from "vue";
+import AppState from "./classes/AppState";
 import dataJson from "./src/assets/data.json";
 import data from "data/test.json";
 
@@ -94,6 +95,9 @@ export default defineComponent({
         this.adminModal.show();
       });
     });
+
+    // * Set Data State
+    useState("dataJson", () => new AppState(this.dataJson));
   },
   methods: {
     itemClicked(item: Item): void {

classes/AppState.ts

@@ -0,0 +1,20 @@
+export default class AppState {
+    /** Json data as exported from zip and compliant with schemas */
+    private jsonData: TypeApp;
+
+    constructor(jsonData: TypeApp) {
+        this.jsonData = jsonData;
+    }
+
+    public settings(): TypeSettings {
+        return this.jsonData.settings;
+    }
+
+    public brands(): Array<TypeBrand> {
+        return this.jsonData.items;
+    }
+
+    public brand(id:number): TypeBrand|undefined {
+        return this.jsonData.items.find(brand => brand.id === id);
+    }
+}

composable/useElectron.ts

@@ -1,44 +0,0 @@
-import log from "electron-log";
-
-export default function useElectron() {
-    const isServer = process.server || typeof window === "undefined" || typeof window.require === "undefined";
-    const isElectron = !isServer && navigator.userAgent.toLowerCase().includes("nuxt-app");
-    log.info(`isServer ${isServer}`);
-    log.info(`isElectron ${isElectron}`);
-    log.info(`userAgent ${navigator.userAgent.toLowerCase()}`);
-    if (!isElectron || isServer) return { isElectron };
-
-    // Initialize electron
-    const electron = window.require("electron");
-
-    // Window title bar actions
-    // ========================
-    const titleBarActions = {
-        minimize: () => electron.ipcRenderer.invoke("titlebar:action", "minimize"),
-        toggleMaximize: () => electron.ipcRenderer.invoke("titlebar:action", "toggleMaximize"),
-        isMaximized: () => electron.ipcRenderer.invoke("isMaximized:app", null),
-        close: () => electron.ipcRenderer.invoke("close:app", null)
-    };
-
-    // Window title bar stats
-    // ======================
-    const windowStats = ref({
-        isMaximized: false,
-        isFullscreen: false
-    });
-
-    electron.ipcRenderer.on("window:maximizeChanged", (_event, value) => {
-        windowStats.value.isMaximized = value;
-    });
-    electron.ipcRenderer.on("window:fullscreenChanged", (_event, value) => {
-        windowStats.value.isFullscreen = value;
-    });
-
-    // Get Json Data
-    const sendSync = (): TypeApp => {
-        return electron.ipcRenderer.sendSync("get-config", "");
-    };
-
-    // Initialize ipcRenderer
-    return { isElectron, titleBarActions, windowStats, sendSync };
-}

electron/UnzipData.ts

@@ -10,7 +10,7 @@ import log from "electron-log/main";
  * In charge to unzip data from showroom Bo,
  * validate data config and check version
  */
-export default class UnzipData {
+export default abstract class UnzipData {
     static zipFileToUse: string|null;
 
     /**

electron/main.ts

@@ -1,8 +1,8 @@
 import path from "node:path";
 import { app, ipcMain } from "electron";
 import log from "electron-log/main";
+import BrowserWinHandler from "./BrowserWinHandler";
 import UnzipData from "./UnzipData";
-import BrowserWinHandler from "./browserWinHandler";
 
 // TODO: take inspiration form https://github.com/michalzaq12/electron-nuxt/tree/master/template/src/main.
 // Or https://github.com/EternalC0der/electron-nuxt3

pages/index.vue

@@ -1,17 +1,47 @@
 <template>
   <div class="page-home">
     <h1>Home</h1>
+    <br>
+    <div class="container">
+      <div
+        v-for="(brand, brandIndex) of dataJson.brands()"
+        :key="brandIndex"
+        :class="{
+          'row': true,
+          'flex-row-reverse': brandIndex %2 !== 0,
+          'mb-3': true,
+        }"
+        :style="{ 'background-color': brand.color }"
+      >
+        <div class="col-6">
+          {{ brand.name }}
+        </div>
+        <div class="col-6">
+          <img class="img-fluid" :src="`/assets/${brand.picture}`" :alt="`Marque ${brand.name}`" :title="`Le logo de la marque ${brand.name}`">
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
+import log from "electron-log";
 import { defineComponent } from "vue";
+import type AppState from "~/classes/AppState";
 
 export default defineComponent({
   name: "HomePage",
-  props: {
+  data() : {
+    dataJson: AppState;
+  } {
+    return {
+      dataJson: useState("dataJson").value as AppState
+    };
+  },
+  mounted() {
+    log.info("index page");
   },
   methods: {
-  }
+  },
 });
 </script>