### IPC Communication in Vue Components (Vue)

Source: https://context7.com/olaalsaker/nuxt-electron-next/llms.txt

Demonstrates how to use the `ipcRenderer` API to communicate with the Electron main process from Vue components. It shows an example of invoking an IPC handler to retrieve the application start time and display it in the component. This relies on the `ipcRenderer` being exposed to the window object, typically via a preload script.

```vue
<template>
  <div>
    <h1>Nuxt Electron App</h1>
    <p>App started at: {{ startTime }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const startTime = ref('')

onMounted(async () => {
  // Invoke the 'app-start-time' handler defined in main.ts
  const time = await window.ipcRenderer.invoke('app-start-time')
  console.log('App start time:', time)
  startTime.value = time
})
</script>
```

--------------------------------

### Install Dependencies for Nuxt Electron

Source: https://github.com/olaalsaker/nuxt-electron-next/blob/main/README.md

Installs the necessary packages for integrating Nuxt 4 with Electron. Includes nuxt-electron-next, vite-plugin-electron, vite-plugin-electron-renderer, electron, and electron-builder.

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

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

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

--------------------------------

### Package.json Configuration for Electron Builds (JSON)

Source: https://context7.com/olaalsaker/nuxt-electron-next/llms.txt

Configures the `package.json` file for a Nuxt Electron application. It specifies the main entry point for the Electron process (`dist-electron/main.js`) and defines scripts for development (`dev`) and building (`build`) the application using Nuxt and Electron Builder. Key dependencies like `electron`, `electron-builder`, `nuxt`, and `nuxt-electron-next` are listed.

```json
{
  "name": "my-nuxt-electron-app",
  "version": "1.0.0",
  "main": "dist-electron/main.js",
  "scripts": {
    "dev": "cross-env NUXT_SOCKET=0 nuxi dev --no-fork",
    "build": "nuxi build --prerender && electron-builder"
  },
  "devDependencies": {
    "electron": "^37.2.3",
    "electron-builder": "^26.0.12",
    "nuxt": "^4.0.0",
    "nuxt-electron-next": "^0.1.0",
    "vite-plugin-electron": "^0.29.0",
    "vite-plugin-electron-renderer": "^0.14.6",
    "vue": "^3.5.17"
  },
  "dependencies": {
    "cross-env": "^7.0.3"
  }
}
```

--------------------------------

### Electron Main Process Entry File

Source: https://context7.com/olaalsaker/nuxt-electron-next/llms.txt

Defines the main process entry file (electron/main.ts) for the Electron application. This script initializes the application window, sets up environment variables for paths, handles development server loading or file loading, and manages IPC handlers.

```typescript
import { app, BrowserWindow, ipcMain } from 'electron'
import path from 'node:path'

process.env.APP_ROOT = path.join(__dirname, '..')

export const MAIN_DIST = path.join(process.env.APP_ROOT, 'dist-electron')
export const RENDERER_DIST = path.join(process.env.APP_ROOT, '.output/public')

process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL
  ? path.join(process.env.APP_ROOT, 'public')
  : RENDERER_DIST

let win: BrowserWindow | null

function createWindow() {
  win = new BrowserWindow({
    webPreferences: {
      preload: path.join(MAIN_DIST, 'preload.js'),
    },
  })

  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
    win.webContents.openDevTools()
  } else {
    win.loadFile(path.join(process.env.VITE_PUBLIC!, 'index.html'))
  }
}

function initIpc() {
  ipcMain.handle('app-start-time', () => (new Date).toLocaleString())
}

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
    win = null
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

app.whenReady().then(() => {
  initIpc()
  createWindow()
})
```

--------------------------------

### Basic Nuxt Configuration for Electron

Source: https://context7.com/olaalsaker/nuxt-electron-next/llms.txt

Configures the nuxt.config.ts file to include the nuxt-electron-next module and specify the main process entry point for the Electron application. It also disables SSR and sets up Electron-specific build configurations.

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

--------------------------------

### Create Electron Main Process Entry File

Source: https://github.com/olaalsaker/nuxt-electron-next/blob/main/README.md

Defines the main process entry file for the Electron application, creating a new BrowserWindow and loading the development server URL.

```typescript
import { app, BrowserWindow } from 'electron'

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

--------------------------------

### Preload Script Implementation with ContextBridge

Source: https://context7.com/olaalsaker/nuxt-electron-next/llms.txt

Implements the preload script (electron/preload.ts) using Electron's contextBridge to securely expose IPC methods to the renderer process. This allows the frontend to interact with the main process without direct access to the full Electron API.

```typescript
import { ipcRenderer, contextBridge } from 'electron'

