Nicely Pointed Mandibles

    vue-resize

    1.0.1 • Public • Published

    vue-resize

    npm npm vue2

    Detect DOM element resizing

    JSFiddle

    Become a Patreon

    Sponsors

    sponsors logos


    Installation

    npm install --save vue-resize
    

    Module import

    ⚠️ You need to include the package CSS:

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

    Then import the package and install it into Vue:

    import Vue from 'vue'
    import VueResize from 'vue-resize'
    
    Vue.use(VueResize)

    Or:

    import Vue from 'vue'
    import { ResizeObserver } from 'vue-resize'
    
    Vue.component('resize-observer', ResizeObserver)

    Browser

    <link rel="stylesheet" href="vue-resize/dist/vue-resize.css"/>
    
    <script src="vue.js"></script>
    <script src="vue-resize/dist/vue-resize.min.js"></script>

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

    Vue.use(VueResize)

    Or:

    Vue.component('resize-observer', VueResize.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" />
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleResize ({ width, height }) {
          console.log('resized', width, height)
        }
      }
    }
    </script>
    
    <style scoped>
    .demo {
      position: relative;
    }
    </style>

    License

    MIT

    Install

    npm i vue-resize

    DownloadsWeekly Downloads

    321,133

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    47.6 kB

    Total Files

    20

    Last publish

    Collaborators

    • akryum