JSPM – vue-weather-widget@4.0.3

Package Exports

vue-weather-widget

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-weather-widget) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Weather widget inspired by forecast embeds and powered by 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. https://openweathermap.org/appid

Usage

Vue

<template>
  <vue-weather api-key="<your-open-weather-map-api-key>" units="uk" />
  <vue-weather api-key="<your-dark-sky-api-key>" use-dark-sky-api units="uk" />
</template>

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

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

Browser

<!-- Requirements -->
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"
></script>
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"
></script>

<!-- vue-weather-widget -->
<script type="text/javascript" src="vue-weather-widget.js"></script>
<link href="vue-weather-widget.css" rel="stylesheet" />

<!-- Vue app -->
<div id="app">
  <weather
    api-key="<your-api-key>"
    latitude="24.886436"
    longitude="91.880722"
    language="en"
    units="uk"
  >
  </weather>
</div>

<script>
  new Vue({
    el: "#app",
    components: {
      weather: VueWeatherWidget,
    },
  });
</script>

Props

Props	Type	Default	Description
api-key	String (required)	-	Your OpenWeatherMap or Dark Sky API key
use-dark-sky-api	Boolean	`true`	Use DarkSky API instead of OpenWeatherMap
address	String	current	An address of a location (By default, it will be use user's IP to find current location)
latitude	String	current	The latitude of a location (By default, it will be use user's IP to find current location)
longitude	String	current	The longitude of a location (By default, it will be use user's IP to find current 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. Seting it to `0` or `null` to disables 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.

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

vue-weather-widget