// Expose some API to the Renderer process
contextBridge.exposeInMainWorld('ipcRenderer', {
  on(...args: Parameters<typeof ipcRenderer.on>) {
    const [channel, listener] = args
    return ipcRenderer.on(channel, (event, ...args) => listener(event, ...args))
  },
  off(...args: Parameters<typeof ipcRenderer.off>) {
    const [channel, ...omit] = args
    return ipcRenderer.off(channel, ...omit)
  },
  send(...args: Parameters<typeof ipcRenderer.send>) {
    const [channel, ...omit] = args
    return ipcRenderer.send(channel, ...omit)
  },
  invoke(...args: Parameters<typeof ipcRenderer.invoke>) {
    const [channel, ...omit] = args
    return ipcRenderer.invoke(channel, ...omit)
  },

  // You can expose other APIs you need here.
})
```

--------------------------------

### Preload Script Configuration with Hot Reload

Source: https://context7.com/olaalsaker/nuxt-electron-next/llms.txt

Configures the nuxt.config.ts to include the preload script entry point and enable hot reload for it. This allows the preload script to be rebuilt and reloaded without restarting the entire Electron application, improving development efficiency.

```typescript
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['nuxt-electron-next'],
  electron: {
    build: [
      {
        // Main-Process entry file of the Electron App.
        entry: 'electron/main.ts',
      },
      {
        entry: 'electron/preload.ts',
        onstart(args) {
          // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
          // instead of restarting the entire Electron App.
          args.reload()
        },
      },
    ],
    // Polyfill the Electron and Node.js API for Renderer process.
    // If you want to use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.
    // See https://github.com/electron-vite/vite-plugin-electron-renderer
    renderer: {},
  },
  ssr: false,
})
```

--------------------------------

### ElectronOptions Interface Definition (TypeScript)

Source: https://context7.com/olaalsaker/nuxt-electron-next/llms.txt

Defines the `ElectronOptions` interface used for configuring the `nuxt-electron-next` module. It outlines the available options, including `build` for specifying Electron process entry points (main, preload, worker), `renderer` for configuring Node.js polyfills in the renderer process, and `disableDefaultOptions` to manually manage Nuxt configurations.

```typescript
export interface ElectronOptions {
  /**
   * `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
   */
  build: import('vite-plugin-electron').ElectronOptions[]

  /**
   * Renderer process configuration for Node.js polyfills
   * @see https://github.com/electron-vite/vite-plugin-electron-renderer
   */
  renderer?: Parameters<typeof import('vite-plugin-electron-renderer').default>[0]

  /**
   * Disable default Nuxt configuration modifications
   * When true, you must manually configure: ssr: false, app.baseURL: './', router.options.hashMode: true
   */
  disableDefaultOptions?: boolean
}
```

--------------------------------

### Add Main Entry to package.json

Source: https://github.com/olaalsaker/nuxt-electron-next/blob/main/README.md

Adds the 'main' field to the package.json file, specifying the output path for the Electron main process build.

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

--------------------------------

### Disabling Default Nuxt Options (TypeScript)

Source: https://context7.com/olaalsaker/nuxt-electron-next/llms.txt

Illustrates how to disable the default Nuxt configuration modifications provided by `nuxt-electron-next` by setting `disableDefaultOptions: true`. When this option is enabled, developers must manually configure Nuxt settings such as `ssr: false`, `app.baseURL`, `app.buildAssetsDir`, `runtimeConfig.app.baseURL`, `runtimeConfig.app.buildAssetsDir`, and `router.options.hashMode` to ensure proper Electron integration.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-electron-next'],
  electron: {
    build: [
      { entry: 'electron/main.ts' },
    ],
    // Disable automatic configuration - you must set these manually
    disableDefaultOptions: true,
  },
  // Manual configuration required when disableDefaultOptions is true
  ssr: false,
  app: {
    baseURL: './',
    buildAssetsDir: '/',
  },
  runtimeConfig: {
    app: {
      baseURL: './',
      buildAssetsDir: '/',
    },
  },
  router: {
    options: {
      hashMode: true,
    },
  },
})
```

--------------------------------

### Configure Nuxt for Electron Integration

Source: https://github.com/olaalsaker/nuxt-electron-next/blob/main/README.md

Updates the nuxt.config.ts file to include 'nuxt-electron-next' in the modules and configures the Electron build entry point.

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

--------------------------------

### Electron Options Interface for Nuxt

Source: https://github.com/olaalsaker/nuxt-electron-next/blob/main/README.md

Defines the TypeScript interface for configuring Electron options within a Nuxt application, including build configurations and renderer options.

```typescript
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-next'],
   *   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: './,
   *       }
  *      }
   *   },
      router: {
        options: {
          hashMode: true,
        }
      }
   * })
   */
  disableDefaultOptions?: boolean
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.