Nuxt Electron

Nuxt と Electron の統合

機能

📦 実行可能
🔥 ホット・リスタート _{^{(メインプロセス)}}
🚀 ホット・リロード _{^{(プリロードスクリプト)}}

クイック・セットアップ

プロジェクトに次の依存関係を追加します

# Using pnpm
pnpm add -D nuxt-electron vite-plugin-electron vite-plugin-electron-renderer electron electron-builder

# Using yarn
yarn add --dev nuxt-electron vite-plugin-electron vite-plugin-electron-renderer electron electron-builder

# Using npm
npm install --save-dev nuxt-electron vite-plugin-electron vite-plugin-electron-renderer electron electron-builder

nuxt-electron を nuxt.config.ts の modules セクションに追加します。

export default defineNuxtConfig({
  modules: ['nuxt-electron'],
  electron: {
    build: [
      {
        // Main-Process entry file of the Electron App.
        entry: 'electron/main.ts',
      },
    ],
  },
})

electron/main.ts ファイルを作成し、次のコードを入力します。

import { app, BrowserWindow } from 'electron'

app.whenReady().then(() => {
  new BrowserWindow().loadURL(process.env.VITE_DEV_SERVER_URL)
})

package.json に main エントリを追加します。

{
+ "main": "dist-electron/main.js"
}

完了です! これで Nuxt アプリで Electron を使用できます ✨

Electron オプション

これは vite-plugin-electron に基づいています。より詳しいオプションについてはドキュメントを参照してください。

export interface ElectronOptions {
  /**
   * `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
   * 
   * @example
   * 
   * ```js
   * export default defineNuxtConfig({
   *   modules: ['nuxt-electron'],
   *   electron: {
   *     build: [
   *       {
   *         // Main-Process entry file of the Electron App.
   *         entry: 'electron/main.ts',
   *       },
   *     ],
   *   },
   * })
   * ```
   */
  build: import('vite-plugin-electron').ElectronOptions[],
  /**
   * @see https://github.com/electron-vite/vite-plugin-electron-renderer
   */
  renderer?: Parameters<typeof import('vite-plugin-electron-renderer').default>[0]
  /**
   * nuxt-electron will modify some options by default
   * 
   * @defaultValue
   * 
   * ```js
   * export default defineNuxtConfig({
   *   ssr: false,
   *   app: {
   *     baseURL: './',
   *     buildAssetsDir: '/',
   *   },
   *   runtimeConfig: {
   *     app: {
   *       baseURL: './',
   *       buildAssetsDir: '/',
   *     },
   *   },
   *   nitro: {
   *     runtimeConfig: {
   *       app: {
   *         baseURL: './,
   *       }
  *      }
   *   },
   * })
   * ```
   */
  disableDefaultOptions?: boolean
}

例として公式の nuxt-starter-v3 テンプレートを使用します。

+ ├─┬ electron
+ │ └── main.ts
  ├─┬ public
  │ └── favicon.ico
  ├── .gitignore
  ├── .npmrc
  ├── index.html
  ├── app.vue
  ├── nuxt.config.ts
  ├── package.json
  ├── README.md
  └── tsconfig.json

例

注

デフォルトでは、デスクトップアプリに SSR は必要ないので、アプリを SPA モードで実行するように強制します。

デフォルトの動作を完全にカスタマイズする場合は、disableDefaultOptions で無効にすることができます。

TODO

テストを書く