Recently, I planned to rewrite my "Scrum Daily Standup Picker" Electron application in Vue 3. I wrote the initial release in Angular, but I wanted to refactor the code base and rewrite it in Vue 3.
Why? Because I love Vue and want to have a public showcase that I can reference to potential customers.
Quasar is an MIT licensed open-source Vue.js based framework that targets SPA, SSR, PWA, mobile app, desktop app, and browser extension all using one codebase.It handles the build setup and provides a complete collection of Material Design compliant UI components.
Quasar's motto is:
Write code once and simultaneously deploy it as a website, a Mobile App and/or an Electron App.
Using Quasar drastically saves development time due to these reasons:
- It's based on Vue.js.
- It provides many UI components that follow Material Design guidelines.
- It has a regular release cycle inclusive of new features.
- It provides support for each build mode (SPA, SSR, PWA, Mobile app, Desktop app & Browser Extension).
- It has its own CLI that provides a pleasant developer experience. For example, we can build our application as SPA, mobile, or desktop app within the same project folder.
Read more about why Quasar might be a good choice for your next project.
Install Quasar CLI
Info
The source code for the following demo is available at GitHub
bash
1# Node.js >=12.22.1 is required.23$ yarn global add @quasar/cli4# or5$ npm install -g @quasar/cliLet's start by creating a new project using the Quasar CLI:
bash
1▶ quasar create vue3-electron-demo23 ___4 / _ \ _ _ __ _ ___ __ _ _ __5| | | | | | |/ _` / __|/ _` | '__|6| |_| | |_| | (_| \__ \ (_| | |7 \__\_\\__,_|\__,_|___/\__,_|_|891011? Project name (internal usage for dev) vue3-electron-demo12? Project product name (must start with letter if building mobile apps) Quasar App13? Project description A Quasar Framework app14? Author Michael Hoffmann <michael.hoffmann@mokkapps.de>15? Pick your CSS preprocessor: SCSS16? Check the features needed for your project: ESLint (recommended), TypeScript17? Pick a component style: Composition18? Pick an ESLint preset: Prettier19? Continue to install project dependencies after the project has been created? (recommended) NPMWe chose SCSS as our CSS preprocessor, ESLint & Typescript as additional features, Vue 3's Composition API and Prettier for code formatting.
Warning
Do not choose Vuex as we will add another state library in the next chapter. If you accidentally added Vuex, remove it manually from your package.json.
Read the official docs for additional information about the Quasar CLI.
We'll use Pinia as Vue store library, which is now the recommended state library for Vue.
First, we need to install Pinia:
bash
1yarn add pinia2# or with npm3npm install piniaTo be able to register Pinia at our Vue application instance we need to create a Quasar Boot File:
A common use case for Quasar applications is to run code before the root Vue app instance is instantiated, like injecting and initializing your own dependencies (examples: Vue components, libraries…) or simply configuring some startup code of your app.
Our boot file is called pinia.ts and is located at src/boot:
1import { boot } from 'quasar/wrappers'2import { createPinia } from 'pinia'34export default boot(({ app }) => {5 app.use(createPinia())6})We also need to add this new file to quasar.conf.js:
1module.exports = configure(function (ctx) {2 return {3 ...4 // app boot file (/src/boot)5 // --> boot files are part of "main.js"6 // https://quasar.dev/quasar-cli/boot-files7 boot: ['pinia'],8 ...9 }10}Now, we can create a new folder called pinia in src.
Warning
We cannot name this folder store as this name is reserved for the official Vuex integration.
A basic store could look like this:
1import { defineStore } from 'pinia'23// useStore could be anything like useUser, useCart4// the first argument is a unique id of the store across your application5const useStore = defineStore('storeId', {6 state: () => {7 return {8 counter: 0,9 lastName: 'Michael',10 firstName: 'Michael',11 }12 },13 getters: {14 fullName: (state) => `${state.firstName} ${state.lastName}`,15 },16 actions: {17 increment() {18 this.counter++19 },20 },21})2223export default useStoreWe can use this store in any Vue component:
1<template>Counter: {{ store.counter }}</template>23<script setup lang="ts">4import { useStore } from '@/stores/counter'56const store = useStore()7</script>Now we can run the Vue application using the Quasar CLI:
bash
quasar devThe Vue application is served at http://localhost:8080:
Setup Electron
Info
Read this introduction if you are new to Electron.
To develop/build a Quasar Electron app, we need to add the Electron mode to our Quasar project:
bash
quasar mode add electronEvery Electron app has two threads: the main thread (deals with the window and initialization code – from the newly created folder /src-electron) and the renderer thread (which deals with the actual content of your app from /src).
The new folder has the following structure:
1.2└── src-electron/3├── icons/ # Icons of your app for all platforms4| ├── icon.icns # Icon file for Darwin (MacOS) platform5| ├── icon.ico # Icon file for win32 (Windows) platform6| └── icon.png # Tray icon file for all platforms7├── electron-preload.js # (or .ts) Electron preload script (injects Node.js stuff into renderer thread)8└── electron-main.js # (or .ts) Main thread codeNow we are ready to start our Electron application:
bash
quasar dev -m electronThis command will open up an Electron window which will render your app along with Developer Tools opened side by side:
Read the official docs for additional and detailed information about developing Electron apps with Quasar.
If we want to use Electron features like opening a file dialog, we need to write some code to be able to access Electron's API.
For example, if we want to show a dialog to open files, Electron provides the dialog API to display native system dialogs for opening and saving files, alerting, etc.
First, we need to install @electron/remote:
bash
npm install -D @electron/remoteThen we need to modify src-electron/electron-main.js and initialize @electron/remote:
1import { app, BrowserWindow, nativeTheme } from 'electron'2import { initialize, enable } from '@electron/remote/main'3import path from 'path'4import os from 'os'56initialize()78let mainWindow910function createWindow() {11 /**12 * Initial window options13 */14 mainWindow = new BrowserWindow({15 icon: path.resolve(__dirname, 'icons/icon.png'), // tray icon16 width: 1000,17 height: 600,18 useContentSize: true,19 webPreferences: {20 contextIsolation: true,21 // More info: /quasar-cli/developing-electron-apps/electron-preload-script22 preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD),23 },24 })2526 // ....2728 enable(mainWindow.webContents)29}If we want to use Electron API from our Vue code we need to add some code to src-electron/electron-preload.js:
1import { contextBridge } from 'electron'2import { dialog } from '@electron/remote'34// 'electronApi' will be available on the global window context5contextBridge.exposeInMainWorld('electronApi', {6 openFileDialog: async (title, folder, filters) => {7 // calling showOpenDialog from Electron API: https://www.electronjs.org/docs/latest/api/dialog/8 const response = await dialog.showOpenDialog({9 title,10 filters,11 properties: ['openFile', 'multiSelections'],12 })13 return response.filePaths14 },15})Next we create src/api/electron-api.ts to access this code from within our Vue application:
1export interface ElectronFileFilter {2 name: string3 extensions: string[]4}56export interface ElectronApi {7 openFileDialog: (title: string, folder: string, filters: ElectronFileFilter) => Promise<string[]>8}910// eslint-disable-next-line @typescript-eslint/ban-ts-comment11// @ts-ignore12export const electronApi: ElectronApi = (window as { electronApi: ElectronApi }).electronApiNow we can use this API anywhere in our Vue component:
1<template>2 <q-btn @click="openElectronFileDialog">Open Electron File Dialog</q-btn>3</template>45<script lang="ts">6import { defineComponent } from 'vue'7import { electronApi } from 'src/api/electron-api'89export default defineComponent({10 name: 'PageIndex',11 components: {},12 setup() {13 const openElectronFileDialog = async () => {14 return electronApi.openFileDialog('Test', 'folder', { name: 'images', extensions: ['jpg'] })15 }1617 return { openElectronFileDialog }18 },19})20</script>Clicking on the button should now open the native OS file dialog:
Conclusion
Quasar allows us to quickly develop Electron desktop applications in Vue with high-quality UI components that follow Material Design guidelines.
The most significant advantage against a custom Electron + Vue boilerplate project from GitHub is that Quasar has a regular release cycle and provides upgrade guides for older versions.
Take a look at my "Scrum Daily Standup Picker" GitHub repository to see a more complex "Quasar-Electron-Vue3-Typescript-Pinia" project. The demo source code for the following demo is available at GitHub.
If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.
Alternatively (or additionally), you can also subscribe to my newsletter.
