Vue/Nuxt window on scroll event

ProgressBar.vue

<template>
  <div class="progress-bar">
    <div class="filled-bar" :style="{ transform: `translate3d(-${100-value}%, 0, 0)` }"></div>
  </div>
</template>

<script>
export default {
  props: ['value']
}
</script>

<style lang="postcss" scoped>
.progress-bar {
  position: fixed;
  top: 0;
  height: 7px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 100;
}

.filled-bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  @apply .bg-red;
}
</style>

scroll.vue

<template>
   <progress-bar :value="progress"/>
</template>

<script>
export default {
  components: {
    ProgressBar
  },

  data() {
    return {
      progress: 0
    }
  },

  mounted() {
    window.addEventListener('scroll', e => {
      requestAnimationFrame(() => {
        var scrollPos = window.scrollY
        var winHeight = window.innerHeight
        var docHeight = document.documentElement.scrollHeight
        var perc = (100 * scrollPos) / (docHeight - winHeight)

        this.progress = perc
      })
    })
  }
}
</script>

Excellent, thx !

this is great thanks mate <3

Doesn't work for me, it just won't execute it.

<script>
export default {
  mounted() {
    window.addEventListener('scroll', e => {
      var reveals = document.querySelectorAll(".reveal-content");
      for (var i = 0; i < reveals.length; i++) {
        var windowheight = window.innerHeight;
        var revealtop = reveals[i].getBoundingClientRect().top;
        var revealpoint = 300;
        if (revealtop < windowheight - revealpoint) {
          reveals[iev].classList.add("active");
        }
      }
    })
  }
}
</script>