Overview

Nuxt Electron is a package that allows you to easily integrate Nuxt.js and Electron in your application. With this package, you can leverage the power of Electron to build desktop applications with Nuxt.js as the frontend framework.

Features

• Out of the box: Nuxt Electron provides a seamless integration between Nuxt.js and Electron, allowing you to quickly set up your desktop application.
• Hot restart (Main process): You can instantly restart the main process of your Electron app during development without needing to fully rebuild the entire application.
• Hot reload (Preload script): The preload script in your Electron app can also be hot reloaded, making development more efficient.

Installation

To install Nuxt Electron, follow these steps:

1. Add the following dependency to your project:

   npm install nuxt-electron
   

2. Add nuxt-electron to the modules section of your nuxt.config.ts file:

   export default {
     modules: [
       'nuxt-electron',
     ],
   }
   

3. Create the electron/main.ts file and type the following code:

   import { app, BrowserWindow } from 'electron'
   
   function createWindow() {
     const win = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: true,
       },
     })
   
     win.loadURL('http://localhost:3000')
   }
   
   app.whenReady().then(createWindow)
   

4. Add the main entry to your package.json file:

   {
     "main": "electron/main.ts"
   }
   

That’s it! You can now use Electron in your Nuxt.js app and build desktop applications with ease.

Summary

Nuxt Electron is a powerful package that seamlessly integrates Nuxt.js and Electron. With features like out-of-the-box integration, hot restart for the main process, and hot reload for the preload script, it provides an efficient way to build desktop applications using Nuxt.js. The installation process is simple and easy to follow, allowing developers to quickly get started with Nuxt Electron.