A simple starter template for a Vue3 + Electron TypeScript based application, including ViteJS and Electron Builder.
This template utilizes ViteJS for building and serving your (Vue powered) front-end process, it provides Hot Reloads (HMR) to make development fast and easy ⚡
Building the Electron (main) process is done with Electron Builder, which makes your application easily distributable and supports cross-platform compilation 😎
Click the green Use this template button on top of the repository, and clone your own newly created repository.
Or..
Clone this repository: git clone git@github.com:Deluze/electron-vue-template.git
npm install
npm run dev
npm run dev # starts application with hot reload
npm run build # builds application, distributable files can be found in "dist" folder
# OR
npm run build:win # uses windows as build target
npm run build:mac # uses mac as build target
npm run build:linux # uses linux as build target
Optional configuration options can be found in the Electron Builder CLI docs.
- scripts/ # all the scripts used to build or serve your application, change as you like.
- src/
- main/ # Main thread (Electron application source)
- renderer/ # Renderer thread (VueJS application source)
If you have any files that you want to copy over to the app directory after installation, you will need to add those files in your src/main/static
directory.
Files in said directory are only accessible to the main
process, similar to src/renderer/public
only being accessible to the renderer
process. Besides that, the concept is the same as to what you're used to in your front-end projects.
/* Assumes src/main/static/myFile.txt exists */
import {app} from 'electron';
import {join} from 'path';
import {readFileSync} from 'fs';
const path = join(app.getAppPath(), 'static', 'myFile.txt');
const buffer = readFileSync(path);