Intro

Yep. Yet another Vue click-away directive.

Install

npm i v-click-away

Usage

1<MyModal :open="isModalOpen" v-click-away="isModalOpen = false">
2  ...
3</MyModal>

If an element that triggers the modal to open is not a child of the modal, sometimes the modal won't open because clicking the open triggers it to close! In this scenario, use the directive's arg to select a trigger element (by id):

1<button id="button-id">Open Modal</button>
2<MyModal :open="isModalOpen" v-click-away:['button-id']="isModalOpen = false">
3  ...
4</MyModal>