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: 2 months 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 (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-17T22:40:56.000Z (over 1 year ago)
- Last Synced: 2025-04-21T19:03:43.405Z (3 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: 2
- 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;
[](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)