Vue 3 - Weather Widget
Weather Widget is a Vue 3.0 project that displays the current weather conditions providing coordinates.
Features:
-
Beautiful Animation
-
Animated Icons on Current weather condition
-
Rain effect if current weather is rain
-
Current weather status at top:
- City with Country name
- Temperature
- Humidity
- UVI
- Wind direction (in text: for example NE, SW, E, etc) and wind
- Speed in kmh
-
Weather Forecast below:
The bottom part is the forecast for today and the next 5 days, For every single day we show:
- Week name
- Weather icon
- Max temp
- Min temp
more features are coming soon
NOTE: Animated icons may not work as object
element which loaded animated SVGs is replaced by img
tag due to cloudinary svg security
How to use widget in your app
A simple, easy-to-use weather widget for Vue3 applications, showing a week's worth of weather data using the OpenWeatherMap API.
Installation
Install the package using npm:
npm install vue3-open-weather-widget
Usage
Import component and its styles from vue3-open-weather-widget
inside your vue3 component:
<script lang="ts">
import { WeatherWidget} from 'vue3-open-weather-widget'
import "vue3-open-weather-widget/style.css"
</script>
<template>
<WeatherWidget :openWeatherApiKey="'<YOUR-OPEN-WEATHER-API-KEY>'"/>
</template>
Pass your OpenWeatherMap API key as a prop:
:openWeatherApiKey="<YOUR-OPEN-WEATHER-API-KEY>"
Replace yourOpenWeatherApiKey with your actual OpenWeatherMap API key.
The weather widget should now be displayed in your application, showing the current weather data for the upcoming week.
You can visit stackblitz demo app HERE to see the usage
Configuration
The WeatherWidget component accepts the following props:
openWeatherApiKey
(required): Your OpenWeatherMap API key to fetch weather data.
Demo in Motion: 😉
💡NOTE :
This Weather Widget is only a demonstration of my work (working with VUE 3) & is not production ready.
Development On Widget
Understanding:
├───src
│ ├───assets
│ │ ├───styles
│ │ │ └───css
│ │ │ └───(vendor or 3rd party) *.css
│ │ └───weather-widget-icons
│ ├───components
│ │ └─── components *.vue
│ ├───modals
│ │ └─── modals *.ts
│ ├───scss
│ │ └─── scss_files *.scss
│ ├───utils
│ │ └─── utilities *.ts
│ ├───views
│ │ └─── views *.vue
│───tests
└───unit
├───components
│ └─── *.spec.ts
├───utils
│ └─── *.spec.ts
└───views
└─── *.spec.ts
Guide:
Project setup:
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Run your unit tests
npm run test:unit
Lints and fixes files
npm run lint
Customize configuration
See Configuration Reference.
License
MIT