Vue.js directive for setting visibility of an element
$ npm install v-visible --save$ yarn add v-visible<script src="https://unpkg.com/v-visible"></script>It must be called before new Vue()
import Vue from 'vue'
import VVisible from 'v-visible'
Vue.use(VVisible)import Vue from 'vue'
import { directive } from 'v-visible'
Vue.directive('visible', directive)import { directive } from 'v-visible'
export default {
name: 'YourAwesomeComponent',
directives: {
visible: directive,
},
}// nuxt.config.js
const { directive } = require('v-visible/dist/v-visible.ssr.common.js')
module.exports = {
// ...
render: {
bundleRenderer: {
directives: {
visible: directive,
},
},
},
// ...
}<!-- As a global directive -->
<script>
Vue.use(VVisible.default)
new Vue({
// ...
})
</script>
<!-- As a local directive -->
<script>
new Vue({
// ...
directives: { visible: VVisible.directive },
// ...
})
</script><template>
<div>
<div v-visible="visible"></div>
</div>
</template>import Vue from 'vue'
export default Vue.extend({
// ...
data() {
return {
visible: false,
}
},
// ...
})jest and @vue/test-utils are used for unit tests.
You can run unit tests by running the next command:
npm run test- Clone this repository
- Install the dependencies running
yarn installornpm installcommand - Start a development server running
npm run devcommand
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