electron-vite-vue

The project follows a specific directory structure to separate the Electron processes and the Vue renderer:

• electron/main/index.ts: The entry point for the Electron Main process.
• electron/preload/index.ts: The entry point for Preload scripts.
• src/main.ts: The entry point for the Electron Renderer process (Vue application).
• index.html: The main HTML entry.
• vite.config.ts: Vite configuration file.
• package.json: Project dependencies and scripts.

+ ├─┬ electron
+ │ ├─┬ main
+ │ │ └── index.ts    entry of Electron-Main
+ │ └─┬ preload
+ │   └── index.ts    entry of Preload-Scripts
  ├─┬ src
  │ └── main.ts       entry of Electron-Renderer
  ├── index.html
  ├── package.json
  └── vite.config.ts

To start developing with the electron-vite-vue boilerplate, clone the repository, install the dependencies, and run the development script. This provides a pre-configured environment with Electron, Vue, and Vite.

# clone the project
git clone https://github.com/electron-vite/electron-vite-vue.git

# enter the project directory
cd electron-vite-vue

# install dependency
npm install

# develop
npm run dev

The renderer: {} preset in vite.config.ts acts as a Vite adapter that polyfills Electron, Node.js APIs, and native modules for the renderer process.

Important Security Note: This polyfill is not the same as enabling nodeIntegration. If your application requires direct Node.js access in the renderer, you must enable nodeIntegration in the BrowserWindow webPreferences within the main process. Be sure to review the security implications of enabling nodeIntegration carefully.

The preload script automatically injects a loading screen when the application starts. This loading screen is managed via a useLoading utility that is active during the initial DOM readiness.

To manually control the visibility of the loading screen from the Renderer process, you can send a message to the window:

1. Automatic Removal: The loading screen is automatically removed after 4999ms.
2. Manual Removal via Message: You can trigger the removal of the loading screen by setting the window.onmessage payload to 'removeLoading'.

The preload script exposes an ipcRenderer object to the global window object in the Renderer process via contextBridge. This allows the Renderer to communicate with the Main process using standard Electron IPC methods.

Available methods on window.ipcRenderer:

• on(channel, listener): Register an IPC listener.
• off(channel, listener): Remove an IPC listener.
• send(channel, ...args): Send an asynchronous message to the Main process.
• invoke(channel, ...args): Send a request to the Main process and return a Promise that resolves with the result.

The main process provides an IPC handler named open-win that allows the Renderer process to request the creation of a new window. You can pass a URL hash as an argument to the handler to navigate the new window to a specific route.

Note: The implementation in this template enables nodeIntegration: true and contextIsolation: false for the child window, which is insecure for production environments. It is recommended to use contextBridge instead.

The main process exports constants to locate the built directories for the Electron Main, Preload, and Renderer processes. These are useful when you need to reference assets or configuration files relative to the build output.

• MAIN_DIST: Path to the dist-electron directory.
• RENDERER_DIST: Path to the dist directory.
• VITE_DEV_SERVER_URL: The URL of the Vite development server, if running in development mode.