DEV Community

loading...
Cover image for Vite + Vue 3 + electron + TypeScript

Vite + Vue 3 + electron + TypeScript

Jenuel Oras Ganawed
I'm a software/web developer specializing in creating(and sometimes designing) exceptional websites, applications, and everything in between.
・3 min read

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:

// run this and choose vue as your template,
// you can choose typescript or js. whatever you want.
yarn create vite
Enter fullscreen mode Exit fullscreen mode

Step 2:

Next let as also add dependencies that we will need for our electron development and building.

yarn add -D concurrently cross-env electron electron-builder wait-on
Enter fullscreen mode Exit fullscreen mode

Be Sure to install all dependencies by running

yarn install
Enter fullscreen mode Exit fullscreen mode

Step 3:

Let us edit our package.json. Let us add build property. You can read more about this electron.build website.

 "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"
    }
  }
Enter fullscreen mode Exit fullscreen mode

and then let us also add some scripts in our package.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"
  },
Enter fullscreen mode Exit fullscreen mode

Let us also dont forget yo add author and main in our package.json file.

{
  "name": "vite-electron-app-test",
  "author": "BroJenuel",
  "version": "0.0.0",
  "main": "electron/electron.js",
  ...
}
Enter fullscreen mode Exit fullscreen mode

Step 4:

let us edit our vite.config.js or vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

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

Enter fullscreen mode Exit fullscreen mode

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.

// 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();
  }
});
Enter fullscreen mode Exit fullscreen mode

and create another file preload.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])
    }
  })
Enter fullscreen mode Exit fullscreen mode

step 6: And your done 👍👍

Run yarn electron:dev to work with electron in development mode.

yarn electron:dev
Enter fullscreen mode Exit fullscreen mode

Run yarn app:build to build your electron app.

yarn app:build
Enter fullscreen mode Exit fullscreen mode

Run yarn dev to open vite in browser in development mode.

yarn dev
Enter fullscreen mode Exit fullscreen mode

Run yarn build to build files and can be served.

yarn build
Enter fullscreen mode Exit fullscreen mode

bmc-button

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

Discussion (2)

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

It would be nicer if Electron itself is TypeScript as well.

Collapse
brojenuel profile image
Jenuel Oras Ganawed Author

You can actually change it to typescript if you want.