ページスクロールしてフェードしながら要素を出したいときなどに使う

公式ドキュメントにも書いてあるので、そこが一番参考になる。

plugins/scroll.js (v-scroll=""を使えるようにする。)

import Vue from 'vue'
Vue.directive('scroll', {
   inserted: function (el, binding) {
       let f = function (evt) {
           if (binding.value(evt, el)) {
               window.removeEventListener('scroll', f)
           }
       }
       window.addEventListener('scroll', f)
   }
})

pages/index.vue

<template>
    <div>
        <p v-scroll="handleScroll">要素</p>
    </div>
</template>
export default {
  methods: {
    handleScroll: (evt, el) => {
      let top = el.getBoundingClientRect().top;
      if (window.scrollY > top + window.pageYOffset - 600) {
        el.classList.add("isView");
        return true;
      }
      return false;
    },
}

これでisViewクラスがv-scrollをつけている要素にスクロールしたタイミングで付与される。発火する位置の調整は随時適当に変えてもいい。