https://github.com/deluze/electron-vue-template

Simple Vue3 + Electron starter template in TypeScript, including ViteJS and Electron Builder
https://github.com/deluze/electron-vue-template

boilerplate electron electron-builder hmr hot-reload template typescript vite vitejs vue vuejs vuejs3

Last synced: about 1 month ago
JSON representation

Simple Vue3 + Electron starter template in TypeScript, including ViteJS and Electron Builder

• Host: GitHub
• URL: https://github.com/deluze/electron-vue-template
• Owner: Deluze
• License: mit
• Created: 2021-08-31T01:22:52.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2024-04-25T18:15:42.000Z (7 months ago)
• Last Synced: 2024-04-25T19:31:34.601Z (7 months ago)
• Topics: boilerplate, electron, electron-builder, hmr, hot-reload, template, typescript, vite, vitejs, vue, vuejs, vuejs3
• Language: JavaScript
• Homepage:
• Size: 599 KB
• Stars: 497
• Watchers: 8
• Forks: 101
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
 


# Electron Vue Template

  



A simple starter template for a **Vue3** + **Electron** TypeScript based application, including **ViteJS** and **Electron Builder**.



## About

This template utilizes [ViteJS](https://vitejs.dev) 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](https://www.electron.build/), which makes your application easily distributable and supports cross-platform compilation 😎

## Getting started

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 [email protected]:Deluze/electron-vue-template.git`

### Install dependencies ⏬

```bash

npm install

```

### Start developing ⚒️

```bash

npm run dev

```

## Additional Commands

```bash

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](https://www.electron.build/cli.html).

## Project Structure

```bash

- 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)

```

## Using static files

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.

#### Referencing static files from your main process

```ts

/* 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);

```