How I built a desktop app with vue in minutes
Tags: vue, electron, openweathermap
Published: 2019-02-21 14:08:03

---
title: How I built a desktop app with vue in minutes
published: true
description: 
tags: vue, vuejs, electron, OpenWeatherMap
cover_image: https://thepracticaldev.s3.amazonaws.com/i/cxqcfqhep1x4l62a8ldb.jpg
---

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 !

![the boiler plate](https://a.storyblok.com/f/50995/1438x845/577e2fb93b/capture-du-2018-12-04-14-45-32.png)

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

```html
      <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>
```

```html
      <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'

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

![my-final app in vue](https://a.storyblok.com/f/50995/1607x1031/2808431aba/capture-du-2018-12-04-15-07-12.png)

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 !