nanogiants

@nanogiants/vue3 visible

This package contains a Vue 3 directive which adds v-visible. It differs from `v-if` (not in the DOM) and `v-show` (display: none) by that it sets the elements `visibility` style to `hidden`.

Version Version: 1.0.8 Version Updated: 04/06/2022 By: nanogiants License: MIT

DownloadsLast30Days: 87

https://github.com/nanogiants/vue3-packages

npm i @nanogiants/vue3-visible
yarn add @nanogiants/vue3-visible

vue3-visible

This package contains a Vue 3 directive which adds v-visible.
It differs from v-if (not in the DOM) and v-show (display: none) by that it sets the elements visibility style to hidden.

Installation

npm i @nanogiants/vue3-visible
# or
yarn add @nanogiants/vue3-visible

Usage

// main.ts file
import { vVisible } from '@nanogiants/vue3-visible';
import App from './App.vue';

const app = createApp(App);
app.directive('visible', vVisible);


// component.ts
<template>
  <div>
    <div v-visible="true">Hello World!</div>
    <div v-visible="false">Hello World!</div> // now has style `visibility: hidden`
  </div>
</template>

args

There is only one arg you can pass.
The boolean value if the element is visible.

License

MIT

Dependencies


DevDependencies


Copyright © 2020 vuejscomponent.com