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 created an application with 'electron-vue' and this is how simple it is !
Let's make a weather app using OpenWeatherMap API
🛠️ Installation
I was using Ubuntu 18.04 and Webstorm IDE. I also like vuetify components so I installed the vuetify/electron repository
Looks like the GitHub repo doesn't exist anymore..
To install the project run
vue init vuetifyjs/electron my-project
cd my-project
npm install
npm run dev
Now you are ready to go !
Then to display the weather, i will need :
-Highest temperature
-Lowest temperature
-Humidity
So let's change that page into what we need ! I'm using two Card component, one to search the city and the other one will then display the weather
<v-card>
<v-card-text>
<p>Welcome to my météo app.</p>
<p>Search for a city to display the weather</p>
<v-text-field label="City" box v-model="city"></v-text-field>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn primary flat router @click="getWeather">Search</v-btn>
</v-card-actions>
</v-card>
<v-card v-if="show">
<v-card-text>
<v-layout row>
<v-layout xs6>
<v-card-text>
<v-spacer></v-spacer>
<h1>{{temp.toFixed(2)}}°C</h1>
<h1>{{weatherDescription}}</h1>
</v-card-text>
</v-layout>
<v-layout xs6>
<v-card-text>
<p><v-icon>fas fa-snowflake</v-icon>Min : {{ tempMin.toFixed(2) }}°C</p>
<p><v-icon>fas fa-sun</v-icon>Max : {{ tempMax.toFixed(2) }}°C</p>
<p><v-icon>fas fa-tint</v-icon>Humidity : {{ humidity }} %</p>
</v-card-text>
</v-layout>
</v-layout>
</v-card-text>
</v-card>
💻Requesting the API
I now need to code my getWeather function
I'm using axios to make API requests, I then store the data i want into my app
the API endpoint is '/data/2.5/weather'
import SystemInformation from './WelcomeView/SystemInformation'
import axios from 'axios'
axios.defaults.baseURL = 'http://api.openweathermap.org/data/2.5'
export default {
name: 'welcome',
components: { SystemInformation },
data () {
return {
city: '',
country: '',
weatherDescription: '',
temp: null,
tempMin: null,
tempMax: null,
humidity: null,
show: false,
key: '863668499362fb4884ebd97229f3b26b',
url: 'http://api.openweathermap.org/data/2.5/weather'
}
},
methods: {
open (link) {
this.$electron.shell.openExternal(link)
},
getWeather () {
axios.get(this.url, {
params: {
q: this.city,
appid: this.key
}
}).then(response => {
this.temp = response.data.main.temp - 274
this.tempMax = response.data.main.temp_max - 274
this.tempMin = response.data.main.temp_min - 274
this.humidity = response.data.main.humidity
this.weatherDescription = response.data.weather[0].description
this.show = true
}).catch(errors => {
console.log(errors)
})
}
}
}
🌟 And that's it !
Simple as a classique Vue js application, I just made a simple cross-plateform application.
this was my first electron app, and also my first blog post
I really loved it because i'm able to use the same app on Windows, MacOs and Ubuntu (has i work on ubuntu)
feel free to tell me about stuff i made wrong ore i could have done better, and to share some cool stuff to work on !
Top comments (18)
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?
this is the basic repo of electron-vue !
you can use it instead of mine who's dead.
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.
The boilerplate for making electron applications built with vue (pretty much what it sounds like)
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-clifor scaffolding,webpackwithvue-loader,electron-packagerorelectron-builder, and some of the most used plugins likevue-router,vuex, and so much more.Check out the detailed documentation here.
Things you'll find in this boilerplate...
package.jsonsetupappveyor.ymland.travis.ymlconfigurations for automated deployments with electron-builder*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 :
Windows - Mac OS - Linux app to display in time weather using Electron with vue/vuetifyjs and openweathermap.org API
Desktop Météo
Build Setup
This project was generated with electron-vue@fad1966 using vue-cli. Documentation about the original structure can be found here.
Has I said, the GitHub repo doesn't existe anymore..
I will try to find a New one 😊
dose async/await and es6+ work in this environment?
Yes it does. When bootstrapping a vue application, babel comes with it. So you can use async/await and ES2018 shenanigans
I thinks you can use AsyncData method from vue but I didn't tryed.
It was not usefull in this use case. 😀
asyncDatais a Nuxt-specific thing that runs before mounting.Normal Vue only has synchronous
data()to initialize.Ho my bad 😇 I guess I'm totaly used to nuxt 😆
Who are you calling a ho :o
Sorry ?
it was an Onomatopeia 😱 I didn't mean to be mean at all😮
excellent travail 🎉
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?
Nothing at all, it was exactly like building a web app using regular vue and vuetify 👌😁
Already answered, please read the comments 😊
I found that and was trying to delete and my internet stoped working. and found your comment when it came back. Sorry
No problem ! 😊 Happy you found a solution 😉
Electron rocks!!! 🛤️🚀