Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
vue-timeago
Advanced tools
A timeago component Vue.js
yarn add vue-timeago
# or
npm i vue-timeago
CDN: UNPKG | jsDelivr (available as window.VueTimeago
)
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>
Vue.use(VueTimeago, pluginOptions)
{ [localeName: string]: any }
An object of locales.
string
The default locale name.
(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.
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:
false
) distances less than a minute are more detailedtrue
) result specifies if the second date is earlier or later than the firstDate
string
number
true
The datetime to be formatted .
number
boolean
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
.
Just like the locale
option in the plugin options, but this could override the global one.
Just like the converter
option in the plugin options, but this could override the global one.
Just like the converterOptions
option in the plugin options, but this could override the global one.
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'
.
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.
# for dev
yarn example
# build in cjs es umd format
yarn build
MIT © EGOIST
FAQs
A timeago filter for Vue.
We found that vue-timeago demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.