Fetch and display HTML

Sometimes you just want to fetch some HTML from the server, display them right in your application, and call it done.

<template>
  <html-fetcher url="/your/static/content.html"/>
</template>

<script>
import axios from 'axios'

Vue.component('html-fetcher', {
  template: '<div>Loading…</div>',
  props: ['url'],
  mounted () {
    axios.get(this.url).then(({ data }) => this.$el.outerHTML = data)
  }
})
</script>

Phan An

Detect if user has scrolled to bottom

Detect if the user has scrolled to bottom of a container element and executed a function (for example, load more posts à la infinite scrolling).

<template>
  <div @scroll="onScroll"></div>
</template>

<script>
export default function () {
  methods: {
    onScroll ({ target: { scrollTop, clientHeight, scrollHeight }}) {
      if (scrollTop + clientHeight >= scrollHeight) {
        this.loadMorePosts()
      }
    }
  }
}
</script>

Phan An

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>

Phan An

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>

Phan An

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>