Univade Platform (formerly Sakai Vue)

A modern, cross-platform desktop application built with Vue 3 and Electron, featuring PrimeVue UI components and Tailwind CSS. This documentation explains the architecture, Electron integration, offline/online sync strategy, and the steps taken to transform a Vue SPA into a robust desktop app.

---

🚀 Project Overview

• Frontend: Vue 3, Vue Router, PrimeVue, Tailwind CSS
• Desktop Shell: Electron
• Build Tool: Vite
• UI Customization: Custom window title, hidden native menu bar
• Offline/Online Sync: Local database for offline work, cloud sync when online

---

🏗️ Architecture & Approach

High-Level Architecture

• Electron Main Process: Manages the native window, app lifecycle, and system integration.
• Vue SPA (Renderer Process): The user interface, running inside Electron's Chromium shell.
• Local Database: (e.g., SQLite) Stores user data and operations for offline use and caching.
• Cloud Backend: Central server for user accounts, licensing, collaboration, templates, and data sync.

[Electron Desktop App]
      ↓
[Local Database (Offline/Cache)]
      ↔
[Cloud Backend (Sync, Licensing, Templates)]

Electron Integration: How It Works

• Window Management: Electron creates a native window and loads the Vue app as a local file or via the Vite dev server.
• Preload Script: preload.js exposes secure APIs to the renderer process using Electron's contextBridge.
• Menu Bar: The native menu bar is hidden for a clean, app-like experience.
• Routing: Vue Router uses hash mode (createWebHashHistory) for compatibility with Electron's file protocol.
• Build & Packaging: Vite builds the Vue app, which is then packaged by Electron Builder for Windows, macOS, and Linux.

Offline/Online Sync Strategy

• Offline Mode:
  • All user actions are performed against the local database.
  • The app is fully functional offline (except for cloud-only features).
• Online Sync:
  • When internet is available, the app syncs local changes to the cloud backend and fetches updates.
  • Handles conflict resolution and ensures data consistency.
• Licensing & Cloud Services:
  • Periodically checks license validity with the cloud.
  • Some features (templates, collaboration) require cloud connectivity.

---

✨ Features

• Modern Vue 3 SPA with PrimeVue components
• Responsive layout and theming
• Electron integration for desktop deployment
• Custom window title ("Univade Platform")
• Native menu bar hidden for a clean look
• Full offline mode for design and editing
• Automatic sync with cloud backend when online
• Licensing and cloud services integration

---

🛠️ Setup & Development

1. Install Dependencies

npm install

2. Run in Development Mode

• Frontend only:

  npm run dev

• Electron (with live reload):
  • Start the Vite dev server:

    npm run dev

  • In another terminal, start Electron:

    npx electron .

3. Build for Production

npm run build

4. Package as Desktop App

npm run electron:build

• The packaged app and installer will be in the dist/ directory.

---

🖥️ Electron-Specific Modifications

• main.js:
  • Creates the Electron window with a custom title.
  • Loads the built Vue app or the dev server URL.
  • Hides the native menu bar for a focused UI.
• preload.js:
  • Exposes secure APIs to the renderer process (Vue app) using contextBridge.
  • Used for IPC (inter-process communication) and native integrations.
• Router Configuration:
  • Uses createWebHashHistory() for compatibility with Electron's file protocol.
• Local Database Integration:
  • (Planned/Implemented) Integrate SQLite or similar for offline data storage and caching.
• Sync Engine:
  • (Planned/Implemented) Handles syncing local changes to the cloud and resolving conflicts.

---

📦 Directory Structure

• src/ — Vue app source code
• src/layout/ — Layout and navigation components
• src/views/ — Page components
• main.js — Electron main process (window creation, menu bar, etc.)
• preload.js — Electron preload script
• dist/ — Production build output

---

📝 Notes & Best Practices

• All UI and navigation is handled by Vue; Electron is used only for window management, packaging, and native integrations.
• For advanced Electron features (IPC, native APIs), extend the preload.js script and expose APIs via contextBridge.
• The app is cross-platform and can be built for Windows, macOS, and Linux.
• Offline-first design ensures users can work without internet; sync logic keeps data consistent across devices.
• Security: Sensitive data in the local database should be encrypted; API calls should use secure authentication.

---

📄 License

This project is licensed under the MIT License.