Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-click-outside with all npm packages installed. Try it out:

var vueClickOutside = require("vue-click-outside")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-click-outside v1.1.0

ClickOutside directive for Vue


Vue click outside directive.


$ npm install vue-click-outside


    <div v-click-outside="hide" @click="toggle">Toggle</div>
    <div v-show="opened">Popup item</div>

import ClickOutside from 'vue-click-outside'

export default {
  data () {
    return {
      opened: false

  methods: {
    toggle () {
      this.opened = true

    hide () {
      this.opened = false

  mounted () {
    // prevent click outside event with popupItem.
    this.popupItem = this.$el

  // do not forget this section
  directives: {

Badges  ·  GitHub @fundon  ·  Twitter @_fundon


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free