Socket
Socket
Sign inDemoInstall

nuxt-electron

Package Overview
Dependencies
8
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

nuxt-electron


Version published
Maintainers
1
Install size
16.4 kB
Created

Changelog

Source

0.7.0 (2023-12-10)

  • bbedbfe chore: bump deps
  • 8714721 chore: cleanup
  • 0c9c9db refactor: remove simple API
  • 9806db3 chore: remove cjs-shim(since vite-plugin-electron-renderer@0.13.7)
  • dfcaa8a fix: types warning
  • e82cc15 refactor: use the simple API of vite-plugin-electron :)
  • f11608a (github/main, main) Merge pull request #60 from OlaAlsaker/fix-nitro-config
  • 5aaee64 fix: set baseUrl on build only
  • 0ae87b8 fix: update jsdocs for disableDefaultOptions
  • 40bda05 fix: override baseURL in Nitro
  • 1aac49c Merge pull request #46 from jofftiquez/patch-1
  • 6cc50d0 chore(README.md): update installation doc
PR
  • @OlaAlsaker fix: types are missing #60

Readme

Source

Nuxt Electron

npm version npm downloads License

Integrate Nuxt and Electron

Features

  • 📦 Out of the box
  • 🔥 Hot restart (Main process)
  • 🚀 Hot reload (Preload script)

Quick Setup

  1. Add the following dependency to your project
# 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
  1. Add nuxt-electron to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-electron'],
  electron: {
    build: [
      {
        // Main-Process entry file of the Electron App.
        entry: 'electron/main.ts',
      },
    ],
  },
})
  1. Create the electron/main.ts file and type the following code
import { app, BrowserWindow } from 'electron'

app.whenReady().then(() => {
  new BrowserWindow().loadURL(process.env.VITE_DEV_SERVER_URL)
})
  1. Add the main entry to package.json
{
+ "main": "dist-electron/main.js"
}

That's it! You can now use Electron in your Nuxt app ✨

Electron Options

This is based on the vite-plugin-electron, see the Documents for more detailed options

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
}

Recommend Structure

Let's use the official nuxt-starter-v3 template as an example

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

Examples

Notes

By default, we force the App to run in SPA mode since we don't need SSR for desktop apps

If you want to fully customize the default behavior, you can disable it by disableDefaultOptions

TODO

  • write test

Keywords

FAQs

Last updated on 10 Dec 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc