Building an Electron File Explorer with Quasar

(and Vue)

Jeff Galbraith
Nov 21, 2018 · 15 min read
Electron File Explorer

Introduction

What is Electron?

What is Quasar?

What is a File Explorer

Why a tutorial?

About the Tutorial

Design Decisions

End Goal

Existing File Explorers

Windows Explorer — List Mode
Windows Explorer — Grid Mode
Ubuntu Files — List Mode
Ubuntu Files — Grid Mode

Design

Security Concerns

Quasar

Quasar Project Initialization
Quasar Folder Scaffolding
quasar new

Task #1: Modifications to Scaffolding

run scripts in package.json

Task #2: Files and Folders

Task #3: QTree

Task #4: Get Windows Drives

Task #5: Spoofing QTree Selected and Lazy Load

Task #6: Displaying Images from Files

Task #7: Watching Files and Folders

Overview

Quasar Framework

Build high-performance cross-device VueJS user interfaces…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store