Electron with Vue 3 Project Structure

Vue 3 renderer with Composition API and Pinia. Familiar Vue patterns for Electron development.

#electron #vue #vite #desktop #typescript #pinia

PNG PDF

Project Directory

my-electron-app/

package.json

vite.config.ts

electron-builder.json

src/

main/

Main process

index.ts

window.ts

ipc/

index.ts

files.ts

dialog.ts

services/

store.ts

preload/

index.ts

contextBridge API

renderer/

Vue 3 app

index.html

main.ts

Vue entry

App.vue

components/

TitleBar.vue

Sidebar.vue

views/

HomeView.vue

SettingsView.vue

stores/

Pinia stores

app.ts

settings.ts

composables/

useElectron.ts

IPC wrapper

useWindow.ts

router/

index.ts

resources/

icon.icns

icon.ico

icon.png

Why This Structure?

Vue 3 with Composition API brings reactive, organized code to Electron. Pinia manages state with devtools. Vue composables wrap IPC calls for clean component code. Vue Router handles in-app navigation.

Key Directories

src/renderer/composables/-Vue composables wrapping Electron APIs
src/renderer/stores/-Pinia stores for global state
src/renderer/views/-Route-level Vue components
src/preload/-Context bridge exposing safe APIs

Getting Started

Use electron-vite for scaffolding
npm create electron-vite -- --template vue-ts
npm install pinia vue-router
Configure preload script
npm run dev

Vue Composable

// src/renderer/composables/useElectron.ts
export function useElectron() {
  const readFile = (path: string) =>
    window.api.readFile(path);

  const openDialog = () =>
    window.api.openFileDialog();

  return { readFile, openDialog };
}

When To Use This

Teams with Vue experience
Apps needing robust state management
Complex UIs with routing
Projects wanting Vue devtools

Trade-offs

Bundle size-Vue runtime adds to renderer bundle
Setup complexity-Router and Pinia configuration needed
Build config-Vite config for Electron requires setup