@nanogiants/vue3-visible
v1.0.8
Published
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`.
Downloads
77
Readme
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.