Nebulous Puffy Marshmallows

    vue-not-visible

    1.0.9 • Public • Published

    vue-not-visible

    Vue directive for conditional rendering (like v-if) element on screen smaller than breakpoints;

    NPM

    📺 Demo

    Install

    $ npm install --save vue-not-visible
    $ yarn add vue-not-visible

    Use default

    import Vue from 'vue'
    import vueNotVisible from 'vue-not-visible'
     
    /* const BREAKPOINTS = {
        mobile: 425,
        tablet: 768,
        tablet_landscape: 1024,
        desktop: 1200,
        desktop_large: 1440,
        hd: 1920,
    }
    */
    Vue.use(vueNotVisible) // this is default
     
    <template>
      <div id="test">
            {{ message }} {{ count }}
            <div v-not-visible="'tablet'"> 
                <div v-on:click="count = count + 1">Not visible on table(screen < 768)</div>
            </div>
            <div v-not-visible="'mobile'">
                <div v-on:click="count = count + 1">Not visible on mobile(screen < 425)</div>
            </div>
        </div>
    </template>

    Use custom breakpoints

    import Vue from 'vue'
    import vueNotVisible from 'vue-not-visible'
     
    Vue.use(vueNotVisible, {ipad: 1280}) // this is custom
     
    <template>
      <div id="test">
            {{ message }} {{ count }}
            <div v-not-visible="'ipad'"> 
                <div v-on:click="count = count + 1">Not visible on ipad(screen < 1280)</div>
            </div>
        </div>
    </template>

    License

    MIT License

    Install

    npm i vue-not-visible

    DownloadsWeekly Downloads

    34

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    207 kB

    Total Files

    10

    Last publish

    Collaborators

    • pxyup