0.2.15 • Published 2 years ago
vue-openweather v0.2.15
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/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/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>
0.2.15
2 years ago
0.2.14
2 years ago
0.2.13
2 years ago
0.2.12
2 years ago
0.2.11
2 years ago
0.2.10
2 years ago
0.2.9
2 years ago
0.2.8
2 years ago
0.2.7
2 years ago
0.2.6
2 years ago
0.2.5
2 years ago
0.2.4
2 years ago
0.2.3
2 years ago
0.2.2
2 years ago
0.2.1
2 years ago
0.2.0
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago