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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
I agree. Development experience is great, but the resulting application is resource-expensive indeed.
So cool~, I recently developed a static blog writing client based on Vue & Electron, welcome to use! github.com/hve-notes/hve-notes
Wow, it looks great! Thank you for sharing!
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.
Thank you! Will look into it
You're welcome.
Thanks, means a lot!
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
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.
Thank you!! This is awesome
Thank you for reading it ;)
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.
No, but thanks for the idea! I'm going to check it :)
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 |
Any suggestions?
Could you please post the whole
script
block here? It seems an error is before thedata
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
Thank you for this comment! I will look into it :)
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 ((((
thank you
Thank you for your comment! It's a good point to have a look at
tUx0r this is valid technically, but unnecessarily rude. Please try to deliver this feedback more constructively next time.
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. :)
Thank you for your feedback! I am happy this article is useful ;)
Sounds cool. Will try it
How to change icon desktop app for production?
this is awesome!!!
How can i embed machine learning model in an electron desktop application