Negating Past Mistakes

    vue-openweather
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.15 • Public • Published

    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/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>
    

    Keywords

    none

    Install

    npm i vue-openweather

    DownloadsWeekly Downloads

    10

    Version

    0.2.15

    License

    none

    Unpacked Size

    81.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • ripwords