{"id":13417212,"url":"https://github.com/electron-vite/vite-plugin-electron","last_synced_at":"2026-04-02T00:58:56.517Z","repository":{"id":37933772,"uuid":"477892816","full_name":"electron-vite/vite-plugin-electron","owner":"electron-vite","description":":electron: Electron⚡️Vite core repo","archived":false,"fork":false,"pushed_at":"2024-09-20T09:40:12.000Z","size":14395,"stargazers_count":684,"open_issues_count":22,"forks_count":55,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-29T22:53:15.618Z","etag":null,"topics":["electron","plugin","vite"],"latest_commit_sha":null,"homepage":"https://github.com/electron-vite","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/electron-vite.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-04T22:21:38.000Z","updated_at":"2024-10-28T12:40:03.000Z","dependencies_parsed_at":"2023-02-19T16:45:53.816Z","dependency_job_id":"635e838a-0031-4342-bf88-f421a26f0839","html_url":"https://github.com/electron-vite/vite-plugin-electron","commit_stats":{"total_commits":435,"total_committers":15,"mean_commits":29.0,"dds":"0.14022988505747125","last_synced_commit":"036e52cf1d5f21d850673690694a07cb8743d674"},"previous_names":[],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electron-vite%2Fvite-plugin-electron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electron-vite%2Fvite-plugin-electron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electron-vite%2Fvite-plugin-electron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electron-vite%2Fvite-plugin-electron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/electron-vite","download_url":"https://codeload.github.com/electron-vite/vite-plugin-electron/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248759430,"owners_count":21157159,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","plugin","vite"],"created_at":"2024-07-30T22:00:33.975Z","updated_at":"2026-04-02T00:58:56.509Z","avatar_url":"https://github.com/electron-vite.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Framework-agnostic Plugins"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"170\" src=\"https://github.com/electron-vite/vite-plugin-electron/blob/main/logo.svg?raw=true\"\u003e\n\u003c/p\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003evite-plugin-electron\u003c/h1\u003e\n\u003c/div\u003e\n\u003cp align=\"center\"\u003eElectron 🔗 Vite\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.com/package/vite-plugin-electron\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/vite-plugin-electron.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/vite-plugin-electron\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/vite-plugin-electron.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://discord.gg/YfjFuEgVUR\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/chat-discord-blue?logo=discord\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    \u003cspan\u003eEnglish\u003c/span\u003e\n    |\n    \u003ca href=\"https://github.com/electron-vite/vite-plugin-electron/blob/main/README.zh-CN.md\"\u003e简体中文\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\nIn short, `vite-plugin-electron` makes developing Electron apps as easy as normal Vite projects.\n\n\u003e [!important]\n\u003e This project will drop support for `vite@\u003c8` in the upcoming `v1` release.\n\u003e For users needing Vite 7 compatibility, use `v0.29.1`. it is stable and production-ready.\n\n## Features\n\n- [🔥 Hot Restart \u003csub\u003e\u003csup\u003e(Main process)\u003c/sup\u003e\u003c/sub\u003e](https://electron-vite.github.io/guide/features.html#hot-restart)\n- [🔄 Hot Reload \u003csub\u003e\u003csup\u003e(Preload scripts)\u003c/sup\u003e\u003c/sub\u003e](https://electron-vite.github.io/guide/features.html#hot-reload)\n- [⚡️ HMR \u003csub\u003e\u003csup\u003e(Renderer process)\u003c/sup\u003e\u003c/sub\u003e](https://electron-vite.github.io/guide/features.html#hmr)\n\u003c!-- - [🚀 Not Bundle, It's fast \u003csub\u003e\u003csup\u003e(Like Vite's Not Bundle)\u003c/sup\u003e\u003c/sub\u003e](https://github.com/electron-vite/vite-plugin-electron#not-bundle) --\u003e\n- 🌱 Fully compatible with Vite and Vite's ecosystem \u003csub\u003e\u003csup\u003e(Based on Vite)\u003c/sup\u003e\u003c/sub\u003e\n- 🔮 Full-featured [JavaScript API](https://github.com/electron-vite/vite-plugin-electron#javascript-api), really easy to integrate with complex projects.\n- 🐣 Few APIs, easy to use\n\n\u003c!-- ![vite-plugin-electron.gif](https://github.com/electron-vite/vite-plugin-electron/blob/main/vite-plugin-electron.gif?raw=true) --\u003e\n\n## Quick Setup\n\n1. Add the following dependency to your project\n\n```sh\nnpm i -D vite-plugin-electron\n```\n\n2. Add `vite-plugin-electron` to the `plugins` section of `vite.config.ts`\n\n```js\nimport electron from 'vite-plugin-electron/simple'\n\nexport default {\n  plugins: [\n    electron({\n      main: {\n        // Shortcut of `build.lib.entry`\n        entry: 'electron/main.ts',\n      },\n      preload: {\n        // Shortcut of `build.rollupOptions.input`\n        input: 'electron/preload.ts',\n      },\n      // Optional: Use Node.js API in the Renderer process\n      renderer: {},\n    }),\n  ],\n}\n```\n\n3. Create the `electron/main.ts` file and type the following code\n\n```js\nimport { app, BrowserWindow } from 'electron'\n\napp.whenReady().then(() =\u003e {\n  const win = new BrowserWindow({\n    title: 'Main window',\n  })\n\n  // You can use `process.env.VITE_DEV_SERVER_URL` when the vite command is called `serve`\n  if (process.env.VITE_DEV_SERVER_URL) {\n    win.loadURL(process.env.VITE_DEV_SERVER_URL)\n  } else {\n    // Load your file\n    win.loadFile('dist/index.html');\n  }\n})\n```\n\n4. Add the `main` entry to `package.json`\n\n```diff\n{\n+ \"main\": \"dist-electron/main.mjs\"\n}\n```\n\nThat's it! You can now use Electron in your Vite app ✨\n\n## Flat API\n\nIn most cases, the `vite-plugin-electron/simple` API is recommended. If you know very well how this plugin works or you want to use `vite-plugin-electron` API as a secondary encapsulation of low-level API, then the flat API is more suitable for you. It is also simple but more flexible. :)\n\nThe difference compared to the simple API is that it does not identify which entry represents `preload` and the adaptation to preload.\n\n```js\nimport electron from 'vite-plugin-electron'\n\nexport default {\n  plugins: [\n    electron({\n      entry: 'electron/main.ts',\n    }),\n  ],\n}\n```\n\n## Flat API vs Simple API\n\n- Simple API is based on the Flat API\n- Simple API incluess some Preload scripts preset configs.\n- Flat API provides some more general APIs, which you can use for secondary encapsulation, such as [nuxt-electron](https://github.com/caoxiemeihao/nuxt-electron).\n\n## Flat API \u003csub\u003e\u003csup\u003e(Define)\u003c/sup\u003e\u003c/sub\u003e\n\n`electron(options: ElectronOptions | ElectronOptions[])`\n\n```ts\nexport interface ElectronOptions {\n  /**\n   * Shortcut of `build.lib.entry`\n   */\n  entry?: import('vite').LibraryOptions['entry']\n  vite?: import('vite').InlineConfig\n  /**\n   * Triggered when Vite is built every time -- `vite serve` command only.\n   *\n   * If this `onstart` is passed, Electron App will not start automatically.\n   * However, you can start Electroo App via `startup` function.\n   */\n  onstart?: (args: {\n    /**\n     * Electron App startup function.\n     * It will mount the Electron App child-process to `process.electronApp`.\n     * @param argv default value `['.', '--no-sandbox']`\n     * @param options options for `child_process.spawn`\n     * @param customElectronPkg custom electron package name (default: 'electron')\n     */\n    startup: (argv?: string[], options?: import('node:child_process').SpawnOptions, customElectronPkg?: string) =\u003e Promise\u003cvoid\u003e\n    /** Reload Electron-Renderer */\n    reload: () =\u003e void\n  }) =\u003e void | Promise\u003cvoid\u003e\n}\n```\n\n## Recommend Structure\n\nLet's use the official [template-vanilla-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vanilla-ts) created based on `create vite` as an example\n\n```diff\n+ ├─┬ electron\n+ │ └── main.ts\n  ├─┬ src\n  │ ├── main.ts\n  │ ├── style.css\n  │ └── vite-env.d.ts\n  ├── .gitignore\n  ├── favicon.svg\n  ├── index.html\n  ├── package.json\n  ├── tsconfig.json\n+ └── vite.config.ts\n```\n\n## Built format\n\nThis is just the default behavior, and you can modify them at any time through custom config in the `vite.config.js`\n\n```log\n{ \"type\": \"module\" }\n┏————————————————————┳——————————┳———————————┓\n│       built        │  format  │   suffix  │\n┠————————————————————╂——————————╂———————————┨\n│ main process       │   esm    │    .js    │\n┠————————————————————╂——————————╂———————————┨\n│ preload scripts    │   cjs    │   .mjs    │ diff\n┠————————————————————╂——————————╂———————————┨\n│ renderer process   │    -     │    .js    │\n┗————————————————————┸——————————┸———————————┛\n\n{ \"type\": \"commonjs\" } - default\n┏————————————————————┳——————————┳———————————┓\n│       built        │  format  │   suffix  │\n┠————————————————————╂——————————╂———————————┨\n│ main process       │   cjs    │    .js    │\n┠————————————————————╂——————————╂———————————┨\n│ preload scripts    │   cjs    │    .js    │ diff\n┠————————————————————╂——————————╂———————————┨\n│ renderer process   │    -     │    .js    │\n┗————————————————————┸——————————┸———————————┛\n```\n\n## Examples\n\nThere are many cases here 👉 [electron-vite-samples](https://github.com/caoxiemeihao/electron-vite-samples)\n\n## JavaScript API\n\n`vite-plugin-electron`'s JavaScript APIs are fully typed, and it's recommended to use TypeScript or enable JS type checking in VS Code to leverage the intellisense and validation.\n\n- `ElectronOptions` - type\n- `resolveViteConfig` - function, Resolve the default Vite's `InlineConfig` for build Electron-Main\n- `withExternalBuiltins` - function\n- `build` - function\n- `startup` - function\n\n**Example**\n\n```js\nimport { build, startup } from 'vite-plugin-electron'\n\nconst isDev = process.env.NODE_ENV === 'development'\nconst isProd = process.env.NODE_ENV === 'production'\n\nbuild({\n  entry: 'electron/main.ts',\n  vite: {\n    mode: process.env.NODE_ENV,\n    build: {\n      minify: isProd,\n      watch: isDev ? {} : null,\n    },\n    plugins: [{\n      name: 'plugin-start-electron',\n      closeBundle() {\n        if (isDev) {\n          // Startup Electron App\n          startup()\n        }\n      },\n    }],\n  },\n})\n```\n\n**Hot Reload**\n\nSince `v0.29.0`, when preload scripts are rebuilt, they will send an `electron-vite\u0026type=hot-reload` event to the main process.\nIf your App doesn't need a renderer process, this will give you **hot-reload**.\n\n```js\n// electron/main.ts\n\nprocess.on('message', (msg) =\u003e {\n  if (msg === 'electron-vite\u0026type=hot-reload') {\n    for (const win of BrowserWindow.getAllWindows()) {\n      // Hot reload preload scripts\n      win.webContents.reload()\n    }\n  }\n})\n```\n\n## How to work\n\nIt just executes the `electron .` command in the Vite build completion hook and then starts or restarts the Electron App.\n\n## Be aware\n\n- 🚨 By default, the files in `electron` folder will be built into the `dist-electron`\n\n## C/C++ Native\n\nWe have two ways to use C/C++ native modules\n\n**First way**\n\nIn general, Vite may not correctly build Node.js packages, especially C/C++ native modules, but Vite can load them as external packages\n\nSo, put your Node.js package in `dependencies`. Unless you know how to properly build them with Vite\n\n```js\nexport default {\n  plugins: [\n    electron({\n      entry: 'electron/main.ts',\n      vite: {\n        build: {\n          rolldownOptions: {\n            // Here are some C/C++ modules them can't be built properly\n            external: [\n              'serialport',\n              'sqlite3',\n            ],\n          },\n        },\n      },\n    }),\n  ],\n}\n```\n\n**Second way**\n\nUse 👉 [vite-plugin-native](https://github.com/vite-plugin/vite-plugin-native)\n\n```js\nimport native from 'vite-plugin-native'\n\nexport default {\n  plugins: [\n    electron({\n      entry: 'electron/main.ts',\n      vite: {\n        plugins: [\n          native(/* options */),\n        ],\n      },\n    }),\n  ],\n}\n```\n\n\u003c!-- You can see 👉 [dependencies vs devDependencies](https://github.com/electron-vite/vite-plugin-electron-renderer#dependencies-vs-devdependencies) --\u003e\n\n\u003c!--\n\n## Not Bundle\n\n\u003e Added in: v0.13.0 | Experimental\n\nDuring the development phase, we can exclude the `cjs` format of npm-pkg from bundle. Like Vite's [👉 Not Bundle](https://vitejs.dev/guide/why.html#why-not-bundle-with-esbuild). **It's fast**!\n\n```js\nimport electron from 'vite-plugin-electron'\nimport { notBundle } from 'vite-plugin-electron/plugin'\n\nexport default defineConfig(({ command }) =\u003e ({\n  plugins: [\n    electron({\n      entry: 'electron/main.ts',\n      vite: {\n        plugins: [\n          command === 'serve' \u0026\u0026 notBundle(/* NotBundleOptions */),\n        ],\n      },\n    }),\n  ],\n}))\n```\n\n**API**\n\n`notBundle(/* NotBundleOptions */)`\n\n```ts\nexport interface NotBundleOptions {\n  filter?: (id: string) =\u003e void | false\n}\n```\n\n**How to work**\n\nLet's use the `electron-log` as an examples.\n\n```js\n┏—————————————————————————————————————┓\n│ import log from 'electron-log'      │\n┗—————————————————————————————————————┛\n                   ↓\nModules in `node_modules` are not bundled during development, it's fast!\n                   ↓\n┏—————————————————————————————————————┓\n│ const log = require('electron-log') │\n┗—————————————————————————————————————┛\n```\n-\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectron-vite%2Fvite-plugin-electron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felectron-vite%2Fvite-plugin-electron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectron-vite%2Fvite-plugin-electron/lists"}