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>
import VueWeatherComponent from 'vue-weather-component';

export default {
    components: {
        'weather': VueWeatherComponent
    },

    data() {
        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 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

License

MIT