├── .gitignore
├── .prettierrc
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── background.js
    ├── components
    │   ├── FilesViewer.vue
    │   ├── IconFile.vue
    │   ├── IconFolder.vue
    │   └── IconFolderOpen.vue
    └── main.js
├── vue.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 
25 | #Electron-builder output
26 | /dist_electron


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true,
4 |   "trailingComma": "none",
5 |   "arrowParens": "avoid"
6 | }
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-electron
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-electron",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "electron:build": "vue-cli-service electron:build",
10 |     "electron:serve": "vue-cli-service electron:serve",
11 |     "postinstall": "electron-builder install-app-deps",
12 |     "postuninstall": "electron-builder install-app-deps"
13 |   },
14 |   "main": "background.js",
15 |   "dependencies": {
16 |     "@electron/remote": "^1.0.2",
17 |     "bootstrap": "^5.0.0-beta1",
18 |     "core-js": "^3.6.5",
19 |     "vue": "^3.0.0"
20 |   },
21 |   "devDependencies": {
22 |     "@vue/cli-plugin-babel": "~4.5.0",
23 |     "@vue/cli-plugin-eslint": "~4.5.0",
24 |     "@vue/cli-service": "~4.5.0",
25 |     "@vue/compiler-sfc": "^3.0.0",
26 |     "babel-eslint": "^10.1.0",
27 |     "electron": "11",
28 |     "electron-devtools-installer": "^3.1.0",
29 |     "eslint": "^6.7.2",
30 |     "eslint-plugin-vue": "^7.0.0-0",
31 |     "vue-cli-plugin-electron-builder": "~2.0.0-rc.5"
32 |   },
33 |   "eslintConfig": {
34 |     "root": true,
35 |     "env": {
36 |       "node": true
37 |     },
38 |     "extends": [
39 |       "plugin:vue/vue3-essential",
40 |       "eslint:recommended"
41 |     ],
42 |     "parserOptions": {
43 |       "parser": "babel-eslint"
44 |     },
45 |     "rules": {}
46 |   },
47 |   "browserslist": [
48 |     "> 1%",
49 |     "last 2 versions",
50 |     "not dead"
51 |   ]
52 | }
53 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingwithjustin/vue3-electron/9f199a706fda54fc1db26ee6dc068b6975caab3f/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong
13 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
14 |         properly without JavaScript enabled. Please enable it to
15 |         continue.</strong
16 |       >
17 |     </noscript>
18 |     <div id="app"></div>
19 |     <!-- built files will be auto injected -->
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import fs from 'fs'
 3 | import pathModule from 'path'
 4 | 
 5 | import { app } from '@electron/remote'
 6 | import { computed, ref } from 'vue'
 7 | 
 8 | import FilesViewer from './components/FilesViewer'
 9 | 
10 | const formatSize = size => {
11 |   var i = Math.floor(Math.log(size) / Math.log(1024))
12 |   return (
13 |     (size / Math.pow(1024, i)).toFixed(2) * 1 +
14 |     ' ' +
15 |     ['B', 'kB', 'MB', 'GB', 'TB'][i]
16 |   )
17 | }
18 | 
19 | export default {
20 |   name: 'App',
21 |   components: { FilesViewer },
22 |   setup() {
23 |     const path = ref(app.getAppPath())
24 |     const files = computed(() => {
25 |       const fileNames = fs.readdirSync(path.value)
26 |       return fileNames
27 |         .map(file => {
28 |           const stats = fs.statSync(pathModule.join(path.value, file))
29 |           return {
30 |             name: file,
31 |             size: stats.isFile() ? formatSize(stats.size ?? 0) : null,
32 |             directory: stats.isDirectory()
33 |           }
34 |         })
35 |         .sort((a, b) => {
36 |           if (a.directory === b.directory) {
37 |             return a.name.localeCompare(b.name)
38 |           }
39 |           return a.directory ? -1 : 1
40 |         })
41 |     })
42 | 
43 |     const back = () => {
44 |       path.value = pathModule.dirname(path.value)
45 |     }
46 |     const open = folder => {
47 |       path.value = pathModule.join(path.value, folder)
48 |     }
49 | 
50 |     const searchString = ref('')
51 |     const filteredFiles = computed(() => {
52 |       return searchString.value
53 |         ? files.value.filter(s => s.name.startsWith(searchString.value))
54 |         : files.value
55 |     })
56 | 
57 |     return {
58 |       path,
59 | 
60 |       open,
61 |       back,
62 | 
63 |       files,
64 |       searchString,
65 |       filteredFiles
66 |     }
67 |   }
68 | }
69 | </script>
70 | 
71 | <template>
72 |   <div class="container mt-2">
73 |     <h4>{{ path }}</h4>
74 | 
75 |     <div class="form-group mt-4 mb-2">
76 |       <input
77 |         v-model="searchString"
78 |         class="form-control form-control-sm"
79 |         placeholder="File search"
80 |       />
81 |     </div>
82 | 
83 |     <FilesViewer
84 |       :files="filteredFiles"
85 |       :nested="nested"
86 |       @back="back"
87 |       @folderclick="open($event.name)"
88 |     />
89 |   </div>
90 | </template>
91 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingwithjustin/vue3-electron/9f199a706fda54fc1db26ee6dc068b6975caab3f/src/assets/logo.png


--------------------------------------------------------------------------------
/src/background.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | import { app, protocol, BrowserWindow } from 'electron'
 4 | import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 5 | import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 6 | 
 7 | require('@electron/remote/main').initialize()
 8 | 
 9 | const isDevelopment = process.env.NODE_ENV !== 'production'
