TODOvue RelativeTime

TvRelativeTime is a minimal and customizable component to display human-readable relative dates.

Table of Contents

• Demo
• Installation
• Usage
• Props
• Development
• Changelog
• Contributing
• License

Installation

Install with npm or yarn

npm install @todovue/tv-relative-time

yarn add @todovue/tv-relative-time

Import

import TvRelativeTime from '@todovue/tv-relative-time'

You can also import it directly in the main.js file:

import { createApp } from "vue";
import App from "./App.vue";
import TvRelativeTime from '@todovue/tv-relative-time'

const app = createApp(App);
app.component("TvRelativeTime", TvRelativeTime);
app.mount("#app");

Usage

<template>
  <tv-relative-time
    :date="publishedDate"
    :compact="false"
    :show-full-date="true"
  />
</template>

<script setup>
import TvRelativeTime from "@todovue/t-relative-time";

const publishedDate = '2024-07-01T12:00:00Z';
</script>

Props

Prop	Type	Default	Description
date	String/Number	—	Required. Date or timestamp to format.
updateInterval	Number	60000	Interval in milliseconds for live updates.
compact	Boolean	false	If true, returns compact format (1d, 2w, 3mo, a).
showFullDate	Boolean	false	If true, appends the full date next to the relative time.

Development

Clone the repository and install dependencies:

git clone https://github.com/TODOvue/tv-relative-time.git
cd tv-relative-time
yarn install

---

License

MIT