DEV Community

Cover image for Building a Desktop App with Vue: Electron

Building a Desktop App with Vue: Electron

Natalia Tepluhina on September 11, 2018

In my previous article I described building a desktop application with Vue framework using Vuido. It's a great library to create a fast and small-s...
Collapse
 
ben profile image
Ben Halpern

I feel like Vue + Electron may become a really popular approach for developer experience. Hard to beat this productivity.

I hope Electron has a plan for being kind to WebAssembly to improve performance and resource management in the future.

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

I agree. Development experience is great, but the resulting application is resource-expensive indeed.

Collapse
 
eryouhao profile image
Eryou Hao

So cool~, I recently developed a static blog writing client based on Vue & Electron, welcome to use! github.com/hve-notes/hve-notes

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Wow, it looks great! Thank you for sharing!

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev

Thanks, Natasha! Very useful article.

Have you tried UPX to compress final binary?

upx.github.io

It can compress final binary up to 2x.

The main disadvantage of Electron is output file size.

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Thank you! Will look into it

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev

You're welcome.

 
ben profile image
Ben Halpern

Thanks, means a lot!

Collapse
 
itsnwa profile image
Nichlas Wærnes Andersen

Very cool, I built a side-project with this exact setup + Firebase Auth, Storage and Firestore, such good dev experience and love love loved the flexibility of styling!

getbrandy.io

Collapse
 
cynthiablue profile image
cynthiablue

I am super new to Electron and Vue. I am trying to step through this tutorial but I cannot get it to run.

You say: "And if you try to run dev task you will have this result:"
But I don't know what that means? I have tried 'npm dev' and that doesn't work. looking through the code that was created the package.json file says:
"main": "./dist/electron/main.js",

but under the dist/electron directory, there is no main.js file.
I would love clarification, thanks.

Collapse
 
superdiana profile image
Super Diana

Thank you!! This is awesome

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Thank you for reading it ;)

Collapse
 
davefollett profile image
Dave Follett

Have you (or anyone) tried this Vue CLI v3 plugin for electron? I haven't had a chance to yet:

Greg is suppose to be doing a re-write for Vue CLI v3 but I haven't seen any updates from him lately.

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

No, but thanks for the idea! I'm going to check it :)

Collapse
 
sh3fas profile image
sh3fas

Good morning, I'm getting an error when editing App.vue file. Error is:

ERROR in ./src/renderer/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/App.vue?vue&type=script&lang=js&)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:/Users/Kiseliovai/Desktop/weather-app/src/renderer/App.vue: Unexpected token, expected ; (17:9)

15 | }
16 |

17 | data() {
| ^
18 | return {
19 | query: '',
20 | error: false,

Any suggestions?

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Could you please post the whole script block here? It seems an error is before the data

Collapse
 
bromoapp profile image
B Kunto Adji • Edited

Hi Natalia,

I'm pretty new to Vue js but not new to programming. I have been using Vue tutorials I found here and youtube to nicely study Vue.

Currently, I have an incoming project to build an electron app using Vue js. And by using a plugin from nklayman.github.io/vue-cli-plugin-... most of my Vue apps produced from learning the above tutorials can be nicely turned into Electron app with simple commands.

This coming electron project requires me to implement multiple windows layout and docking mechanism, and after I did some research, I came to golden-layout.com/ library... The integration of this lib for Vue also available at npmjs.com/package/vue-golden-layout

Maybe because I'm very new to Vue, but the description on how to use Vue-golden-layout lib in both NPM site and it's Github repo really confused me. I don't mean to be lazy here. But since I feel that I'm still a newbie in Vue while my Boss is on my tail ... is it possible that you make a very basic article on how to use Golden Layout with Vue?

I will be very very grateful if you can spend a little bit of your time to make one. Since desktop app without multiple windows layout and docking would not 100% complete :D

Or if any Vue experts here already have done such thing, it would be great for me to jump start with your samples...

Regards,
Bromo

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Thank you for this comment! I will look into it :)

Collapse
 
tvortsa profile image
Tvortsa

Thank you for this example

but how i can update a vue-list element in vue component of electron-vue app?

i have data(){} and return {} object in this data() and my_list for v-for in template, but i cant change template ((((

Vue manuals dont fit for electron cases ((((

Collapse
 
almokhtar profile image
almokhtar bekkour

thank you

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Thank you for your comment! It's a good point to have a look at

Collapse
 
ben profile image
Ben Halpern

tUx0r this is valid technically, but unnecessarily rude. Please try to deliver this feedback more constructively next time.

Collapse
 
shostarsson profile image
Rémi Lavedrine

Excellent article.
I read it very quickly but that would a good tutorial to go through and build my very first app with Vue.
And then move to something else and create my own application. :)

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Thank you for your feedback! I am happy this article is useful ;)

Collapse
 
pcrunn profile image
Alexander P.

Sounds cool. Will try it

Collapse
 
rohanisuhadi profile image
rohanisuhadi

How to change icon desktop app for production?

Collapse
 
alssdev profile image
Alssdev

this is awesome!!!

Collapse
 
ericpeter profile image
Eric Peter

How can i embed machine learning model in an electron desktop application