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 expression

Live 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

```