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.
Cody Bontecou
· Jul 05 2020 · minute read A big thank you to Michal Burrows' post for providing me with the baseline of this source code.
# Steps to estimate the reading time
- You get the container of the content that you wish to read.
- Count all of the words
- Provide average words read per minute by your target audience.
- 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>