Create a simple time ago component in Vue using Moment.js

Ever needed a time ago component where you can parse a datetime string and get your date in the format like 10 days ago , a year ago etc.? Well you could create that easily in vue.js using moment.js.

Let's dive straight into it.

1. Install moment.js using npm npm install moment --save or with yarn yarn add moment
2. Create a new component. You can name it TimeAgo.vue
3. In your component

//TimeAgo.js <template> <span>{{convertedDateTime}}</span> </template> <script> import moment from 'moment' export default { name: "TimeAgo", props:{ dateTime:{ required:true } }, computed:{ convertedDateTime(){ return moment(this.dateTime).fromNow(); } } } </script> 

to use it in your project

<template> ... <time-ago :dateTime='new Date()'/> ... </template> <script> import TimeAgo from "@/components/TimeAgo"; export default { ... components: { TimeAgo } ... } </script> 

and thats it. This should work in vue 2 and vue 3 without any issues. if you need to extend it you can see the moment.js docs