Clone and run for a quick way to see Electron in action.
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup>
SFCs, check out the script setup docs to learn more.
This is a minimal Electron application based on the Quick Start Guide within the Electron documentation.
A basic Electron application needs just these files:
package.json - Points to the app's main file and lists its details and dependencies. src/index.html - A web page to render. This is the app's renderer process. electron/main.ts - Starts the app and creates a browser window to render HTML. This is the app's main process. electron/preload.ts - A content script that runs before the renderer process loads. You can learn more about each of these components in depth within the Tutorial.
- VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
TypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.
- Stands out
- 🔥 Fast and Ready-to-go with a well-thought-out structure
- 🚀 Auto reload for main and Fast Refresh for renderer process
- 🎉 Window and Screen routing included
- 😎 Preload (context bridge) already configured
- 🙀 IPC communication example included
- 🔮 GitHub Action releases with
Windows
,Mac
andLinux
binaries - 🔒 Source Code Protection support
- 🍪 Absolute paths support
- Technologies:
- 🔋 Electron
- 🔥 VueJS 3
- 🧐 Vue Developer Tools
- 💙 TypeScript
- 📦 Electron Vite
- ✨ SASS modules
- 💫 Eslint / Prettier / EditorConfig
- 📦 Electron Builder
- 🔮 action-electron-builder
⚠️ If Windows 7 and 8 support is important for your project, you should know that Electron in a version greater than 22x no longer supports it. You can read more about it here. Therefore, you must downgrade Electron to the version cited in this context!
To clone and run this repository you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:
# Clone this repository
git clone https://github.com/heliomarpm/electron-vuevite-quick-start
# Go into the repository
cd electron-vuevite-quick-start
# Install dependencies
npm install
# Run the app mode develop
npm start
Note: If you're using Linux Bash for Windows, see this guide or use
node
from the command prompt.
Note: to be able to perform
auto-updates
you will need acode signed app
, for this purpose you will need to configure it by yourself, so check the electron-builder and action-electron-builder docs please to get know how to do this.
To release your app on a GitHub release with Windows
, Mac
and Linux
binaries, you can perform the following commands:
git pull
npm run deploy
Note: Script for make release is contribution by @daltonmenezes
- electron: Build cross platform desktop apps with JavaScript, HTML, and CSS
- electron-builder: A complete solution to package and build a ready for distribution Electron app for MacOS, Windows and Linux with “auto update” support out of the box
- open: Open stuff like URLs, files, executables. Cross-platform.
- semver: The semantic version parser used by npm.
- electronjs.org/docs - all of Electron's documentation
Please make sure to read the Contributing Guide before making a pull request.
Thank you to all the people who already contributed to project!
Made with contrib.rocks.
That said, there's a bunch of ways you can contribute to this project, like by:
- 🪲 Reporting a bug
- 📄 Improving this documentation
- 🚨 Sharing this project and recommending it to your friends
- 💵 Supporting this project on GitHub Sponsors or Ko-fi
- 🌟 Giving a star on this repository
If you appreciate that, please consider donating to the Developer.