A simple weather widget in Vue3 using OpenWeatherMap,
The weather widget comprises three key elements:
- Current Weather Information: Provides real-time updates on the current weather conditions.
- Forecast Weather Information: Offers a comprehensive forecast for up to 7 days ahead, accessible through a user-friendly date picker.
- Max Temperature Weekly Graph: Presents a graphical representation of the maximum temperatures expected over the course of the week.
Here is a full overview of the widget.
To install and set up the weather widget in your Vue 3 project using Pinia and Vite, follow these steps:
- Clone the repository and navigate to the project's root directory:
git clone <repository_url>
cd weather-app
- Install the project dependencies using npm or yarn:
npm install
or
yarn install
- Run the development server:
npm run dev
- Open your browser and visit the link npm run dev provide to see the weather widget in action.
API Documentation: https://openweathermap.org/api/one-call-api.
This project is licensed under the Apache License, Version 2.0.
For the full terms and conditions, please refer to the LICENSE file.
To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.
For any questions or inquiries, feel free to reach out to me at vtzivaras[at]gmail.com. I'll be happy to assist you!