Thomas Philippot

Posted on Feb 21, 2019 • Updated on May 9, 2019

How I built a desktop app with vue in minutes

#vue #electron #openweathermap

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 !

Oldest comments (18)

Tyler Potts ✌️ • Feb 21 '19

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?

Thomas Philippot • Feb 21 '19

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

masih fathi • Feb 21 '19

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

CthulhuDev • Feb 21 '19

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

Thomas Philippot • Feb 21 '19

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

Mihail Malo • Feb 22 '19

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

Thomas Philippot • Feb 22 '19

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

Mihail Malo • Feb 22 '19

Who are you calling a ho :o

Thomas Philippot • Feb 22 '19

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

mkenzo_8 • Feb 22 '19

Electron rocks!!! 🛤️🚀

Phillip Stemann • Feb 22 '19

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?

Thomas Philippot • Feb 22 '19

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

Thomas Philippot • Feb 22 '19

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.

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-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...

Basic project structure with a single package.json setup
Detailed documentation
Project scaffolding using vue-cli
Ready to use Vue plugins (axios, vue-electron, vue-router, vuex)
Installed vue-devtools and devtron tools for development
Ability to easily package your electron app using electron-packager or electron-builder
appveyor.yml and .travis.yml configurations for automated deployments with electron-builder*
Ability to produce web output for browsers
Handy NPM scripts
Use of webpack and vue-loader…

View on GitHub

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.

View on GitHub