Skip to content
This repository has been archived by the owner on Jun 8, 2022. It is now read-only.
/ directivue Public archive

Lightweight and Optimized Vue Directives for your Vue 2 projects

License

Notifications You must be signed in to change notification settings

kevinmarrec/directivue

Repository files navigation

directivue

Lightweight and Optimized Vue Directives for your Vue projects

Available Directives

  • AutoFocus : Auto focus an element when inserted in the DOM (Safari support)
  • ClickOutside : Trigger a given function when clicking outside element
  • Ripple : Trigger a ripple effect when clicking/touching element (Mobile support)

Live Demo : https://directivue.netlify.app

Installation

yarn add directivue
# OR
npm install directivue

Usage

import Vue from 'vue'
import { ClickOutside, Ripple, /* ... */ } from 'directivue'

Vue.directive('clickOutside', ClickOutside)
Vue.directive('ripple', Ripple)
// ...

Directives are then accessible in your Vue templates as v-click-outside, v-ripple and so on.

Nuxt.js

directivue needs to be transpiled by Nuxt.js to get benefits of tree-shaking (only the directives you choose will be in your final bundle) :

// nuxt.config.js
export default {
  build: {
    transpile: ['directivue']
  }
}