Package Exports

vue-clickaway
vue-clickaway/index

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-clickaway) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-clickaway

Reusable clickaway directive for reusable Vue.js components

Requirements

vue: ^1.0.0 or ^0.12.9
browserify or webpack

Install

$ npm install vue-clickaway --save
$ npm install vue-clickaway@0.1 --save # for vue ^0.12.9

Usage

Make directive available to your component
Define a method to be called
Use the directive in the template

The recommended way is to use the mixin:

var onClickaway = require('vue-clickaway/mixin');

module.exports = {
  mixins: [onClickaway],
  template: '<p v-on-clickaway="away">Click away</p>',
  methods: {
    away: function() {
      console.log('clicked away');
    },
  },
};

If mixin does not suit your needs, you can use the directive directly:

var onClickaway = require('vue-clickaway/directive');

module.exports = {
  directives: {
    onClickaway: onClickaway,
  },
  template: '<p v-on-clickaway="away">Click away</p>',
  methods: {
    away: function() {
      console.log('clicked away');
    },
  },
};

Caveats

Pay attention to the letter case. onClickaway turns into v-on-clickaway, while onClickAway turns into v-on-click-away.
Before vue 1.0 views were able to inherit assets from the parent views, which made it possible to define the directive on the root view and have it available across the whole view hierarchy. Scince 1.0 this is not possible. If you still want to define the directive application-wide, you should Vue.directive('on-clickaway', onClickaway); in your application entry point. But bear in mind that this introduces implicit dependency for your components, making them less reusable.

License

MIT