Vue Weather Component
Vue weather component based on darksky widgets and api.
Project setup
npm install
Usage
VueJS single file component
<template> <weather title="Weather" units="ca" :currentDay="currentDay" :forecast="forecast"> </weather></template> <script>; components: 'weather': VueWeatherComponent { return currentDay: icon: 'fog' temp: '17' currentSummary: 'Fog.' hourlySummary: 'Partly cloudy throughout the day.' windSpeed: 6 forecast: name: 'Today' icon: 'clear-day' highTemp: '37' lowTemp: '32' name: 'Wed' icon: 'fog' highTemp: '34' lowTemp: '29' name: 'Thu' icon: 'cloudy' highTemp: '35' lowTemp: '30' name: 'Fri' icon: 'rain' highTemp: '32' lowTemp: '24' name: 'Sat' icon: 'snow' highTemp: '-7' lowTemp: '-18' name: 'Sun' icon: 'wind' highTemp: '23' lowTemp: '18' name: 'Mon' icon: 'sleet' highTemp: '-1' lowTemp: '-6' name: 'Tue' icon: 'clear-day' highTemp: '13' lowTemp: '7' }</script>
Props
Props | Type | Default | Description |
---|---|---|---|
units | String | "us" |
A list of supported units are given below. |
title | String | "Weather" |
Title of the widget. |
enable-credits | Boolean | true |
Whether or not show dark sky credits |
current-day | Object | { icon:'clear-night', temp:'23', currentSummary:'Clear.', hourlySummary:'Partly cloudy throughout the night.', windSpeed:5} | Default values for current day in component |
forecast | Array | [{name: 'Mon', icon: 'clear-day', highTemp: '13', lowTemp: '7'}, ...] | Array of objects representing each day of the forecast |
Weather icons
List of weather icons: clear-day, clear-night, cloudy, fog, partly-cloudy-day, partly-cloudy-night, rain, sleet, snow, wind.
Supported units
List of supported units:
ca
: 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
License
MIT