Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-window-size

Package Overview
Dependencies
Maintainers
1
Versions
59
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-window-size

Reactivity window size for Vue.js.

  • 2.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

vue-window-size

npm version License: MIT CI

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 APIPluginMixin
has window sizes propertiesonly in useall componentsonly in use
handle resize eventonly in useall timesall 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";  // your App component
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)

  • type: Number
  • default: 33
    • About 30 FPS

Change delay time of resize event.

e.g.

import { createApp } from 'vue';
import App from "./App.vue";  // your App component
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'; // or 'vue-window-size/mixin'

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'; // or 'vue-window-size/mixin'

vueWindowSizeAPI.init();

destroy()

Remove the resize event.

import { vueWindowSizeAPI } from'vue-window-size/plugin'; // or 'vue-window-size/mixin'

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

Keywords

FAQs

Package last updated on 17 Jan 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc