[Nuxt] click outside element

@click=""으로 클릭했을 때의 함수 실행이 가능하지만,

해당 element 외부를 클릭했을 때, 실행이 가능한 함수가 필요해서 찾아보았다.

 

vue-click-outside 라는 라이브러리가 있었고 사용법은 간단하다.

https://www.npmjs.com/package/vue-click-outside

vue-click-outside

 

아래의 명령어로 라이브러리를 설치하고,

yarn add vue-click-outside

 

공통으로 사용하는 .js파일에 선언해주었다.

import Vue from 'vue'
import vco from 'v-click-outside'

Vue.use(vco)

 

사용은 이런 방법으로 하면 간단하게 구현 가능하다.

<div v-click-outside="closeBirthOptions">
	외부 클릭시 작동
</div>