Socket
Socket
Sign inDemoInstall

vue3-resize

Package Overview
Dependencies
1
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-resize

Detect DOM element resizing


Version published
Weekly downloads
4.6K
increased by6.23%
Maintainers
1
Install size
44.6 kB
Created
Weekly downloads
 

Readme

Source

vue3-resize

npm npm vue3

Detect DOM element resizing

Demo - JSFiddle

Become a Patreon

Sponsors

sponsors logos


Installation

npm install --save vue3-resize

Module import

⚠️ You need to include the package CSS:

import 'vue3-resize/dist/vue3-resize.css'

Then import the package and install it into Vue:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3Resize from 'vue3-resize'

createApp(App)
  .use(Vue3Resize)
  .mount('#app')

Or:

import { createApp } from 'vue'
import App from './App.vue'
import { ResizeObserver } from 'vue3-resize'

const app = createApp(App)

app.component('resize-observer', ResizeObserver)
// or
app.component(ResizeObserver.name, ResizeObserver)


app.mount('#app')

Browser

<link rel="stylesheet" href="vue3-resize/dist/vue3-resize.css"/>

<script src="vue.js"></script>
<script src="vue3-resize/dist/vue3-resize.min.js"></script>

The plugin should be auto-installed. If not, you can install it manually:

app.use(Vue3Resize)

Or:

Vue.component('resize-observer', Vue3Resize.ResizeObserver)

Usage

Add the <resize-observer> inside a DOM element and make its position to something other than 'static' (for example 'relative'), so that the observer can fill it.

Listen to the notify event that is fired when the above DOM element is resized.

Example

<template>
  <div class="demo">
    <h1>Hello world!</h1>
    <resize-observer @notify="handleResize" :showTrigger="true" />
  </div>
</template>

<script>
export default {
  setup() {
    return {
      handleResize ({ width, height }) {
        console.log('resized', width, height)
      }
    }
  }
}
</script>

License

MIT

Keywords

FAQs

Last updated on 01 Dec 2020

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

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc