Vue-window-size NPM

vue-window-size

Provides reactivity window size properties for Vue.js.

Install

$ yarn add vue-window-size

Usage

Plugin or Mixin.

Plugin all components have window sizes.

Components with mixin have window sizes. Other components don't have window sizes.

Plugin

Install plugin

import Vue from 'vue';
import VueWindowSize from 'vue-window-size';

Vue.use(VueWindowSize);

Use with component

<template>
  <div>
    <p>window width: {{ windowWidth }}</p>
    <p>window height: {{ windowHeight }}</p>
  </div>
</template>

Mixin

Use with component

<template>
  <div>
    <p>window width: {{ windowWidth }}</p>
    <p>window height: {{ windowHeight }}</p>
  </div>
</template>

<script>
import { vueWindowSizeMixin } from 'vue-window-size';

export default {
  mixins: [vueWindowSizeMixin],
};
</script>

Options

`delay` (option)

type: Number
default: 50

Change delay time of resize event.

e.g.

import Vue from 'vue';
import VueWindowSize from 'vue-window-size';

Vue.use(VueWindowSize, {
  delay: 100,
});

Public API

`setDelay(delay: number)`

Same as delay option.

import { vueWindowSize } from 'vue-window-size';

vueWindowSize.setDelay(1000);

`init()`

Initialize the plugin. Usually called automatically. Please call it if you want to use it again after destroy.

import { vueWindowSize } from 'vue-window-size';

vueWindowSize.init();

`destroy()`

Remove the resize event.

import { vueWindowSize } from 'vue-window-size';

vueWindowSize.destroy();

FAQ

When is removeEventListener called?

This library add 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.