vue-openweather

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>