Vue 3 + OpenWeather

vue3 npm npm download per month

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