Electron Quick Start - Vue+Vite+TypeScript+Sass

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.

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support For .vue Imports in TS

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:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Features

• 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 and Linux 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 Use

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.

Releasing

Note: to be able to perform auto-updates you will need a code 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

Dev Dependencies

• 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.

Resources for Learning Electron

• electronjs.org/docs - all of Electron's documentation

Contributing

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

Donate

If you appreciate that, please consider donating to the Developer.

License

MIT © Heliomar P. Marques 🔝