vue-window-size

vue-window-size

Reactivity window size 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 deplay option.

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

vueWindowSize.setDelay(1000);