The `vue-timeago` package provides a Vue.js component for displaying time in a human-readable "time ago" format, such as "5 minutes ago" or "2 days ago". The current stable version is 5.1.3, released in January 2021, indicating a slower release cadence, likely in a maintenance state for its existing feature set. It integrates with `date-fns` under the hood (since version 5.0.0) for precise date calculations and extensive locale support, which differentiates it from prior versions (like v3 and v4) that were much smaller but potentially less robust. It functions as a Vue plugin, exposing a `<timeago>` component that accepts a `datetime` prop and offers auto-updating capabilities, custom locales, and converter functions. While it leverages `date-fns` for its core logic, this dependency means a larger bundle size compared to its predecessors. It is primarily designed for Vue 2 applications, with dedicated alternatives available for Vue 3.
npm install vue-timeagoVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to install `vue-timeago` as a Vue plugin, register custom `date-fns` locales, and use the `<timeago>` component with various props, including auto-update and custom locales, for both past and future dates.
Review bundle size impact and, if critical, consider sticking to older `vue-timeago` versions (e.g., v4) or alternative lightweight solutions if `date-fns`'s features are not fully utilized. Adjust `converterOptions` if migrating from v4.
For Vue 3 projects, use `vue-timeago3` or `@vueuse/core`'s `useTimeAgo` composable, which are built specifically for Vue 3's composition API or new plugin system.
Replace `require('date-fns/locale/...')` with `import localeName from 'date-fns/locale/locale_name'` and configure your bundler (e.g., Webpack, Vite) to handle `date-fns` imports correctly for ESM environments. Most bundlers will handle `date-fns` CJS builds automatically, but explicit ESM imports are preferred.Ensure `import Vue from 'vue'` is present and Vue is initialized before `Vue.use()`. If using Vue 3, `vue-timeago` is incompatible; use `vue-timeago3` instead.
Ensure `date-fns` is installed (`npm install date-fns` or `yarn add date-fns`). Verify your bundler configuration for module resolution, and consider using ESM `import` statements for `date-fns` locales instead of `require()`.
Ensure the `datetime` prop is a valid JavaScript `Date` object, a string parseable by `Date.parse()` (e.g., ISO 8601 format), or a Unix timestamp (number of milliseconds since epoch).