Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/heliomarpm/electron-vuevite-quick-start
This is an Electron app template created with Vue3, Vite and Typescript.
https://github.com/heliomarpm/electron-vuevite-quick-start
boilerplate cross-platform desktop-app desktop-webapp electron electron-app electron-builder electron-hot-reload electron-quick-start electron-vite electron-vue3 electron-vuevite sass template vite vitejs vue vue3
Last synced: about 2 months ago
JSON representation
This is an Electron app template created with Vue3, Vite and Typescript.
- Host: GitHub
- URL: https://github.com/heliomarpm/electron-vuevite-quick-start
- Owner: heliomarpm
- License: mit
- Created: 2023-04-05T17:55:35.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-07T22:39:47.000Z (about 2 months ago)
- Last Synced: 2024-12-07T23:24:43.147Z (about 2 months ago)
- Topics: boilerplate, cross-platform, desktop-app, desktop-webapp, electron, electron-app, electron-builder, electron-hot-reload, electron-quick-start, electron-vite, electron-vue3, electron-vuevite, sass, template, vite, vitejs, vue, vue3
- Language: TypeScript
- Homepage:
- Size: 377 KB
- Stars: 11
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
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 `` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
This is a minimal Electron application based on the [Quick Start Guide](https://electronjs.org/docs/latest/tutorial/quick-start) 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](https://electronjs.org/docs/latest/tutorial/tutorial-prerequisites).
## Recommended IDE Setup
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## 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)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) 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](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) 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.
<p align="center">
<a href="#electron-app">
<img alt="preview" src="https://raw.githubusercontent.com/heliomarpm/screenshots/main/electron-vuevite-quick-start.png" >
</a>
</p>
# 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
<br/>
> :warning: 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](https://www.electronjs.org/docs/latest/breaking-changes#removed-windows-7--8--81-support). Therefore, you must downgrade Electron to the version cited in this context!
## To Use
To clone and run this repository you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:
```bash
# 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](https://www.howtogeek.com/261575/how-to-run-graphical-linux-desktop-applications-from-windows-10s-bash-shell/) 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](https://www.electron.build/code-signing) and [action-electron-builder](https://github.com/samuelmeuli/action-electron-builder#code-signing) 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:
```bash
git pull
npm run deploy
```
> **Note**: Script for make release is contribution by @daltonmenezes
## Dev Dependencies
- [electron](https://ghub.io/electron): Build cross platform desktop apps with JavaScript, HTML, and CSS
- [electron-builder](https://ghub.io/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](https://ghub.io/open): Open stuff like URLs, files, executables. Cross-platform.
- [semver](https://ghub.io/semver): The semantic version parser used by npm.
## Resources for Learning Electron
- [electronjs.org/docs](https://electronjs.org/docs) - all of Electron's documentation
# Contributing
Please make sure to read the [Contributing Guide](https://github.com/heliomarpm/electron-vuevite-quick-start/blob/master/docs/CONTRIBUTING.md) before making a pull request.
Thank you to all the people who already contributed to project!
<a href="https://github.com/heliomarpm/electron-vuevite-quick-start/graphs/contributors" target="_blank">
<img src="https://contrib.rocks/image?repo=heliomarpm/electron-vuevite-quick-start" />
</a>
###### Made with [contrib.rocks](https://contrib.rocks).
That said, there's a bunch of ways you can contribute to this project, like by:
- :beetle: Reporting a bug
- :page_facing_up: Improving this documentation
- :rotating_light: Sharing this project and recommending it to your friends
- :dollar: Supporting this project on GitHub Sponsors or Ko-fi
- :star2: Giving a star on this repository
## Donate
If you appreciate that, please consider donating to the Developer.
<p align="center">
<!-- PixMe -->
<a href="https://www.pixme.bio/heliomarpm" target="_blank" rel="noopener noreferrer">
<img alt="pixme url" src="https://img.shields.io/badge/donate%20on-pixme-1C1E26?style=for-the-badge&labelColor=1C1E26&color=28f4f4"/>
</a>
<!-- PayPal -->
<a href="https://bit.ly/paypal-sponsor-heliomarpm" target="_blank" rel="noopener noreferrer">
<img alt="paypal url" src="https://img.shields.io/badge/paypal-1C1E26?style=for-the-badge&labelColor=1C1E26&color=0475fe"/>
</a>
<!-- Ko-fi -->
<a href="https://ko-fi.com/heliomarpm" target="_blank" rel="noopener noreferrer">
<img alt="kofi url" src="https://img.shields.io/badge/kofi-1C1E26?style=for-the-badge&labelColor=1C1E26&color=ff5f5f"/>
</a>
<!-- LiberaPay -->
<a href="https://liberapay.com/heliomarpm" target="_blank" rel="noopener noreferrer">
<img alt="liberapay url" src="https://img.shields.io/badge/liberapay-1C1E26?style=for-the-badge&labelColor=1C1E26&color=f6c915"/>
</a>
<!-- GitHub Sponsors -->
<a href="https://github.com/sponsors/heliomarpm" target="_blank" rel="noopener noreferrer">
<img alt="github sponsors url" src="https://img.shields.io/badge/GitHub%20-Sponsor-1C1E26?style=for-the-badge&labelColor=1C1E26&color=db61a2"/>
</a>
</p>
## License
[MIT © Heliomar P. Marques](https://github.com/heliomarpm/electron-vuevite-quick-start/blob/main/LICENSE) <a href="#top">🔝</a>