https://github.com/shwilliam/vue-window-dimensions
💻 Declaratively use window dimensions in Vuejs
https://github.com/shwilliam/vue-window-dimensions
component dimensions resize size vue window
Last synced: about 2 months ago
JSON representation
💻 Declaratively use window dimensions in Vuejs
- Host: GitHub
- URL: https://github.com/shwilliam/vue-window-dimensions
- Owner: shwilliam
- License: mit
- Created: 2019-05-01T06:54:56.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T09:15:37.000Z (over 3 years ago)
- Last Synced: 2026-05-15T09:56:52.825Z (about 2 months ago)
- Topics: component, dimensions, resize, size, vue, window
- Language: JavaScript
- Homepage: https://codesandbox.io/s/ryl19r628q
- Size: 500 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue window dimensions
> Declaratively use window dimensions in Vuejs
[](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
dimensions: {{ dimensions.width }}, {{ dimensions.height }}
```
```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)