🔩 Electron-Vue-TypeScript Starter

The Electron Shell starter that'll have you saying "kids these days" faster than you can type npm start.

WARNING: Electron Compile (one of the core dependencies of this starter) is no longer being actively maintained. Please consider starting your project using Electron Forge directly instead!

Features

• All programming/style/markup languages supported by Electron Compile:
  • Programming: TypeScript, ES6, ES7, CoffeeScript, GraphQL
  • Style: Less, Sass, Stylus
  • Markup/other: Jade, and Vue
• In particular, TypeScript is tuned to be as strict as possible.
• Good TypeScript code completion in VS Code! (There were some quirks to work out here)
• Packaging for distribution with Electron Forge:
  • Run npm run make to generate distributable packages.
  • Configure forge by modifying forge.config.js.
• Hot reloading of everything (courtesy of Electron Compile)
• VueJS devtools.

How to use

Simply fork or download this repo, and start hacking away! Before beginning any work, install all dependencies by running npm install.

Available commands:

• npm start: Runs the application with Electron in development mode. Hot reloading as well as the Vue devtools are enabled in this mode.
• npm run make: Builds distributable app packages using Electron Forge, placing the results in the out directory. Note that this will only build packages compatible with the host system running the command; running the build on macOS won't produce GNU/Linux packages, for example.
• npm run lint: Runs tslint over all TypeScript files.

What might I want to customize first?

• This readme
• The LICENSE
• The title and description in package.json
• Your TypeScript linting preferences
• Your editor preferences (indent size, tabs vs spaces, encoding, etc)
• Your package export settings

Things to note

There are three different TypeScript configurations located in this repository, and all three of them are important:

• tsconfig.json contains the configuration used by Visual Studio Code or other editors to configure TypeScript checking. This file pulls in additional type information from the types directory, which contains a type definition necessary for proper code completion on imported Vue modules in Visual Studio Code.
• _compilerc contains the two type definitions that are actually used when transpiling for use with Electron, one for development (used when running npm start) and one for production (used when running npm run make).
• Due to a known issue with npm@4 and @5, it's advised to use npm@3 with Electron Forge: npm install -g npm@3

Known issues/future work

• SCSS works, but the indented Sass format doesn't build properly.
• It would be nice if this was a vue-cli, cookecutter, or yeoman scaffold.

Not what you were looking for?

Not interested in using TypeScript with Vue? Prefer to start with something simpler? I recommend checking out the available starter templates that Electron Forge offers for initializing projects.

Want something with more stuff/customizability/documentation out of the box? Prefer to use Webpack instead of Electron Compile? I recommend taking a look at electron-vue, which allows for scaffolding projects using vue-cli.