# vue-window-dimensions

> Declaratively use window dimensions in Vuejs

Latest version **0.1.1** (published 2019-05-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-window-dimensions
pnpm add vue-window-dimensions
yarn add vue-window-dimensions
bun add vue-window-dimensions
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2019-05-01 |
| First published | 2019-05-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | William L |
| Maintainers | shwilliam |
| Keywords | vue, window, size, resize, dimensions |

## Links

- npm: https://www.npmjs.com/package/vue-window-dimensions
- Repository: https://github.com/shwilliam/vue-window-dimensions
- Homepage: https://github.com/shwilliam/vue-window-dimensions#readme
- Issues: https://github.com/shwilliam/vue-window-dimensions/issues
- npm.io page: https://npm.io/package/vue-window-dimensions

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2019-05-01
- 0.1.0 — 2019-05-01

## README

# Vue window dimensions

> Declaratively use window dimensions in Vuejs

[![Try it out on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ryl19r628q?fontsize=14)

`vue-window-dimensions` is a Vue component that exposes the width and height of your browser window.

Please note that there are other libraries that try to solve this same problem. These, however, use a different API and often expose the dimensions as a global variable that updates on window resize. If this is more to your liking, check out [`vue-window-size`](https://github.com/mya-ake/vue-window-size) or [`vue-screen-size`](https://github.com/promosis/vue-screen-size).

## Installation

Install the component from npm by running `npm i vue-window-dimensions` or `yarn add vue-window-dimensions`.

## Usage

Import, register and place the component in your Vue app.

```html
<template>
  <VueWindowDimensions>
    <template slot-scope="{ dimensions }">
      dimensions: {{ dimensions.width }}, {{ dimensions.height }}
    </template>
  </VueWindowDimensions>
</template>
```

```js
import VueWindowDimensions from 'vue-window-dimensions'

export default {
  components: {
    VueWindowDimensions,
  },
}
```

## Contributing

This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the [issues](https://github.com/shwilliam/vue-window-dimensions/issues). If you wish to work on this project:

1. Fork [this project](https://github.com/shwilliam/vue-window-dimensions)
2. Create your feature branch (`git checkout -b new-feature-branch`)
3. Commit your changes (`git commit -am 'add new feature'`)
4. Push to the branch (`git push origin new-feature-branch`)
5. [Submit a pull request!](https://github.com/shwilliam/vue-window-dimensions/pull/new/master)

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