Network Printer Manager

    vue-screen-size

    2.0.4 • Public • Published

    vue-screen-size

    Get easy and reactive access to the width and height of your screen.

    NPM Version NPM Downloads License Tweet

    Vue 3 Support

    Vue 3 is supported from v2.0.0 and beyond (current master). To use vue-screen-size with Vue 2, use v1.0.1.

    Links

    Install

    yarn add vue-screen-size

    Or you can include it through the browser at the bottom of your page:

    <script src="https://unpkg.com/vue-screen-size/dist/vue-screen-size.min.js"></script>

    About

    Sometimes when building an app you need to have access to the screen's dimensions. Usually that's going to be done in the css using @media - but sometimes you need to access that info right in your JavaScript.

    The issue with this is you have to worry about adding event listeners and then removing them later. We wanted to just be able to import something quickly and then be able to forget about it later. So this mixin does just that - just use Vue.use() or mixins: [], and you're off.

    There is something to consider - where and how you include this library. There are two ways, make sure to be aware of the differences:

    Usage Example 1 - Whole app has access (Not Recommended)

    In this usage - your whole app - and every child component - has access to the $vssWidth, $vssHeight, and $vssEvent variables. This is sorta pollutive though, as multiple instances of the mixin are initialized and it's kinda wasteful. The is due to the way Vue mixins are passed down to child components. You can read more about this here. The second example is recommended.

    import { VueScreenSizeMixin } from 'vue-screen-size';
    
    app.mixin(VueScreenSizeMixin);
    
    // Access `this.$vssWidth`, `this.$vssHeight`, and `this.$vssEvent` anywhere in your app.

    Usage Example 2 - Just the component you install it on has access - (Recommended)

    In this usage - the component you install it on will have access to the $vssWidth, $vssHeight, and $vssEvent variables. This may be a bit more restrictive, but it's less wasteful and should give you better performance.

    import { VueScreenSizeMixin } from 'vue-screen-size';
    
    export default {
      mixins: [VueScreenSizeMixin],
    };
    
    // Access `this.$vssWidth`, `this.$vssHeight`, and `this.$vssEvent` in your component.

    Variables

    name type description
    $vssWidth Number The width of your screen
    $vssHeight Number The height of your screen
    $vssEvent Object The event object data from the resizing event.

    Methods

    method parameters description
    $vssDestroyListener none Force the removal of the attached event listener

    Development

    # Install dependencies
    yarn
    
    # Serve with hot reload
    yarn dev
    
    # Run the tests
    yarn test
    
    # Build demo page
    yarn build:example
    
    # Build library
    yarn build:library
    
    # Build everything and run tests
    yarn build

    Other

    Go ahead and fork the project! Submit an issue if needed. Have fun!

    License

    MIT

    Install

    npm i vue-screen-size

    DownloadsWeekly Downloads

    1,718

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    79.8 kB

    Total Files

    22

    Last publish

    Collaborators

    • johndatserakis
    • denisew