DEV Community

Cover image for How I built a desktop app with vue in minutes

How I built a desktop app with vue in minutes

Thomas on February 21, 2019

When it comes to desktop app, electron is a powerful tool. You can build cross-platform applications in one shot. As I like vue, i've triyed creat...
Collapse
 
phillipstemann profile image
Phillip Stemann

Very exciting, when I run the first line:
vue init vuetifyjs/electron my-project

I get this error:
vue-cli · Failed to download repo vuetifyjs/electron: Response code 404 (Not Found)

What can I do?

Collapse
 
thomas_ph35 profile image
Thomas

this is the basic repo of electron-vue !
you can use it instead of mine who's dead.

SimulatedGREG / electron-vue

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.


electron-vue

The boilerplate for making electron applications built with vue (pretty much what it sounds like)

forthebadge forthebadge forthebadge

js-standard-style

Build Status

Overview

The aim of this project is to remove the need of manually setting up electron apps using vue. electron-vue takes advantage of vue-cli for scaffolding, webpack with vue-loader, electron-packager or electron-builder, and some of the most used plugins like vue-router, vuex, and so much more.

Check out the detailed documentation here.

Things you'll find in this boilerplate...



you will just have to install vuetify (wich I didn't tryed because i already had it)

if you want to check my code feel free to fork my repo :

Thomas-Philippot / Desktop-meteo

Windows - Mac OS - Linux app to display in time weather using Electron with vue/vuetifyjs and openweathermap.org API

Desktop Météo

An electron-vue project As the project is mainly for testing purpose This project use a private API but the access token is writen in the source code. This is not a good way to do it, remeber to store these kind of data in .env file.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:9080
npm run dev

# build electron application for production
npm run build

# run unit & end-to-end tests
npm test


# lint all JS/Vue component files in `src/`
npm run lint

This project was generated with electron-vue@fad1966 using vue-cli. Documentation about the original structure can be found here.


Collapse
 
thomas_ph35 profile image
Thomas

Has I said, the GitHub repo doesn't existe anymore..
I will try to find a New one 😊

Collapse
 
masihfathi profile image
masih fathi

dose async/await and es6+ work in this environment?

Collapse
 
cthulhudev profile image
CthulhuDev

Yes it does. When bootstrapping a vue application, babel comes with it. So you can use async/await and ES2018 shenanigans

Collapse
 
thomas_ph35 profile image
Thomas

I thinks you can use AsyncData method from vue but I didn't tryed.
It was not usefull in this use case. 😀

Collapse
 
qm3ster profile image
Mihail Malo

asyncData is a Nuxt-specific thing that runs before mounting.
Normal Vue only has synchronous data() to initialize.

Thread Thread
 
thomas_ph35 profile image
Thomas

Ho my bad 😇 I guess I'm totaly used to nuxt 😆

Thread Thread
 
qm3ster profile image
Mihail Malo

Who are you calling a ho :o

Thread Thread
 
thomas_ph35 profile image
Thomas

Sorry ?
it was an Onomatopeia 😱 I didn't mean to be mean at all😮

Collapse
 
abdurrahmaanj profile image
Abdur-Rahmaan Janhangeer

excellent travail 🎉

Collapse
 
tyler_potts_ profile image
Tyler Potts ✌️

That is really cool. I was thinking to try this out myself and stumbled across your post.

Was there anything that you found could be an issue combining electron and vue?

Collapse
 
thomas_ph35 profile image
Thomas

Nothing at all, it was exactly like building a web app using regular vue and vuetify 👌😁

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
thomas_ph35 profile image
Thomas

Already answered, please read the comments 😊

Collapse
 
pwnchaurasia profile image
Pawan Chaurasia

I found that and was trying to delete and my internet stoped working. and found your comment when it came back. Sorry

Thread Thread
 
thomas_ph35 profile image
Thomas

No problem ! 😊 Happy you found a solution 😉

Collapse
 
mkenzo_8 profile image
mkenzo_8

Electron rocks!!! 🛤️🚀