Using Vue.js with Electron | xnacly - blogUsing Vue.js with Electron<br>Jan 2, 2023<br>782 Words<br>4 Minute read
Tags:<br>Vue.js<br>Electron
Abstract<br>This is a simple and minimal guide for getting vue.js up and runnning with electron.<br>Documentation:<br>Vue.js<br>Electron<br>electron-forge
Vue.js<br>BASH<br>1# install and run vue scaffholding tool<br>2npm init vue@latest<br>3# replace with the name you specified<br>4cd<br>5# install dependecies<br>6yarn<br>7# or<br>8npm<br>9# start dev server<br>10yarn dev<br>11# or<br>12npm run dev<br>This should output:
more info on setting up a vue.js project1<br>Navigating to localhost: (take a look at the port in the console output) should display the following:
Electron<br>Adding electron to the project<br>BASH<br>1# install electron as a dev dependecy<br>2yarn add -D electron@latest<br>3# or<br>4npm install --save-dev electron<br>Create and open main.js at the root of your project. Paste the following into it:<br>JAVASCRIPT<br>1const { app, BrowserWindow } = require("electron");<br>2const path = require("path");<br>4// function to create the window from our vue.js project<br>5function createWindow() {<br>6 // get a new instance of window with specified dimensions<br>7 const window = new BrowserWindow({<br>8 width: 800,<br>9 height: 600,<br>10 webPreferences: {<br>11 nodeIntegration: true,<br>12 },<br>13 });<br>14<br>15 // vue.js outputs to ./dist, therefore we load our index.html from there<br>16 window.loadURL(path.join(__dirname, `/dist/index.html`));<br>17 window.on("closed", function () {<br>18 window = null;<br>19 });<br>20}<br>21<br>22// create the window once electron finished starting<br>23app.on("ready", createWindow);<br>24<br>25// if all instances of our window are closed close the parent instance<br>26app.on("window-all-closed", function () {<br>27 if (process.platform !== "darwin") app.quit();<br>28});<br>29<br>30app.on("activate", function () {<br>31 if (mainWindow === null) createWindow();<br>32});<br>After this, add the following highlighted lines to your package.json:<br>JSON<br>1{<br>2 "name": "electron-vue",<br>3 "version": "0.0.0",<br>4 "private": true,<br>5 "main": "main.js",<br>6 "scripts": {<br>7 "dev": "vite",<br>8 "start-electron": "vite build && electron .",<br>9 "build": "run-p type-check build-only",<br>10 "preview": "vite preview",<br>11 "test:unit": "vitest --environment jsdom --root src/",<br>12 "build-only": "vite build",<br>13 "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"<br>14 }<br>15}<br>Tip<br>To develop the application in the browser, run: yarn dev<br>To view the application in a electron instance, run: yarn start-electron
Warning<br>While running the yarn start-electron command one will notice the lack of content in the newly spawned electron window.<br>To fix this, add the following to your vite.config.js:<br>JAVASCRIPT<br>1import { fileURLToPath, URL } from "node:url";<br>3import { defineConfig } from "vite";<br>4import vue from "@vitejs/plugin-vue";<br>5import vueJsx from "@vitejs/plugin-vue-jsx";<br>7// https://vitejs.dev/config/<br>8export default defineConfig({<br>9 plugins: [vue(), vueJsx()],<br>10 resolve: {<br>11 alias: {<br>12 "@": fileURLToPath(new URL("./src", import.meta.url)),<br>13 },<br>14 },<br>15 base: "./",<br>16});
Packaging the Application<br>To package our application we will use electron-forge.<br>Installing electron forgeBASH<br>1yarn add -D @electron-forge/cli<br>2# or<br>3npm install --save-dev @electron-forge/cli
Importing the project into electron forgeBASH<br>1npx electron-forge import
Packaging the applicationBASH<br>1yarn package<br>2# or<br>3npm run package
Navigate to /out/--, here you can find the generated files for the project.<br>Creating a installer<br>The installer allows users to click on a executable and have it install on their system.Tip<br>The installer requires an author and a description, otherwise it won’t run. To fulfil these requirements we need to add the following to our package.json: (replace with your name)<br>JAVASCRIPT<br>1{<br>2 "name": "electron-vue",<br>3 "version": "0.0.0",<br>4 "private": true,<br>5 "main": "main.js",<br>6 "author": "",<br>7 "description": "test app",<br>8 "scripts": {<br>9 "dev": "vite",<br>10 "dev-electron": "vite build && electron .",<br>11 "start": "electron-forge start",<br>12 "build": "run-p type-check build-only",<br>13 "preview": "vite preview",<br>14 "test:unit": "vitest --environment jsdom --root src/",<br>15 "build-only": "vite build",<br>16 "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",<br>17 "package": "electron-forge package",<br>18 "electron": "electron-forge make",<br>19 "make": "electron-forge make"<br>20 }<br>21}
BASH<br>1yarn make<br>Wait for the completion and navigate to out/make/// and take a look at the binary it created in the format: - Setup.*.<br>PS - Update<br>To develop in an electron instance, add the following to your package.json:<br>JSON<br>1{<br>2 "name": "electron-vue",<br>3 "version": "0.0.0",<br>4 "private": true,<br>5 "main": "main.js",<br>6 "author": "",<br>7 "description": "test app",<br>8 "scripts": {<br>9 "dev": "vite",<br>10 "dev:build": "vite build --watch",<br>11 "start": "electron-forge start",<br>12 "build": "run-p type-check build-only",<br>13 "preview": "vite preview",<br>14 "test:unit": "vitest --environment jsdom --root src/",<br>15 "build-only": "vite build",<br>16 "type-check":...