Vue Click Outside Component

Vue Click Outside Component

A Vue directive to make a click outside event.

Vue Click Outside

Vue Directive to make a click outside event, inspired by vue-clickaway



Include the vue-click-outside.js to your HTML or web page file after Vue.Js. or import it to your Javscript / Vue File.


  <div v-click-outside="clickedOutside"></div>

  <!-- You Need Delay, if you're using it together with v-if directive -->
  <div v-if="something" v-click-outside:delay="clickedOutside"></div>


  export default {

    methods: {
        alert('Clicked OutSide!')



Thank You for Making this useful~

Hopefully this can be useful for your next projects.

Let's talk about some projects with me

Just Contact Me At:


MIT Copyright (c) 2016 - forever Naufal Rabbani

Github Repository

Tags: #VueJs