Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/PxyUp/vue-not-visible

Vue directive for conditional rendering element on screen smaller than breakpoints
https://github.com/PxyUp/vue-not-visible

directives vue vue-directive vuejs

Last synced: about 1 month ago
JSON representation

Vue directive for conditional rendering element on screen smaller than breakpoints

Lists

README 

        
# vue-not-visible



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



[![NPM](https://nodei.co/npm/vue-not-visible.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-not-visible/)



📺 [Demo](https://pxyup.github.io/vue-not-visible/index.html)



## Install



```bash

$ npm install --save vue-not-visible

```



```bash

$ yarn add vue-not-visible

```



## Use default



```js

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



```



```html



  


        {{ message }} {{ count }}

        
 

            
Not visible on table(screen < 768)


        


        


            
Not visible on mobile(screen < 425)


        


    



```



## Use custom breakpoints



```js

import Vue from 'vue'

import vueNotVisible from 'vue-not-visible'



Vue.use(vueNotVisible, {ipad: 1280}) // this is custom



```



```html



  


        {{ message }} {{ count }}

        
 

            
Not visible on ipad(screen < 1280)


        


    



```



## License

[MIT License](https://github.com/PxyUp/vue-not-visible/blob/master/LICENSE)