Vue-OpenWeather

Vue 3 + OpenWeather

Inspired by vue-weather-widget

Getting Started

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 = () => {
    const time = weatherData.value.hourly[0].dt
    const offset = weatherData.value.timezone_offset
    return convertTimeZone(time, offset)
  }
</script>

<template>
  <VueOpenWeather 
    apiKey="your-open-weather-api-key"
    lat="your-latitude"
    long="your-longitude"
    hourly
    @weatherData="updateWeatherData"
  />
</template>

Props

PropsTypeDefault ValueDescription
apiKeystring (required)-Your API key
latstring (required)-Your latitude
longstring (required)-Your longitude
hourlybooleanfalseHourly data for 48 hours
dailybooleanfalseDaily data for 3 days
unitsstringmetricMetric or Imperial units
excludesArray['minutely', 'alerts', 'current']Customize data to be excluded from API call

Events

@weatherData

Returns the JSON data from the OneAPI 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>

@currentWeather

Returns the JSON data from the Current Weather API call 

<script setup lang="ts">
  import { VueCurrentWeather } from "vue-openweather";
  import "vue-openweather/style.css";

  const logWeatherData = (event: any) => console.log(event)
</script>

<template>
  <VueCurrentWeather 
    apiKey="your-open-weather-api-key"
    lat="your-latitude"
    long="your-longitude"
    hourly
    @currentWeather="logWeatherData"
  />
</template>