vue-window-size
Provides reactivity window size properties for Vue.js. Supports Vue.js v3.x and v2.7 or higher.
Install
The following command installs vue-window-size v2.
$ yarn add vue-window-size
// or
$ npm i vue-window-size
Note: For use with v2.6, see here.
Usage
Composition API or Plugin or Mixin.
| Composition API | Plugin | Mixin |
---|
has window sizes properties | only in use | all components | only in use |
handle resize event | only in use | all times | all times |
Composition API
Use with component.
<script lang="ts">
import { defineComponent } from 'vue';
import { useWindowSize } from 'vue-window-size';
export default defineComponent({
setup() {
const { width, height } = useWindowSize();
return {
windowWidth: width,
windowHeight: height,
};
},
});
</script>
<template>
<div>
<p>window width: {{ windowWidth }}</p>
<p>window height: {{ windowHeight }}</p>
</div>
</template>
note: useWindowSize handles a Resize Event only when it is in use.
Even if it is called by multiple components, the Resize event is processed only once.
If it is not used, it will not be handled.
Plugin
Install plugin
import { createApp } from 'vue';
import App from "./App.vue";
import { VueWindowSizePlugin } from 'vue-window-size/plugin';
const app = createApp(App);
app.use(VueWindowSizePlugin);
Use with component
<template>
<div>
<p>window width: {{ $windowWidth }}</p>
<p>window height: {{ $windowHeight }}</p>
</div>
</template>
Mixin
Use with component
<script lang="ts">
import { defineComponent } from 'vue';
import { vueWindowSizeMixin } from 'vue-window-size/mixin';
export default defineComponent({
mixins: [vueWindowSizeMixin()],
});
</script>
<template>
<div>
<p>window width: {{ $windowWidth }}</p>
<p>window height: {{ $windowHeight }}</p>
</div>
</template>
Config for Option API
delay
(option)
Change delay time of resize event.
e.g.
import { createApp } from 'vue';
import App from "./App.vue";
import { VueWindowSizePlugin } from 'vue-window-size/plugin';
const app = createApp(App);
app.use(VueWindowSizePlugin, {
delay: 100,
});
Public API for Option API
config(config: VueWindowSizeOptionApiConfig)
Same as config for Option API.
import { vueWindowSizeAPI } from 'vue-window-size/plugin';
vueWindowSizeAPI.config({
delay: 100,
});
init()
Initialize the plugin.
Usually called automatically.
Please call it if you want to use it again after destroy.
import { vueWindowSizeAPI } from 'vue-window-size/plugin';
vueWindowSizeAPI.init();
destroy()
Remove the resize event.
import { vueWindowSizeAPI } from'vue-window-size/plugin';
vueWindowSizeAPI.destroy();
FAQ
Why is there no Config in the Composition API?
useWindowSize
is a singleton and handles the resize event.
Therefore, using useWindowSize(config)
will affect all components in used.
Due to the nature of the Composition API, this is not the desired behavior.
I also think that there are not many use cases that need to be set individually.
If requested, I will create a useAtomicWindowSize(config)
that can be set atomically, so please create an issue.
Or create a factory function for createUseWindowSize(config)
.
When is the removeEventListener called when using plugin and mixin??
vue-window-size adds addEventListener only once, even if it is used in mixin.
So basically you do not need to call removeEventListener.
If you want to call removeEventListener please call destroy method.
Contribution
If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.
License
MIT