JSPM

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 install --save vue-weather-widget

YARN

yarn add vue-weather-widget

Development

# install dependencies
npm install

# build dist files
npm run build

Usage

VueJS single file (ECMAScript 2015)

<template>
    <weather 
        api-key="<your-dark-sky-api-key>"
        title="Weather"
        latitude="24.886436"
        longitude="91.880722"
        language="en"
        units="uk">
    </weather>
</template>

<script>
import VueWeatherWidget from 'vue-weather-widget';
import 'vue-weather-widget/dist/css/vue-weather-widget.css';

export default {
    components: {
        'weather': VueWeatherWidget
    },
}
</script>

Browser (ES5)

<!-- 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-dark-sky-api-key>"
        title="Weather"
        latitude="24.886436"
        longitude="91.880722"
        language="en"
        units="uk">
    </weather>
</div>

<script>
window.vm = new Vue({
    el: '#app',
    components: {
        'weather': VueWeatherWidget
    }
});
</script>

Props

Props	Type	Default	Description
api-key	String, required	-	Your Dark Sky secret key
latitude	String, required	-	The latitude of a location (in decimal degrees). Positive is north, negative is south.
longitude	String, required	-	Return summary properties in the desired language. See below for a list of supported languages.
units	String	`"us"`	A list of supported units are given below.
bar-color	String	`"#333"`	Color of the Temparature bar.
text-color	String	`"#333"`	Color of the text.
title	String	`"Weather"`	Title of the widget.
hide-header	Boolean	`false`	Controls whether to show or hide the title bar.
disable-animation	Boolean	`false`	Use static icons when enabled.
update-interval	Number	`null`	Interval in seconds to update weather data automatically. Set it to `0` or `null` to disable auto update.

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
uk2: 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