Vite + Vue 3 + electron + TypeScript
Tags: vue, electron, typescript, javascript
Published: 2021-07-30 07:11:12

> Their is a new post about this will full setup. check it here: https://dev.to/brojenuel/vue-3-vite-typescript-electron-my-full-setup-kgm

A lot of people have been asking how to do electron in vite vue 3 so here it is.

## Step 1:
Were going to go straight a head and create a Vite project by running:
```js
// run this and choose vue as your template,
// you can choose typescript or js. whatever you want.
yarn create vite
```
## Step 2:
Next cd to your project folder, and let as also add dependencies that we will need for our electron development and building.
```bash
yarn add -D concurrently cross-env electron electron-builder wait-on
```
Be Sure to install all dependencies by running
```bash
yarn install
```

## Step 3:
Let us edit our `package.json`. Let us add `build` property. You can read more about this [electron.build](https://www.electron.build/configuration/configuration) website.
```json
 "build": {
    "appId": "com.my-website.my-app",
    "productName": "MyApp",
    "copyright": "Copyright © 2019 ${author}",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    }
  }
```
and then let us also add some scripts in our `package.json`

```json
"scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview",
    "electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron .",
    "electron:pack": "electron-builder --dir",
    "electron:dev": "concurrently -k \"cross-env BROWSER=none yarn dev\" \"yarn electron\"",
    "electron:builder": "electron-builder",
    "build:for:electron": "vue-tsc --noEmit && cross-env ELECTRON=true vite build",
    "app:build": "yarn build:for:electron && yarn electron:builder"
  },
```
Let us also dont forget yo add author and main in our package.json file.
```json
{
  "name": "vite-electron-app-test",
  "author": "BroJenuel",
  "version": "0.0.0",
  "main": "electron/electron.js",
  ...
}
```

## Step 4:
let us edit our `vite.config.js` or `vite.config.ts`
```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.ELECTRON=="true" ? './' : ".",
  plugins: [vue()]
})

```
if we are running in electron production, the base will change.

## Step 5:
Let us create a new folder and let us call it electron
inside this we will create an `electron.js`.
```js
// electron/electron.js
const path = require('path');
const { app, BrowserWindow } = require('electron');

const isDev = process.env.IS_DEV == "true" ? true : false;

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
    },
  });

  // and load the index.html of the app.
  // win.loadFile("index.html");
  mainWindow.loadURL(
    isDev
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../dist/index.html')}`
  );
  // Open the DevTools.
  if (isDev) {
    mainWindow.webContents.openDevTools();
  }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
```

and create another file `preload.js`.
```js
// electron/preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })
```

## step 6: And your done 👍👍
Run `yarn electron:dev` to work with electron in development mode.
```bash
yarn electron:dev
```

Run `yarn app:build` to build your electron app.
```bash
yarn app:build
```

Run `yarn dev` to open vite in browser in development mode.
```bash
yarn dev
```
Run `yarn build` to build files and can be served.
```bash
yarn build
```
-------

Hey! If you like to help me out, you can donate. Thanks :)

[![bmc-button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bba6vubecqqdf2dlthjn.png)](https://www.buymeacoffee.com/BroJenuel)
 

You can Check the Source Code in My Youtube Channel Git Repository:
https://github.com/BroJenuel-Youtube/vite-vue-electron