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>

GitHub

View Github