10 | 
11 | // Scheme must be registered before the app is ready
12 | protocol.registerSchemesAsPrivileged([
13 |   { scheme: 'app', privileges: { secure: true, standard: true } }
14 | ])
15 | 
16 | async function createWindow() {
17 |   // Create the browser window.
18 |   const win = new BrowserWindow({
19 |     width: 800,
20 |     height: 600,
21 |     webPreferences: {
22 |       // Use pluginOptions.nodeIntegration, leave this alone
23 |       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
24 |       nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
25 |       enableRemoteModule: true
26 |     }
27 |   })
28 | 
29 |   if (process.env.WEBPACK_DEV_SERVER_URL) {
30 |     // Load the url of the dev server if in development mode
31 |     await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
32 |     if (!process.env.IS_TEST) win.webContents.openDevTools()
33 |   } else {
34 |     createProtocol('app')
35 |     // Load the index.html when not in development
36 |     win.loadURL('app://./index.html')
37 |   }
38 | }
39 | 
40 | // Quit when all windows are closed.
41 | app.on('window-all-closed', () => {
42 |   // On macOS it is common for applications and their menu bar
43 |   // to stay active until the user quits explicitly with Cmd + Q
44 |   if (process.platform !== 'darwin') {
45 |     app.quit()
46 |   }
47 | })
48 | 
49 | app.on('activate', () => {
50 |   // On macOS it's common to re-create a window in the app when the
51 |   // dock icon is clicked and there are no other windows open.
52 |   if (BrowserWindow.getAllWindows().length === 0) createWindow()
53 | })
54 | 
55 | // This method will be called when Electron has finished
56 | // initialization and is ready to create browser windows.
57 | // Some APIs can only be used after this event occurs.
58 | app.on('ready', async () => {
59 |   if (isDevelopment && !process.env.IS_TEST) {
60 |     // Install Vue Devtools
61 |     try {
62 |       await installExtension(VUEJS_DEVTOOLS)
63 |     } catch (e) {
64 |       console.error('Vue Devtools failed to install:', e.toString())
65 |     }
66 |   }
67 |   createWindow()
68 | })
69 | 
70 | // Exit cleanly on request from parent process in development mode.
71 | if (isDevelopment) {
72 |   if (process.platform === 'win32') {
73 |     process.on('message', data => {
74 |       if (data === 'graceful-exit') {
75 |         app.quit()
76 |       }
77 |     })
78 |   } else {
79 |     process.on('SIGTERM', () => {
80 |       app.quit()
81 |     })
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/src/components/FilesViewer.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import IconFile from './IconFile'
 3 | import IconFolder from './IconFolder'
 4 | import IconFolderOpen from './IconFolderOpen'
 5 | 
 6 | export default {
 7 |   props: {
 8 |     files: { type: Array, default: () => [] }
 9 |   },
10 |   components: { IconFile, IconFolder, IconFolderOpen },
11 |   setup(_, { emit }) {
12 |     const onFileClick = file => {
13 |       if (file.directory) emit('folderclick', file)
14 |     }
15 |     return { onFileClick }
16 |   }
17 | }
18 | </script>
19 | 
20 | <template>
21 |   <table class="table">
22 |     <tbody>
23 |       <tr class="clickable" @click="$emit('back')">
24 |         <td class="icon-row">
25 |           <IconFolderOpen class="icon-folder" />
26 |         </td>
27 |         <td>...</td>
28 |         <td></td>
29 |       </tr>
30 | 
31 |       <tr
32 |         v-for="file in files"
33 |         :key="file.name"
34 |         :class="{ clickable: file.directory }"
35 |         @click="onFileClick(file)"
36 |       >
37 |         <td class="icon-row">
38 |           <IconFolder v-if="file.directory" class="icon-folder" />
39 |           <IconFile v-else class="icon-file" />
40 |         </td>
41 |         <td>{{ file.name }}</td>
42 |         <td>
43 |           <span class="float-end">{{ file.size }}</span>
44 |         </td>
45 |       </tr>
46 |     </tbody>
47 |   </table>
48 | </template>
49 | 
50 | <style scoped>
51 | .clickable {
52 |   cursor: pointer;
53 | }
54 | 
55 | .icon-row {
56 |   width: 2em;
57 | }
58 | .icon-folder {
59 |   width: 1em;
60 | }
61 | .icon-file {
62 |   width: 0.75em;
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/components/IconFile.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
3 |     <path
4 |       d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/src/components/IconFolder.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
3 |     <path
4 |       d="M464 128H272l-54.63-54.63c-6-6-14.14-9.37-22.63-9.37H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48zm0 272H48V112h140.12l54.63 54.63c6 6 14.14 9.37 22.63 9.37H464v224z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/src/components/IconFolderOpen.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
3 |     <path
4 |       d="M527.9 224H480v-48c0-26.5-21.5-48-48-48H272l-64-64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h400c16.5 0 31.9-8.5 40.7-22.6l79.9-128c20-31.9-3-73.4-40.7-73.4zM48 118c0-3.3 2.7-6 6-6h134.1l64 64H426c3.3 0 6 2.7 6 6v42H152c-16.8 0-32.4 8.8-41.1 23.2L48 351.4zm400 282H72l77.2-128H528z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | import 'bootstrap/dist/css/bootstrap.min.css'
5 | 
6 | createApp(App).mount('#app')
7 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   pluginOptions: {
3 |     electronBuilder: {
4 |       nodeIntegration: true
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------