# vue-openweather

> A VueJS weather component using the OpenWeatherMap API

Latest version **0.2.15** (published 2022-05-07) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-openweather
pnpm add vue-openweather
yarn add vue-openweather
bun add vue-openweather
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.2.15 |
| Published | 2022-05-07 |
| First published | 2022-04-08 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 79.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ripwords |
| Maintainers | ripwords |

## Links

- npm: https://www.npmjs.com/package/vue-openweather
- Repository: https://github.com/Ripwords/vue-openweather
- npm.io page: https://npm.io/package/vue-openweather

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.25

## Recent versions

- 0.2.15 (latest) — 2022-05-07
- 0.2.14 — 2022-05-06
- 0.2.13 — 2022-05-06
- 0.2.12 — 2022-05-03
- 0.2.11 — 2022-04-24
- 0.2.10 — 2022-04-24
- 0.2.9 — 2022-04-10
- 0.2.8 — 2022-04-10
- 0.2.7 — 2022-04-10
- 0.2.6 — 2022-04-09
- 0.2.5 — 2022-04-09
- 0.2.4 — 2022-04-09
- 0.2.3 — 2022-04-08
- 0.2.2 — 2022-04-08
- 0.2.1 — 2022-04-08
- … 12 more at https://npm.io/package/vue-openweather/versions

## README

# Vue 3 + OpenWeather

[![vue3](https://img.shields.io/badge/vuejs-3.x-brightgreen.svg)](https://vuejs.org/)
[![npm](https://img.shields.io/npm/v/vue-openweather)](http://npmjs.com/package/vue-openweather)
[![npm download per month](https://img.shields.io/npm/dm/vue-openweather)](http://npmjs.com/package/vue-openweather)

<img src="https://user-images.githubusercontent.com/58784686/162488946-1d0f1ffc-633f-45c4-8fdd-f64b6e46919d.png">

Inspired by [vue-weather-widget](https://github.com/dipu-bd/vue-weather-widget)

## Install

### NPM

```
npm i vue-openweather
```

## OpenWeatherAPI

Get an OpenWeatherAPI key by signing up an account at the OpenWeather website

## Usage
```html
<script setup lang="ts">
  import { ref } from 'vue'
  import { VueOpenWeather, convertTimeZone, utcToDate, utcToTime } from "vue-openweather";
  import "vue-openweather/style.css";

  const weatherData = ref<any>('')
  const updateWeatherData = (event: any) => weatherData.value = event[0]

  // convertTimeZone takes the dt value returned from the OpenWeather API, and the timezone offset
  // to convert the correct time based on the coordinates regardless of the computer's actual timezone
  const getAdjustedTime = () => {
    return convertTimeZone(weatherData.value.hourly[0].dt, weatherData.value.timezone_offset)
  }
</script>

<template>
  <VueOpenWeather 
    apiKey="your-open-weather-api-key"
    lat="your-latitude"
    long="your-longitude"
    hourly
    @weatherData="updateWeatherData"
  />
</template>


```

## Props

| Props       | Type               | Default Value                     | Description                                                  |
|-------------|--------------------|-----------------------------------|--------------------------------------------------------------|
| apiKey      | string (required)  | -                                 | Your API key                                                 |
| lat         | string (required)  | -                                 | Your latitude                                                |
| long        | string (required)  | -                                 | Your longitude                                               |
| hourly      | boolean            | false                             | Hourly data for 48 hours                                     |
| daily       | boolean            | false                              | Daily data for 3 days                                       |
| units       | string             | metric                            | Metric or Imperial units                                     |
| excludes    | Array<string>      | ['minutely', 'alerts', 'current'] | Customize data to be excluded from API call                  |

## Events
### @weatherData returns the JSON data from the API call

```html
<script setup lang="ts">
  import VueOpenWeather from "vue-openweather";
  import "vue-openweather/style.css";

  const logWeatherData = (event: any) => console.log(event)
</script>

<template>
  <VueOpenWeather 
    apiKey="your-open-weather-api-key"
    lat="your-latitude"
    long="your-longitude"
    hourly
    @weatherData="logWeatherData"
  />
</template>


```

---
_Source: https://npm.io/package/vue-openweather · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._