·
7 min read
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.
Why Quasar?
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.
2
3$ yarn global add @quasar/cli
4# or
5$ npm install -g @quasar/cliLet's start by creating a new project using the Quasar CLI:
bash
1▶ quasar create vue3-electron-demo
2
3 ___
4 / _ \ _ _ __ _ ___ __ _ _ __
5| | | | | | |/ _` / __|/ _` | '__|
6| |_| | |_| | (_| \__ \ (_| | |
7 \__\_\\__,_|\__,_|___/\__,_|_|
8
9
10
11? Project name (internal usage for dev) vue3-electron-demo
12? Project product name (must start with letter if building mobile apps) Quasar App
13? Project description A Quasar Framework app
14? Author Michael Hoffmann <michael.hoffmann@mokkapps.de>
15? Pick your CSS preprocessor: SCSS
16? Check the features needed for your project: ESLint (recommended), TypeScript
17? Pick a component style: Composition
18? Pick an ESLint preset: Prettier
19? 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.
Add Pinia as Vue store library
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 pinia
2# or with npm
3npm 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'
3
4export 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-files
7 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'
2
3// useStore could be anything like useUser, useCart
4// the first argument is a unique id of the store across your application
5const 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})
22
23export default useStoreWe can use this store in any Vue component:
1<template>Counter: {{ store.counter }}</template>
2
3<script setup lang="ts">
4import { useStore } from '@/stores/counter'
5
6const 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 platforms
4| ├── icon.icns # Icon file for Darwin (MacOS) platform
5| ├── icon.ico # Icon file for win32 (Windows) platform
6| └── icon.png # Tray icon file for all platforms
7├── 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.
Control Electron from Vue code
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'
5
6initialize()
7
8let mainWindow
9
10function createWindow() {
11 /**
12 * Initial window options
13 */
14 mainWindow = new BrowserWindow({
15 icon: path.resolve(__dirname, 'icons/icon.png'), // tray icon
16 width: 1000,
17 height: 600,
18 useContentSize: true,
19 webPreferences: {
20 contextIsolation: true,
21 // More info: /quasar-cli/developing-electron-apps/electron-preload-script
22 preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD),
23 },
24 })
25
26 // ....
27
28 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'
3
4// 'electronApi' will be available on the global window context
5contextBridge.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.filePaths
14 },
15})Next we create src/api/electron-api.ts to access this code from within our Vue application:
1export interface ElectronFileFilter {
2 name: string
3 extensions: string[]
4}
5
6export interface ElectronApi {
7 openFileDialog: (title: string, folder: string, filters: ElectronFileFilter) => Promise<string[]>
8}
9
10// eslint-disable-next-line @typescript-eslint/ban-ts-comment
11// @ts-ignore
12export 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>
4
5<script lang="ts">
6import { defineComponent } from 'vue'
7import { electronApi } from 'src/api/electron-api'
8
9export default defineComponent({
10 name: 'PageIndex',
11 components: {},
12 setup() {
13 const openElectronFileDialog = async () => {
14 return electronApi.openFileDialog('Test', 'folder', { name: 'images', extensions: ['jpg'] })
15 }
16
17 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.
The 10 Favorite Features of My Developer Portfolio Website
Inspired by Braydon Coyer's new blogfolio, I've added some excellent new features to my portfolio website.
Dark Mode Switch With Tailwind CSS & Nuxt 3
I am currently rewriting my portfolio website with Nuxt 3 which is still in beta. In this article, I want to show you how I implemented a dark mode switch in Nuxt 3 using Tailwind CSS that I will use in my new portfolio website.
