Vuejs Click Away

A simple directive that triggers a function if the user clicks outside of the bound element.

<template>
  <div v-clickaway="hideMe">Hide me</div>
</template>

<script>
Vue.directive('clickaway', {
  bind (el, { value }) {
    if (typeof value !== 'function') {
      console.warn(`Expect a function, got ${value}`)
      return
    }

    document.addEventListener('click', e => el.contains(e.target) || value())
  }
})

export default {
  methods: {
    hideMe () {
      // your logic here
    }
  }
}
</script>

BBMCode

Vuejs Debounce

Prevent your methods or events from being executed so often using lodash’s debounce() function.

<template>
  <input type="search" v-on:input="filter">
</template>

<script>
import { debounce } from 'lodash'

export default {
  methods: {
    filter: debounce(function () {
      // your logic here
    }, 200)
  }
}
</script>

BBMCode

Vuejs Auto Focus

Automatically set focus into an input element when it’s inserted into the document.

<template>
  <input v-auto-focus type="email" placeholder="I'm auto-focused!">
</template>

<script>
Vue.directive('auto-focus', {
  inserted: el => el.focus()
})
</script>