vue-timeago - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #typescript #go #android #linux #nodejs #java #cli #vue #pytorch #mcp #openai #open-source

vue-timeago

(★ 717)

A timeago component for Vue.

파일 탐색기

최종 버전 다운로드 (.zip)

- - nodejs.yml
- app.vue
- AutoUpdate.vue
- BasicUsage.vue
- CustomConverter.vue
- index.js
- style.css
- vue-readme-loader.js
- converter.js
- index.js
.editorconfig
.gitattributes
.gitignore
.prettierrc
bili.config.ts
CHANGELOG-OLD.md
LICENSE
package.json
poi.config.js
README.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/egoist/vue-timeago

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd vue-timeago

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

yarn add vue-timeago

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm i vue-timeago

이 명령어를 터미널에 그대로 입력해 실행하세요.

yarn example

이 명령어를 터미널에 그대로 입력해 실행하세요.

yarn build

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-timeago [![NPM version](https://img.shields.io/npm/v/vue-timeago.svg)](https://npmjs.com/package/vue-timeago) [![NPM downloads](https://img.shields.io/npm/dm/vue-timeago.svg)](https://npmjs.com/package/vue-timeago) [![Build Status](https://img.shields.io/circleci/project/github/egoist/vue-timeago/master.svg)](https://circleci.com/gh/egoist/vue-timeago)

> A timeago component Vue.js

## Install

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

CDN: [UNPKG](https://unpkg.com/vue-timeago/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-timeago/dist/) (available as `window.VueTimeago`)

## Usage

For usages on version 4, please check out [this branch](https://github.com/egoist/vue-timeago/tree/4).

```js
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:

```vue


<timeago :datetime="time"></timeago>

<timeago :datetime="time" :auto-update="60"></timeago>

<timeago :datetime="time" locale="zh-CN"></timeago>
```

## Plugin options

```js
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](https://github.com/egoist/vue-timeago/blob/master/src/converter.js) which uses [date-fns/distance_in_words_to_now](https://date-fns.org/v1.29.0/docs/distanceInWordsToNow) 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](https://date-fns.org/v1.29.0/docs/distanceInWordsToNow) 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

```js
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](https://github.com/egoist/vue-timeago/tree/3)?

The older version (700 bytes gzipped) is much smaller than the current version (2.8kB gzipped) that uses [`date-fns`](https://date-fns.org/).

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

```bash
# for dev
yarn example

# build in cjs es umd format
yarn build
```

## License

MIT © [EGOIST](https://github.com/egoist)