shamscorner / electron-vite-ts-stackter

πŸ₯³ An Electron + Vue 3 starter project setup with Vite, Typescript, Vue-Router, Pinia, Eslint, Prettier, Tailwind CSS, and some custom preferences.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Electron-Vite-TS-Stackter

An Electron + Vue 3 starter project setup with Vite, Typescript, Vue-Router, Pinia, Eslint, Prettier, Tailwind CSS, and some custom preferences.

This repository is an extended version of the simple one.

electron-vite-vue.gif

Features

πŸ“¦ Out of the box

🎯 Based on the official template-vue-ts, less invasive

🌱 Extensible, really simple directory structure

πŸ’ͺ Support using Node.js API in Electron-Renderer

πŸ”© Support C/C++ native addons

πŸ–₯ It's easy to implement multiple windows

πŸš€ configured with Eslint & Prettier

πŸš€ Vue router support

πŸš€ Pinia state management

πŸš€ TailwindCSS (Dark mode support)

πŸš€ VueUse

πŸš€ Easy dependency update with taze

πŸš€ I18n support - multiple locales

Get Started

1. Install packages

npm i
or,
pnpm i --shamefully-hoist

2. Run

In development mode,

npm run app:dev
or,
pnpm run app:dev

In preview mode,

npm run app:preview
or,
pnpm run app:preview

To build for production,

npm run app:build
or,
pnpm run app:build

Debug

electron-vite-react-debug.gif

Directory

+ β”œβ”€β”¬ electron
+ β”‚ β”œβ”€β”¬ main
+ β”‚ β”‚ └── index.ts    entry of Electron-Main
+ β”‚ └─┬ preload
+ β”‚   └── index.ts    entry of Preload-Scripts
  β”œβ”€β”¬ src
  β”‚ └── main.ts       entry of Electron-Renderer
  β”œβ”€β”€ index.html
  β”œβ”€β”€ package.json
  └── vite.config.ts

Be aware

🚨 By default, this template integrates Node.js in the Renderer process. If you don't need it, you just remove the option below. Because it will modify the default config of Vite.

# vite.config.ts

export default {
  plugins: [
-   // Use Node.js API in the Renderer-process
-   renderer({
-     nodeIntegration: true,
-   }),
  ],
}

FAQ

About

πŸ₯³ An Electron + Vue 3 starter project setup with Vite, Typescript, Vue-Router, Pinia, Eslint, Prettier, Tailwind CSS, and some custom preferences.

License:MIT License


Languages

Language:TypeScript 61.3%Language:Vue 28.9%Language:JavaScript 5.8%Language:HTML 2.8%Language:CSS 1.1%