weather-widget-vue

A Vue custom element widget shows current weather for a website visitors's city and other cities.

Usage

Compile widget, deploy and insert this code into an HTML-page:

<weather-widget />
<script type="text/javascript" src="/path/to/weather-widget.js"></script>

You can also use the widget deployed on GitHub Pages but it uses a free API subscription plan and may suddenly stop working.

<weather-widget />
<script
  type="text/javascript"
  src="https://weather-widget-vue.arapov.net/js/weather-widget.js"
></script>

Vue.js 3 (Options API), Typescript, Webpack
Get current weather via OpenWeather Current Weather Data API
Get extra information such as clouds condition, Beaufort scale wind type, wind direction and dew point
Search and add cities using OpenWeather Geocoding API
Remove and reorder cities
Store cities list in localStorage
Display current user's location weather

Clone the repository

git clone https://github.com/slava-arapov/weather-widget-vue.git
cd weather-widget-vue

Copy your .env file for local development or production
```
 cp .env.example .env.local
```
Edit your .env.local file. Make sure your OpenWeather API key and public path (optional, for icons absolute URLs) added
```
OPEN_WEATHER_API_KEY=
PUBLIC_PATH=https://example.com/
```
Install dependencies
```
npm install
```

npm run serve

npm run build

npm run test:unit

npm run lint