Vue 3 + OpenWeather

Inspired by vue-weather-widget

Install

NPM

npm i vue-openweather-jsl

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-jsl";
  import "vue-openweather-jsl/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-jsl";
  import "vue-openweather-jsl/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>