VueJS component to estimate the reading time of an article.

The estimated reading time has become prevalent in most major spaces that provides articles and reading materials. I decided to look into how to calculate it myself and found it's quite simple.

A big thank you to Michal Burrows' post for providing me with the baseline of this source code.

Steps to estimate the reading time #

1. You get the container of the content that you wish to read.
2. Count all of the words
3. Provide average words read per minute by your target audience.
4. Divide the number of words by the average words per minute.

Code Example #

When placed into a VueJS component, it looks like this:

<template>
  <span> {{ timeToRead }} minute read </span>
</template>

<script>
function readingTime(text) {
  const wpm = 225
  const words = text.trim().split(/\s+/).length
  return Math.ceil(words / wpm)
}

export default {
  data() {
    return {
      timeToRead: undefined,
    }
  },
  props: {
    text: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.timeToRead = readingTime(this.text)
  },
}
</script>