DEV Community

Cover image for Building a Desktop App with Vue: Vuido

Building a Desktop App with Vue: Vuido

Natalia Tepluhina on September 03, 2018

Update: Building Vue desktop app with Electron I love Vue. It's a great framework allowing you to build awesome web applications. But the real ma...
Collapse
 
ismaelamezcua profile image
Ismael Amezcua

Superb introduction to Vuido. Just a heads up, if your are copy/pasting the code into your application, there is a missing } on the following line:

axios
  .get(
    `/weather?q=${this.query&units=metric&&appid=<YOUR_API_KEY>`,
   )

It should be

axios
  .get(
    `/weather?q=${this.query}&units=metric&&appid=<YOUR_API_KEY>`,
   )

You could also declare a variable for your API key so it would be easier to import from env variables:

const apiKey = process.env.API_KEY;

axios
  .get(
    `/weather?q=${this.query}&units=metric&&appid=${apiKey}`,
   )
Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Thanks for spotting this and for the advice! Fixed ;)

Collapse
 
yunseopkim profile image
yunseop kim

Thank you for this article. If possible, I would like to translate this article and share it with Korean developers, can I translate it?

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Sure, would be happy to see it translated!

Collapse
 
yunseopkim profile image
yunseop kim • Edited

this is the korean translation! :D

Many korean developers like this article!

devtimothy.tistory.com/91

Thread Thread
 
n_tepluhina profile image
Natalia Tepluhina

Awesome! Thank you for you work on this translation =)

Collapse
 
danieljsummers profile image
Daniel J. Summers

Nice writeup! I think your executable is probably bigger because of the Axios library also being included.

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Yes, probably without dependencies it'd be around 20Mb indeed :)

Collapse
 
michalmecinski profile image
Michał Męciński

The Linux and Mac packages are actually bigger, but the Windows 32-bit version is around 20 MB ;)

Thread Thread
 
n_tepluhina profile image
Natalia Tepluhina

Hi Michal! First of all I want to thank you for your work on Vuido and LaunchUI! Awesome projects and awesome documentation!

Indeed, just checked and Windows 32-bit package is 22.4 Mb (probably a bit more for Axios, as mentioned in comments)

Thread Thread
 
michalmecinski profile image
Michał Męciński

And I thank you very much for writing this great article :)

Collapse
 
gergelypolonkai profile image
Gergely Polonkai

This is a really good article, with one thing off: Electron apps are not desktop apps. Please stop suggesting that.

Electron is a huge resource hog. Running three of them easily eats up all my 8GB of memory. It’s not a solution, but a problem. If you want desktop apps, write desktop apps.

Collapse
 
thejaredwilcurt profile image
The Jared Wilcurt

Alternatively, you can use NW.js. It's all the same features as Electron, but uses much less resources. If lower resources are your highest priority though, then go with LibUI-Node/Vuido.

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Well, this is a good point to look at while building an Electron app ;)

Collapse
 
jodyshop profile image
Waleed Barakat

Awesome! I think Vue with be the next big thing :)

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Really hope so :)

Collapse
 
jodyshop profile image
Waleed Barakat

It will be! too many big tech companies use it worldwide!

Collapse
 
thejaredwilcurt profile image
The Jared Wilcurt

You've left out NW.js, which has great Vue support. There is nw-vue-devtools, which unlike Electron is always the latest most up-to-date version of Vue's dev tools. There is Vue-Desktop-Basic, NWjs-Vue, NW-Skeleton, and Vue-NW-Seed for boilerplates. NO ONE should be using Electron. With that sad, glad to see Vuido/LibUI-Node getting some attention.

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Thank you! Will look into it

Collapse
 
cynthiablue profile image
cynthiablue

I am brands new to Vue and am thinking of starting a project for a desktop application using Vue. I also like Quasar and I'm wondering, if I start the project using Vuido will I be able to add Quasar on as well? Thanks.

Collapse
 
kurisutofu profile image
kurisutofu

I was just wondering if it was possible to use Vue with Electron so I'm looking forward to the next article!

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Yes, it's definitely possible! Will publish it soon

Collapse
 
jenlooper profile image
Jen Looper

Really interesting article! Now I'm wondering what I want to build with Vuido!

Collapse
 
dbelyaeff profile image
Dmitriy Belyaev

It's nice but without an ability to customize interface it's not so good as it could be.

Collapse
 
ckissi profile image
Csaba Kissi

I wonder if it supports menubar apps on mac/win. Anybody?

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Thank you! Yeah it's still very new but already looks nice

Collapse
 
thomas_ph35 profile image
Thomas

I've made the exact same thing using, Native-Script vue (on IOS and Android) !
Seems like OpenWeatherMap is a good start for a first app.

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Props for using nativescript-vue! Awesome choice for native mobile apps ;)
Yeah I like OpenWeatherMap API, very nice and clear :)

Collapse
 
superdiana profile image
Super Diana

Natalia this is brilliant! thank you so much! - looking forward to the electron version!!

Collapse
 
n_tepluhina profile image
Natalia Tepluhina

Thanks Diana! You know I will do it soon =)