v-visible

Vue.js directive for setting visibility of an element

• v-visible
  • Installation
    • Via NPM
    • Via Yarn
    • Directly in browser
  • Initialization
    • As a global plugin
    • As a global directive
    • As a local directive
    • As a Nuxt.js SSR directive
    • Directly in a browser
  • Usage
  • Tests
  • Development
  • Build
  • License

Installation

Via NPM

$ npm install v-visible --save

Via Yarn

$ yarn add v-visible

Directly in browser

<script src="https://unpkg.com/v-visible"></script>

Initialization

As a global plugin

It must be called before new Vue()

import Vue from 'vue'
import VVisible from 'v-visible'
 
Vue.use(VVisible)

As a global directive

import Vue from 'vue'
import { directive } from 'v-visible'
 
Vue.directive('visible', directive)

As a local directive

import { directive } from 'v-visible'
 
export default {
  name: 'YourAwesomeComponent',
  directives: {
    visible: directive,
  },
}

As a Nuxt.js SSR directive

// 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

<!-- As a global directive -->
<script>
  Vue.use(VVisible.default)
  new Vue({
    // ...
  })
</script> 
<!-- As a local directive -->
<script>
  new Vue({
    // ...
    directives: { visible: VVisible.directive },
    // ...
  })
</script> 

Usage

<template>
  <div>
    <div v-visible="visible"></div>
  </div>
</template>

import Vue from 'vue'
 
export default Vue.extend({
  // ...
  data() {
    return {
      visible: false,
    }
  },
  // ...
})

Tests

jest and @vue/test-utils are used for unit tests.

You can run unit tests by running the next command:

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