Electron Vue3 Typescript Quick Start

Easy to use template for creating an app with Electron, Vue3, and Typescript

This is a vue3 application created with the vue-cli with Electron added on.

Table of Contents

• Features
• Scripts

Features

• Vue3
• Babel
• ESLint
• Mocha & Chai for testing.
• Typescript support for Vue components
• electron-reloader to reload the app on changes
• electron-builder for packaging and building your Electron app.
• dotenv to load environment variables

Scripts

• npm run start: Starts the Electron app.
• npm run build:dev: Builds the Vue app to the dist directory which is used by Electron to display the app.
• npm run build:dev:watch: The same as above except it watches for and reloads on changes.
• npm run build:prod: Creates a production ready build.
• npm run test:unit: Runs the unit tests defined under test/unit.
• npm run lint: Runs ESLint to check for issues.
• npm run dist: Runs npm run build:prod and then calls electron-builder to package the Electron app.
• npm run dist:mac: Runs npm run build:prod and then calls electron-builder to package the Electron app for OSX.
• npm run dist:linux: Runs npm run build:prod and then calls electron-builder to package the Electron app for a Linux environment.
• npm run dist:windows: Runs npm run build:prod and then calls electron-builder to package the Electron app for Windows.
• npm run dist:all: Runs npm run build:prod and then calls electron-builder to package the Electron for OSX, Linux, and Windows.

Instructions

1. Clone the repository
2. Run npm install to install the dependencies needed.

To develop, you need to follow the steps below every time you begin working on it:

1. First you want to run npm run build:dev:watch to build the dist directory and watch for changes to your Vue templates/components.
2. Run npm run start to start Electron.

Now, with both of these running, whenever you make a change to the files Electron uses or the Vue files, the Electron window will update automatically.

Note: The electron files are not Typescript so that they can be reloaded with electron-reloader.