vue-responsive-components-mixin
v1.2.1
Published
A Vue mixin for making components responsive to window size changes.
Downloads
7
Maintainers
Readme
Vue Responsive Mixin
Vue Responsive Mixin is a simple, lightweight Vue.js mixin designed to help you easily manage and react to changes in window size within your Vue components. This mixin automatically updates component data with the current window width and height upon initialization and when the browser window is resized, leveraging lodash's debounce function to optimize performance.
Features
- Automatically tracks and updates window width and height.
- Debounced window resize event listener to minimize performance impact.
- Easy to integrate with any Vue.js project.
- Leverages lodash's debounce for efficient event handling.
Installation
To use the Vue Responsive Mixin, you need to ensure Vue
and lodash.debounce
are installed in your project. If they
are not installed, you can add them by running:
npm install vue lodash.debounce --save
Usage
To use this mixin, simply import it into your Vue component or globally register it to make it available across all components in your Vue application.
Importing into a Single Component
import Vue from 'vue';
import responsiveMixin from './path/to/vue-responsive-mixin';
export default {
mixins: [responsiveMixin],
// Your component's options...
};
Global Registration
import Vue from 'vue';
import responsiveMixin from './path/to/vue-responsive-mixin';
Vue.mixin(responsiveMixin);
After importing and registering the mixin, the windowWidth
and windowHeight
data properties will automatically be
available in your Vue component and will update whenever the window is resized.
Example
Here's a simple example of how you might use the windowWidth
and windowHeight
data properties in a component:
<template>
<div>
<p>Window width: {{ windowWidth }}px</p>
<p>Window height: {{ windowHeight }}px</p>
</div>
</template>
<script>
import responsiveMixin from './path/to/vue-responsive-mixin';
export default {
mixins: [responsiveMixin]
};
</script>
Contributing
Contributions to Vue Responsive Mixin are welcome! Feel free to submit issues or pull requests on GitHub.
License
This project is licensed under the MIT License - see the LICENSE file for details.