{"id":16557951,"url":"https://github.com/andrewvasilchuk/v-visible","last_synced_at":"2026-06-05T12:31:05.084Z","repository":{"id":57389881,"uuid":"309073966","full_name":"andrewvasilchuk/v-visible","owner":"andrewvasilchuk","description":"Vue.js directive for setting visibility of an element","archived":false,"fork":false,"pushed_at":"2020-11-19T06:58:29.000Z","size":225,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-17T22:49:35.930Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andrewvasilchuk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["andrewvasilchuk"]}},"created_at":"2020-11-01T10:46:33.000Z","updated_at":"2021-10-31T09:07:21.000Z","dependencies_parsed_at":"2022-09-14T06:31:49.484Z","dependency_job_id":null,"html_url":"https://github.com/andrewvasilchuk/v-visible","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewvasilchuk%2Fv-visible","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewvasilchuk%2Fv-visible/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewvasilchuk%2Fv-visible/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewvasilchuk%2Fv-visible/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrewvasilchuk","download_url":"https://codeload.github.com/andrewvasilchuk/v-visible/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241940529,"owners_count":20045878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T20:09:07.869Z","updated_at":"2026-06-05T12:31:05.078Z","avatar_url":"https://github.com/andrewvasilchuk.png","language":"TypeScript","funding_links":["https://github.com/sponsors/andrewvasilchuk"],"categories":["Components \u0026 Libraries","UI Utilities [🔝](#readme)"],"sub_categories":["UI Utilities"],"readme":"# v-visible\n\n\u003e Vue.js directive for setting visibility of an element\n\n[![BuildStatus](https://img.shields.io/github/workflow/status/andrewvasilchuk/v-visible/Integration)](https://github.com/andrewvasilchuk/v-visible/actions?query=workflow%3AIntegration)\n[![Version](https://img.shields.io/npm/v/v-visible)](https://www.npmjs.com/package/v-visible)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/v-visible)](https://bundlephobia.com/result?p=v-visible)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/0a12c2d8dbd44f028aacddb254df983d)](https://www.codacy.com/gh/andrewvasilchuk/v-visible/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=andrewvasilchuk/v-visible\u0026utm_campaign=Badge_Grade)\n[![Total alerts](https://img.shields.io/lgtm/alerts/g/andrewvasilchuk/v-visible.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/andrewvasilchuk/v-visible/alerts/)\n[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/andrewvasilchuk/v-visible.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/andrewvasilchuk/v-visible/context:javascript)\n[![codecov](https://codecov.io/gh/andrewvasilchuk/v-visible/branch/master/graph/badge.svg)](https://codecov.io/gh/andrewvasilchuk/v-visible)\n[![Downloads](https://img.shields.io/npm/dt/v-visible)](https://www.npmjs.com/package/v-visible)\n[![LastCommit](https://img.shields.io/github/last-commit/andrewvasilchuk/v-visible)](https://github.com/andrewvasilchuk/v-visible/commits/master)\n[![License](https://img.shields.io/npm/l/v-visible)](https://github.com/andrewvasilchuk/v-visible/blob/master/LICENSE)\n\n- [v-visible](#v-visible)\n  - [Installation](#installation)\n    - [Via NPM](#via-npm)\n    - [Via Yarn](#via-yarn)\n    - [Directly in browser](#directly-in-browser)\n  - [Initialization](#initialization)\n    - [As a global plugin](#as-a-global-plugin)\n    - [As a global directive](#as-a-global-directive)\n    - [As a local directive](#as-a-local-directive)\n    - [As a Nuxt.js SSR directive](#as-a-nuxtjs-ssr-directive)\n    - [Directly in a browser](#directly-in-a-browser)\n  - [Usage](#usage)\n  - [Tests](#tests)\n  - [Development](#development)\n  - [Build](#build)\n  - [License](#license)\n\n## Installation\n\n### Via NPM\n\n```bash\n$ npm install v-visible --save\n```\n\n### Via Yarn\n\n```bash\n$ yarn add v-visible\n```\n\n### Directly in browser\n\n```html\n\u003cscript src=\"https://unpkg.com/v-visible\"\u003e\u003c/script\u003e\n```\n\n## Initialization\n\n### As a global plugin\n\nIt must be called before `new Vue()`\n\n```js\nimport Vue from 'vue'\nimport VVisible from 'v-visible'\n\nVue.use(VVisible)\n```\n\n### As a global directive\n\n```js\nimport Vue from 'vue'\nimport { directive } from 'v-visible'\n\nVue.directive('visible', directive)\n```\n\n### As a local directive\n\n```js\nimport { directive } from 'v-visible'\n\nexport default {\n  name: 'YourAwesomeComponent',\n  directives: {\n    visible: directive,\n  },\n}\n```\n\n### As a Nuxt.js SSR directive\n\n```js\n// nuxt.config.js\n\nconst { directive } = require('v-visible/dist/v-visible.ssr.common.js')\n\nmodule.exports = {\n  // ...\n  render: {\n    bundleRenderer: {\n      directives: {\n        visible: directive,\n      },\n    },\n  },\n  // ...\n}\n```\n\n### Directly in a browser\n\n```html\n\u003c!-- As a global directive --\u003e\n\u003cscript\u003e\n  Vue.use(VVisible.default)\n  new Vue({\n    // ...\n  })\n\u003c/script\u003e\n\u003c!-- As a local directive --\u003e\n\u003cscript\u003e\n  new Vue({\n    // ...\n    directives: { visible: VVisible.directive },\n    // ...\n  })\n\u003c/script\u003e\n```\n\n## Usage\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv v-visible=\"visible\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n```js\nimport Vue from 'vue'\n\nexport default Vue.extend({\n  // ...\n  data() {\n    return {\n      visible: false,\n    }\n  },\n  // ...\n})\n```\n\n## Tests\n\n[`jest`](https://jestjs.io) and [`@vue/test-utils`](https://vue-test-utils.vuejs.org) are used for unit tests.\n\nYou can run unit tests by running the next command:\n\n```bash\nnpm run test\n```\n\n## Development\n\n1. Clone this repository\n2. Install the dependencies running `yarn install` or `npm install` command\n3. Start a development server running `npm run dev` command\n\n## Build\n\nTo build a production ready bundle simply run `npm run build` or `make build` command:\n\nAfter a successful build the following files will be generated in the `dist` folder:\n\n```\n├── directive.d.ts\n├── index.d.ts\n├── plugin.d.ts\n├── v-visible.common.js\n├── v-visible.esm.js\n├── v-visible.js\n├── v-visible.min.js\n├── v-visible.ssr.common.js\n├── v-visible.ssr.esm.js\n├── v-visible.ssr.js\n├── v-visible.ssr.min.js\n```\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewvasilchuk%2Fv-visible","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewvasilchuk%2Fv-visible","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewvasilchuk%2Fv-visible/lists"}