vue-weather-widget

Vue Weather Widget

Weather widget inspired by forecast embeds and powered by OpenWeatherMap and DarkSky API.

Demo

Browser preview

Install

NPM

npm i vue-weather-widget

YARN

yarn add vue-weather-widget

API Keys

This component works with both the DarkSky API, and the OpenWeatherMap API. Since it is no longer possible to create a DarkSky API key, it is recommended to use OpenWeatherMap.

Generate new API key from https://openweathermap.org/appid

Usage

<template>
  <!-- Open Weather Map -->
  <vue-weather
    api-key="<your-open-weather-map-api-key>"
    units="uk"
    latitude="24.8864"
    longitude="91.8807"
  />

  <!-- Dark Sky API -->
  <vue-weather
    use-dark-sky-api
    api-key="<your-dark-sky-api-key>"
    units="uk"
    latitude="24.8864"
    longitude="91.8807"
  />
</template>

<script>
  import VueWeather from "vue-weather-widget";

  export default {
    components: {
      VueWeather,
    },
  };
</script>

Props

Slots

Supported units

List of supported units:

• auto: automatically select units based on geographic location
• ca: same as si, except that windSpeed and windGust are in kilometers per hour
• uk: same as si, except that nearestStormDistance and visibility are in miles, and windSpeed and windGust are in miles per hour
• us: Imperial units (the default)
• si: SI units

Supported languages

• ar: Arabic
• az: Azerbaijani
• be: Belarusian
• bg: Bulgarian
• bs: Bosnian
• ca: Catalan
• cs: Czech
• de: German
• el: Greek
• en: English (which is the default)
• es: Spanish
• et: Estonian
• fr: French
• hr: Croatian
• hu: Hungarian
• id: Indonesian
• it: Italian
• is: Icelandic
• ka: Georgian
• kw: Cornish
• nb: Norwegian Bokmål
• nl: Dutch
• pl: Polish
• pt: Portuguese
• ru: Russian
• sk: Slovak
• sl: Slovenian
• sr: Serbian
• sv: Swedish
• tet: Tetum
• tr: Turkish
• uk: Ukrainian
• x-pig-latin: Igpay Atinlay
• zh: simplified Chinese
• zh-tw: traditional Chinese