Weather widget inspired by forecast embeds and powered by darksky api.
npm install --save vue-weather-widget
yarn add vue-weather-widget
# install dependencies
npm install
# build dist files
npm run build<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> <!-- 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 | 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. |
List of supported units:
auto: automatically select units based on geographic locationca: same as si, except that windSpeed and windGust are in kilometers per houruk2: same as si, except that nearestStormDistance and visibility are in miles, and windSpeed and windGust are in miles per hourus: Imperial units (the default)si: SI units
ar: Arabicaz: Azerbaijanibe: Belarusianbg: Bulgarianbs: Bosnianca: Catalancs: Czechde: Germanel: Greeken: English (which is the default)es: Spanishet: Estonianfr: Frenchhr: Croatianhu: Hungarianid: Indonesianit: Italianis: Icelandicka: Georgiankw: Cornishnb: Norwegian Bokmålnl: Dutchpl: Polishpt: Portugueseru: Russiansk: Slovaksl: Sloveniansr: Serbian -sv: Swedishtet: Tetumtr: Turkishuk: Ukrainianx-pig-latin: Igpay Atinlayzh: simplified Chinesezh-tw: traditional Chinese
Apache License Version 2.0 © Sudipto Chandra
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent