[VueJS] Vue3 vue-timeago3 사용해보기

글 예시로 작성한 소스 및 프로젝트는 Vite, Vue3와 디자인 프레임워크 퀘이사를 사용하였습니다.

먼저 예제 화면

각 이미지 하단 캡션 글자가 vue-timeago3를 이용해 보여주었다.

사용방법은 매우 간단하다.

# 모듈 설치
npm i vue-timeago
# 한글 표시를 위한 모듈 설치
npm i date-fns

먼저 이렇게 2개를 설치.

 

main.js를 열어서 아래 소스를 추가한다.

import timeago from 'vue-timeago3';

app.use(timeago);

이러면 준비가 끝난다.

 

사용하고자 하는 컴포넌트를 열어서 코드를 작성

<script setup>
    import { ko } from 'date-fns/locale';
    const aDay1 = new Date(2022, 7, 12, 11, 44, 12);

    const aDay2 = '2022-12-24 21:08:00';
    const aDay3 = '2022-12-21 13:13:13';
    const aDay4 = '2022-12-17 11:11:11';
    const aDay5 = '2022-12-09 10:10:10';

    const aDay6 = '2022-11-11 11:11:11';

    const options1 = {
      includeSeconds: true,
      addSuffix: true,
      useStrict: true,
    };
</script>
<template>
    <div>
    	<timeago :datetime="aDay1" />
    </div>
</template>

이게 끝이다.

 

데이터의 날짜도 new Date()를 이용해 값을 셋팅해도 되고, 위 소스에서 aDay2~6처럼 string으로 그냥 타이핑해도 된다.

timeago 컴포넌트에 datetime 속성에 시간 값을 넘겨주면 알아서 현재시간과 비교하여 시간을 표시해 준다.

실제 사용한다면 DB에서 가져온 데이터에서 날짜 값을 넣어서 사용하면 된다.

 

일단 언어의 기본 값이 영어고 i18n 지원을 하진 않아 한글 적용은 안된다. (예제 화면 1, 2번째처럼 표시됨)

하지만 props로 locale 속성에 설치했던 date-fns/locale을 이용해 ko 값을 넘기면 변환이 된다.

<timeago :datetime="aDay3" :locale="ko" />

 

그리고 화면을 띄워 둔 상태에서 시간이 계속 지날 때마다 얼마나 되었는지 계속 업데이트하게 하고 싶다면 auto-update 옵션을 주면 된다.

<timeago
  :datetime="aDay2"
  :locale="ko"
  auto-update
/>

이렇게 하면 시간이 지날 때마다 받은 시간 값으로부터 얼마나 차이가 나는지 화면상에 계속 업데이트 시켜준다.

이 옵션을 주지 않으면 처음 그려진 값으로 계속 유지가 된다.

 

이 외에 converter-options 속성을 사용해서 표시하는데 옵션을 줄 수 있다.

<script setup>
...
const options1 = {
  includeSeconds: true,
  addSuffix: true,
  useStrict: true,
};
...
</script>

<template>

<timeago
  :datetime="aDay6"
  :locale="ko"
  :converter-options="options1"
/>

</template>

각 옵션 설명은 이렇다

• includeSeconds- boolean | undefined- 1분 미만의 거리가 더 자세히 표시됩니다.
• addSuffix- boolean | undefined- 결과는 현재가 전달된 날짜보다 이전인지 이후인지 지정합니다.
• useStrict- false | undefined- 사용이 필요한 경우

---

설명 사이트 : https://mrdeerly.github.io/vue-timeago3/

⏳ vue-timeago3

 

깃허브 주소 : https://github.com/mrdeerly/vue-timeago3

GitHub - MrDeerly/vue-timeago3: A tiny timeago component for Vue 3 using date-fns v2.28.

예제 화면 소스 : https://github.com/smw0807/vue3/blob/main/vite_quasar/src/views/vue-timeago.vue