Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ventralnet/v-hide
Vue directive allowing you to hide an element on expression (visibility:hidden)
https://github.com/ventralnet/v-hide
Last synced: 25 days ago
JSON representation
Vue directive allowing you to hide an element on expression (visibility:hidden)
- Host: GitHub
- URL: https://github.com/ventralnet/v-hide
- Owner: ventralnet
- Created: 2023-05-18T01:20:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-06-30T23:20:26.000Z (over 1 year ago)
- Last Synced: 2024-10-01T17:08:41.063Z (about 1 month ago)
- Language: Vue
- Size: 722 KB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-3 - v-hide directive - v-hide directive to accompany v-if and v-show, but keep hidden space in layout (Packages)
README
# v-hide
## Overview
v-hide is a Vue.js 2 and 3 directive that allows for conditional rendering maintaining rendered layout space in the DOM.
Simply put... v-hide will add `visibility: hidden;` or `visibility: visible` styles based on a boolean vue expressionLive Demo [V-Hide Demo](https://polite-bonbon-abd119.netlify.app/)
## Purpose
Vue.js provides you with two conditional rendering options; v-if and v-show. v-if will competely remove an item from
the DOM. v-show will set `display: none` style which hides your item and removes it from the rendering of the DOM.The key feature v-hide provides is to allow conditional rendering but also include the items dimensions if it is hidden. More specifically v-hide will set the style `visibility: hidden;` or `visibility: visible`. This may help with some layouts. See the Live Demo [V-Hide Demo](https://polite-bonbon-abd119.netlify.app/) to show the conditional rendering options.
# Important!
For vue2 use the npm ^1.0.0 version
For vue3 use the npm ^3.0.0 version
## Installation
### Vue2
```Bash
npm install @ventralnet/v-hide@^1.0.0 --save
```### Vue3
```Bash
npm install @ventralnet/v-hide@^3.0.0 --save
``````javascript
/*
In vue2 (v-hide v^1.0.0) you don't need to add v-hide as a directive, just import the
dependency
*/
import '@ventralnet/v-hide' // in your main vue entrypont/*
In Vue 3 you need to import the directive definition and add it to your vue app
*/
import vHide from '@ventralnet/v-hide';...
const myApp = createApp({...});
...
myApp.directive('hide', vHide);
...
```## Sample Use
```javascript
Hi!import '@ventralnet/v-hide' // Import vHide in your main entry point after importing Vue
// vHide will automatically add itself as a directive to the global Vue object
export default {
data() {
return {
isHidden: false,
};
}
};```
## Building
```Bash
npm install
npm run test:unit
npm run serve # Serves the sample demo
npm run build # builds the library module to dist/
npm run build-example # builds the example site to dist/example
```