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: 8 days ago
JSON representation

Vue directive for conditional rendering element on screen smaller than breakpoints

• Host: GitHub
• URL: https://github.com/pxyup/vue-not-visible
• Owner: PxyUp
• License: mit
• Created: 2018-08-07T19:37:54.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-01-17T22:40:56.000Z (10 months ago)
• Last Synced: 2024-10-03T16:49:53.273Z (about 2 months ago)
• Topics: directives, vue, vue-directive, vuejs
• Language: JavaScript
• Homepage: https://pxyup.github.io/vue-not-visible/index.html
• Size: 66.4 KB
• Stars: 23
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

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)