Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-timeago

Package Overview
Dependencies
Maintainers
3
Versions
41
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-timeago

A timeago filter for Vue.

  • 5.1.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
3
Created
Source

vue-timeago NPM version NPM downloads Build Status

A timeago component Vue.js

Install

yarn add vue-timeago
# or
npm i vue-timeago

CDN: UNPKG | jsDelivr (available as window.VueTimeago)

Usage

For usages on version 4, please check out this branch.

import VueTimeago from 'vue-timeago'

Vue.use(VueTimeago, {
  name: 'Timeago', // Component name, `Timeago` by default
  locale: 'en', // Default locale
  // We use `date-fns` under the hood
  // So you can use all locales from it
  locales: {
    'zh-CN': require('date-fns/locale/zh_cn'),
    ja: require('date-fns/locale/ja')
  }
})

Then in your lovely component:

<!-- simple usage -->
<!-- time is a dateString that can be parsed by Date.parse() -->
<timeago :datetime="time"></timeago>

<!-- Auto-update time every 60 seconds -->
<timeago :datetime="time" :auto-update="60"></timeago>

<!-- custom locale -->
<!-- use a different locale instead of the global config -->
<timeago :datetime="time" locale="zh-CN"></timeago>

Plugin options

Vue.use(VueTimeago, pluginOptions)

locales

  • Type: { [localeName: string]: any }

An object of locales.

locale

  • Type: string

The default locale name.

converter

  • Type: (date, locale, converterOptions) => string

A converter that formats regular dates in xxx ago or in xxx style.

Check out our default converter which uses date-fns/distance_in_words_to_now under the hood.

converterOptions

  • Type: Object

Provide an object which will be available as argument converterOptions in the converter we mentioned above.

Our default converter supports most options that date-fns/distance_in_words_to_now library supports, namely:

  • includeSeconds: (default: false) distances less than a minute are more detailed
  • addSuffix: (default: true) result specifies if the second date is earlier or later than the first

props

datetime

  • Type: Date string number
  • Required: true

The datetime to be formatted .

autoUpdate

  • Type: number boolean
  • Default: false

The period to update the component, in seconds.

You can omit this prop or set it to 0 or false to disable auto-update.

When true it will be equivalent to 60.

locale

Just like the locale option in the plugin options, but this could override the global one.

converter

Just like the converter option in the plugin options, but this could override the global one.

converterOptions

Just like the converterOptions option in the plugin options, but this could override the global one.

Recipes

Update Locale Globally

Vue.use(VueTimeago, {
  locale: 'en',
  locales: {
    'zh-CN': require('date-fns/locale/zh_cn')
  }
})

In your components you can use this.$timeago.locale to access the global locale, in this case it's en, the <timeago> component will get updated when you set it to another valid locale, e.g. this.$timeago.locale = 'zh-CN'.

What about the good old vue-timeago v3?

The older version (700 bytes gzipped) is much smaller than the current version (2.8kB gzipped) that uses date-fns.

But the current version gives more precise result (and hopefully handles more edge cases), and we don't need to maintain a big list of locale messages because date-fns already did it for us.

Development

# for dev
yarn example

# build in cjs es umd format
yarn build

License

MIT © EGOIST

Keywords

FAQs

Package last updated on 21 Jan 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc