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

| Props | Type | Default | Description | | ----------------- | ------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | --- | | api-key | String (required) | - | Your OpenWeatherMap or Dark Sky API key | | use-dark-sky-api | Boolean | false | Use DarkSky API instead of OpenWeatherMap | | latitude | String | current | The latitude of a location (By default, it will use IP to find location) | | longitude | String | current | The longitude of a location (By default, it will use IP to find location) | | language | String | "en" | A list of supported languages are given below. | | units | String | "us" | A list of supported units are given below. | | hide-header | Boolean | false | Whether to show or hide the title bar. | | update-interval | Number | null | Interval in milliseconds to update weather data periodically. Set it to 0 or null to disable autoupdate. | | disable-animation | Boolean | false | Use static icons when enabled. | | bar-color | String | "#444" | Color of the Temparature bar. | | text-color | String | "#333" | Color of the text. | | ipregistry-key | String | "f8n4kqe8pv4kii" | Your ipregistry key to get current location from IP address | | | | |

Slots

Name	Description
header	The header component
title	The title inside the header
loading	Component to display while loading
error	Component to display on error

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