An OpenWeather Widget Built using Vue 3
Vue 3 + OpenWeather
Inspired by vue-weather-widget
Install
NPM
npm i vue-openweather
OpenWeatherAPI
Get an OpenWeatherAPI key by signing up an account at the OpenWeather website
Usage
<script setup lang="ts">
import { ref } from 'vue'
import { VueOpenWeather, convertTimeZone, utcToDate, utcToTime } from "vue-openweather";
import "vue-openweather/dist/style.css";
const weatherData = ref<any>('')
const updateWeatherData = (event: any) => weatherData.value = event[0]
// convertTimeZone takes the dt value returned from the OpenWeather API, and the timezone offset
// to convert the correct time based on the coordinates regardless of the computer's actual timezone
const getAdjustedTime = () => {
return convertTimeZone(weatherData.value.hourly[0].dt, weatherData.value.timezone_offset)
}
</script>
<template>
<VueOpenWeather
apiKey="your-open-weather-api-key"
lat="your-latitude"
long="your-longitude"
hourly
@weatherData="updateWeatherData"
/>
</template>
Props
| Props | Type | Default Value | Description |
|---|---|---|---|
| apiKey | string (required) | – | Your API key |
| lat | string (required) | – | Your latitude |
| long | string (required) | – | Your longitude |
| hourly | boolean | false | Hourly data for 48 hours |
| daily | boolean | false | Daily data for 3 days |
| units | string | metric | Metric or Imperial units |
| excludes | Array | [‘minutely’, ‘alerts’, ‘current’] | Customize data to be excluded from API call |
Events
@weatherData returns the JSON data from the API call
<script setup lang="ts">
import VueOpenWeather from "vue-openweather";
import "vue-openweather/dist/style.css";
const logWeatherData = (event: any) => console.log(event)
</script>
<template>
<VueOpenWeather
apiKey="your-open-weather-api-key"
lat="your-latitude"
long="your-longitude"
hourly
@weatherData="logWeatherData"
/>
</template>