vue-window-dimensions
v0.1.1
Published
Declaratively use window dimensions in Vuejs
Downloads
4
Maintainers
Readme
Vue window dimensions
Declaratively use window dimensions in Vuejs
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
or 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.
<template>
<VueWindowDimensions>
<template slot-scope="{ dimensions }">
dimensions: {{ dimensions.width }}, {{ dimensions.height }}
</template>
</VueWindowDimensions>
</template>
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. If you wish to work on this project:
- Fork this project
- Create your feature branch (
git checkout -b new-feature-branch
) - Commit your changes (
git commit -am 'add new feature'
) - Push to the branch (
git push origin new-feature-branch
) - Submit a pull request!