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 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-17T22:40:56.000Z (almost 2 years ago)
- Last Synced: 2025-10-20T23:31:33.601Z (about 1 month ago)
- Topics: directives, vue, vue-directive, vuejs
- Language: JavaScript
- Homepage: https://pxyup.github.io/vue-not-visible/index.html
- Size: 66.4 KB
- Stars: 22
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-vue - vue-not-visible - Vue directive for conditional rendering element on screen smaller than breakpoints ` 📝 3 years ago` (UI Utilities [🔝](#readme))
- awesome-vue-zh - Vue - 不可见 - 用于从小于断点的屏幕上移除dom (如v-if) 元素的Vue指令. (UI实用程序 / 调整)
- awesome-vue - vue-not-visible ★16 - Vue directive for removing from dom (like v-if) element on screen smaller than breakpoints. (UI Utilities / Resize)
- awesome-vue - vue-not-visible - Vue directive for removing from dom (like v-if) element on screen smaller than breakpoints. (UI Utilities / Resize)
- awesome-vue - vue-not-visible - Vue directive for removing from dom (like v-if) element on screen smaller than breakpoints. (Components & Libraries / UI Utilities)
- fucking-awesome-vue - vue-not-visible - Vue directive for removing from dom (like v-if) element on screen smaller than breakpoints. (Components & Libraries / UI Utilities)
- awesome-vue - vue-not-visible - Vue directive for removing from dom (like v-if) element on screen smaller than breakpoints. (Components & Libraries / UI Utilities)
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)