Quick Start Guide to Building Cross-Platform Apps with Electron (with Vue + TypeScript Example)

With Electron + Vue + TypeScript, you can package and generate desktop applications for Windows, macOS, and Linux using a single codebase. This article will demonstrate the entire process from project creation to building installers for all platforms.

---

🧰 1. Development Environment Setup

• Node.js (LTS version recommended)
• npm/yarn/pnpm (choose one)
• Any operating system: macOS / Windows / Linux

After installing Node.js, verify the installation:

node -v
npm -v

---

📦 2. Create a Vue + TypeScript Project

Use Vite to quickly create a Vue project:

npm create vite@latest my-electron-app -- --template vue-ts
cd my-electron-app
npm install

---

🧠 3. Integrate Electron

Install Electron

npm install electron --save-dev

Create Electron Main Process File

Create a new directory electron/ and add main.ts:

// electron/main.ts
import { app, BrowserWindow } from 'electron'
import { join } from 'path'

// Function to create window
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Preload script, can be used to expose secure APIs to the page
      preload: join(__dirname, 'preload.js'),
      contextIsolation: true // Secure context isolation
    }
  })

  // Load local Vite server during development
  const devUrl = 'http://localhost:5173'
  win.loadURL(devUrl)
}

// Create window after Electron is initialized
app.whenReady().then(() => {
  createWindow()

  // Re-create window when clicking Dock icon on macOS
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit app when all windows are closed (except on macOS)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

---

🔧 4. Configure Startup Scripts

Install and Use concurrently to Run Frontend and Electron Together

npm install concurrently --save-dev

Modify package.json Scripts

{
  "main": "dist-electron/main.js",
  "scripts": {
    "dev": "vite",
    "electron": "tsc electron/main.ts --outDir dist-electron && electron dist-electron/main.js",
    "dev:electron": "concurrently \"npm run dev\" \"npm run electron\""
  }
}

---

💻 5. Develop the UI

Modify src/App.vue:

<template>
  <div class="container">
    <h1>Hello Electron + Vue + TypeScript!</h1>
    <p>This is a cross-platform desktop application</p>
  </div>
</template>

<style scoped>
.container {
  text-align: center;
  margin-top: 100px;
}
</style>

Run in development mode:

npm run dev:electron

You will see an Electron app window loading your Vue page.

---

🧱 6. Build and Package for All Platforms

Install electron-builder

npm install electron-builder --save-dev

Configure Build Options

Add a build field to package.json:

{
  "build": {
    "appId": "com.example.myapp",
    "productName": "MyElectronApp",  // Application name
    "files": [
      "dist",             // Vite build output
      "dist-electron",    // Electron main process output
      "node_modules"
    ],
    "directories": {
      "buildResources": "assets"  // Place icons and installer resources here
    },
    "win": {
      "target": "nsis",    // Windows installer format (nsis generates .exe installer)
      "icon": "assets/icon.ico"
    },
    "mac": {
      "target": "dmg",     // macOS uses .dmg installer
      "icon": "assets/icon.icns"
    },
    "linux": {
      "target": "AppImage", // Linux uses AppImage format for good compatibility
      "icon": "assets/icon.png"
    }
  }
}

Add Build Scripts

"scripts": {
  "build": "vite build && tsc electron/main.ts --outDir dist-electron",
  "build:win": "npm run build && electron-builder --win",
  "build:mac": "npm run build && electron-builder --mac",
  "build:linux": "npm run build && electron-builder --linux",
  "build:all": "npm run build && electron-builder -mwl"
}

---

📤 7. Cross-Platform Build Notes

✅ Windows

• Build format: .exe installer (NSIS)
• Supports auto-install and uninstall
• Can be packaged on macOS (requires wine)

✅ macOS

• Build format: .dmg installer
• Can only be built on macOS
• If packaging fails, check if Xcode Command Line Tools is installed

xcode-select --install

✅ Linux

• Build format: .AppImage or .deb
• Recommended to build on Ubuntu for best compatibility
• To package .deb, just change target to deb

---

🏁 8. Example Build Commands

Package for the current platform:

npm run build:win    # Windows
npm run build:mac    # macOS
npm run build:linux  # Linux

Build for all platforms at once (requires cross-platform toolchain):

npm run build:all

💡 It is recommended to use CI/CD tools (such as GitHub Actions) for cross-platform builds.

---

✅ 9. Output After Build

After successful packaging, the generated files are located as follows:

Platform	Output Directory	Description
Windows	dist/win-unpacked/, *.exe	Installer and exe
macOS	dist/mac/, *.dmg	Drag-and-drop installer
Linux	dist/linux-unpacked/, *.AppImage	Universal installer

---

📌 10. Summary

This article demonstrated the complete process of building a desktop application using Electron + Vue + TypeScript:

• ✅ Initialize frontend project with Vite
• ✅ Write Electron main process code
• ✅ Debug in development environment
• ✅ Package cross-platform apps with electron-builder

🚀 Master web technologies and you can develop desktop software for all platforms!