Before we can start we need to have Yarn installed by the system package manager, e.g. on Arch:

sudo pacman -S yarn

As a kick starter we use electron-webpack-quick-start from GitHub (commands from their site combined):

mkdir electron-webpack-vue-bootstrap-ts-project
cd electron-webpack-vue-bootstrap-ts-project
curl -fsSL https://github.com/electron-userland/electron-webpack-quick-start/archive/master.tar.gz |
tar -xz --strip-components 1
yarn

We now have Electron and Webpack available. Next we want to add Vue and TypeScript. The same team has already provided some plugins, we only need to install.

yarn add vue electron-webpack-vue --dev
yarn add typescript electron-webpack-ts --dev

For Vue component support we create src/renderer/vue-shims.d.ts:

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

As a kick start TypeScript configuration the electron-webpack team recommends creating tsconfig.json:

{
  "extends": "./node_modules/electron-webpack/tsconfig-base.json"
}

Note: For any *.vue file you create, you need to add lang=”ts” to the script tag. Finally we install our last package, Bootstrap-Vue

yarn add bootstrap-vue

To actually use all that we need to replace the contents of index.js and switch to TypeScript there also. Just

rm src/renderer/index.js

and instead create src/renderer/index.ts:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
 
Vue.use(BootstrapVue)
 
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
 
import App from './app.vue'
 
new Vue({
  el: '#app',
  render: h => h(App)
})

and src/renderer/app.vue:

<template>
<div>
  <b-navbar type="dark" variant="success">
    <b-navbar-brand></b-navbar-brand>
  </b-navbar>
</div>
</template>
 
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
 
@Component
export default class App extends Vue {
  msg: string = 'Hello World!'
 
  constructor () {
    super()
  }
}
</script>
 
<style>
</style>

To start the dev server and pop up an electron window with dev tools run

yarn dev

For a real project you’ll want to replace name, version, and license in package.json to your actual project’s meta data and remove the README.md.