Open Weather Map Using Vue.js

You’re going to build a minimalistic weather web application (one page with login screen) that displays the current temperature based on user location, and display the daily weather forecast

App feature

1- input that the user can type city, and fetch weather by city name

2- Display forecast for today along with an appropriate icon. (eg. 33∘ )

3- Display current date and time. (eg. August, 31st 5:00 PM)

4- Display a clock that shows the current time.

5- Users can add their favorite cities by pressing “Add more location”, a popup/modal will appear that asks the user for the city name, latitude and longitude.

6- Ability to convert temperature from celsius to fahrenheit by clicking on the switcher on the top right corner (C/F) of the Weather home screen.

7- Display user’s country name based on his location. (eg. Egypt).

Things you will need

1. 3rd party API to fetch weather data.

Current weather data

2- Git hub repository

engislam95 - Overview

Live Demo

https://weather-map-v.netlify.app/

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Conclusion

In this article, we have learned how to integrate weather map with lot of feature using vue js .