https://github.com/andrewvasilchuk/v-visible
Vue.js directive for setting visibility of an element
https://github.com/andrewvasilchuk/v-visible
Last synced: 9 months ago
JSON representation
Vue.js directive for setting visibility of an element
- Host: GitHub
- URL: https://github.com/andrewvasilchuk/v-visible
- Owner: andrewvasilchuk
- License: mit
- Created: 2020-11-01T10:46:33.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-19T06:58:29.000Z (about 5 years ago)
- Last Synced: 2025-02-17T22:49:35.930Z (10 months ago)
- Language: TypeScript
- Size: 220 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-vue - v-visible - Vue.js directive for setting visibility of an element ` 📝 7 months ago` (UI Utilities [🔝](#readme))
- awesome-vue - v-visible - Vue.js directive for setting visibility of an element. (Components & Libraries / UI Utilities)
README
# v-visible
> Vue.js directive for setting visibility of an element
[](https://github.com/andrewvasilchuk/v-visible/actions?query=workflow%3AIntegration)
[](https://www.npmjs.com/package/v-visible)
[](https://bundlephobia.com/result?p=v-visible)
[](https://www.codacy.com/gh/andrewvasilchuk/v-visible/dashboard?utm_source=github.com&utm_medium=referral&utm_content=andrewvasilchuk/v-visible&utm_campaign=Badge_Grade)
[](https://lgtm.com/projects/g/andrewvasilchuk/v-visible/alerts/)
[](https://lgtm.com/projects/g/andrewvasilchuk/v-visible/context:javascript)
[](https://codecov.io/gh/andrewvasilchuk/v-visible)
[](https://www.npmjs.com/package/v-visible)
[](https://github.com/andrewvasilchuk/v-visible/commits/master)
[](https://github.com/andrewvasilchuk/v-visible/blob/master/LICENSE)
- [v-visible](#v-visible)
- [Installation](#installation)
- [Via NPM](#via-npm)
- [Via Yarn](#via-yarn)
- [Directly in browser](#directly-in-browser)
- [Initialization](#initialization)
- [As a global plugin](#as-a-global-plugin)
- [As a global directive](#as-a-global-directive)
- [As a local directive](#as-a-local-directive)
- [As a Nuxt.js SSR directive](#as-a-nuxtjs-ssr-directive)
- [Directly in a browser](#directly-in-a-browser)
- [Usage](#usage)
- [Tests](#tests)
- [Development](#development)
- [Build](#build)
- [License](#license)
## Installation
### Via NPM
```bash
$ npm install v-visible --save
```
### Via Yarn
```bash
$ yarn add v-visible
```
### Directly in browser
```html
```
## Initialization
### As a global plugin
It must be called before `new Vue()`
```js
import Vue from 'vue'
import VVisible from 'v-visible'
Vue.use(VVisible)
```
### As a global directive
```js
import Vue from 'vue'
import { directive } from 'v-visible'
Vue.directive('visible', directive)
```
### As a local directive
```js
import { directive } from 'v-visible'
export default {
name: 'YourAwesomeComponent',
directives: {
visible: directive,
},
}
```
### As a Nuxt.js SSR directive
```js
// nuxt.config.js
const { directive } = require('v-visible/dist/v-visible.ssr.common.js')
module.exports = {
// ...
render: {
bundleRenderer: {
directives: {
visible: directive,
},
},
},
// ...
}
```
### Directly in a browser
```html
Vue.use(VVisible.default)
new Vue({
// ...
})
new Vue({
// ...
directives: { visible: VVisible.directive },
// ...
})
```
## Usage
```html
```
```js
import Vue from 'vue'
export default Vue.extend({
// ...
data() {
return {
visible: false,
}
},
// ...
})
```
## Tests
[`jest`](https://jestjs.io) and [`@vue/test-utils`](https://vue-test-utils.vuejs.org) are used for unit tests.
You can run unit tests by running the next command:
```bash
npm run test
```
## Development
1. Clone this repository
2. Install the dependencies running `yarn install` or `npm install` command
3. Start a development server running `npm run dev` command
## Build
To build a production ready bundle simply run `npm run build` or `make build` command:
After a successful build the following files will be generated in the `dist` folder:
```
├── directive.d.ts
├── index.d.ts
├── plugin.d.ts
├── v-visible.common.js
├── v-visible.esm.js
├── v-visible.js
├── v-visible.min.js
├── v-visible.ssr.common.js
├── v-visible.ssr.esm.js
├── v-visible.ssr.js
├── v-visible.ssr.min.js
```
## License
[MIT](http://opensource.org/licenses/MIT)