skills.rest
ichabodcole
ichabodcoleCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

electron-vue-ipc

Design typed Electron IPC architecture across main, preload, and renderer for Vue apps.

Updated Oct 8, 2025
Search Tags:#typescript#architecture#electron#vue3#preload#ipc
One-click install
npx skills add https://github.com/ichabodcole/project-docs-scaffold-template --skill electron-vue-ipc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: electron-vue-ipc
Source: https://github.com/ichabodcole/project-docs-scaffold-template/tree/main/plugins/recipes/skills/electron-vue-ipc
Command: npx skills add https://github.com/ichabodcole/project-docs-scaffold-template --skill electron-vue-ipc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Secure, typed IPC architecture that isolates the renderer process from Node.js APIs while providing a clear contract between main, preload, and renderer layers for Electron + Vue apps.

Core Features & Use Cases

  • Typed, modular IPC bridges per domain (documents, settings, etc.)
  • ContextBridge preload APIs with distinct window namespaces
  • Getter-based main window references to survive window recreation
  • Separation of concerns: IPC handlers in main, services in main, and stores in renderer
  • Guidance for end-to-end integration and onboarding

Quick Start

Follow Phase 1 through Phase 5 guidance to implement a secure, typed Electron IPC architecture for Vue apps.

Frequently Asked Questions about electron-vue-ipc

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up secure typed IPC communication in an Electron Vue app?▼

Secure typed Electron IPC for Vue apps is set up by isolating the renderer from Node.js APIs using a contextBridge preload API, modular domain-specific IPC files, and shared types to enforce a clear contract between the main, preload, and renderer layers.

What is the best way to structure Electron IPC channels for Vue 3?▼

The best way to structure Electron IPC for Vue 3 is using a modular architecture with domain-specific IPC files, distinct window namespaces exposed via contextBridge, and Pinia stores acting as the IPC integration layer in the renderer.

Why does my Electron preload script break when the main window is recreated?▼

Electron preload scripts break on window recreation if they hold direct window references; using a getter-based main window reference ensures the IPC handlers survive window recreation and maintain a stable connection.

How do I integrate Electron IPC with Pinia stores in a Vue 3 application?▼

Integrate Electron IPC with Pinia by using the Vue 3 stores as the IPC integration layer in the renderer, mapping the typed contextBridge preload API surface directly to store actions to maintain separation of concerns.

Can I use TypeScript to type Electron IPC handlers between main and preload?▼

Yes, TypeScript can type Electron IPC handlers by defining shared types that establish a strict contract across the main, preload, and renderer processes, ensuring end-to-end type safety for the modular IPC bridges.

Do I need a three-process model to isolate Node.js APIs in Electron Vue apps?▼

A three-process model is required to isolate Node.js APIs in Electron Vue apps, separating IPC handlers in the main process, exposing a contextBridge preload API surface, and consuming it safely in the renderer.

Related Skills

Explore More Software Engineering Skills→
gouravsingh311gouravsingh311

electron-ipc

Orchestrate Electron IPC communication between main and renderer processes.

Community
Intermediate
uni-helperuni-helper
95

pinia

Manage Vue 3 app state with type-safe Pinia stores.

Official
Intermediate
pedronauckpedronauck
567

electron-dev

Guide Electron development with Electron Vite and Electron Builder for secure builds.

Community
Advanced
2nth-ai2nth-ai
1

Non-Monolithic Trading Platforms

Design composable trading platforms with microservices and regulatory capital compliance.

Official
Advanced